diff --git a/webapp/.env.development b/webapp/.env.development
index bcbbe28..91ec4c6 100644
--- a/webapp/.env.development
+++ b/webapp/.env.development
@@ -3,8 +3,14 @@ ENV = 'development'
 # 默认BASE URL
 VUE_APP_BASE_API = ''
 
-# minio
-VUE_APP_MINIO_API = 'http://{HOST}/minio'
+# 数据管理
+VUE_APP_DATA_API = ''
+
+# 训练可视化
+VUE_APP_VISUAL_API = ''
+
+# 用户 minio 访问地址
+VUE_APP_MINIO_API = ''
 
 # atlas 服务，需要单独部署
 VUE_APP_ATLAS_HOST = ''
@@ -14,6 +20,7 @@ VUE_APP_ATLAS_HOST = ''
 VUE_APP_DCM_API = 'http://{HOST}/dcm4chee/dcm4chee-arc/aets/DCM4CHEE_ADMIN'
 
 # minIO 服务 IP
+# 部署文档参考：http://docs.dubhe.ai/docs/setup/deploy-minio
 VUE_APP_MINIO_ENDPOINT = ''
 
 # minIO 服务 端口
@@ -23,4 +30,7 @@ VUE_APP_MINIO_PORT = '9000'
 VUE_APP_MINIO_USESSL = 'false'
 
 # bucketName
-VUE_APP_MINIO_BUCKETNAME = 'dubhe-dev'
+VUE_APP_MINIO_BUCKETNAME = 'dubhe-cloud-dev'
+
+# 文档链接
+VUE_APP_DOCS_URL = http://docs.dubhe.ai/docs/
\ No newline at end of file
diff --git a/webapp/.env.mock b/webapp/.env.mock
index dadee4d..147443d 100644
--- a/webapp/.env.mock
+++ b/webapp/.env.mock
@@ -5,9 +5,16 @@ VUE_APP_MOCK=true
 
 # 默认BASE URL，需要自行配置
 VUE_APP_BASE_API = '/mock'
+VUE_APP_DATA_API = '/mock'
+
+# 训练可视化
+VUE_APP_VISUAL_API = ''
 
 # 用户 minio 访问地址
-VUE_APP_MINIO_API = 'http://{HOST}/minio'
+VUE_APP_MINIO_API = ''
+
+# atlas
+VUE_APP_ATLAS_HOST = ''
 
 # minIO 服务 IP
 VUE_APP_MINIO_ENDPOINT = ''
@@ -19,4 +26,7 @@ VUE_APP_MINIO_PORT = '9000'
 VUE_APP_MINIO_USESSL = 'false'
 
 # bucketName
-VUE_APP_MINIO_BUCKETNAME = 'dubhe-dev'
+VUE_APP_MINIO_BUCKETNAME = 'dubhe-cloud-dev'
+
+# 文档链接
+VUE_APP_DOCS_URL = http://docs.dubhe.ai/docs/
diff --git a/webapp/.env.production b/webapp/.env.production
index 8df70ee..a23c957 100644
--- a/webapp/.env.production
+++ b/webapp/.env.production
@@ -1,13 +1,19 @@
 ENV = 'production'
 
 # 默认BASE URL, 后端服务地址
-VUE_APP_BASE_API = 'http://127.0.0.1:8000'
+VUE_APP_BASE_API = ''
+
+# 数据管理
+VUE_APP_DATA_API = ''
+
+# 训练可视化
+VUE_APP_VISUAL_API = ''
 
 # 用户 minio 访问地址
-VUE_APP_MINIO_API = 'http://{HOST}/minio'
+VUE_APP_MINIO_API = ''
 
 # atlas 服务，需要单独部署
-VUE_APP_ATLAS_HOST = 'http://127.0.0.1:8000'
+VUE_APP_ATLAS_HOST = ''
 
 # 医疗影像 DCM4CHEE 服务访问地址
 # 部署文档参考：http://docs.dubhe.ai/docs/setup/deploy-algorithm
@@ -15,7 +21,7 @@ VUE_APP_DCM_API = 'http://{HOST}/dcm4chee/dcm4chee-arc/aets/DCM4CHEE_ADMIN'
 
 # minIO 服务 IP
 # 部署文档参考：http://docs.dubhe.ai/docs/setup/deploy-minio
-VUE_APP_MINIO_ENDPOINT = '{IP}'
+VUE_APP_MINIO_ENDPOINT = ''
 
 # minIO 服务 端口
 VUE_APP_MINIO_PORT = '9000'
@@ -25,3 +31,6 @@ VUE_APP_MINIO_USESSL = 'false'
 
 # bucketName
 VUE_APP_MINIO_BUCKETNAME = 'dubhe-prod'
+
+# 文档链接
+VUE_APP_DOCS_URL = http://docs.dubhe.ai/docs/
diff --git a/webapp/.env.test b/webapp/.env.test
index f4d80b0..668ac96 100644
--- a/webapp/.env.test
+++ b/webapp/.env.test
@@ -3,6 +3,12 @@ ENV = 'test'
 # 默认BASE URL
 VUE_APP_BASE_API = ''
 
+# 数据管理
+VUE_APP_DATA_API = ''
+
+# 训练可视化
+VUE_APP_VISUAL_API = ''
+
 # 用户 minio 访问地址
 VUE_APP_MINIO_API = ''
 
@@ -14,6 +20,7 @@ VUE_APP_ATLAS_HOST = ''
 VUE_APP_DCM_API = 'http://{HOST}/dcm4chee/dcm4chee-arc/aets/DCM4CHEE_ADMIN'
 
 # minIO 服务 IP
+# 部署文档参考：http://docs.dubhe.ai/docs/setup/deploy-minio
 VUE_APP_MINIO_ENDPOINT = ''
 
 # minIO 服务 端口
@@ -23,5 +30,7 @@ VUE_APP_MINIO_PORT = '9000'
 VUE_APP_MINIO_USESSL = 'false'
 
 # BucketName
-VUE_APP_MINIO_BUCKETNAME = 'dubhe-test'
+VUE_APP_MINIO_BUCKETNAME = 'dubhe-cloud-test'
 
+# 文档链接
+VUE_APP_DOCS_URL = http://docs.dubhe.ai/docs/
diff --git a/webapp/.eslintignore b/webapp/.eslintignore
index 5f8e217..8b78211 100644
--- a/webapp/.eslintignore
+++ b/webapp/.eslintignore
@@ -3,4 +3,6 @@ src/assets
 public
 dist
 src/components/Crud
-mock
\ No newline at end of file
+mock
+src/views/visual
+src/store/modules/Visual
\ No newline at end of file
diff --git a/webapp/.eslintrc.js b/webapp/.eslintrc.js
index cc4ae86..5045eef 100644
--- a/webapp/.eslintrc.js
+++ b/webapp/.eslintrc.js
@@ -19,53 +19,29 @@ module.exports = {
     }
   },
   rules: {
-    "comma-dangle": [2, "always-multiline"],
-    "no-var": "error",
-    "no-console": [2, { allow: ["warn", "error"] }],
-    "no-restricted-syntax": "off",
+    'prettier/prettier': [
+      'error',
+      {
+        printWidth: 100,
+        semi: true,
+        singleQuote: true,
+        trailingComma: 'es5',
+        endOfLine: 'auto',
+        arrowParens: 'always',
+      },
+    ],
+    'vue/require-default-prop': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'no-console': ['error', { allow: ['warn', 'error', 'info'] }],
+    'no-param-reassign': 'off',
+    'import/extensions': 'off',
+    'import/prefer-default-export': 'off',
+    "no-shadow": "off",
     "no-underscore-dangle": "off",
+    "no-unused-expressions": "off",
+    "no-restricted-syntax": "off",
     "guard-for-in": "off",
-    "object-shorthand": 2,
-    "consistent-return": "off",
+    "camelcase": "off",
     "no-multi-assign": "off",
-    "no-shadow": "off",
-    "no-restricted-globals": "off",
-    "no-restricted-properties": "off",
-    "no-prototype-builtins": "off",
-    "no-unused-vars": [
-      2,
-      { ignoreRestSiblings: true, argsIgnorePattern: "^h$" }
-    ],
-    "import/prefer-default-export": "off",
-    'import/extensions': ['error', 'always', {
-      'js': 'never',
-      'vue': 'never'
-    }],
-    "no-unused-expressions": "off",
-    "no-undef": 2,
-    camelcase: "off",
-    "no-extra-boolean-cast": "off",
-    "no-param-reassign":"off",
-    semi: ["error", "always"],
-    "vue/require-prop-types": "off",
-    "vue/require-default-prop": "off",
-    "vue/no-reserved-keys": "off",
-    "vue/attribute-hyphenation": "off",
-    "vue/comment-directive": "off",
-    "vue/prop-name-casing": "off",
-    "vue/max-attributes-per-line": [2, {
-      singleline: 20,
-      multiline: {
-        max: 1,
-        allowFirstLine: false
-      }}
-    ],
-    "vue/html-indent": ["error", 2, {
-      "attribute": 1,
-      "baseIndent": 1,
-      "closeBracket": 0,
-      "alignAttributesVertically": true,
-      "ignores": []
-    }]
   }
 };
diff --git a/webapp/mock/api/data/datasets/count.js b/webapp/mock/api/v1/data/datasets/count.js
similarity index 56%
rename from webapp/mock/api/data/datasets/count.js
rename to webapp/mock/api/v1/data/datasets/count.js
index 8483a4d..b3a3d55 100644
--- a/webapp/mock/api/data/datasets/count.js
+++ b/webapp/mock/api/v1/data/datasets/count.js
@@ -2,7 +2,7 @@ module.exports = {
   code: 200,
   msg: null,
   data: {
-    "finished": 10,
-    "unfinished": 0
+    "publicCount": 10,
+    "privateCount": 0
   }
 }
\ No newline at end of file
diff --git a/webapp/mock/api/v1/train/trainJobDelete.js b/webapp/mock/api/v1/train/trainJobDelete.js
new file mode 100644
index 0000000..d0d833d
--- /dev/null
+++ b/webapp/mock/api/v1/train/trainJobDelete.js
@@ -0,0 +1,8 @@
+module.exports = {
+  code: 200,
+  msg: null,
+  data: {
+    "trainId": 607,
+    "id": 1204
+  },
+}
diff --git a/webapp/mock/mock-map.js b/webapp/mock/mock-map.js
index 383afe6..4fbd11e 100644
--- a/webapp/mock/mock-map.js
+++ b/webapp/mock/mock-map.js
@@ -1,4 +1,5 @@
 // 定义 RESTful 接口和实际代码的映射
 module.exports = {
-  'GET::/api/data/datasets/(\\d+)/count': 'api/data/datasets/count',
+  'GET::/api/v1/data/datasets/(\\d+)/count': 'api/v1/data/datasets/count',
+  'DELETE::/api/v1/train/trainJob': 'api/v1/train/trainJobDelete',
 };
diff --git a/webapp/package.json b/webapp/package.json
index 5ff6c1e..6ef83f6 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -13,6 +13,8 @@
   "scripts": {
     "mock": "vue-cli-service serve --mode mock --open",
     "dev": "vue-cli-service serve --open",
+    "serve": "vue-cli-service serve --host 0.0.0.0",
+    "serve:test": "vue-cli-service serve --mode test --open",
     "build:prod": "vue-cli-service build",
     "build:test": "vue-cli-service build --mode test",
     "build:dev": "vue-cli-service build --mode development",
@@ -40,9 +42,10 @@
   "dependencies": {
     "@riophae/vue-treeselect": "0.1.0",
     "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
-    "@vue/composition-api": "^0.5.0",
+    "@vue/composition-api": "^1.0.0-rc.1",
     "@wulucxy/dwv": "0.28.1-beta.9",
     "add-dom-event-listener": "^1.1.0",
+    "assert": "^2.0.0",
     "axios": "0.18.1",
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
@@ -59,11 +62,11 @@
     "element-ui": "2.13.2",
     "file-saver": "^2.0.2",
     "filereader-stream": "^2.0.0",
+    "immutability-helper": "^3.1.1",
     "jquery": "^3.5.1",
     "jquery-contextmenu": "^2.9.1",
     "js-beautify": "^1.13.0",
     "js-cookie": "2.2.0",
-    "jschardet": "^2.2.1",
     "jsencrypt": "^3.0.0-rc.1",
     "json2csv": "^5.0.1",
     "lodash": "^4.17.15",
@@ -72,8 +75,10 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "p-map": "^4.0.0",
+    "papaparse": "^5.3.0",
     "path-to-regexp": "^6.2.0",
     "portal-vue": "^2.1.7",
+    "prism-themes": "^1.5.0",
     "prismjs": "^1.20.0",
     "promise.allsettled": "^1.0.2",
     "qs": "^6.9.1",
@@ -88,7 +93,10 @@
     "vue-prism-component": "^1.2.0",
     "vue-prism-editor": "^1.2.2",
     "vue-router": "^3.0.2",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "wavesurfer.js": "^4.6.0",
+    "web-highlighter": "^0.7.1",
+    "xlsx": "^0.16.9"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index b67cdaa..1d5fd8c 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div id="app">
diff --git a/webapp/src/api/algorithm/algorithm.js b/webapp/src/api/algorithm/algorithm.js
index 5f9ea71..532880f 100644
--- a/webapp/src/api/algorithm/algorithm.js
+++ b/webapp/src/api/algorithm/algorithm.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/v1/algorithm',
+    url: `/${API_MODULE_NAME.ALGORITHM}/algorithms`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/v1/algorithm',
+    url: `/${API_MODULE_NAME.ALGORITHM}/algorithms`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function edit(data) {
   return request({
-    url: 'api/v1/algorithm',
+    url: `/${API_MODULE_NAME.ALGORITHM}/algorithms`,
     method: 'put',
     data,
   });
@@ -42,7 +43,7 @@ export function edit(data) {
 
 export function del(ids) {
   return request({
-    url: 'api/v1/algorithm',
+    url: `/${API_MODULE_NAME.ALGORITHM}/algorithms`,
     method: 'delete',
     data: ids,
   });
@@ -50,7 +51,15 @@ export function del(ids) {
 
 export function myAlgorithmCount() {
   return request({
-    url: `api/v1/algorithm/myAlgorithmCount`,
+    url: `/${API_MODULE_NAME.ALGORITHM}/algorithms/myAlgorithmCount`,
+    method: 'get',
+  });
+}
+
+// 获取可推理算法列表
+export function getInferenceAlgorithm() {
+  return request({
+    url: `/${API_MODULE_NAME.ALGORITHM}/algorithms/getInferenceAlgorithm`,
     method: 'get',
   });
 }
diff --git a/webapp/src/api/algorithm/algorithmUsage.js b/webapp/src/api/algorithm/algorithmUsage.js
index 55a7736..ddab61a 100644
--- a/webapp/src/api/algorithm/algorithmUsage.js
+++ b/webapp/src/api/algorithm/algorithmUsage.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/v1/algorithmUsage',
+    url: `/${API_MODULE_NAME.ALGORITHM}/algorithmUsage`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/v1/algorithmUsage',
+    url: `/${API_MODULE_NAME.ALGORITHM}/algorithmUsage`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function del(ids) {
   return request({
-    url: 'api/v1/algorithmUsage',
+    url: `/${API_MODULE_NAME.ALGORITHM}/algorithmUsage`,
     method: 'delete',
     data: ids,
   });
diff --git a/webapp/src/api/atlas/index.js b/webapp/src/api/atlas/index.js
index cbd42a6..2f785b0 100644
--- a/webapp/src/api/atlas/index.js
+++ b/webapp/src/api/atlas/index.js
@@ -1,25 +1,26 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 /* eslint-disable no-unreachable */
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/v1/ptMeasure',
+    url: `/${API_MODULE_NAME.ATLAS}/ptMeasure`,
     method: 'get',
     params,
   });
@@ -27,7 +28,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/v1/ptMeasure',
+    url: `/${API_MODULE_NAME.ATLAS}/ptMeasure`,
     method: 'post',
     data,
   });
@@ -35,7 +36,7 @@ export function add(data) {
 
 export function edit(data) {
   return request({
-    url: 'api/v1/ptMeasure',
+    url: `/${API_MODULE_NAME.ATLAS}/ptMeasure`,
     method: 'put',
     data,
   });
@@ -43,7 +44,7 @@ export function edit(data) {
 
 export function del(ids) {
   return request({
-    url: 'api/v1/ptMeasure',
+    url: `/${API_MODULE_NAME.ATLAS}/ptMeasure`,
     method: 'delete',
     data: { ids },
   });
@@ -51,7 +52,7 @@ export function del(ids) {
 
 export function getGraphs(name) {
   return request({
-    url: 'api/v1/ptMeasure/byName',
+    url: `/${API_MODULE_NAME.ATLAS}/ptMeasure/byName`,
     method: 'get',
     params: { name },
   });
diff --git a/webapp/src/api/auth.js b/webapp/src/api/auth.js
index 56f9ad4..b41ff85 100644
--- a/webapp/src/api/auth.js
+++ b/webapp/src/api/auth.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function login(data) {
   return request({
-    url: '/auth/login',
+    url: `/${API_MODULE_NAME.ADMIN}/auth/login`,
     method: 'post',
     data,
   });
@@ -26,7 +27,7 @@ export function login(data) {
 
 export function registerUser(data) {
   return request({
-    url: 'auth/userRegister',
+    url: `/${API_MODULE_NAME.ADMIN}/auth/userRegister`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function registerUser(data) {
 
 export function resetPassword(data) {
   return request({
-    url: 'auth/resetPassword',
+    url: `/${API_MODULE_NAME.ADMIN}/auth/resetPassword`,
     method: 'post',
     data,
   });
@@ -42,7 +43,7 @@ export function resetPassword(data) {
 
 export function getCodeBySentEmail(data) {
   return request({
-    url: 'auth/getCodeBySentEmail',
+    url: `/${API_MODULE_NAME.ADMIN}/auth/getCodeBySentEmail`,
     method: 'post',
     data,
   });
@@ -50,28 +51,28 @@ export function getCodeBySentEmail(data) {
 
 export function getInfo() {
   return request({
-    url: 'auth/info',
+    url: `/${API_MODULE_NAME.ADMIN}/auth/info`,
     method: 'get',
   });
 }
 
 export function getCodeImg() {
   return request({
-    url: '/auth/code',
+    url: `/${API_MODULE_NAME.ADMIN}/auth/code`,
     method: 'get',
   });
 }
 
 export function getPublicKey() {
   return request({
-    url: '/auth/getPublicKey',
+    url: `/${API_MODULE_NAME.ADMIN}/auth/getPublicKey`,
     method: 'get',
   });
 }
 
 export function logout() {
   return request({
-    url: 'auth/logout',
+    url: `/${API_MODULE_NAME.ADMIN}/auth/logout`,
     method: 'delete',
   });
 }
@@ -79,6 +80,6 @@ export function logout() {
 // 获取minIO 秘钥
 export function getMinIOAuth() {
   return request({
-    url: 'api/data/datasets/minio/info',
+    url: `/${API_MODULE_NAME.DATA}/datasets/minio/info`,
   });
 }
diff --git a/webapp/src/api/cloudServing/batch.js b/webapp/src/api/cloudServing/batch.js
index 6529123..80113a0 100644
--- a/webapp/src/api/cloudServing/batch.js
+++ b/webapp/src/api/cloudServing/batch.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/batchServing',
+    url: `/${API_MODULE_NAME.BATCH_SERVING}/batchServices`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/batchServing',
+    url: `/${API_MODULE_NAME.BATCH_SERVING}/batchServices`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function edit(data) {
   return request({
-    url: 'api/batchServing',
+    url: `/${API_MODULE_NAME.BATCH_SERVING}/batchServices`,
     method: 'put',
     data,
   });
@@ -42,7 +43,7 @@ export function edit(data) {
 
 export function del(id) {
   return request({
-    url: `api/batchServing`,
+    url: `/${API_MODULE_NAME.BATCH_SERVING}/batchServices`,
     method: 'delete',
     data: { id },
   });
@@ -50,7 +51,7 @@ export function del(id) {
 
 export function detail(id) {
   return request({
-    url: `api/batchServing/detail`,
+    url: `/${API_MODULE_NAME.BATCH_SERVING}/batchServices/detail`,
     method: 'get',
     params: { id },
   });
@@ -58,7 +59,7 @@ export function detail(id) {
 
 export function start(id) {
   return request({
-    url: `api/batchServing/start`,
+    url: `/${API_MODULE_NAME.BATCH_SERVING}/batchServices/start`,
     method: 'post',
     data: { id },
   });
@@ -66,7 +67,7 @@ export function start(id) {
 
 export function stop(id) {
   return request({
-    url: `api/batchServing/stop`,
+    url: `/${API_MODULE_NAME.BATCH_SERVING}/batchServices/stop`,
     method: 'post',
     data: { id },
   });
@@ -74,14 +75,14 @@ export function stop(id) {
 
 export function getBatchServingPods(id) {
   return request({
-    url: `api/batchServing/pod/${id}`,
+    url: `/${API_MODULE_NAME.BATCH_SERVING}/batchServices/pod/${id}`,
     method: 'get',
   });
 }
 
 export function getServiceProgress(id) {
   return request({
-    url: `api/batchServing/queryById/${id}`,
+    url: `/${API_MODULE_NAME.BATCH_SERVING}/batchServices/queryById/${id}`,
     method: 'get',
   });
 }
diff --git a/webapp/src/api/cloudServing/index.js b/webapp/src/api/cloudServing/index.js
index 1267b68..7e55114 100644
--- a/webapp/src/api/cloudServing/index.js
+++ b/webapp/src/api/cloudServing/index.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/serving',
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/serving',
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function edit(data) {
   return request({
-    url: 'api/serving',
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services`,
     method: 'put',
     data,
   });
@@ -42,7 +43,7 @@ export function edit(data) {
 
 export function del(id) {
   return request({
-    url: `api/serving`,
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services`,
     method: 'delete',
     data: { id },
   });
@@ -50,7 +51,7 @@ export function del(id) {
 
 export function detail(id) {
   return request({
-    url: `api/serving/detail`,
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services/detail`,
     method: 'get',
     params: { id },
   });
@@ -58,7 +59,7 @@ export function detail(id) {
 
 export function start(id) {
   return request({
-    url: `api/serving/start`,
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services/start`,
     method: 'post',
     data: { id },
   });
@@ -66,7 +67,7 @@ export function start(id) {
 
 export function stop(id) {
   return request({
-    url: `api/serving/stop`,
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services/stop`,
     method: 'post',
     data: { id },
   });
@@ -74,7 +75,7 @@ export function stop(id) {
 
 export function getPredictParam(id) {
   return request({
-    url: `api/serving/predictParam`,
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services/predictParam`,
     method: 'get',
     params: { id },
   });
@@ -82,28 +83,28 @@ export function getPredictParam(id) {
 
 export function getMetrics(id) {
   return request({
-    url: `api/serving/metrics/${id}`,
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services/metrics/${id}`,
     method: 'get',
   });
 }
 
 export function getServingPods(configId) {
   return request({
-    url: `api/serving/servingConfig/pod/${configId}`,
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services/servingConfig/pod/${configId}`,
     method: 'get',
   });
 }
 
 export function getRollbackList(servingId) {
   return request({
-    url: `api/serving/rollback/${servingId}`,
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services/rollback/${servingId}`,
     method: 'get',
   });
 }
 
 export function predict(data, params) {
   return request({
-    url: `api/serving/predict`,
+    url: `/${API_MODULE_NAME.CLOUD_SERVING}/services/predict`,
     method: 'post',
     headers: { 'Content-Type': 'multipart/form-data' },
     params,
diff --git a/webapp/src/api/development/notebook.js b/webapp/src/api/development/notebook.js
index 8a62af2..8df2c7d 100644
--- a/webapp/src/api/development/notebook.js
+++ b/webapp/src/api/development/notebook.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/v1/notebook/notebooks',
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/v1/notebook/notebooks',
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function del(ids) {
   return request({
-    url: 'api/v1/notebook',
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks`,
     method: 'delete',
     data: ids,
   });
@@ -42,7 +43,7 @@ export function del(ids) {
 
 export function start(params) {
   return request({
-    url: 'api/v1/notebook/start',
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks/start`,
     method: 'put',
     params,
   });
@@ -50,7 +51,7 @@ export function start(params) {
 
 export function stop(params) {
   return request({
-    url: 'api/v1/notebook/stop',
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks/stop`,
     method: 'put',
     params,
   });
@@ -58,35 +59,35 @@ export function stop(params) {
 
 export function open(id) {
   return request({
-    url: `api/v1/notebook/${id}`,
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks/${id}`,
     method: 'get',
   });
 }
 
 export function getStatus() {
   return request({
-    url: `api/v1/notebook/status`,
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks/status`,
     method: 'get',
   });
 }
 
 export function getModels() {
   return request({
-    url: `api/v1/notebook/notebook-model`,
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks/notebook-model`,
     method: 'get',
   });
 }
 
 export function myNotebookCount() {
   return request({
-    url: `api/v1/notebook/run-number`,
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks/run-number`,
     method: 'get',
   });
 }
 
 export function createNotebook(source, data) {
   return request({
-    url: `api/v1/notebook/create/${source}`,
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks/create/${source}`,
     method: 'post',
     data,
   });
@@ -94,14 +95,14 @@ export function createNotebook(source, data) {
 
 export function getNotebookAddress(id) {
   return request({
-    url: `api/v1/notebook/${id}/get-address`,
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks/${id}/get-address`,
     method: 'get',
   });
 }
 
 export function detail(data) {
   return request({
-    url: 'api/v1/notebook/detail',
+    url: `/${API_MODULE_NAME.NOTEBOOK}/notebooks/detail`,
     method: 'post',
     data,
   });
diff --git a/webapp/src/api/model/model.js b/webapp/src/api/model/model.js
index 04771f5..85bc7aa 100644
--- a/webapp/src/api/model/model.js
+++ b/webapp/src/api/model/model.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/ptModelInfo',
+    url: `/${API_MODULE_NAME.MODEL}/ptModelInfo`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/ptModelInfo',
+    url: `/${API_MODULE_NAME.MODEL}/ptModelInfo`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function edit(data) {
   return request({
-    url: 'api/ptModelInfo',
+    url: `/${API_MODULE_NAME.MODEL}/ptModelInfo`,
     method: 'put',
     data,
   });
@@ -42,18 +43,68 @@ export function edit(data) {
 
 export function del(data) {
   return request({
-    url: 'api/ptModelInfo',
+    url: `/${API_MODULE_NAME.MODEL}/ptModelInfo`,
     method: 'delete',
     data,
   });
 }
 
-export function getModelByResource(modelResource) {
+export function getModelByResource(modelResource, packaged) {
   return request({
-    url: 'api/ptModelInfo/byResource',
+    url: `/${API_MODULE_NAME.MODEL}/ptModelInfo/byResource`,
+    method: 'get',
+    params: { modelResource, packaged },
+  });
+}
+
+export function packageAtlasModel(data) {
+  return request({
+    url: `/${API_MODULE_NAME.MODEL}/ptModelInfo/package`,
+    method: 'post',
+    data,
+  });
+}
+
+export function getServingModel(modelResource) {
+  return request({
+    url: `/${API_MODULE_NAME.MODEL}/ptModelInfo/servingModel`,
     method: 'get',
     params: { modelResource },
   });
 }
 
+export function addOptimizeModel(data) {
+  return request({
+    url: `/${API_MODULE_NAME.MODEL}/ptModelInfo/uploadModel`,
+    method: 'post',
+    data,
+  });
+}
+
+// 获取框架与模型格式之间的对应关系
+export function getModelTypeMap() {
+  return request({
+    url: `/${API_MODULE_NAME.MODEL}/ptModelType`,
+    method: 'get',
+  });
+}
+
+// 获取模型格式与模型文件后缀之间的对应关系
+export function getModelSuffix(params) {
+  return request({
+    url: `/${API_MODULE_NAME.MODEL}/ptModelSuffix`,
+    method: 'get',
+    params,
+  });
+}
+
+// 根据模型 ID 查询模型信息
+export function getModelById(id) {
+  return request({
+    url: `/${API_MODULE_NAME.MODEL}/ptModelInfo/byModelId`,
+    method: 'get',
+    params: { id },
+  });
+}
+
 export default { list, add, edit, del };
diff --git a/webapp/src/api/model/modelVersion.js b/webapp/src/api/model/modelVersion.js
index 0b25754..8151d44 100644
--- a/webapp/src/api/model/modelVersion.js
+++ b/webapp/src/api/model/modelVersion.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/ptModelBranch',
+    url: `/${API_MODULE_NAME.MODEL}/ptModelBranch`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/ptModelBranch',
+    url: `/${API_MODULE_NAME.MODEL}/ptModelBranch`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function edit(data) {
   return request({
-    url: 'api/ptModelBranch',
+    url: `/${API_MODULE_NAME.MODEL}/ptModelBranch`,
     method: 'put',
     data,
   });
@@ -42,10 +43,27 @@ export function edit(data) {
 
 export function del(data) {
   return request({
-    url: 'api/ptModelBranch',
+    url: `/${API_MODULE_NAME.MODEL}/ptModelBranch`,
     method: 'delete',
     data,
   });
 }
 
+export function convertPreset(data) {
+  return request({
+    url: `${API_MODULE_NAME.MODEL}/ptModelBranch/convertPreset`,
+    method: 'post',
+    data,
+  });
+}
+
+// 模型格式转换，只支持转至 ONNX
+export function formatConvert(id) {
+  return request({
+    url: `${API_MODULE_NAME.MODEL}/ptModelBranch/convertOnnx`,
+    method: 'post',
+    data: { id },
+  });
+}
+
 export default { list, add, edit, del };
diff --git a/webapp/src/api/modelOptimize/optimize.js b/webapp/src/api/modelOptimize/optimize.js
index 42d3242..0f9685b 100644
--- a/webapp/src/api/modelOptimize/optimize.js
+++ b/webapp/src/api/modelOptimize/optimize.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/modelOpt/task',
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/task`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/modelOpt/task',
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/task`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function edit(data) {
   return request({
-    url: 'api/modelOpt/task',
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/task`,
     method: 'put',
     data,
   });
@@ -42,7 +43,7 @@ export function edit(data) {
 
 export function del(data) {
   return request({
-    url: `api/modelOpt/task`,
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/task`,
     method: 'delete',
     data,
   });
@@ -50,7 +51,7 @@ export function del(data) {
 
 export function getOptimizeAlgorithms(params) {
   return request({
-    url: 'api/modelOpt/task/getAlgorithm',
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/task/getAlgorithm`,
     method: 'get',
     params,
   });
@@ -58,7 +59,7 @@ export function getOptimizeAlgorithms(params) {
 
 export function getBuiltInModel(params) {
   return request({
-    url: 'api/modelOpt/task/getBuiltInModel',
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/task/getBuiltInModel`,
     method: 'get',
     params,
   });
@@ -66,7 +67,7 @@ export function getBuiltInModel(params) {
 
 export function getOptimizeDatasets(params) {
   return request({
-    url: 'api/modelOpt/task/getDataset',
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/task/getDataset`,
     method: 'get',
     params,
   });
@@ -74,7 +75,7 @@ export function getOptimizeDatasets(params) {
 
 export function getCustomizeDatasets(params) {
   return request({
-    url: 'api/modelOpt/task/MyDataset',
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/task/myDataset`,
     method: 'get',
     params,
   });
@@ -82,15 +83,7 @@ export function getCustomizeDatasets(params) {
 
 export function addCustomizeDatasets(data) {
   return request({
-    url: 'api/modelOpt/task/MyDataset',
-    method: 'post',
-    data,
-  });
-}
-
-export function addCustomizeModel(data) {
-  return request({
-    url: 'api/ptModelInfo/uploadModel',
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/task/myDataset`,
     method: 'post',
     data,
   });
@@ -98,7 +91,7 @@ export function addCustomizeModel(data) {
 
 export function submit(data) {
   return request({
-    url: `api/modelOpt/task/submit`,
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/task/submit`,
     method: 'post',
     data,
   });
diff --git a/webapp/src/api/modelOptimize/record.js b/webapp/src/api/modelOptimize/record.js
index fae4a12..6fa7f78 100644
--- a/webapp/src/api/modelOptimize/record.js
+++ b/webapp/src/api/modelOptimize/record.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/modelOpt/taskInstance',
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/taskInstance`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function del(data) {
   return request({
-    url: `api/modelOpt/taskInstance`,
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/taskInstance`,
     method: 'delete',
     data,
   });
@@ -34,7 +35,7 @@ export function del(data) {
 
 export function getInstance(params) {
   return request({
-    url: `api/modelOpt/taskInstance/detail`,
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/taskInstance/detail`,
     method: 'get',
     params,
   });
@@ -42,7 +43,7 @@ export function getInstance(params) {
 
 export function cancel(data) {
   return request({
-    url: `api/modelOpt/taskInstance/cancel`,
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/taskInstance/cancel`,
     method: 'put',
     data,
   });
@@ -50,7 +51,7 @@ export function cancel(data) {
 
 export function resubmit(data) {
   return request({
-    url: `api/modelOpt/taskInstance/resubmit`,
+    url: `/${API_MODULE_NAME.MODEL_OPTIMIZE}/taskInstance/resubmit`,
     method: 'post',
     data,
   });
diff --git a/webapp/src/api/preparation/annotation.js b/webapp/src/api/preparation/annotation.js
index 0a73a4a..9547979 100644
--- a/webapp/src/api/preparation/annotation.js
+++ b/webapp/src/api/preparation/annotation.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function batchFinishAnnotation(data, datasetId) {
   return request({
-    url: `api/data/datasets/files/${datasetId}/annotations`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/files/${datasetId}/annotations`,
     method: 'post',
     data,
   });
@@ -27,7 +28,7 @@ export function batchFinishAnnotation(data, datasetId) {
 export function delAnnotation(id) {
   const delData = { datasetId: id };
   return request({
-    url: 'api/data/datasets/files/annotations',
+    url: `/${API_MODULE_NAME.DATA}/datasets/files/annotations`,
     method: 'delete',
     data: delData,
   });
@@ -35,7 +36,7 @@ export function delAnnotation(id) {
 
 export function track(id) {
   return request({
-    url: `api/data/datasets/files/annotations/auto/track/${id}`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/files/annotations/auto/track/${id}`,
     method: 'get',
   });
 }
@@ -43,7 +44,7 @@ export function track(id) {
 export function autoAnnotate(ids) {
   const data = { datasetIds: ids };
   return request({
-    url: 'api/data/datasets/files/annotations/auto',
+    url: `/${API_MODULE_NAME.DATA}/datasets/files/annotations/auto`,
     method: 'post',
     data,
   });
@@ -51,7 +52,7 @@ export function autoAnnotate(ids) {
 
 export function annotateStatus(id) {
   return request({
-    url: `api/data/datasets/${id}`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${id}`,
     method: 'get',
   });
 }
@@ -59,7 +60,7 @@ export function annotateStatus(id) {
 // 发布版本
 export function publish(data = {}) {
   return request({
-    url: 'api/data/datasets/versions',
+    url: `/${API_MODULE_NAME.DATA}/datasets/versions`,
     method: 'post',
     data,
   });
diff --git a/webapp/src/api/preparation/datafile.js b/webapp/src/api/preparation/datafile.js
index 9af5703..8b0b304 100644
--- a/webapp/src/api/preparation/datafile.js
+++ b/webapp/src/api/preparation/datafile.js
@@ -1,26 +1,27 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
-  const {datasetId} = params;
+  const { datasetId } = params;
   delete params.datasetId;
   return request({
-    url: `api/data/datasets/${datasetId}/files`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/files`,
     method: 'get',
     params,
   });
@@ -31,7 +32,7 @@ export function del(params) {
   delete params.datasetIds;
   params.datasetIds = [datasetId];
   return request({
-    url: 'api/data/datasets/files',
+    url: `/${API_MODULE_NAME.DATA}/datasets/files`,
     method: 'delete',
     data: params,
   });
@@ -39,7 +40,7 @@ export function del(params) {
 
 export function submit(id, files) {
   return request({
-    url: `api/data/datasets/${id}/files`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${id}/files`,
     method: 'post',
     data: { files },
   });
@@ -47,10 +48,36 @@ export function submit(id, files) {
 
 export function submitVideo(id, data) {
   return request({
-    url: `api/data/datasets/${id}/video`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${id}/video`,
     method: 'post',
     data,
   });
 }
 
+export function tableImport(data) {
+  return request({
+    url: `/${API_MODULE_NAME.DATA}/datasets/tableImport`,
+    method: 'post',
+    data,
+  });
+}
+
+export function getAudioDetail(params) {
+  const { datasetId } = params;
+  return request({
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/files/audio`,
+    method: 'get',
+    params,
+  });
+}
+
+export function getCustomFileList(params) {
+  const { datasetId } = params;
+  return request({
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/files/filePage`,
+    method: 'post',
+    data: { ...params },
+  });
+}
+
 export default { list, del };
diff --git a/webapp/src/api/preparation/datalabel.js b/webapp/src/api/preparation/datalabel.js
index 4e95849..b73394d 100644
--- a/webapp/src/api/preparation/datalabel.js
+++ b/webapp/src/api/preparation/datalabel.js
@@ -1,39 +1,41 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function getLabels(id) {
   return request({
-    url: `api/data/datasets/${id}/labels`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${id}/labels`,
     method: 'get',
   });
 }
 
 export function createLabel(id, label) {
   return request({
-    url: `api/data/datasets/${id}/labels`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${id}/labels`,
     method: 'post',
     data: label,
   });
 }
 
-export function editLabel(id, label) {
+export function editLabel(labelId, label) {
+  label.labelId = labelId;
   return request({
-    url: `api/data/datasets/labels/${id}`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/labels`,
     method: 'put',
     data: label,
   });
@@ -41,8 +43,15 @@ export function editLabel(id, label) {
 
 export function getAutoLabels(labelGroupType) {
   return request({
-    url: `api/data/datasets/labels/auto/${labelGroupType}`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/labels/auto/${labelGroupType}`,
     method: 'get',
   });
 }
 
+export function deleteLabel(datasetId, labelId) {
+  return request({
+    url: `/${API_MODULE_NAME.DATA}/datasets/labels`,
+    method: 'delete',
+    data: { datasetId, labelId },
+  });
+}
diff --git a/webapp/src/api/preparation/dataset.js b/webapp/src/api/preparation/dataset.js
index eedd085..2d19901 100644
--- a/webapp/src/api/preparation/dataset.js
+++ b/webapp/src/api/preparation/dataset.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: '/api/data/datasets',
+    url: `/${API_MODULE_NAME.DATA}/datasets`,
     method: 'get',
     params,
   });
@@ -27,7 +28,7 @@ export function list(params) {
 // 数据集详情
 export function detail(id) {
   return request({
-    url: `/api/data/datasets/${id}`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${id}`,
     method: 'get',
   });
 }
@@ -35,7 +36,7 @@ export function detail(id) {
 // 数据集状态（导入数据集轮询使用）
 export function queryDatasetStatus(ids) {
   return request({
-    url: `/api/data/datasets/status`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/status`,
     method: 'get',
     params: { datasetIds: ids },
   });
@@ -43,7 +44,7 @@ export function queryDatasetStatus(ids) {
 
 export function add(data) {
   return request({
-    url: 'api/data/datasets',
+    url: `/${API_MODULE_NAME.DATA}/datasets`,
     method: 'post',
     data,
   });
@@ -52,7 +53,7 @@ export function add(data) {
 export function del(ids) {
   const delData = { ids };
   return request({
-    url: 'api/data/datasets',
+    url: `/${API_MODULE_NAME.DATA}/datasets`,
     method: 'delete',
     data: delData,
   });
@@ -60,7 +61,7 @@ export function del(ids) {
 
 export function editDataset(data) {
   return request({
-    url: `api/data/datasets/${data.id}`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${data.id}`,
     method: 'put',
     data,
   });
@@ -68,15 +69,33 @@ export function editDataset(data) {
 
 export function topDataset(data) {
   return request({
-    url: `api/data/datasets/${data.id}/top`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${data.id}/top`,
     method: 'get',
   });
 }
 
+// 用普通数据集生成预置数据集
+export function convertPreset(data) {
+  return request({
+    url: `/${API_MODULE_NAME.DATA}/datasets/convertPreset`,
+    method: 'post',
+    data,
+  });
+}
+
+// 查询数据集是否已转预置
+export function getConvertInfo(id) {
+  return request({
+    url: `/${API_MODULE_NAME.DATA}/datasets/getConvertInfoByDatasetId`,
+    method: 'get',
+    params: { datasetId: id },
+  });
+}
+
 // 导入自定义数据集
 export function addCustomDataset(data) {
   return request({
-    url: `api/data/datasets/custom`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/custom`,
     method: 'post',
     data,
   });
@@ -85,7 +104,16 @@ export function addCustomDataset(data) {
 // 切换版本
 export function toggleVersion({ datasetId, versionName }) {
   return request({
-    url: `api/data/datasets/versions/${datasetId}`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/versions/${datasetId}`,
+    method: 'put',
+    params: { versionName },
+  });
+}
+
+// 切换OfRecord
+export function shiftOfRecord({ datasetId, versionName }) {
+  return request({
+    url: `/${API_MODULE_NAME.DATA}/datasets/versions/${datasetId}/ofRecord`,
     method: 'put',
     params: { versionName },
   });
@@ -94,7 +122,7 @@ export function toggleVersion({ datasetId, versionName }) {
 // 删除版本
 export function deleteVersion({ datasetId, versionName }) {
   return request({
-    url: `api/data/datasets/versions`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/versions`,
     method: 'delete',
     data: { datasetId, versionName },
   });
@@ -102,7 +130,7 @@ export function deleteVersion({ datasetId, versionName }) {
 
 export function getDatasetVersions(datasetId) {
   return request({
-    url: `/api/data/datasets/versions/${datasetId}/list`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/versions/${datasetId}/list`,
     method: 'get',
   });
 }
@@ -110,14 +138,14 @@ export function getDatasetVersions(datasetId) {
 // 查询下一个发布版本号
 export function queryNextVersion(datasetId) {
   return request({
-    url: `/api/data/datasets/versions/${datasetId}/nextVersionName`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/versions/${datasetId}/nextVersionName`,
   });
-};
+}
 
 // 目标检测文件列表
 export function detectFileList(datasetId, params) {
   return request({
-    url: `api/data/datasets/${datasetId}/files/detection`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/files/detection`,
     method: 'get',
     params,
   });
@@ -125,7 +153,7 @@ export function detectFileList(datasetId, params) {
 
 export function getPublishedDatasets(params) {
   return request({
-    url: '/api/data/datasets/versions/filter',
+    url: `/${API_MODULE_NAME.DATA}/datasets/versions/filter`,
     method: 'get',
     params,
   });
@@ -134,7 +162,7 @@ export function getPublishedDatasets(params) {
 // 查询文件偏移值
 export function queryFileOffset(datasetId, fileId, query = {}) {
   return request({
-    url: `api/data/datasets/${datasetId}/files/${fileId}/offset`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/files/${fileId}/offset`,
     params: query,
   });
 }
@@ -142,16 +170,16 @@ export function queryFileOffset(datasetId, fileId, query = {}) {
 // 查询数据集标签
 export function queryLabels(datasetId, params) {
   return request({
-    url: `api/data/datasets/${datasetId}/labels`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/labels`,
     method: 'get',
     params,
   });
 }
 
 // 创建数据集标签
-export function createLabel (datasetId, data) {
+export function createLabel(datasetId, data) {
   return request({
-    url: `api/data/datasets/${datasetId}/labels`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/labels`,
     method: 'post',
     data,
   });
@@ -160,7 +188,7 @@ export function createLabel (datasetId, data) {
 // 查询预置标签
 export function queryPresetLabels() {
   return request({
-    url: `api/data/datasets/presetLabels`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/presetLabels`,
     method: 'get',
   });
 }
@@ -168,8 +196,7 @@ export function queryPresetLabels() {
 // 查询数据增强字典
 export function queryDataEnhanceList() {
   return request({
-    baseURL: process.env.VUE_APP_BASE_API,
-    url: `api/v1/user/dict/dataset_enhance`,
+    url: `/${API_MODULE_NAME.ADMIN}/user/dict/dataset_enhance`,
     method: 'get',
   });
 }
@@ -177,7 +204,7 @@ export function queryDataEnhanceList() {
 // 数据增强
 export function postDataEnhance(datasetId, types = []) {
   return request({
-    url: `api/data/datasets/enhance`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/enhance`,
     data: {
       datasetId,
       types,
@@ -189,28 +216,37 @@ export function postDataEnhance(datasetId, types = []) {
 // 指定原始文件，获取增强文件列表
 export function getEnhanceFileList(datasetId, fileId) {
   return request({
-    url: `api/data/datasets/${datasetId}/${fileId}/enhanceFileList`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/${fileId}/enhanceFileList`,
   });
 }
 
 // 根据数据集版本，获取原始文件数量
 export function getOriginFileCount(datasetId) {
   return request({
-    url: `api/data/datasets/versions/${datasetId}/originFileCount`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/versions/${datasetId}/originFileCount`,
   });
 }
 
 // 预置数据集和我的数据集的数量查询
 export function queryDatasetsCount() {
   return request({
-    url: `/api/data/datasets/count`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/count`,
   });
 }
 
 // 查询数据集状态
 export function queryDatasetsProgress(params) {
   return request({
-    url: `/api/data/datasets/progress`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/progress`,
+    method: 'get',
+    params,
+  });
+}
+
+// 查询数据集该搜索条件下的文件数量
+export function count(datasetId, params) {
+  return request({
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/count`,
     method: 'get',
     params,
   });
diff --git a/webapp/src/api/preparation/labelGroup.js b/webapp/src/api/preparation/labelGroup.js
index 1da5cfd..dda0667 100644
--- a/webapp/src/api/preparation/labelGroup.js
+++ b/webapp/src/api/preparation/labelGroup.js
@@ -1,52 +1,62 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 // 创建标签组
 export function add(data) {
   return request({
-    url: `/api/data/labelGroup`,
+    url: `/${API_MODULE_NAME.DATA}/labelGroup`,
     method: 'post',
     data,
   });
 }
-  
+
 // 编辑标签组
 export function edit(data) {
   return request({
-    url: `/api/data/labelGroup/${data.id}`,
+    url: `/${API_MODULE_NAME.DATA}/labelGroup/${data.id}`,
     method: 'put',
     data,
   });
 }
-  
+
 // 删除标签组
 export function del(ids) {
   return request({
-    url: `/api/data/labelGroup`,
+    url: `/${API_MODULE_NAME.DATA}/labelGroup`,
     method: 'delete',
-    data: {ids},
+    data: { ids },
   });
 }
 
 // 复制标签组
 export function copy(data) {
   return request({
-    url: `/api/data/labelGroup/copy`,
+    url: `/${API_MODULE_NAME.DATA}/labelGroup/copy`,
+    method: 'post',
+    data,
+  });
+}
+
+// 将普通标签组转为预置标签组
+export function convertPreset(data) {
+  return request({
+    url: `/${API_MODULE_NAME.DATA}/labelGroup/convertPreset`,
     method: 'post',
     data,
   });
@@ -55,7 +65,7 @@ export function copy(data) {
 // 标签组列表分页查询
 export function list(params) {
   return request({
-    url: `/api/data/labelGroup/query`,
+    url: `/${API_MODULE_NAME.DATA}/labelGroup/query`,
     method: 'get',
     params,
   });
@@ -64,7 +74,7 @@ export function list(params) {
 // 标签组列表的简况查询 用于详情页选择标签组列举
 export function getLabelGroupList(params) {
   return request({
-    url: `/api/data/labelGroup/getList`,
+    url: `/${API_MODULE_NAME.DATA}/labelGroup/getList`,
     method: 'get',
     params,
   });
@@ -73,13 +83,13 @@ export function getLabelGroupList(params) {
 // 获取标签组详情
 export function getLabelGroupDetail(id) {
   return request({
-    url: `/api/data/labelGroup/${id}`,
+    url: `/${API_MODULE_NAME.DATA}/labelGroup/${id}`,
     method: 'get',
   });
 }
 
 export function importLabelGroup(form) {
-  return request.post(`api/data/labelGroup/import`, form, {
+  return request.post(`/${API_MODULE_NAME.DATA}/labelGroup/import`, form, {
     headers: {
       'Content-Type': 'multipart/form-data',
     },
@@ -87,4 +97,3 @@ export function importLabelGroup(form) {
 }
 
 export default { list, add, del, edit };
-
diff --git a/webapp/src/api/preparation/medical.js b/webapp/src/api/preparation/medical.js
index d1d4282..c952c50 100644
--- a/webapp/src/api/preparation/medical.js
+++ b/webapp/src/api/preparation/medical.js
@@ -1,25 +1,26 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 // 获取数据集对应的 studyInstanceUID 和 seriesInstanceUID
 export function getCaseInfo(datasetId) {
   return request({
-    url: `api/data/datasets/medical/detail/${datasetId}`,
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/detail/${datasetId}`,
     method: 'get',
   });
 }
@@ -27,7 +28,7 @@ export function getCaseInfo(datasetId) {
 // 获取自动标注详情
 export const queryAutoResult = (datasetId) => {
   return request({
-    url: `api/data/datasets/medical/getAuto/${datasetId}`,
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/getAuto/${datasetId}`,
     method: 'get',
   });
 };
@@ -35,14 +36,14 @@ export const queryAutoResult = (datasetId) => {
 // 获取手动标注详情
 export const queryManualResult = (datasetId) => {
   return request({
-    url: `api/data/datasets/medical/getFinished/${datasetId}`,
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/getFinished/${datasetId}`,
     method: 'get',
   });
 };
 
 export function list(params) {
   return request({
-    url: '/api/data/datasets/medical',
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical`,
     method: 'get',
     params,
   });
@@ -51,7 +52,7 @@ export function list(params) {
 // 数据集详情
 export function detail(id) {
   return request({
-    url: `/api/data/datasets/medical/${id}`,
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/${id}`,
     method: 'get',
   });
 }
@@ -59,7 +60,7 @@ export function detail(id) {
 // 创建数据集
 export function add(data) {
   return request({
-    url: 'api/data/datasets/medical',
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical`,
     method: 'post',
     data,
   });
@@ -68,7 +69,7 @@ export function add(data) {
 // 保存标注
 export function save(data) {
   return request({
-    url: '/api/data/datasets/medical/annotation/save',
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/annotation/save`,
     method: 'post',
     data,
   });
@@ -77,7 +78,7 @@ export function save(data) {
 // 上传文件
 export function upload(datasetId, params) {
   return request({
-    url: '/api/data/datasets/medical/files',
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/files`,
     method: 'post',
     data: {
       id: datasetId,
@@ -89,7 +90,7 @@ export function upload(datasetId, params) {
 export function del(ids) {
   const delData = { ids };
   return request({
-    url: 'api/data/datasets/medical',
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical`,
     method: 'delete',
     data: delData,
   });
@@ -97,7 +98,7 @@ export function del(ids) {
 
 export function editDataset(data) {
   return request({
-    url: `api/data/datasets/medical/${data.medicalId}`,
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/${data.medicalId}`,
     method: 'put',
     data,
   });
@@ -106,7 +107,7 @@ export function editDataset(data) {
 // 导入自定义数据集
 export function addCustomDataset(data) {
   return request({
-    url: `api/data/datasets/medical/custom`,
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/custom`,
     method: 'post',
     data,
   });
@@ -115,7 +116,7 @@ export function addCustomDataset(data) {
 export function autoAnnotate(id) {
   const data = { medicalId: id };
   return request({
-    url: 'api/data/datasets/medical/annotation/auto',
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/annotation/auto`,
     method: 'post',
     data,
   });
@@ -124,7 +125,7 @@ export function autoAnnotate(id) {
 // 查询数据集状态
 export function queryDatasetsProgress(params) {
   return request({
-    url: `/api/data/datasets/medical/annotation/schedule`,
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/annotation/schedule`,
     method: 'get',
     params,
   });
@@ -133,7 +134,7 @@ export function queryDatasetsProgress(params) {
 // 保存病灶信息
 export function saveLesions(medicalId, data) {
   return request({
-    url: `/api/data/datasets/medical/lesion/${medicalId}`,
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/lesion/${medicalId}`,
     method: 'post',
     data,
   });
@@ -142,7 +143,7 @@ export function saveLesions(medicalId, data) {
 // 查询病灶信息
 export function queryLesions(medicalId, params) {
   return request({
-    url: `/api/data/datasets/medical/lesion/${medicalId}`,
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/lesion/${medicalId}`,
     method: 'get',
     params,
   });
@@ -151,7 +152,7 @@ export function queryLesions(medicalId, params) {
 // 删除病灶信息
 export function deleteLesion(id) {
   return request({
-    url: `/api/data/datasets/medical/lesion`,
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/lesion`,
     method: 'delete',
     data: { id },
   });
@@ -160,11 +161,10 @@ export function deleteLesion(id) {
 // 修改病灶信息
 export function updateLesion(id) {
   return request({
-    url: `/api/data/datasets/medical/lesion`,
+    url: `/${API_MODULE_NAME.DCM}/datasets/medical/lesion`,
     method: 'put',
     data: { id },
   });
 }
 
 export default { list, add, del };
-
diff --git a/webapp/src/api/preparation/textData.js b/webapp/src/api/preparation/textData.js
index c32ee2c..5c2a7bb 100644
--- a/webapp/src/api/preparation/textData.js
+++ b/webapp/src/api/preparation/textData.js
@@ -15,26 +15,21 @@
  */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   const { datasetId } = params;
   return request({
-    url: `api/data/datasets/${datasetId}/files/txt`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/files/txt`,
     method: 'get',
     params,
   });
 }
 
-export function count(datasetId) {
-  return  request({
-    url: `/api/data/datasets/${datasetId}/count`,
-  });
-}
-
-// 获取分页信息
+// 获取分页信息 deprecated
 export function queryFiles(datasetId, params) {
-  return  request({
-    url: `/api/data/datasets/${datasetId}/files/txt`,
+  return request({
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/files/txt`,
     params,
   });
 }
@@ -42,7 +37,7 @@ export function queryFiles(datasetId, params) {
 // 删除文件
 export function deleteFile(datasetId, fileId) {
   return request({
-    url: `/api/data/datasets/files`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/files`,
     method: 'delete',
     data: {
       datasetIds: [Number(datasetId)],
@@ -52,12 +47,21 @@ export function deleteFile(datasetId, fileId) {
 }
 
 // 保存
-export function save(datasetId, fileId, data){
+export function save(datasetId, fileId, data) {
   return request({
-    url: `/api/data/datasets/files/${datasetId}/${fileId}/annotations/finish`,
+    url: `/${API_MODULE_NAME.DATA}/datasets/files/${datasetId}/${fileId}/annotations/finish`,
     method: 'post',
     data,
   });
 }
 
-export default { list };
\ No newline at end of file
+export function search(params) {
+  const { datasetId } = params;
+  return request({
+    url: `/${API_MODULE_NAME.DATA}/datasets/${datasetId}/files/content`,
+    method: 'get',
+    params,
+  });
+}
+
+export default { list };
diff --git a/webapp/src/api/system/authCode.js b/webapp/src/api/system/authCode.js
new file mode 100644
index 0000000..2627a50
--- /dev/null
+++ b/webapp/src/api/system/authCode.js
@@ -0,0 +1,58 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
+
+export function list(params) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/authCode`,
+    method: 'get',
+    params,
+  });
+}
+
+export function add(data) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/authCode`,
+    method: 'post',
+    data,
+  });
+}
+
+export function del(ids) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/authCode`,
+    method: 'delete',
+    data: { ids },
+  });
+}
+
+export function edit(data) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/authCode`,
+    method: 'put',
+    data,
+  });
+}
+
+// 不分页的列表接口，用于角色权限管理
+export function getAuthCodeList() {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/authCode/list`,
+    method: 'get',
+  });
+}
diff --git a/webapp/src/api/system/dict.js b/webapp/src/api/system/dict.js
index 0bed26f..0aa8b09 100644
--- a/webapp/src/api/system/dict.js
+++ b/webapp/src/api/system/dict.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/v1/dict',
+    url: `/${API_MODULE_NAME.ADMIN}/dict`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/v1/dict',
+    url: `/${API_MODULE_NAME.ADMIN}/dict`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function del(ids) {
   return request({
-    url: 'api/v1/dict/',
+    url: `/${API_MODULE_NAME.ADMIN}/dict`,
     method: 'delete',
     data: { ids },
   });
@@ -42,7 +43,7 @@ export function del(ids) {
 
 export function edit(data) {
   return request({
-    url: 'api/v1/dict',
+    url: `/${API_MODULE_NAME.ADMIN}/dict`,
     method: 'put',
     data,
   });
diff --git a/webapp/src/api/system/dictDetail.js b/webapp/src/api/system/dictDetail.js
index 55a2f57..35b8cc3 100644
--- a/webapp/src/api/system/dictDetail.js
+++ b/webapp/src/api/system/dictDetail.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/v1/dictDetail',
+    url: `/${API_MODULE_NAME.ADMIN}/dictDetail`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/v1/dictDetail',
+    url: `/${API_MODULE_NAME.ADMIN}/dictDetail`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function del(ids) {
   return request({
-    url: 'api/v1/dictDetail',
+    url: `/${API_MODULE_NAME.ADMIN}/dictDetail`,
     method: 'delete',
     data: { ids },
   });
@@ -42,7 +43,7 @@ export function del(ids) {
 
 export function edit(data) {
   return request({
-    url: 'api/v1/dictDetail',
+    url: `/${API_MODULE_NAME.ADMIN}/dictDetail`,
     method: 'put',
     data,
   });
diff --git a/webapp/src/api/system/menu.js b/webapp/src/api/system/menu.js
new file mode 100644
index 0000000..b5077c7
--- /dev/null
+++ b/webapp/src/api/system/menu.js
@@ -0,0 +1,59 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
+
+export function getMenusTree() {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/menus/tree`,
+    method: 'get',
+  });
+}
+
+export function list(params) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/menus`,
+    method: 'get',
+    params,
+  });
+}
+
+export function add(data) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/menus`,
+    method: 'post',
+    data,
+  });
+}
+
+export function del(ids) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/menus`,
+    method: 'delete',
+    data: { ids },
+  });
+}
+
+export function edit(data) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/menus`,
+    method: 'put',
+    data,
+  });
+}
+
+export default { list, add, edit, del, getMenusTree };
diff --git a/webapp/src/api/system/node.js b/webapp/src/api/system/node.js
index f8a2fa5..6b485c6 100644
--- a/webapp/src/api/system/node.js
+++ b/webapp/src/api/system/node.js
@@ -1,25 +1,44 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function getNodes(params) {
   return request({
-    url: 'api/v1/node/findAllNode',
+    url: `/${API_MODULE_NAME.K8S}/node/findAllNode`,
     method: 'get',
     params,
   });
 }
+
+// 创建资源隔离
+export function addNodeIsolation(data) {
+  return request({
+    url: `/${API_MODULE_NAME.K8S}/node/isolation`,
+    method: 'post',
+    data,
+  });
+}
+
+// 移除资源隔离
+export function removeNodeIsolation(nodeNames) {
+  return request({
+    url: `/${API_MODULE_NAME.K8S}/node/isolation`,
+    method: 'delete',
+    data: { nodeNames },
+  });
+}
diff --git a/webapp/src/api/system/permission.js b/webapp/src/api/system/permission.js
new file mode 100644
index 0000000..aac2e99
--- /dev/null
+++ b/webapp/src/api/system/permission.js
@@ -0,0 +1,57 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
+
+export function list(params) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/permission`,
+    method: 'get',
+    params,
+  });
+}
+
+export function add(data) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/permission`,
+    method: 'post',
+    data,
+  });
+}
+
+export function del(ids) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/permission`,
+    method: 'delete',
+    data: { ids },
+  });
+}
+
+export function edit(data) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/permission`,
+    method: 'put',
+    data,
+  });
+}
+
+export function getPermissionTree() {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/permission/tree`,
+    method: 'get',
+  });
+}
diff --git a/webapp/src/api/system/pod.js b/webapp/src/api/system/pod.js
index bf2fb5b..b4b6099 100644
--- a/webapp/src/api/system/pod.js
+++ b/webapp/src/api/system/pod.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function getPodLog(params) {
   return request({
-    url: 'api/v1/pod/log',
+    url: `/${API_MODULE_NAME.K8S}/pod/log`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function getPodLog(params) {
 
 export function downloadPodLog(params) {
   return request({
-    url: 'api/v1/pod/log/download',
+    url: `/${API_MODULE_NAME.K8S}/pod/log/download`,
     method: 'get',
     params,
   });
@@ -34,17 +35,33 @@ export function downloadPodLog(params) {
 
 export function batchDownloadPodLog(data) {
   return request({
-    url: 'api/v1/pod/log/download',
+    url: `/${API_MODULE_NAME.K8S}/pod/log/download`,
     method: 'post',
     responseType: 'blob',
     data,
   });
 }
 
-export function countPodLogs(podVOList) {
+export function countPodLogs(namespace, podVOList) {
   return request({
-    url: 'api/v1/pod/log/count',
+    url: `/${API_MODULE_NAME.K8S}/pod/log/count`,
     method: 'post',
-    data: { podVOList },
+    data: { namespace, podVOList },
+  });
+}
+
+export function getMetrics(params) {
+  return request({
+    url: `/${API_MODULE_NAME.K8S}/pod/realtimeMetrics`,
+    method: 'get',
+    params,
+  });
+}
+
+export function getHistoryMetrics(params) {
+  return request({
+    url: `/${API_MODULE_NAME.K8S}/pod/rangeMetrics`,
+    method: 'get',
+    params,
   });
 }
diff --git a/webapp/src/api/system/recycle.js b/webapp/src/api/system/recycle.js
new file mode 100644
index 0000000..37673ad
--- /dev/null
+++ b/webapp/src/api/system/recycle.js
@@ -0,0 +1,51 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
+
+export function list(params) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/recycleTask`,
+    method: 'get',
+    params,
+  });
+}
+
+export function del(ids) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/recycleTask`,
+    method: 'delete',
+    data: { recycleTaskIdList: ids },
+  });
+}
+
+export function restoreTask(params) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/recycleTask`,
+    method: 'put',
+    params,
+  });
+}
+
+export function getRecycleModuleMap() {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/recycleTask/recycleModuleMap`,
+    method: 'get',
+  });
+}
+
+export default { list, del };
diff --git a/webapp/src/api/system/resources.js b/webapp/src/api/system/resources.js
new file mode 100644
index 0000000..9de65e3
--- /dev/null
+++ b/webapp/src/api/system/resources.js
@@ -0,0 +1,50 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
+
+export function list(params) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/resourceSpecs`,
+    method: 'get',
+    params,
+  });
+}
+
+export function add(data) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/resourceSpecs`,
+    method: 'post',
+    data,
+  });
+}
+
+export function del(ids) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/resourceSpecs`,
+    method: 'delete',
+    data: { ids },
+  });
+}
+
+export function edit(data) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/resourceSpecs`,
+    method: 'put',
+    data,
+  });
+}
diff --git a/webapp/src/api/system/role.js b/webapp/src/api/system/role.js
index bf694cb..2ab14a8 100644
--- a/webapp/src/api/system/role.js
+++ b/webapp/src/api/system/role.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/v1/roles',
+    url: `/${API_MODULE_NAME.ADMIN}/roles`,
     method: 'get',
     params,
   });
@@ -27,14 +28,14 @@ export function list(params) {
 // 获取所有的Role
 export function getAll() {
   return request({
-    url: 'api/v1/roles/all',
+    url: `/${API_MODULE_NAME.ADMIN}/roles/all`,
     method: 'get',
   });
 }
 
 export function add(data) {
   return request({
-    url: 'api/v1/roles',
+    url: `/${API_MODULE_NAME.ADMIN}/roles`,
     method: 'post',
     data,
   });
@@ -42,14 +43,14 @@ export function add(data) {
 
 export function get(id) {
   return request({
-    url: `api/v1/roles/${  id}`,
+    url: `/${API_MODULE_NAME.ADMIN}/roles/${id}`,
     method: 'get',
   });
 }
 
 export function del(ids) {
   return request({
-    url: 'api/v1/roles',
+    url: `/${API_MODULE_NAME.ADMIN}/roles`,
     method: 'delete',
     data: { ids },
   });
@@ -57,7 +58,7 @@ export function del(ids) {
 
 export function edit(data) {
   return request({
-    url: 'api/v1/roles',
+    url: `/${API_MODULE_NAME.ADMIN}/roles`,
     method: 'put',
     data,
   });
@@ -65,16 +66,17 @@ export function edit(data) {
 
 export function editMenu(data) {
   return request({
-    url: 'api/v1/roles/menu',
+    url: `/${API_MODULE_NAME.ADMIN}/roles/menu`,
     method: 'put',
     data,
   });
 }
 
-export function getMenusTree() {
+export function editOperations(data) {
   return request({
-    url: 'api/v1/menus/tree',
-    method: 'get',
+    url: `/${API_MODULE_NAME.ADMIN}/roles/auth`,
+    method: 'put',
+    data,
   });
 }
 
diff --git a/webapp/src/api/system/user.js b/webapp/src/api/system/user.js
index d2026b7..5a2a1d0 100644
--- a/webapp/src/api/system/user.js
+++ b/webapp/src/api/system/user.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/v1/users',
+    url: `/${API_MODULE_NAME.ADMIN}/users`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/v1/users',
+    url: `/${API_MODULE_NAME.ADMIN}/users`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function del(ids) {
   return request({
-    url: 'api/v1/users',
+    url: `/${API_MODULE_NAME.ADMIN}/users`,
     method: 'delete',
     data: { ids },
   });
@@ -42,11 +43,18 @@ export function del(ids) {
 
 export function edit(data) {
   return request({
-    url: 'api/v1/users',
+    url: `/${API_MODULE_NAME.ADMIN}/users`,
     method: 'put',
     data,
   });
 }
 
-export default { list, add, edit, del };
+// 根据用户名模糊搜索用户列表
+export function findByNickName() {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/users/findByNickName`,
+    method: 'get',
+  });
+}
 
+export default { list, add, edit, del };
diff --git a/webapp/src/api/system/userGroup.js b/webapp/src/api/system/userGroup.js
new file mode 100644
index 0000000..a1f2c54
--- /dev/null
+++ b/webapp/src/api/system/userGroup.js
@@ -0,0 +1,109 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
+
+export function list(params) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/group`,
+    method: 'get',
+    params,
+  });
+}
+
+export function add(data) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/group`,
+    method: 'post',
+    data,
+  });
+}
+
+export function edit(data) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/group`,
+    method: 'put',
+    data,
+  });
+}
+
+export function del(id) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/group`,
+    method: 'delete',
+    data: { ids: [id] },
+  });
+}
+
+export function getUserListByGroup(groupId) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/group/byGroupId`,
+    method: 'get',
+    params: { groupId },
+  });
+}
+
+export function deleteUserFromGroup(userIds, groupId) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/group/deleteUser`,
+    method: 'delete',
+    data: { groupId, userIds },
+  });
+}
+
+export function getUngroupedUsers() {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/group/findUser`,
+    method: 'get',
+  });
+}
+
+// 更新用户组成员列表
+export function updateGroupUsers(data) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/group/updateUser`,
+    method: 'post',
+    data,
+  });
+}
+
+// 批量激活/锁定用户组成员
+export function updateUserState(groupId, enabled) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/group/userState`,
+    method: 'put',
+    data: { groupId, enabled },
+  });
+}
+
+// 批量修改用户组成员角色
+export function updateUserRoles(groupId, roleIds) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/group/userRoles`,
+    method: 'put',
+    data: { groupId, roleIds },
+  });
+}
+
+// 批量删除用户组成员
+export function deleteGroupUsers(groupId) {
+  return request({
+    url: `/${API_MODULE_NAME.ADMIN}/group/delete`,
+    method: 'delete',
+    data: { groupId },
+  });
+}
diff --git a/webapp/src/api/trainingImage/index.js b/webapp/src/api/trainingImage/index.js
index c4f47d2..b08c8c4 100644
--- a/webapp/src/api/trainingImage/index.js
+++ b/webapp/src/api/trainingImage/index.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/v1/ptImage/info',
+    url: `/${API_MODULE_NAME.IMAGE}/ptImage/info`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/v1/ptImage/uploadImage',
+    url: `/${API_MODULE_NAME.IMAGE}/ptImage/uploadImage`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function edit(data) {
   return request({
-    url: 'api/v1/ptImage',
+    url: `/${API_MODULE_NAME.IMAGE}/ptImage`,
     method: 'put',
     data,
   });
@@ -42,7 +43,7 @@ export function edit(data) {
 
 export function del(ids) {
   return request({
-    url: 'api/v1/ptImage',
+    url: `/${API_MODULE_NAME.IMAGE}/ptImage`,
     method: 'delete',
     data: ids,
   });
@@ -50,7 +51,7 @@ export function del(ids) {
 
 export function getImageNameList(params) {
   return request({
-    url: 'api/v1/ptImage/imageNameList',
+    url: `/${API_MODULE_NAME.IMAGE}/ptImage/imageNameList`,
     method: 'get',
     params,
   });
@@ -58,7 +59,7 @@ export function getImageNameList(params) {
 
 export function getImageTagList(params) {
   return request({
-    url: 'api/v1/ptImage',
+    url: `/${API_MODULE_NAME.IMAGE}/ptImage`,
     method: 'get',
     params,
   });
@@ -66,7 +67,7 @@ export function getImageTagList(params) {
 
 export function setPrecast(params) {
   return request({
-    url: 'api/v1/ptImage/imageResource',
+    url: `/${API_MODULE_NAME.IMAGE}/ptImage/imageResource`,
     method: 'put',
     params,
   });
diff --git a/webapp/src/api/trainingJob/job.js b/webapp/src/api/trainingJob/job.js
index 5a44e13..6ac3d01 100644
--- a/webapp/src/api/trainingJob/job.js
+++ b/webapp/src/api/trainingJob/job.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/v1/trainJob',
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/v1/trainJob',
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function edit(data) {
   return request({
-    url: 'api/v1/trainJob',
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob`,
     method: 'put',
     data,
   });
@@ -42,7 +43,7 @@ export function edit(data) {
 
 export function del(ids) {
   return request({
-    url: 'api/v1/trainJob',
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob`,
     method: 'delete',
     data: ids,
   });
@@ -50,7 +51,7 @@ export function del(ids) {
 
 export function resumeTrain(data) {
   return request({
-    url: 'api/v1/trainJob/resume',
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob/resume`,
     method: 'post',
     data,
   });
@@ -58,7 +59,7 @@ export function resumeTrain(data) {
 
 export function stop(data) {
   return request({
-    url: 'api/v1/trainJob/stop',
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob/stop`,
     method: 'post',
     data,
   });
@@ -66,7 +67,7 @@ export function stop(data) {
 
 export function getJobList(params) {
   return request({
-    url: `api/v1/trainJob/trainJobVersionDetail`,
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob/trainJobVersionDetail`,
     method: 'get',
     params,
   });
@@ -74,7 +75,7 @@ export function getJobList(params) {
 
 export function getJobDetail(jobId) {
   return request({
-    url: `api/v1/trainJob/jobDetail`,
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob/jobDetail`,
     method: 'get',
     params: { id: jobId },
   });
@@ -82,7 +83,7 @@ export function getJobDetail(jobId) {
 
 export function getTrainLog(params) {
   return request({
-    url: `api/v1/trainLog`,
+    url: `/${API_MODULE_NAME.TRAIN}/trainLog`,
     method: 'get',
     params,
   });
@@ -90,35 +91,37 @@ export function getTrainLog(params) {
 
 export function myTrainJobCount() {
   return request({
-    url: `api/v1/trainJob/mine`,
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob/mine`,
     method: 'get',
   });
 }
 
 export function getTrainJobSpecs(params) {
   return request({
-    url: `api/v1/trainJob/trainJobSpecs`,
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob/trainJobSpecs`,
     method: 'get',
     params,
   });
 }
 
-export function getGarafanaInfo(jobId) {
+export function getPods(jobId) {
   return request({
-    url: `api/v1/trainJob/grafanaUrl/${jobId}`,
+    url: `/${API_MODULE_NAME.TRAIN}/trainLog/pod/${jobId}`,
+    method: 'get',
   });
 }
 
-export function getPods(jobId) {
+export function getTrainModel(params) {
   return request({
-    url: `api/v1/trainLog/pod/${jobId}`,
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob/model`,
     method: 'get',
+    params,
   });
 }
 
-export function getTrainModel(params) {
+export function getTrainingVisualList(params) {
   return request({
-    url: `api/v1/trainJob/model`,
+    url: `/${API_MODULE_NAME.TRAIN}/trainJob/visualTrain`,
     method: 'get',
     params,
   });
diff --git a/webapp/src/api/trainingJob/params.js b/webapp/src/api/trainingJob/params.js
index 53e7418..285a287 100644
--- a/webapp/src/api/trainingJob/params.js
+++ b/webapp/src/api/trainingJob/params.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function list(params) {
   return request({
-    url: 'api/v1/trainParams',
+    url: `/${API_MODULE_NAME.TRAIN}/trainParams`,
     method: 'get',
     params,
   });
@@ -26,7 +27,7 @@ export function list(params) {
 
 export function add(data) {
   return request({
-    url: 'api/v1/trainParams',
+    url: `/${API_MODULE_NAME.TRAIN}/trainParams`,
     method: 'post',
     data,
   });
@@ -34,7 +35,7 @@ export function add(data) {
 
 export function edit(data) {
   return request({
-    url: 'api/v1/trainParams',
+    url: `/${API_MODULE_NAME.TRAIN}/trainParams`,
     method: 'put',
     data,
   });
@@ -42,7 +43,7 @@ export function edit(data) {
 
 export function del(ids) {
   return request({
-    url: 'api/v1/trainParams',
+    url: `/${API_MODULE_NAME.TRAIN}/trainParams`,
     method: 'delete',
     data: ids,
   });
diff --git a/webapp/src/api/user.js b/webapp/src/api/user.js
index 50603df..b26117f 100644
--- a/webapp/src/api/user.js
+++ b/webapp/src/api/user.js
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import request from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 
 export function userMenus(params) {
   return request({
-    url: 'api/v1/user/menus',
+    url: `/${API_MODULE_NAME.ADMIN}/user/menus`,
     method: 'get',
     params,
   });
@@ -26,14 +27,14 @@ export function userMenus(params) {
 
 export function dictDetail(name) {
   return request({
-    url: `api/v1/user/dict/${name}`,
+    url: `/${API_MODULE_NAME.ADMIN}/user/dict/${name}`,
     method: 'get',
   });
 }
 
 export function userInfo(data) {
   return request({
-    url: 'api/v1/user/info',
+    url: `/${API_MODULE_NAME.ADMIN}/user/info`,
     method: 'get',
     data,
   });
@@ -41,7 +42,7 @@ export function userInfo(data) {
 
 export function editUser(data) {
   return request({
-    url: 'api/v1/user/info',
+    url: `/${API_MODULE_NAME.ADMIN}/user/info`,
     method: 'put',
     data,
   });
@@ -49,7 +50,7 @@ export function editUser(data) {
 
 export function updateAvatar(data) {
   return request({
-    url: 'api/v1/user/updateAvatar',
+    url: `/${API_MODULE_NAME.ADMIN}/user/updateAvatar`,
     method: 'post',
     data,
   });
@@ -57,7 +58,7 @@ export function updateAvatar(data) {
 
 export function updatePass(data) {
   return request({
-    url: 'api/v1/user/updatePass',
+    url: `/${API_MODULE_NAME.ADMIN}/user/updatePass`,
     method: 'post',
     data,
   });
@@ -65,7 +66,7 @@ export function updatePass(data) {
 
 export function resetEmail(data) {
   return request({
-    url: 'api/v1/user/resetEmail',
+    url: `/${API_MODULE_NAME.ADMIN}/user/resetEmail`,
     method: 'post',
     data,
   });
diff --git a/webapp/src/api/visual/index.js b/webapp/src/api/visual/index.js
index 19469b2..af33207 100644
--- a/webapp/src/api/visual/index.js
+++ b/webapp/src/api/visual/index.js
@@ -1,23 +1,22 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 // eslint-disable-next-line import/no-cycle
 import request, { useGet } from '@/utils/request';
 
 const baseURL = process.env.VUE_APP_BASE_API;
-// 这个文件没用起来
 
 export function initVisual(params) {
   return request({
diff --git a/webapp/src/assets/images/dataset/annotate.png b/webapp/src/assets/images/dataset/annotate.png
new file mode 100644
index 0000000..a817383
Binary files /dev/null and b/webapp/src/assets/images/dataset/annotate.png differ
diff --git a/webapp/src/assets/images/dataset/audioClassify.png b/webapp/src/assets/images/dataset/audioClassify.png
new file mode 100644
index 0000000..2512bb8
Binary files /dev/null and b/webapp/src/assets/images/dataset/audioClassify.png differ
diff --git a/webapp/src/assets/images/dataset/body.png b/webapp/src/assets/images/dataset/body.png
new file mode 100644
index 0000000..8614a8d
Binary files /dev/null and b/webapp/src/assets/images/dataset/body.png differ
diff --git a/webapp/src/assets/images/dataset/classify.png b/webapp/src/assets/images/dataset/classify.png
new file mode 100644
index 0000000..237e3c0
Binary files /dev/null and b/webapp/src/assets/images/dataset/classify.png differ
diff --git a/webapp/src/assets/images/dataset/custom.png b/webapp/src/assets/images/dataset/custom.png
new file mode 100644
index 0000000..e1a1105
Binary files /dev/null and b/webapp/src/assets/images/dataset/custom.png differ
diff --git a/webapp/src/assets/images/dataset/ner.png b/webapp/src/assets/images/dataset/ner.png
new file mode 100644
index 0000000..68dc63c
Binary files /dev/null and b/webapp/src/assets/images/dataset/ner.png differ
diff --git a/webapp/src/assets/images/dataset/nodule.png b/webapp/src/assets/images/dataset/nodule.png
new file mode 100644
index 0000000..d56606f
Binary files /dev/null and b/webapp/src/assets/images/dataset/nodule.png differ
diff --git a/webapp/src/assets/images/dataset/segmentation.png b/webapp/src/assets/images/dataset/segmentation.png
new file mode 100644
index 0000000..636bc6f
Binary files /dev/null and b/webapp/src/assets/images/dataset/segmentation.png differ
diff --git a/webapp/src/assets/images/dataset/speechRecognition.png b/webapp/src/assets/images/dataset/speechRecognition.png
new file mode 100644
index 0000000..3f775c9
Binary files /dev/null and b/webapp/src/assets/images/dataset/speechRecognition.png differ
diff --git a/webapp/src/assets/images/dataset/tabular-2.png b/webapp/src/assets/images/dataset/tabular-2.png
new file mode 100644
index 0000000..a9e95fc
Binary files /dev/null and b/webapp/src/assets/images/dataset/tabular-2.png differ
diff --git a/webapp/src/assets/images/dataset/textclassify.png b/webapp/src/assets/images/dataset/textclassify.png
new file mode 100644
index 0000000..8d1da8a
Binary files /dev/null and b/webapp/src/assets/images/dataset/textclassify.png differ
diff --git a/webapp/src/assets/images/dataset/textsegmentation.png b/webapp/src/assets/images/dataset/textsegmentation.png
new file mode 100644
index 0000000..eea0c65
Binary files /dev/null and b/webapp/src/assets/images/dataset/textsegmentation.png differ
diff --git a/webapp/src/assets/images/dataset/track.png b/webapp/src/assets/images/dataset/track.png
new file mode 100644
index 0000000..3b7d3b5
Binary files /dev/null and b/webapp/src/assets/images/dataset/track.png differ
diff --git a/webapp/src/assets/styles/atomic.scss b/webapp/src/assets/styles/atomic.scss
index 514fbe0..7eb7819 100644
--- a/webapp/src/assets/styles/atomic.scss
+++ b/webapp/src/assets/styles/atomic.scss
@@ -24,6 +24,10 @@
   display: block;
 }
 
+.di {
+  display: inline;
+}
+
 .dib {
   display: inline-block;
 }
@@ -113,6 +117,10 @@
   padding-right: 5px;
 }
 
+.pr-20 {
+  padding-right: 20px;
+}
+
 .pl-0 {
   padding-left: 0;
 }
@@ -129,6 +137,21 @@
   padding-bottom: 10px;
 }
 
+.py-4 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.py-10 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.px-20 {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
 .mt-0 {
   margin-top: 0 !important;
 }
@@ -169,6 +192,10 @@
   margin-left: 40px;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mb-50 {
   margin-bottom: 50px;
 }
@@ -190,6 +217,11 @@
   margin-left: 10px;
 }
 
+.my-5 {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
 .my-10 {
   margin-top: 10px;
   margin-bottom: 10px;
@@ -205,6 +237,10 @@
   margin-bottom: auto;
 }
 
+.w-100 {
+  width: 100px;
+}
+
 .w-150 {
   width: 150px;
 }
@@ -213,14 +249,34 @@
   width: 200px;
 }
 
+.w-300 {
+  width: 300px;
+}
+
+.w-500 {
+  width: 500px;
+}
+
+.h-100 {
+  height: 100px;
+}
+
 .lh-1 {
   line-height: 1;
 }
 
+.lh-20 {
+  line-height: 20px;
+}
+
 .bold {
   font-weight: bold;
 }
 
+.normal {
+  font-weight: normal;
+}
+
 img.responsive {
   display: inline-block;
   max-width: 100%;
@@ -290,6 +346,10 @@ img.responsive {
   border-color: $borderColor;
 }
 
+.no-border {
+  border: none;
+}
+
 .g3 {
   color: #333;
 }
@@ -318,6 +378,10 @@ img.responsive {
   font-size: 18px;
 }
 
+.f22 {
+  font-size: 22px;
+}
+
 .ellipsis {
   @include text-overflow;
 }
diff --git a/webapp/src/assets/styles/common.scss b/webapp/src/assets/styles/common.scss
index 19e9c36..ef012d4 100644
--- a/webapp/src/assets/styles/common.scss
+++ b/webapp/src/assets/styles/common.scss
@@ -20,6 +20,15 @@
 //main-container全局样式
 .app-container {
   padding: 10px 20px 70px 20px;
+
+  .wrapper.fixed {
+    width: 1080px;
+    min-width: 60vw;
+    max-width: calc(100vw - 80px);
+    max-height: 100%;
+    padding: 20px 0 0;
+    margin: 0 auto;
+  }
 }
 
 .head-container {
@@ -69,22 +78,18 @@
   margin-left: auto;
 }
 
-.my-code {
-  position: relative;
-  padding: 15px;
-  font-family: Courier New, serif;
-  font-size: 12px;
-  line-height: 20px;
-  color: #333;
-  border-left: 5px solid #ddd;
-}
-
 // 自定义search-bar样式
 .search-bar {
   float: right;
   margin-top: 8px;
 }
 
+.disabled {
+  color: $infoColor;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
 // 自定义drawer样式
 .ts-drawer {
   margin: 30px 20px 0 0;
@@ -250,3 +255,39 @@ pre {
   background: rgb(30, 30, 30);
   border-radius: 5px;
 }
+
+.field-extra {
+  font-size: 14px;
+  line-height: 1.5;
+  color: $infoColor;
+}
+
+.app-result-content {
+  padding: 24px 40px;
+  margin-top: 24px;
+  text-align: left;
+  background-color: #fafafa;
+}
+
+.app-result-title {
+  font-size: 24px;
+  line-height: 1.8;
+  color: rgba(0, 0, 0, 0.85);
+  text-align: center;
+}
+
+.app-result-subtitle {
+  font-size: 14px;
+  line-height: 1.6;
+  color: rgba(0, 0, 0, 0.45);
+  text-align: center;
+}
+
+.rotate {
+  @include rotate(3s);
+}
+
+.ts-tip {
+  color: $tipColor;
+  background-color: $tipBgColor;
+}
diff --git a/webapp/src/assets/styles/element-ui.scss b/webapp/src/assets/styles/element-ui.scss
index ee18e90..2f936f4 100644
--- a/webapp/src/assets/styles/element-ui.scss
+++ b/webapp/src/assets/styles/element-ui.scss
@@ -44,6 +44,15 @@
   }
 }
 
+.el-button.danger {
+  color: $red;
+
+  &:hover,
+  &:active {
+    color: $red;
+  }
+}
+
 // el-radio border
 .el-radio.is-bordered {
   &.is-checked,
diff --git a/webapp/src/assets/styles/index.scss b/webapp/src/assets/styles/index.scss
index e38b528..e0024ba 100644
--- a/webapp/src/assets/styles/index.scss
+++ b/webapp/src/assets/styles/index.scss
@@ -22,12 +22,23 @@
 @import 'sidebar';
 @import 'common';
 
+@media screen and (max-width: 768px) {
+  .mb-dn {
+    display: none !important;
+  }
+
+  .mb-w100 {
+    width: 100% !important;
+  }
+}
+
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  color: rgba(0, 0, 0, 0.85);
 }
 
 label {
diff --git a/webapp/src/assets/styles/mixin.scss b/webapp/src/assets/styles/mixin.scss
index 202ad54..7678ea4 100644
--- a/webapp/src/assets/styles/mixin.scss
+++ b/webapp/src/assets/styles/mixin.scss
@@ -102,4 +102,24 @@
     border-right: $color-border-style;
     border-bottom: $transparent-border-style;
   }
+
+  @else if $direction==right-up {
+    border: $width solid $color;
+    border-top: $transparent-border-style;
+    border-left: $transparent-border-style;
+  }
+}
+
+@mixin rotate($duration) {
+  animation: spin infinite $duration linear;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(330deg);
+  }
+
+  to {
+    transform: rotate(-30deg);
+  }
 }
diff --git a/webapp/src/assets/styles/variables.scss b/webapp/src/assets/styles/variables.scss
index b5c5cc2..34bfc2f 100644
--- a/webapp/src/assets/styles/variables.scss
+++ b/webapp/src/assets/styles/variables.scss
@@ -40,13 +40,16 @@ $menuBg: #f3f7ff;
 $menuText: $commonTextColor;
 $menuActiveText: $primaryColor;
 
-$menuHoverBg:#d8dfff;
+$menuHoverBg: #d8dfff;
 $subMenuBg: #edf0ff;
-$menuActiveBg:#d8dfff;
+$menuActiveBg: #d8dfff;
 $sideBarWidth: 205px;
 $iconBarWidth: 64px;
 $navBarHeight: 50px;
 
+$tipBgColor: #ffe9cc;
+$tipColor: #f38900;
+
 :export {
   menuBg: $menuBg;
   menuText: $menuText;
diff --git a/webapp/src/boot/errorHandle.js b/webapp/src/boot/errorHandle.js
index 3851c44..4629b12 100644
--- a/webapp/src/boot/errorHandle.js
+++ b/webapp/src/boot/errorHandle.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import Vue from 'vue';
 import { Message, MessageBox } from 'element-ui';
@@ -24,7 +24,7 @@ const TOKENEXPIRE = 20012; // Token 失效
 let isMsgOn = false;
 
 // 全局未捕获异常处理（包括普通异常和 await 未被捕获的异常）
-Vue.config.errorHandler = (err) =>{
+Vue.config.errorHandler = (err) => {
   console.error(err);
   // 未授权只提示一次
   if (err.code === UNAUTHORIZED) {
@@ -46,7 +46,7 @@ Vue.config.errorHandler = (err) =>{
 // 只针对 promise 异步捕获
 // eslint-disable-next-line func-names
 window.addEventListener('unhandledrejection', function(event) {
-  const {reason} = event;
+  const { reason } = event;
   if (reason) {
     // 未授权
     if (reason.code === TOKENEXPIRE) {
@@ -58,16 +58,19 @@ window.addEventListener('unhandledrejection', function(event) {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning',
-      }).then(() => {
-        // 此处调用 store lotout
-        store.dispatch('LogOut').then(() => {
-          location.pathname !== '/login' && location.reload();
+      })
+        .then(() => {
+          // 此处调用 store lotout
+          store.dispatch('LogOut').then(() => {
+            window.location.pathname !== '/login' && window.location.reload();
+          });
+        })
+        .finally(() => {
+          isMsgOn = false;
         });
-      }).finally(() => {
-        isMsgOn = false;
-      });
       return;
-    } if (reason.code === UNAUTHORIZED) {
+    }
+    if (reason.code === UNAUTHORIZED) {
       // 未授权提醒只展示一次
       if (isMsgOn === true) return;
       isMsgOn = true;
diff --git a/webapp/src/boot/index.js b/webapp/src/boot/index.js
index 4a11caa..395610f 100644
--- a/webapp/src/boot/index.js
+++ b/webapp/src/boot/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import './errorHandle';
 
diff --git a/webapp/src/components/BaseForm/index.vue b/webapp/src/components/BaseForm/index.vue
new file mode 100644
index 0000000..27d7394
--- /dev/null
+++ b/webapp/src/components/BaseForm/index.vue
@@ -0,0 +1,165 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <el-form ref="formRef" :model="model" v-bind="attrs" v-on="$listeners" @submit.native.prevent>
+    <template v-for="item of mergedFormItems">
+      <el-form-item
+        v-if="!hideItem(item)"
+        :key="item.prop"
+        :label="item.label"
+        :label-width="item.labelWidth"
+        :prop="item.prop"
+      >
+        <!-- 输入框/文本域 -->
+        <template v-if="item.type === 'input'">
+          <el-input
+            v-model="model[item.prop]"
+            :type="item.inputType"
+            v-bind="item"
+            @change="(value) => runFunc(item.change, value)"
+          />
+        </template>
+        <!-- 下拉框 -->
+        <template v-else-if="item.type === 'select'">
+          <el-select
+            v-model="model[item.prop]"
+            v-bind="item"
+            @change="(value) => runFunc(item.change, value)"
+          >
+            <el-option
+              v-for="option of item.options"
+              :key="option.value"
+              :value="option.value"
+              :label="option.label"
+              :disabled="option.disabled"
+            />
+          </el-select>
+        </template>
+        <!-- 时间选择器 -->
+        <el-date-picker
+          v-else-if="item.type === 'date'"
+          v-model="model[item.prop]"
+          :type="item.dateType"
+          v-bind="item"
+          @change="(value) => runFunc(item.change, value)"
+        />
+        <!-- 按钮 -->
+        <template v-else-if="item.type === 'button'">
+          <el-button
+            :type="item.btnType"
+            :disabled="item.disabled"
+            v-bind="item"
+            @click="runFunc(item.func)"
+          >
+            <template v-if="!item.circle">{{ item.btnText }}</template>
+          </el-button>
+        </template>
+      </el-form-item>
+    </template>
+  </el-form>
+</template>
+
+<script>
+import { computed, reactive, ref } from '@vue/composition-api';
+
+import { runFunc } from '@/utils';
+
+// 默认表单属性
+const defaultFormAttrs = {
+  // TODO: 确认是否添加表单默认属性
+};
+
+// 默认表单项定义
+const defaultItemDefinition = {
+  type: 'input',
+  clearable: true,
+  rows: 4,
+};
+
+export default {
+  name: 'BaseForm',
+  inheritAttrs: false,
+  props: {
+    formItems: {
+      type: Array,
+      required: true,
+    },
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props, ctx) {
+    const { model } = reactive(props);
+    // 表单组件 ref
+    const formRef = ref(null);
+
+    // 合并表单默认属性和 $attrs
+    const attrs = computed(() => {
+      return { ...defaultFormAttrs, ...ctx.attrs };
+    });
+
+    const hideItem = (item) => {
+      if (item.hidden) return true;
+      if (typeof item.hiddenFunc === 'function') return item.hiddenFunc();
+      return false;
+    };
+
+    // 表单项预处理
+    const mergedFormItems = computed(() => {
+      return props.formItems.map((item) => {
+        return { ...defaultItemDefinition, ...item };
+      });
+    });
+
+    // 表单校验方法
+    const validate = (resolve, reject) => {
+      let valid;
+      formRef.value.validate((isValid) => {
+        valid = isValid;
+        if (isValid) {
+          if (typeof resolve === 'function') {
+            return resolve(model);
+          }
+          return true;
+        }
+        if (typeof reject === 'function') {
+          return reject(model);
+        }
+        return false;
+      });
+      return valid;
+    };
+
+    // 清空表单校验
+    const clearValidate = () => {
+      formRef.value.clearValidate();
+    };
+
+    return {
+      formRef,
+      attrs,
+      mergedFormItems,
+      runFunc,
+      hideItem,
+
+      validate,
+      clearValidate,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/components/BaseModal/index.js b/webapp/src/components/BaseModal/index.js
index e74c3b9..e048459 100644
--- a/webapp/src/components/BaseModal/index.js
+++ b/webapp/src/components/BaseModal/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { isNil } from 'lodash';
 import { reactive, watch, ref } from '@vue/composition-api';
@@ -74,19 +74,20 @@ const BaseModal = {
       ctx.emit('ok', e);
     };
 
-    const handleClose = e => {
+    const handleClose = (e) => {
       // 这里只针对状态变更进行控制，只转发 element close 事件
       ctx.emit('close', e);
       ctx.emit('change', false);
     };
 
-    watch(() => props.visible, (next) => {
-      Object.assign(state, {
-        sVisible: next,
-      });
-    }, {
-      lazy: true,
-    });
+    watch(
+      () => props.visible,
+      (next) => {
+        Object.assign(state, {
+          sVisible: next,
+        });
+      }
+    );
 
     return {
       state,
@@ -99,15 +100,23 @@ const BaseModal = {
   render() {
     const renderFooter = () => {
       return (
-        <div class='modal-footer'>
-          { this.showCancel && (
-            <el-button id="cancel" onClick={this.handleCancel}>{this.cancelText}</el-button>
-          )
-          }
-          { this.showOk && (
-            <el-button id="ok" type='primary' disabled={this.disabled} onClick={this.handleOk} loading={this.loading}>{this.okText}</el-button>
-          )
-          }
+        <div class="modal-footer">
+          {this.showCancel && (
+            <el-button id="cancel" onClick={this.handleCancel}>
+              {this.cancelText}
+            </el-button>
+          )}
+          {this.showOk && (
+            <el-button
+              id="ok"
+              type="primary"
+              disabled={this.disabled}
+              onClick={this.handleOk}
+              loading={this.loading}
+            >
+              {this.okText}
+            </el-button>
+          )}
         </div>
       );
     };
@@ -130,9 +139,9 @@ const BaseModal = {
     };
 
     return (
-      <el-dialog {...dialogProps} ref='dialogRef'>
+      <el-dialog {...dialogProps} ref="dialogRef">
         {this.$slots.default}
-        <div slot='footer'>{footer}</div>
+        <div slot="footer">{footer}</div>
       </el-dialog>
     );
   },
diff --git a/webapp/src/components/BaseTable/index.vue b/webapp/src/components/BaseTable/index.vue
new file mode 100644
index 0000000..ccae5a5
--- /dev/null
+++ b/webapp/src/components/BaseTable/index.vue
@@ -0,0 +1,276 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <el-table ref="table" v-loading="loading" :data="data" v-bind="attrs" v-on="$listeners">
+    <template v-for="column in mergedColumns">
+      <el-table-column
+        v-if="!column.hide"
+        :key="column.prop"
+        :type="column.columnType"
+        v-bind="column"
+      >
+        <template #header>
+          <template v-if="headerSlots.includes(column.prop)">
+            <slot :name="`header-${column.prop}`" />
+          </template>
+          <DropdownHeader
+            v-else-if="headerOptions[column.prop]"
+            :title="column.label"
+            :list="headerOptions[column.prop]"
+            :filterFunc="column.filterFunc"
+            @command="column.func"
+          />
+          <span v-else>
+            {{ column.label }}
+          </span>
+        </template>
+        <template v-if="column.type !== 'selection'" #default="scope">
+          <template v-if="defaultSlots.includes(column.prop)">
+            <slot :row="scope.row" :name="column.prop" />
+          </template>
+          <!-- 时间列 -->
+          <span v-else-if="column.type === 'time'">
+            {{ parseTime(scope.row[column.prop]) }}
+          </span>
+          <!-- 操作列 -->
+          <div v-else-if="column.type === 'operation'">
+            <template v-for="operation in column.operations">
+              <!-- 更多操作下拉 -->
+              <el-dropdown
+                v-if="
+                  operation.type === 'more' &&
+                    !getOperationStatus('hide', 'hideFunc', operation, scope.row)
+                "
+                :key="operation.key"
+              >
+                <el-button type="text" class="ml-10" @click.stop
+                  >{{ column.moreText }}<i class="el-icon-arrow-down el-icon--right" />
+                </el-button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item
+                    v-for="moreOp in operation.operations"
+                    :key="moreOp.key"
+                    :disabled="getOperationStatus('disabled', 'disableFunc', moreOp, scope.row)"
+                    @click.native="() => runFunc(moreOp.func, scope.row)"
+                  >
+                    <el-button
+                      type="text"
+                      :disabled="getOperationStatus('disabled', 'disableFunc', moreOp, scope.row)"
+                    >
+                      {{ moreOp.label }}
+                      <IconFont v-if="moreOp.iconAfter" :type="moreOp.iconAfter" />
+                    </el-button>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <el-button
+                v-else-if="!getOperationStatus('hide', 'hideFunc', operation, scope.row)"
+                :id="operation.label + scope.$index"
+                :key="operation.key"
+                type="text"
+                :disabled="getOperationStatus('disabled', 'disableFunc', operation, scope.row)"
+                @click.stop="() => runFunc(operation.func, scope.row)"
+              >
+                {{ operation.label }}
+                <IconFont v-if="operation.iconAfter" :type="operation.iconAfter" />
+              </el-button>
+            </template>
+          </div>
+          <!-- tag 展示列 -->
+          <el-tag v-else-if="column.type === 'tag'" v-bind="getTagAttrs(column, scope.row)">{{
+            getContent(column, scope.row)
+          }}</el-tag>
+          <!-- 其他展示列 -->
+          <span v-else>
+            {{ getContent(column, scope.row) }}
+          </span>
+        </template>
+      </el-table-column>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import { computed, ref } from '@vue/composition-api';
+
+import { parseTime, noop, runFunc } from '@/utils';
+import DropdownHeader from '@/components/DropdownHeader';
+
+const defaultColunmDefinition = {
+  columnType: 'default',
+  hide: false, // 是否展示该列
+  fixed: false, // 是否为固定列
+  sortable: false, // 是否可排序
+  showOverflowTooltip: true, // 是否在过长时展示 tooltip，默认为 true
+  moreText: '更多', // 用于替换操作数超限时 “更多” 按钮的文本
+  operationLimit: 4, // 超过限制数量时自动压缩
+};
+
+const defaultTableAttrs = {
+  'highlight-current-row': true,
+};
+
+const elTableColumnTypes = ['default', 'selection', 'expand', 'index'];
+
+export default {
+  name: 'BaseTable',
+  components: { DropdownHeader },
+  inheritAttrs: false,
+  props: {
+    columns: {
+      type: Array,
+      required: true,
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    // 合并表格默认属性和 $attrs
+    const attrs = computed(() => {
+      return { ...defaultTableAttrs, ...ctx.attrs };
+    });
+
+    // 设置默认属性
+    const mergedColumns = computed(() => {
+      return props.columns.map((originColumn) => {
+        // 赋默认值
+        const column = { ...defaultColunmDefinition, ...originColumn };
+
+        if (elTableColumnTypes.includes(column.type)) {
+          column.columnType = column.type;
+        }
+
+        // 过滤不需要展示的 operation，生成折叠结构
+        if (column.type === 'operation') {
+          const displayOperations = column.operations.filter((op) => !op.hide);
+          let moreOperation = displayOperations.find((operation) => operation.type === 'more');
+          if (moreOperation) {
+            moreOperation.operations = moreOperation.operations.filter((op) => !op.hide);
+          } else if (displayOperations.length > column.operationLimit) {
+            moreOperation = {
+              label: column.moreText,
+              type: 'more',
+              operations: displayOperations.splice(column.operationLimit - 1),
+            };
+            displayOperations.push(moreOperation);
+          }
+          // operation 设置默认值为 noop，添加 key
+          displayOperations.forEach((operation, index) => {
+            operation.func = operation.func || noop;
+            operation.key = operation.label + index;
+            if (operation.type === 'more') {
+              operation.operations.forEach((moreOp, moreIndex) => {
+                moreOp.func = moreOp.func || noop;
+                moreOp.key = moreOp.label + moreIndex;
+              });
+            }
+          });
+          column.operations = displayOperations;
+        }
+
+        // 处理下拉表头
+        if (column.dropdownList && typeof column.func !== 'function') {
+          column.func = noop;
+        }
+        return column;
+      });
+    });
+
+    // 计算生成下拉表头
+    // 如果直接传入 column.dropdownList 会导致表头选项不可响应
+    const headerOptions = computed(() => {
+      const result = Object.create(null);
+      mergedColumns.value.forEach((column) => {
+        if (column.dropdownList) {
+          result[column.prop] = column.dropdownList;
+        }
+      });
+      return result;
+    });
+
+    // 展示文本格式化
+    const getContent = (column, row) => {
+      if (typeof column.formatter === 'function') {
+        return column.formatter(row[column.prop]);
+      }
+      return row[column.prop];
+    };
+
+    // 判断操作属性名和函数名返回布尔值
+    const getOperationStatus = (propName, funcName, operation, row, defaultResult = false) => {
+      if (operation[propName] !== undefined) {
+        return operation[propName];
+      }
+      if (typeof operation[funcName] === 'function') {
+        return operation[funcName](row);
+      }
+      return defaultResult;
+    };
+
+    // 根据列的 tagAttrFunc/tagAttr/tagMap 计算返回 el-tag 的属性
+    const getTagAttrs = (column, row) => {
+      if (typeof column.tagAttrFunc === 'function') {
+        return column.tagAttrFunc(row[column.prop], row);
+      }
+      const tagAttr = column.tagAttr || {};
+      const tagMap = column.tagMap || {};
+      return {
+        type: tagMap[row[column.prop]],
+        effect: 'plain',
+        ...tagAttr,
+      };
+    };
+
+    // 插槽名列表
+    const headerRe = /^header-([a-zA-Z]+)$/;
+    const defaultSlots = ref([]);
+    const headerSlots = ref([]);
+    let headerSlotName;
+    Object.keys(ctx.slots).forEach((slot) => {
+      headerSlotName = slot.match(headerRe);
+      if (headerSlotName) {
+        headerSlots.value.push(headerSlotName[1]);
+      } else {
+        defaultSlots.value.push(slot);
+      }
+    });
+
+    return {
+      attrs,
+      mergedColumns,
+      headerOptions,
+      getContent,
+      getOperationStatus,
+      getTagAttrs,
+
+      // slots
+      defaultSlots,
+      headerSlots,
+
+      // Utils 方法
+      parseTime,
+      runFunc,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/components/Card/info.vue b/webapp/src/components/Card/info.vue
index 13b3536..d6556c4 100644
--- a/webapp/src/components/Card/info.vue
+++ b/webapp/src/components/Card/info.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template functional>
   <div class="info-card" @click="props.handleClick">
diff --git a/webapp/src/components/Crud/UD.operation.vue b/webapp/src/components/Crud/UD.operation.vue
index 73bf452..827acc1 100644
--- a/webapp/src/components/Crud/UD.operation.vue
+++ b/webapp/src/components/Crud/UD.operation.vue
@@ -16,10 +16,22 @@
 
 <template>
   <span>
-    <el-button :loading="crud.status.cu === 2" :disabled="disabledEdit" type="text" @click="crud.toEdit(data)">
+    <el-button
+      v-if="showEdit"
+      :loading="crud.status.cu === 2"
+      :disabled="disabledEdit"
+      type="text"
+      @click="crud.toEdit(data)"
+    >
       {{ crud.props.optText.edit }}
     </el-button>
-    <el-button slot="reference" :disabled="disabledDle" type="text" @click="toDelete">
+    <el-button
+      v-if="showDelete"
+      slot="reference"
+      :disabled="disabledDle"
+      type="text"
+      @click="toDelete"
+    >
       {{ crud.props.optText.del }}
     </el-button>
   </span>
@@ -42,6 +54,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    showEdit: {
+      type: Boolean,
+      default: true,
+    },
+    showDelete: {
+      type: Boolean,
+      default: true,
+    },
     msg: {
       type: String,
       default: '确定删除本条数据吗？',
diff --git a/webapp/src/components/Dict/Dict.js b/webapp/src/components/Dict/Dict.js
index cd9e708..7c171d2 100644
--- a/webapp/src/components/Dict/Dict.js
+++ b/webapp/src/components/Dict/Dict.js
@@ -1,18 +1,18 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import Vue from 'vue';
 import { dictDetail } from '@/api/user';
@@ -23,22 +23,24 @@ export default class Dict {
   }
 
   async init(names, completeCallback) {
-    if (names === undefined || name === null) {
+    if (names === undefined || names === null) {
       throw new Error('need Dict names');
     }
     const ps = [];
-    names.forEach(n => {
+    names.forEach((n) => {
       Vue.set(this.dict.dict, n, {});
       Vue.set(this.dict.label, n, {});
       Vue.set(this.dict, n, []);
-      ps.push(dictDetail(n).then(data => {
-        const details = data && data.dictDetails || [];
-        this.dict[n].splice(0, 0, ...details);
-        details.forEach(d => {
-          Vue.set(this.dict.dict[n], d.value, d);
-          Vue.set(this.dict.label[n], d.value, d.label);
-        });
-      }));
+      ps.push(
+        dictDetail(n).then((data) => {
+          const details = (data && data.dictDetails) || [];
+          this.dict[n].splice(0, 0, ...details);
+          details.forEach((d) => {
+            Vue.set(this.dict.dict[n], d.value, d);
+            Vue.set(this.dict.label[n], d.value, d.label);
+          });
+        })
+      );
     });
     await Promise.all(ps);
     completeCallback();
diff --git a/webapp/src/components/Dict/index.js b/webapp/src/components/Dict/index.js
index 1d11943..03caa07 100644
--- a/webapp/src/components/Dict/index.js
+++ b/webapp/src/components/Dict/index.js
@@ -1,18 +1,18 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import Dict from './Dict';
 
diff --git a/webapp/src/components/Drag/drag.vue b/webapp/src/components/Drag/drag.vue
index cc01dbd..df29153 100644
--- a/webapp/src/components/Drag/drag.vue
+++ b/webapp/src/components/Drag/drag.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <script>
 import { reactive } from '@vue/composition-api';
@@ -43,7 +43,7 @@ export default {
     });
 
     function getPoint(event) {
-    // 容器尺寸
+      // 容器尺寸
       const bound = findAncestorSvg(event).getBoundingClientRect();
       const { clientX, clientY } = event;
 
@@ -64,14 +64,14 @@ export default {
         y: resetOnStart ? point.y : -state.dy + point.y,
       };
       Object.assign(state, nextState);
-      if (typeof onDragStart === 'function') onDragStart(nextState, event);      
+      if (typeof onDragStart === 'function') onDragStart(nextState, event);
     }
 
     function dragMove(event) {
       if (!state.isDragging) return;
       const point = getPoint(event);
       // 避免无效移动
-      if(Math.abs(point.x - state.x) < 2 && Math.abs(point.y - state.y) < 2) return;
+      if (Math.abs(point.x - state.x) < 2 && Math.abs(point.y - state.y) < 2) return;
       const nextState = {
         isDragging: true,
         isMoving: true,
@@ -90,9 +90,10 @@ export default {
       const prevState = { ...state };
       Object.assign(state, nextState);
       // 传递 prevState
-      if (typeof onDragEnd === 'function') onDragEnd(state, event, {
-        prevState,
-      });
+      if (typeof onDragEnd === 'function')
+        onDragEnd(state, event, {
+          prevState,
+        });
     }
 
     return {
@@ -108,24 +109,22 @@ export default {
 
     return (
       <g>
-        {this.state.isDragging &&
-        (
+        {this.state.isDragging && (
           <rect
             width={this.width}
             height={this.height}
             onMousemove={this.dragMove}
             onMouseup={this.dragEnd}
-            fill='transparent'
+            fill="transparent"
           />
         )}
-        { typeof children === 'function' && (
+        {typeof children === 'function' &&
           children({
             state: this.state,
             dragStart: this.dragStart,
             dragMove: this.dragMove,
             dragEnd: this.dragEnd,
-          })
-        ) }
+          })}
       </g>
     );
   },
diff --git a/webapp/src/components/Drag/index.js b/webapp/src/components/Drag/index.js
index 04547fb..3dfb2b0 100644
--- a/webapp/src/components/Drag/index.js
+++ b/webapp/src/components/Drag/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import Drag from './drag';
 
diff --git a/webapp/src/components/DropdownHeader/index.vue b/webapp/src/components/DropdownHeader/index.vue
index 9ed71b4..1ec0d67 100644
--- a/webapp/src/components/DropdownHeader/index.vue
+++ b/webapp/src/components/DropdownHeader/index.vue
@@ -1,37 +1,39 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-dropdown trigger="click" placement="bottom-start" @command="onCommand">
     <div>
-      <span :class="{primary: filtered}">{{ title }}</span>
+      <span :class="{ primary: dropdownSelected }">{{ title }}</span>
       <i class="el-icon-arrow-down el-icon--right" />
     </div>
     <el-dropdown-menu slot="dropdown" :style="dropdownStyle">
-      <el-dropdown-item
-        v-for="(item, index) in list"
-        :key="index"
-        :command="item[valueTag]"
-      >{{ item[labelTag] }}</el-dropdown-item>
+      <el-dropdown-item v-for="(item, index) in list" :key="index" :command="item[valueTag]">{{
+        item[labelTag]
+      }}</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
 
 <script>
+import { computed, ref } from '@vue/composition-api';
+import { isNil } from 'lodash';
+
 export default {
+  name: 'DropdownHeader',
   props: {
     title: {
       type: String,
@@ -54,19 +56,40 @@ export default {
     // filtered 用于标识是否处于筛选状态
     filtered: {
       type: Boolean,
-      default: false,
+      default: undefined,
+    },
+    filterFunc: {
+      type: Function,
+      default(value) {
+        return !isNil(value);
+      },
     },
     // 下拉框样式可配置
     dropdownStyle: {
       type: String,
-      default: "",
+      default: '',
     },
   },
   setup(props, ctx) {
+    // 记录当前选择值
+    const currentValue = ref(null);
+
     const onCommand = (value) => {
+      currentValue.value = value;
       ctx.emit('command', value);
     };
-    return { onCommand };
+
+    const dropdownSelected = computed(() => {
+      if (!isNil(props.filtered)) {
+        return props.filtered;
+      }
+      return props.filterFunc(currentValue.value);
+    });
+
+    return {
+      onCommand,
+      dropdownSelected,
+    };
   },
 };
 </script>
diff --git a/webapp/src/components/Exception/index.vue b/webapp/src/components/Exception/index.vue
index f9635ee..ddea7fc 100644
--- a/webapp/src/components/Exception/index.vue
+++ b/webapp/src/components/Exception/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template functional>
   <div class="exception">
diff --git a/webapp/src/components/Hamburger/index.vue b/webapp/src/components/Hamburger/index.vue
index 73773af..aebe54c 100644
--- a/webapp/src/components/Hamburger/index.vue
+++ b/webapp/src/components/Hamburger/index.vue
@@ -1,30 +1,23 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div @click="toggleClick">
     <svg
-      :class="{'is-active':isActive}"
+      :class="{ 'is-active': isActive }"
       class="hamburger"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
       width="64"
       height="64"
     >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+      <path
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+      />
     </svg>
   </div>
 </template>
diff --git a/webapp/src/components/IconFont/icon.js b/webapp/src/components/IconFont/icon.js
index 1dcd215..9e25fe3 100644
--- a/webapp/src/components/IconFont/icon.js
+++ b/webapp/src/components/IconFont/icon.js
@@ -1,20 +1,20 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
-import { createElement } from '@vue/composition-api';
+import { h } from '@vue/composition-api';
 import { svgBaseProps } from './utils';
 
 const Icon = {
@@ -29,13 +29,17 @@ const Icon = {
           ...svgBaseProps,
         },
       };
-      return createElement('svg', {
-        style: {
-          // verticalAlign: 'text-bottom'
-          verticalAlign: '-0.15em',
+      return h(
+        'svg',
+        {
+          style: {
+            // verticalAlign: 'text-bottom'
+            verticalAlign: '-0.15em',
+          },
+          ...svgProps,
         },
-        ...svgProps,
-      }, ctx.slots.default());
+        ctx.slots.default()
+      );
     };
 
     // 事件
@@ -50,9 +54,7 @@ const Icon = {
   },
   render() {
     const { iProps } = this;
-    return (
-      <i {...iProps}>{this.renderInnerNode()}</i>
-    );
+    return <i {...iProps}>{this.renderInnerNode()}</i>;
   },
 };
 
diff --git a/webapp/src/components/IconFont/iconfont.js b/webapp/src/components/IconFont/iconfont.js
index 1d981f4..dbaa1f5 100644
--- a/webapp/src/components/IconFont/iconfont.js
+++ b/webapp/src/components/IconFont/iconfont.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import cx from 'classnames';
 import { mergeProps } from '@/utils';
@@ -23,7 +23,7 @@ const scriptUrlCache = new Set();
 const iconList = [];
 
 const create = (options = {}) => {
-  const { scriptUrl, extraIconProps = {}} = options;
+  const { scriptUrl, extraIconProps = {} } = options;
 
   if (!scriptUrlCache.has(scriptUrl)) {
     const script = document.createElement('script');
@@ -32,8 +32,8 @@ const create = (options = {}) => {
     document.body.appendChild(script);
 
     fetch(scriptUrl)
-      .then(response => response.text())
-      .then(params => {
+      .then((response) => response.text())
+      .then((params) => {
         params.replace(/id="([^"]+)"/gi, (...item) => {
           iconList.push(item[1].replace(/icon-/, ''));
         });
@@ -65,11 +65,14 @@ const create = (options = {}) => {
         [`${extraIconProps.class}-${type}`]: !!extraIconProps.class,
       });
       // 合并 vue 参数
-      const iconProps = mergeProps(extraIconProps, data, { class: classString }, { props: restProps, on: listeners });
-
-      return (
-        <Icon {...iconProps}>{content}</Icon>
+      const iconProps = mergeProps(
+        extraIconProps,
+        data,
+        { class: classString },
+        { props: restProps, on: listeners }
       );
+
+      return <Icon {...iconProps}>{content}</Icon>;
     },
   };
 
diff --git a/webapp/src/components/IconFont/index.js b/webapp/src/components/IconFont/index.js
index 62bf6ea..97f9566 100644
--- a/webapp/src/components/IconFont/index.js
+++ b/webapp/src/components/IconFont/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 /**
  * 使用方式：
@@ -26,7 +26,7 @@
 import create from './iconfont';
 
 const IconFont = create({
-  scriptUrl: '//at.alicdn.com/t/font_1756495_6jl45md8krp.js',
+  scriptUrl: '//at.alicdn.com/t/font_1756495_qucjcrwy5rm.js',
   extraIconProps: { class: 'svg-icon' },
 });
 
diff --git a/webapp/src/components/IconFont/utils.js b/webapp/src/components/IconFont/utils.js
index e1f5122..67f6107 100644
--- a/webapp/src/components/IconFont/utils.js
+++ b/webapp/src/components/IconFont/utils.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 // Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
 export const svgBaseProps = {
@@ -22,4 +22,3 @@ export const svgBaseProps = {
   'aria-hidden': 'true',
   focusable: 'false',
 };
-
diff --git a/webapp/src/components/ImageGallery/index.vue b/webapp/src/components/ImageGallery/index.vue
index 558e8b7..20349d1 100644
--- a/webapp/src/components/ImageGallery/index.vue
+++ b/webapp/src/components/ImageGallery/index.vue
@@ -1,42 +1,27 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div :class="rootClass" class="img-gallery">
     <ul v-if="dataImagesLocal.length" :class="rootClass + '__wrapper'">
-      <li
-        v-for="(dataImage) in dataImagesLocal"
-        :key="dataImage.id"
-        :class="rootClass + '__item'"
-      >
+      <li v-for="dataImage in dataImagesLocal" :key="dataImage.id" :class="rootClass + '__item'">
+        <div v-if="!isMultiple" :class="classThumbnail(singleSelected.id, dataImage.id)">
+          <img :src="formatUrl(dataImage.url)" :alt="dataImage.alt" :class="rootClass + '__img'" />
 
-        <div
-          v-if="!isMultiple"
-          :class="classThumbnail(singleSelected.id, dataImage.id)"
-        >
-          <img
-            :src="formatUrl(dataImage.url)"
-            :alt="dataImage.alt"
-            :class="rootClass + '__img'"
-          >
-
-          <label
-            v-if="useLabel"
-            :class="rootClass + '__lbl'"
-          >
+          <label v-if="useLabel" :class="rootClass + '__lbl'">
             {{ dataImage.alt }}
           </label>
         </div>
@@ -52,17 +37,25 @@
             :alt="dataImage.alt"
             :class="rootClass + '__img'"
             @click="onClickImg(dataImage)"
+          />
+          <el-tag
+            v-if="imageTagVisible && !isStatus(dataImage, 'UNANNOTATED')"
+            :hit="false"
+            class="image-tag"
+            :color="imageLabelTag[dataImage.id]['color']"
+            >{{ imageLabelTag[dataImage.id]['text'] }}</el-tag
           >
-          <el-tag v-if="imageTagVisible && statusCodeMap[dataImage.status] !== 'UNANNOTATED'" :hit="false" class="image-tag" :color="imageLabelTag[dataImage.id]['color']">{{ imageLabelTag[dataImage.id]['text'] }}</el-tag>
-          <el-checkbox v-show="showOption(dataImage.id)" :value="selectedMap[dataImage.id]" class="image-checkbox" @change="checked => handleCheck(dataImage, checked)" />
+          <el-checkbox
+            v-show="showOption(dataImage.id)"
+            :value="selectedMap[dataImage.id]"
+            class="image-checkbox"
+            @change="(checked) => handleCheck(dataImage, checked)"
+          />
           <div v-show="showOption(dataImage.id)" :title="dataImage.name" class="img-name-row">
             <div class="img-name">{{ basename(dataImage.url) }}</div>
           </div>
 
-          <label
-            v-if="useLabel"
-            :class="rootClass + '__lbl'"
-          >
+          <label v-if="useLabel" :class="rootClass + '__lbl'">
             {{ dataImage.alt }}
           </label>
         </div>
@@ -74,7 +67,7 @@
 <script>
 import Vue from 'vue';
 import { bucketHost } from '@/utils/minIO';
-import { fileCodeMap, findKey, statusCodeMap } from '@/views/dataset/util';
+import { fileCodeMap, findKey, isStatus } from '@/views/dataset/util';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 const path = require('path');
@@ -119,13 +112,13 @@ export default {
       multipleSelected: [],
       imageTagVisible: true,
       imgStatusMap: {
-        'UNRECOGNIZED': {'text': '未识别', 'color': '#FFFFFF'},
-        'UNANNOTATED': {'text': '未标注', 'color': '#FFFFFF'},
-        'AUTO_ANNOTATED': { 'text': '自动', 'color': '#468CFF' },
-        'MANUAL_ANNOTATED': { 'text': '人工', 'color': '#FF9943' },
+        UNRECOGNIZED: { text: '未识别', color: '#FFFFFF' },
+        UNANNOTATED: { text: '未标注', color: '#FFFFFF' },
+        AUTO_ANNOTATED: { text: '自动', color: '#468CFF' },
+        MANUAL_ANNOTATED: { text: '人工', color: '#FF9943' },
       },
       hoverImg: null,
-      statusCodeMap,
+      isStatus,
     };
   },
   computed: {
@@ -142,21 +135,28 @@ export default {
     },
     imageLabelTag() {
       const labelTag = {};
-      this.dataImages.forEach((item) => {
-        const statusInfo = this.imgStatusMap[findKey(item.status, fileCodeMap)];
-        const annotation = JSON.parse(item.annotation);
-        let categoryName = '未识别';
-        let tagColor = '#db2a2a';
-        if (statusInfo && (annotation instanceof Array) && annotation.length > 0) {
-          const categoryId = annotation[0].category_id;
-          categoryName = this.categoryId2Name[categoryId];
-          tagColor = statusInfo.color;
-        }
-        labelTag[item.id] = {
-          'text': `${statusInfo.text} | ${categoryName}`,
-          'color': tagColor,
-        };
-      });
+      try {
+        this.dataImages.forEach((item) => {
+          const statusInfo = this.imgStatusMap[findKey(item.status, fileCodeMap)];
+          const annotation = JSON.parse(item.annotation);
+          let categoryName = '未识别';
+          let tagColor = '#db2a2a';
+          if (statusInfo && Array.isArray(annotation) && annotation.length > 0) {
+            annotation.sort((a, b) => b.score - a.score); // 标注按照score降序排序
+            const categoryId = annotation[0].category_id; // 取score最高的标注标签予以显示
+            categoryName = this.categoryId2Name[categoryId] || '';
+            tagColor = statusInfo.color;
+          }
+          const divider = categoryName && `| ${categoryName}`;
+          labelTag[item.id] = {
+            text: `${statusInfo.text} ${divider}`,
+            color: tagColor,
+          };
+        });
+      } catch (err) {
+        console.error(err);
+        throw err;
+      }
       return labelTag;
     },
   },
@@ -187,7 +187,7 @@ export default {
       return `${baseMultipleClass}`;
     },
     onSelectImage(objectImage) {
-      this.singleSelected = { ...this.singleSelected, ...objectImage};
+      this.singleSelected = { ...this.singleSelected, ...objectImage };
       this.$emit('onselectimage', objectImage);
     },
     onClickImg(objectImage) {
@@ -211,7 +211,7 @@ export default {
       return this.hoverImg?.id === id;
     },
     hasSelected(id) {
-      return this.multipleSelected.find(item => id === item);
+      return this.multipleSelected.find((item) => id === item);
     },
     showOption(id) {
       return this.isHover(id) || this.hasSelected(id);
@@ -234,7 +234,7 @@ export default {
       this.$emit('onselectmultipleimage', this.multipleSelected);
     },
     selectAll() {
-      this.multipleSelected = this.dataImages.map(d => d.id);
+      this.multipleSelected = this.dataImages.map((d) => d.id);
       for (const key in this.selectedMap) {
         this.selectedMap[key] = true;
       }
@@ -257,7 +257,7 @@ export default {
     setInitialSelection() {
       if (this.selectImgsId) {
         if (!this.isMultiple && this.selectImgsId.length === 1) {
-          this.singleSelected = { ...this.selectImgsId[0]};
+          this.singleSelected = { ...this.selectImgsId[0] };
         } else {
           this.multipleSelected = [].concat(this.selectImgsId);
         }
@@ -271,8 +271,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/assets/styles/variables.scss";
-@import "~@/assets/styles/mixin.scss";
+@import '~@/assets/styles/variables.scss';
+@import '~@/assets/styles/mixin.scss';
 
 .img-gallery {
   min-height: 200px;
diff --git a/webapp/src/components/InfoAlert/index.vue b/webapp/src/components/InfoAlert/index.vue
new file mode 100644
index 0000000..4fdc871
--- /dev/null
+++ b/webapp/src/components/InfoAlert/index.vue
@@ -0,0 +1,44 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template functional>
+  <div class="el-alert el-alert--primary is-dark">
+    <div class="el-alert-content">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'InfoAlert',
+};
+</script>
+<style scoped lang="scss">
+@import '~@/assets/styles/variables.scss';
+
+.el-alert--primary {
+  padding-top: 7px;
+  padding-bottom: 7px;
+  line-height: 30px;
+  color: #2e4fde;
+  background-color: $primaryPlainBgColor;
+  border: 1px solid $primaryBorderColor;
+
+  .el-alert-content {
+    width: 100%;
+  }
+}
+</style>
diff --git a/webapp/src/components/InfoRadio/index.js b/webapp/src/components/InfoRadio/index.js
new file mode 100644
index 0000000..0792fbf
--- /dev/null
+++ b/webapp/src/components/InfoRadio/index.js
@@ -0,0 +1,19 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import InfoRadio from './info-radio';
+
+export default InfoRadio;
diff --git a/webapp/src/components/InfoRadio/info-radio.vue b/webapp/src/components/InfoRadio/info-radio.vue
new file mode 100644
index 0000000..4b70840
--- /dev/null
+++ b/webapp/src/components/InfoRadio/info-radio.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="info-data-radio">
+    <el-radio-group ref="radioRef" v-model="state.sValue" v-bind="attrs" v-on="listeners">
+      <component
+        :is="radioElement"
+        v-for="item in state.list"
+        :key="item.value"
+        :label="item.value"
+        :disabled="item.disabled"
+        :title="item.label"
+      >
+        {{ item.label }}
+      </component>
+    </el-radio-group>
+  </div>
+</template>
+<script>
+import { reactive, computed, watch, ref } from '@vue/composition-api';
+import { isNil } from 'lodash';
+
+export default {
+  name: 'InfoRadio',
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    request: Function, // 预留
+    value: {
+      type: [String, Number],
+    },
+    type: {
+      type: String,
+    },
+    labelKey: {
+      type: String,
+      default: 'label',
+    },
+    valueKey: {
+      type: String,
+      default: 'value',
+    },
+    dataSource: {
+      type: Array,
+      default: () => [],
+    },
+    transformOptions: Function,
+    innerRef: Function,
+  },
+  setup(props, ctx) {
+    const { labelKey, valueKey, innerRef, transformOptions } = props;
+
+    const elementRef = !isNil(innerRef) ? innerRef() : ref(null);
+
+    const buildOptions = (list) =>
+      list.map((d) => ({
+        ...d,
+        label: d[labelKey],
+        value: d[valueKey],
+      }));
+
+    const rawList = buildOptions(props.dataSource);
+
+    const list = typeof transformOptions === 'function' ? transformOptions(rawList) : rawList;
+
+    const state = reactive({
+      list,
+      sValue: !isNil(props.value) ? props.value : undefined,
+    });
+
+    const handleChange = (value) => {
+      ctx.emit('change', value);
+    };
+
+    watch(
+      () => props.value,
+      (next) => {
+        Object.assign(state, {
+          sValue: next,
+        });
+      }
+    );
+
+    watch(
+      () => props.dataSource,
+      (next) => {
+        Object.assign(state, {
+          list: buildOptions(next),
+        });
+      }
+    );
+
+    const radioElement = computed(() => (props.type === 'button' ? 'el-radio-button' : 'el-radio'));
+    const attrs = computed(() => ctx.attrs);
+    const listeners = computed(() => ({
+      ...ctx.listeners,
+      change: handleChange,
+    }));
+
+    return {
+      state,
+      attrs,
+      elementRef,
+      listeners,
+      radioElement,
+      handleChange,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/components/InfoSelect/index.js b/webapp/src/components/InfoSelect/index.js
index d226bd7..473e6c4 100644
--- a/webapp/src/components/InfoSelect/index.js
+++ b/webapp/src/components/InfoSelect/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import InfoSelect from './info-select';
 
diff --git a/webapp/src/components/InfoSelect/info-select.vue b/webapp/src/components/InfoSelect/info-select.vue
index 87c93d7..7210642 100644
--- a/webapp/src/components/InfoSelect/info-select.vue
+++ b/webapp/src/components/InfoSelect/info-select.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="info-data-select">
@@ -62,7 +62,7 @@ export default {
     },
     dataSource: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     innerRef: Function,
   },
@@ -71,11 +71,12 @@ export default {
 
     const selectRef = !isNil(innerRef) ? innerRef() : ref(null);
 
-    const buildOptions = (list) => list.map(d => ({
-      ...d,
-      label: d[labelKey],
-      value: d[valueKey],
-    }));
+    const buildOptions = (list) =>
+      list.map((d) => ({
+        ...d,
+        label: d[labelKey],
+        value: d[valueKey],
+      }));
 
     const state = reactive({
       list: buildOptions(props.dataSource),
@@ -86,24 +87,26 @@ export default {
       ctx.emit('change', value);
     };
 
-    watch(() => props.value, (next) => {
-      Object.assign(state, {
-        sValue: next,
-      });
-    }, {
-      lazy: true,
-    });
+    watch(
+      () => props.value,
+      (next) => {
+        Object.assign(state, {
+          sValue: next,
+        });
+      }
+    );
 
-    watch(() => props.dataSource, (next) => {
-      Object.assign(state, {
-        list: buildOptions(next),
-      });
-    }, {
-      lazy: true,
-    });
+    watch(
+      () => props.dataSource,
+      (next) => {
+        Object.assign(state, {
+          list: buildOptions(next),
+        });
+      }
+    );
 
     const attrs = computed(() => ctx.attrs);
-    const selectEleWidth =computed(() => props.width || '100%');
+    const selectEleWidth = computed(() => props.width || '100%');
     const listeners = computed(() => ({
       ...ctx.listeners,
       change: handleChange,
diff --git a/webapp/src/components/InfoTable/column.js b/webapp/src/components/InfoTable/column.js
index 7f8500c..6f02794 100644
--- a/webapp/src/components/InfoTable/column.js
+++ b/webapp/src/components/InfoTable/column.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export default {
   name: 'info-table-column',
@@ -24,7 +24,7 @@ export default {
 
     if (typeof props.render === 'function') {
       columnProps.scopedSlots = {
-        default: d => {
+        default: (d) => {
           return props.render(d, { refresh: props.refresh });
         },
       };
diff --git a/webapp/src/components/InfoTable/index.js b/webapp/src/components/InfoTable/index.js
index 4edb553..ad4340b 100644
--- a/webapp/src/components/InfoTable/index.js
+++ b/webapp/src/components/InfoTable/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import InfoTable from './info-table';
 
diff --git a/webapp/src/components/InfoTable/info-table.vue b/webapp/src/components/InfoTable/info-table.vue
index c52e215..4cab7be 100644
--- a/webapp/src/components/InfoTable/info-table.vue
+++ b/webapp/src/components/InfoTable/info-table.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="info-data-table">
@@ -135,7 +135,7 @@ export default {
       });
     };
 
-    const queryList = async(cfg = {}) => {
+    const queryList = async (cfg = {}) => {
       if (state.loading) {
         return;
       }
@@ -149,7 +149,7 @@ export default {
           ...cfg,
         });
         // 这边按照统一的 result, page 来进行管理
-        const { result = [], page = {}} = res || {};
+        const { result = [], page = {} } = res || {};
         setPageInfo({ total: page.total });
         setData(result);
       } finally {
@@ -159,44 +159,47 @@ export default {
 
     onMounted(() => {
       // 首先判断是否为异步请求
-      if(typeof request === 'function') {
+      if (typeof request === 'function') {
         queryList();
         if (typeof actionRef === 'function') {
           actionRef().value = {
             refresh: queryList,
           };
         }
-      } else if(Array.isArray(props.dataSource)) {
+      } else if (Array.isArray(props.dataSource)) {
         // 检测是否为静态数据源
         setData(props.dataSource);
       }
     });
 
-    watch(() => pageInfo.pageSize, () => {
-      setPageInfo({ ...pageInfo, current: 1 });
-      queryList();
-    }, {
-      lazy: true,
-    });
+    watch(
+      () => pageInfo.pageSize,
+      () => {
+        setPageInfo({ ...pageInfo, current: 1 });
+        queryList();
+      }
+    );
 
-    watch(() => props.dataSource, (next) => {
-      setData(next);
-    }, {
-      lazy: true,
-    });
+    watch(
+      () => props.dataSource,
+      (next) => {
+        setData(next);
+      }
+    );
 
-    watch(() => pageInfo.current, () => {
-      queryList();
-    }, {
-      lazy: true,
-    });
+    watch(
+      () => pageInfo.current,
+      () => {
+        queryList();
+      }
+    );
 
     return {
       state,
       pageAttrs,
       pageInfo,
       refresh: queryList,
-      setPageInfo: info =>
+      setPageInfo: (info) =>
         setPageInfo({
           ...pageInfo,
           ...info,
diff --git a/webapp/src/components/InlineTableEdit/index.vue b/webapp/src/components/InlineTableEdit/index.vue
index b16b242..2eae613 100644
--- a/webapp/src/components/InlineTableEdit/index.vue
+++ b/webapp/src/components/InlineTableEdit/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <ValidationObserver ref="observerRef">
@@ -93,12 +93,12 @@ export default {
 
     // 编辑标注名称
     const handleOk = () => {
-      observerRef.value.validate().then(success => {
+      observerRef.value.validate().then((success) => {
         if (!success) {
           return;
         }
         // 判断是否发生过变更
-        if(String(state.value) !== String(props.row[valueBy])) {
+        if (String(state.value) !== String(props.row[valueBy])) {
           ctx.emit('handleOk', state.value, props.row);
         }
         handleCancel();
@@ -109,16 +109,20 @@ export default {
       // onShow 的时候重置
       state.value = props.row[valueBy];
       Vue.nextTick(() => {
-        const input = inputRef && inputRef.value.$refs.input || inputRef && inputRef.value.$refs.textarea;
+        const input =
+          (inputRef && inputRef.value.$refs.input) || (inputRef && inputRef.value.$refs.textarea);
         input && input.focus();
       });
     };
 
-    watch(() => props.row, (next) => {
-      if (next) {
-        state.value = next[valueBy];
+    watch(
+      () => props.row,
+      (next) => {
+        if (next) {
+          state.value = next[valueBy];
+        }
       }
-    });
+    );
 
     return {
       props,
diff --git a/webapp/src/components/LogContainer/index.vue b/webapp/src/components/LogContainer/index.vue
index 7c4eaaa..e058333 100644
--- a/webapp/src/components/LogContainer/index.vue
+++ b/webapp/src/components/LogContainer/index.vue
@@ -1,23 +1,21 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <div
-    v-mouse-wheel="getLog"
-  >
+  <div v-mouse-wheel="getLog">
     <prism-render :code="logTxt" />
   </div>
 </template>
@@ -86,28 +84,31 @@ export default {
         ...this.options,
         startLine: this.currentLogLine,
         lines: this.logLines,
-      }).then(res => {
-        this.logList = this.logList.concat(res.content);
-        this.currentLogLine = res.endLine + 1;
+      })
+        .then((res) => {
+          this.logList = this.logList.concat(res.content);
+          this.currentLogLine = res.endLine + 1;
 
-        // 当请求到的行数小于请求行数时，冻结请求一秒
-        if (res.lines < this.logLines) {
-          this.pauseRequest();
-          // 当返回行数小于三行时提示日志已到达底部
-          // TODO: logMsgInstance 到达底部提示是否应该设为，当有新的提示出现，关闭旧的提示，而不是等三秒后自动消失?
-          if (!noWarning && res.lines < 3 && !this.logMsgInstance) {
-            this.logMsgInstance = this.$message.warning({
-              message: '已经到达日志底部了。',
-              onClose: this.onLogMsgClose,
-            });
+          // 当请求到的行数小于请求行数时，冻结请求一秒
+          if (res.lines < this.logLines) {
+            this.pauseRequest();
+            // 当返回行数小于三行时提示日志已到达底部
+            // TODO: logMsgInstance 到达底部提示是否应该设为，当有新的提示出现，关闭旧的提示，而不是等三秒后自动消失?
+            if (!noWarning && res.lines < 3 && !this.logMsgInstance) {
+              this.logMsgInstance = this.$message.warning({
+                message: '已经到达日志底部了。',
+                onClose: this.onLogMsgClose,
+              });
+            }
           }
-        }
-      }).catch(err => {
-        this.pauseRequest();
-        throw err;
-      }).finally(() => {
-        this.logLoading = false;
-      });
+        })
+        .catch((err) => {
+          this.pauseRequest();
+          throw err;
+        })
+        .finally(() => {
+          this.logLoading = false;
+        });
     },
     reset(getLog = false) {
       this.logList = [];
diff --git a/webapp/src/components/LogContainer/podLogContainer.vue b/webapp/src/components/LogContainer/podLogContainer.vue
index e257f00..badec29 100644
--- a/webapp/src/components/LogContainer/podLogContainer.vue
+++ b/webapp/src/components/LogContainer/podLogContainer.vue
@@ -1,37 +1,27 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="rel pod-log-container-inside">
-    <div
-      v-if="showFunctional"
-    >
+    <div v-if="showFunctional">
       <el-tooltip effect="dark" content="日志置顶" placement="left">
-        <el-button
-          class="log-left-btn"
-          icon="el-icon-caret-top"
-          @click="onToTop"
-        />
+        <el-button class="log-left-btn" icon="el-icon-caret-top" @click="onToTop" />
       </el-tooltip>
       <el-tooltip effect="dark" content="日志置底" placement="left">
-        <el-button
-          class="log-left-btn"
-          icon="el-icon-caret-bottom"
-          @click="onToBottom"
-        />
+        <el-button class="log-left-btn" icon="el-icon-caret-bottom" @click="onToBottom" />
       </el-tooltip>
       <el-tooltip effect="dark" content="自动跟随" placement="left">
         <el-button
@@ -42,18 +32,10 @@
         />
       </el-tooltip>
       <el-tooltip effect="dark" content="清空日志" placement="left">
-        <el-button
-          icon="el-icon-delete"
-          class="log-left-btn"
-          @click="onClearLogs"
-        />
+        <el-button icon="el-icon-delete" class="log-left-btn" @click="onClearLogs" />
       </el-tooltip>
     </div>
-    <div
-      ref="logContent"
-      v-mouse-wheel="params"
-      class="log-content"
-    >
+    <div ref="logContent" v-mouse-wheel="params" class="log-content">
       <prism-render :code="logTxt" />
     </div>
   </div>
@@ -76,9 +58,9 @@ export default {
     PrismRender,
   },
   props: {
-    // 包含podName的pod对象, 用于请求日志总行数
-    podName: {
-      type: String,
+    // 包含 podName、namespace 的 podVO 对象
+    pod: {
+      type: Object,
       required: true,
     },
     // 查询日志需要用到的其他参数
@@ -96,15 +78,6 @@ export default {
       type: Number,
       default: 200,
     },
-    // 顶部展示特定信息
-    showMsg: {
-      type: Boolean,
-      default: false,
-    },
-    msg: {
-      type: String,
-      default: '',
-    },
     disabled: {
       type: Boolean,
       default: false,
@@ -123,16 +96,15 @@ export default {
       logBottomLine: 0, // 当前日志数组最后一行的行号
 
       autoFollow: false, // 自动跟随
-      topWarning: true, // 向上滚动请求时，如果已经到顶了，会提示一次日志到顶；每次请求日志时刷新
+      noRenderTag: false, // 自动跟随中点击清空时，对于下一次的结果不进行处理
     };
   },
   computed: {
     params() {
-      return {up: throttle(1000, this.mouseUp), down: throttle(1000, this.mouseDown)};
+      return { up: throttle(1000, this.mouseUp), down: throttle(1000, this.mouseDown) };
     },
-    // 传入的 msg 信息会展示在所有日志的最前面
     logTxt() {
-      return `${this.showMsg ? `${this.msg}\n` : ''}${this.logList.join('\n')}`;
+      return this.logList.length ? this.logList.join('\n') : '暂无日志\n';
     },
     // 确保存放日志的数组上限至少为两倍日志请求行数。
     localLineLimit() {
@@ -148,17 +120,25 @@ export default {
     this.mouseDownThrottle = throttle(1000, this.mouseDown);
     this.mouseUpThrottle = throttle(1000, this.mouseUp);
   },
+  deactivated() {
+    // 切出时停止跟随轮询
+    this.stopPolling();
+  },
   methods: {
     getLog(startLine, lines) {
-      if (!this.podName) {
-        this.message('没有传入 podName, 无法查询日志');
-        return;
+      if (!this.pod.namespace) {
+        this.message('缺少 namespace 信息, 无法查询日志');
+        return Promise.reject();
+      }
+      if (!this.pod.podName) {
+        this.message('缺少 podName 信息, 无法查询日志');
+        return Promise.reject();
       }
       startLine = startLine || 1;
       lines = lines || this.logLines;
-      this.topWarning = true;
       return getPodLog({
-        podName: this.podName,
+        podName: this.pod.podName,
+        namespace: this.pod.namespace,
         startLine,
         lines,
         ...this.options,
@@ -169,18 +149,13 @@ export default {
     async mouseUp() {
       // 如果已处于第一行或没有日志, 不向上请求
       if (this.logTopLine <= 1) {
-        // 只进行一次到达顶部提示；任意请求日志后刷新
-        if (this.topWarning) {
-          this.topWarning = false;
-          if(!this.logMsgInstance) {
-            this.message('已经到达日志顶部.');
-          }
-        }
         return;
       }
-      
+
       // 如果此时元素已不存在，则不进行任何其他操作
-      if (!this.$refs.logContent) { return; }
+      if (!this.$refs.logContent) {
+        return;
+      }
 
       // 向上滚动时，起始行为 logTopLine 减去请求行数
       let reqStartLine = this.logTopLine - this.logLines;
@@ -189,19 +164,24 @@ export default {
       // 请求前日志区高度
       const beforeHeight = this.$refs.logContent.scrollHeight;
 
-      const { content, startLine: resStartLine } = await this.getLog(reqStartLine, this.logTopLine - reqStartLine);
+      const result = await this.getLog(reqStartLine, this.logTopLine - reqStartLine);
+      if (!result) return;
+      const { content, startLine: resStartLine } = result;
+
       this.logList = content.concat(this.logList);
 
       this.$nextTick(() => {
         // 如果此时元素已不存在，则不进行任何其他操作
-        if (!this.$refs.logContent) { return; }
+        if (!this.$refs.logContent) {
+          return;
+        }
 
         // 请求后日志区高度，从而设置顶部高度差
         const afterHeight = this.$refs.logContent.scrollHeight;
         this.$refs.logContent.scrollTop = afterHeight - beforeHeight;
 
         // 限制总行数为 localLineLimit
-        if(this.logList.length > this.localLineLimit) {
+        if (this.logList.length > this.localLineLimit) {
           this.logList.splice(this.localLineLimit);
         }
 
@@ -211,42 +191,71 @@ export default {
     },
 
     // 滚轮向上滚动到底部时的事件
-    async mouseDown(disableWarning) {
+    async mouseDown(toBottom = false) {
       // 如果此时元素已不存在，则不进行任何其他操作
-      if (!this.$refs.logContent) { return; }
+      if (!this.$refs.logContent) {
+        return;
+      }
+
+      // 不进行请求，同时重置 tag
+      if (this.noRenderTag) {
+        this.noRenderTag = false;
+        return;
+      }
 
       // 请求前日志区顶部高度
       const beforeTop = this.$refs.logContent.scrollTop;
 
-      const { content, endLine, lines } = await this.getLog(this.logBottomLine + 1);
+      const result = await this.getLog(this.logBottomLine + 1);
+      if (!result) return;
+      const { content, endLine } = result;
       this.logList = this.logList.concat(content);
+      this.logBottomLine = endLine; // 向下滚动时, 返回的 endLine 就是最后一行的行号
+
+      if (toBottom) {
+        if (this.logList.length > this.localLineLimit) {
+          this.logList.splice(0, this.logList.length - this.localLineLimit);
+        }
+        // 将进度条拉到底部
+        this.$nextTick(() => {
+          // 如果此时元素已不存在，则不进行任何其他操作
+          if (!this.$refs.logContent) {
+            return;
+          }
+
+          this.$refs.logContent.scrollTop = this.$refs.logContent.scrollHeight;
+        });
+        return;
+      }
 
       this.$nextTick(() => {
         // 如果此时元素已不存在，则不进行任何其他操作
-        if (!this.$refs.logContent) { return; }
+        if (!this.$refs.logContent) {
+          return;
+        }
 
         // 请求后日志区高度
         const afterReqHeight = this.$refs.logContent.scrollHeight;
 
         // 限制总行数为 localLineLimit
-        if(this.logList.length > this.localLineLimit) {
+        if (this.logList.length > this.localLineLimit) {
           this.logList.splice(0, this.logList.length - this.localLineLimit);
         }
 
         this.$nextTick(() => {
           // 如果此时元素已不存在，则不进行任何其他操作
-          if (!this.$refs.logContent) { return; }
-          
-          // 剪切后日志区高度，计算高度变化差，设置去掉高度差后的 scrollTop 
+          if (!this.$refs.logContent) {
+            return;
+          }
+
+          // 剪切后日志区高度，计算高度变化差，设置去掉高度差后的 scrollTop
           const afterSpliceHeight = this.$refs.logContent.scrollHeight;
-          this.$refs.logContent.scrollTop = Math.max(0, beforeTop - (afterReqHeight - afterSpliceHeight));
+          this.$refs.logContent.scrollTop = Math.max(
+            0,
+            beforeTop - (afterReqHeight - afterSpliceHeight)
+          );
 
-          this.logBottomLine = endLine; // 向下滚动时, 返回的 endLine 就是最后一行的行号
           this.logTopLine = this.logBottomLine - this.logList.length + 1; // 此时第一行的行号需要通过 logList 的长度进行计算
-
-          if (lines < 3 && !this.logMsgInstance && !this.autoFollow && disableWarning !== true) {
-            this.message('已经到达日志底部.');
-          }
         });
       });
     },
@@ -257,7 +266,7 @@ export default {
       this.logList = [];
       this.logTopLine = this.logBottomLine = 0;
       this.$nextTick(() => {
-        this.mouseDown(true);
+        this.mouseDown();
       });
     },
 
@@ -292,6 +301,10 @@ export default {
 
     // 清空当前日志内容
     async onClearLogs() {
+      if (this.autoFollow) {
+        // 如果已经在自动跟随中，则设置 tag
+        this.noRenderTag = true;
+      }
       await this.changeAutoFollow(true);
       // 开启自动跟随请求最底部日志之后，清空当前日志列表
       this.logList = [];
@@ -306,34 +319,28 @@ export default {
         return;
       }
       this.logList = [];
-      const countObj = await countPodLogs([{ podName: this.podName }]); // 获取对应pod日志总行数
-      const linesCount = countObj[this.podName];
+      const countObj = await countPodLogs(this.pod.namespace, [this.pod]); // 获取对应pod日志总行数
+      const linesCount = countObj[this.pod.podName];
 
       // 请求最后的 logLines 行
       this.logBottomLine = Math.max(linesCount - this.logLines, 0);
-      await this.mouseDown();
-      // 将进度条拉到底部
-      this.$nextTick(() => {
-        // 如果此时元素已不存在，则不进行任何其他操作
-        if (!this.$refs.logContent) { return; }
-
-        this.$refs.logContent.scrollTop = this.$refs.logContent.scrollHeight;
-      });
+      await this.mouseDown(true);
     },
 
+    // 日志跟随实现
     async logPolling() {
-      if (!this.autoFollow) { return; }
+      if (!this.autoFollow) {
+        return;
+      }
 
-      await this.mouseDownThrottle();
-      // 将进度条拉到底部
-      this.$nextTick(() => {
-        // 如果此时元素已不存在，则不进行任何其他操作
-        if (!this.$refs.logContent) { return; }
+      await this.mouseDownThrottle(true);
 
-        this.$refs.logContent.scrollTop = this.$refs.logContent.scrollHeight;
-      });
       setTimeout(this.logPolling, 1000);
     },
+    // 停止跟随
+    stopPolling() {
+      this.autoFollow = false;
+    },
 
     // 判断在自动跟随滚轮是否向上
     watchScroll(event) {
@@ -361,4 +368,8 @@ export default {
   overflow: auto;
   border: #ccc solid 1px;
 }
+
+::v-deep pre[class*='language-'] {
+  margin: 0;
+}
 </style>
diff --git a/webapp/src/components/LoginPublic/index.vue b/webapp/src/components/LoginPublic/index.vue
index 01a2d3e..8a736fd 100644
--- a/webapp/src/components/LoginPublic/index.vue
+++ b/webapp/src/components/LoginPublic/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div style="height: 100%;">
@@ -21,12 +21,8 @@
       <div class="right" />
     </div>
     <div id="content">
-      <div class="left">
-        <div
-          class="image"
-          @mouseenter="stopSlider"
-          @mouseleave="startSlider"
-        >
+      <div class="left mb-dn">
+        <div class="image" @mouseenter="stopSlider" @mouseleave="startSlider">
           <transition-group ref="loginList" name="login-list" tag="ul">
             <li
               v-for="item in loginImageList"
@@ -35,25 +31,21 @@
               class="image-item"
             >
               <!-- 文本介绍 -->
-              <div class="carousel-title">{{item.title}}</div>
-              <div class="carousel-text">{{item.text}}</div>
+              <div class="carousel-title">{{ item.title }}</div>
+              <div class="carousel-text">{{ item.text }}</div>
             </li>
           </transition-group>
           <!-- 翻页指示器 -->
           <ul class="indicator-item">
             <li
-              v-for="(item,index) in loginImageList.length"
+              v-for="(item, index) in loginImageList.length"
               :key="index"
-              :class="{'active': index === currentIndex}"
+              :class="{ active: index === currentIndex }"
               @click="currentIndex = index"
-            >
-            </li>
+            ></li>
           </ul>
           <!--  底部  -->
-          <div
-            v-if="$store.state.settings.showFooter"
-            id="el-login-footer"
-          >
+          <div v-if="$store.state.settings.showFooter" id="el-login-footer">
             <span>{{ $store.state.settings.footerTxt }}</span>
             <template v-if="$store.state.settings.caseNumber">
               <span>⋅</span>
@@ -62,11 +54,11 @@
           </div>
         </div>
       </div>
-      <div class="right">
+      <div class="right mb-w100">
         <!-- 左侧部分 -->
         <slot />
         <div class="footer-logo">
-          <img src="@/assets/images/dubhe-logo.svg" width="74" alt>
+          <img src="@/assets/images/dubhe-logo.svg" width="74" alt />
         </div>
       </div>
     </div>
@@ -282,4 +274,3 @@ export default {
   transition: all 0.5s linear;
 }
 </style>
-
diff --git a/webapp/src/components/MsgPopover/index.vue b/webapp/src/components/MsgPopover/index.vue
new file mode 100644
index 0000000..00f6799
--- /dev/null
+++ b/webapp/src/components/MsgPopover/index.vue
@@ -0,0 +1,50 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved. * * Licensed under the Apache License,
+Version 2.0 (the "License"); * you may not use state file except in compliance with the License. *
+You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
+required by applicable law or agreed to in writing, software * distributed under the License is
+distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. * See the License for the specific language governing permissions and * limitations under
+the License. * ============================================================= */
+
+<template>
+  <el-popover v-if="show" placement="right" width="400" trigger="hover" :offset="20">
+    <el-table :data="msgList" :show-header="false" :empty-text="emptyText">
+      <el-table-column prop="name" show-overflow-tooltip />
+      <el-table-column prop="message" show-overflow-tooltip />
+    </el-table>
+    <i slot="reference" class="el-icon-warning-outline primary f16 v-text-top" />
+  </el-popover>
+</template>
+
+<script>
+import { computed } from '@vue/composition-api';
+
+export default {
+  props: {
+    show: Boolean,
+    statusDetail: {
+      type: String,
+      require: true,
+    },
+    emptyText: {
+      type: String,
+      default: '暂无提示信息',
+    },
+  },
+  setup(props) {
+    const msgList = computed(() => {
+      try {
+        const msg = JSON.parse(props.statusDetail);
+        const list = Object.keys(msg).map((m) => ({ name: m, message: msg[m] }));
+        return list;
+      } catch (e) {
+        return [];
+      }
+    });
+
+    return {
+      msgList,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/components/PodMonitor/index.vue b/webapp/src/components/PodMonitor/index.vue
new file mode 100644
index 0000000..d23626d
--- /dev/null
+++ b/webapp/src/components/PodMonitor/index.vue
@@ -0,0 +1,498 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div v-loading="loadingHistory" class="pod-monitor-container">
+    <div v-if="displayCpu" :id="cpuId" class="charts" />
+    <div v-if="displayMem" :id="memId" class="charts" />
+    <div v-if="displayGpu && !usePodName" class="gpu-select-container">
+      <label class="pr-20">GPU 节点</label>
+      <el-select
+        v-model="selectedPod"
+        placeholder="请选择展示的节点"
+        class="my-10"
+        filterable
+        @change="onPodSelectChange"
+      >
+        <el-option label="全部" :value="null" />
+        <el-option v-for="pod in gpuPodList" :key="pod" :label="pod" :value="pod" />
+      </el-select>
+    </div>
+    <div v-if="displayGpu" :id="gpuId" class="charts" />
+  </div>
+</template>
+
+<script>
+import { nanoid } from 'nanoid';
+import echarts from 'echarts';
+
+import { parseTime, cpuPercentage, memNormalize, ONE_HOUR, toUnixTimestamp } from '@/utils';
+import { getMetrics, getHistoryMetrics } from '@/api/system/pod';
+
+import { defaultOption, cpuOption, memOption, gpuOption } from './util';
+
+export default {
+  name: 'PodMonitor',
+  props: {
+    namespace: {
+      type: String,
+      default: null,
+    },
+    resourceName: {
+      type: String,
+      default: null,
+    },
+    podName: [Array, String], // podName 支持直接传入或以数组传入
+    // idTag 用于构成 echarts 元素的唯一 ID，避免同页面多个监控组件导致 ID 重复
+    idTag: {
+      type: String,
+      default: nanoid(4),
+    },
+    // timeStep 用于指定多久轮询一次，单位毫秒，k8s 五秒更新一次数据，建议不小于 5000
+    timeStep: {
+      type: Number,
+      default: 5000,
+    },
+    // timePoints 用于指定保持的时间点个数
+    timePoints: {
+      type: Number,
+      default: 12 * 60 * 4, // 默认保留 5秒/次-四小时 的数据
+    },
+    // timeFormat 用于格式化 X 轴时间展示，规则详见 @/utils -> parseTime
+    timeFormat: {
+      type: String,
+      default: '{h}:{i}:{s}',
+    },
+    displayCpu: {
+      type: Boolean,
+      default: true,
+    },
+    displayMem: {
+      type: Boolean,
+      default: true,
+    },
+    displayGpu: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      pollId: 1,
+      loadingHistory: false,
+      polling: false, // 是否正在查询状态
+
+      cpuData: {}, // 以 pod 为键的一个对象
+      memData: {},
+      gpuData: {},
+
+      cpuHistoryTimeArray: [], // 拉取历史数据时，CPU、内存、GPU 使用独立的时间点数组
+      memHistoryTimeArray: [],
+      gpuHistoryTimeArray: [],
+      pollTimeArray: [], // 轮询期间使用统一的时间点数组
+
+      cpuChart: null, // CPU 折线图实例
+      memChart: null, // 内存折线图实例
+      gpuChart: null, // GPU 折线图实例
+
+      podNameSet: new Set(),
+      selectedPod: null,
+    };
+  },
+  computed: {
+    usePodName() {
+      // 如果 podName 传入数组，则验证数组是否有成员
+      if (Array.isArray(this.podName)) return this.podName.length > 0;
+      return Boolean(this.podName);
+    },
+    cpuId() {
+      return `pod-monitor-cpu-${this.idTag}`;
+    },
+    memId() {
+      return `pod-monitor-mem-${this.idTag}`;
+    },
+    gpuId() {
+      return `pod-monitor-gpu-${this.idTag}`;
+    },
+    gpuPodList() {
+      return Object.keys(this.gpuData);
+    },
+    monitorParam() {
+      const param = {
+        namespace: this.namespace,
+      };
+      if (this.usePodName) {
+        param.podNames = this.podName;
+      } else {
+        param.resourceName = this.resourceName || undefined;
+      }
+      return param;
+    },
+  },
+  beforeDestroy() {
+    this.stop();
+  },
+  methods: {
+    async getMetrics(option = {}) {
+      // 如果 namespace 不存在，或者 resourceName 和 podName 都不存在，则停止查询直接返回
+      if (!this.namespace || (!this.resourceName && !this.usePodName)) {
+        return;
+      }
+      // 如果不存在 pollId，或者 pollId 与当前 pollId 不一致，说明已经不是同一轮查询，则不继续查询直接返回
+      if (!option.pollId || option.pollId !== this.pollId) return;
+
+      const datas = await getMetrics(this.monitorParam);
+
+      this.pushTime();
+
+      datas.forEach(this.parseData);
+
+      this.drawCharts();
+
+      setTimeout(() => {
+        this.getMetrics(option);
+      }, this.timeStep);
+    },
+    async getHistoryMetrics() {
+      if (!this.namespace) {
+        this.$message.warning('命名空间为空，无法获取监控信息');
+        return;
+      }
+      if (!this.resourceName && !this.usePodName) {
+        this.$message.warning('资源名称或节点名为空，无法获取监控信息');
+        return;
+      }
+      const params = { ...this.monitorParam };
+
+      const now = new Date().getTime();
+
+      params.startTime = toUnixTimestamp(now - 4 * ONE_HOUR);
+      params.endTime = toUnixTimestamp(now - this.timeStep);
+      params.step = Math.round(this.timeStep / 1000);
+
+      this.loadingHistory = true;
+      const datas = await getHistoryMetrics(params).finally(() => {
+        this.loadingHistory = false;
+      });
+
+      datas.forEach(this.parseHistoryData);
+    },
+    pushTime() {
+      // 获取当前时间，并且整理时间列表
+      const now = parseTime(new Date(), this.timeFormat);
+      this.pollTimeArray.push(now);
+
+      // 如果 pollTimeArray 超过了限制，此时各指标 HistoryTimeArray 应当已经清空，直接清理 pollTimeArray 即可
+      if (this.pollTimeArray.length > this.timePoints) {
+        this.pollTimeArray.splice(0, 1);
+        return;
+      }
+
+      // gap 为 CPU/Mem/GPU 总时间节点超过时间点上限的数量，超过则清除最前面的 gap 个时间点
+      let gap = this.cpuHistoryTimeArray.length + this.pollTimeArray.length - this.timePoints;
+      if (gap > 0) {
+        this.cpuHistoryTimeArray.splice(0, gap);
+      }
+
+      gap = this.memHistoryTimeArray.length + this.pollTimeArray.length - this.timePoints;
+      if (gap > 0) {
+        this.memHistoryTimeArray.splice(0, gap);
+      }
+
+      gap = this.gpuHistoryTimeArray.length + this.pollTimeArray.length - this.timePoints;
+      if (gap > 0) {
+        this.gpuHistoryTimeArray.splice(0, gap);
+      }
+    },
+    parseHistoryData(pod) {
+      const { podName } = pod;
+
+      // 如果出现了重复的 podName, 则忽略重复数据
+      if (this.podNameSet.has(podName)) return;
+      this.podNameSet.add(podName);
+
+      if (this.displayCpu) {
+        this.cpuData[podName] = {};
+        pod.cpuMetrics.forEach((data) => {
+          const time = parseTime(data.time, this.timeFormat);
+          this.cpuHistoryTimeArray.push(time);
+          this.cpuData[podName][time] = data.value;
+        });
+        this.cpuHistoryTimeArray = Array.from(new Set(this.cpuHistoryTimeArray)).sort((a, b) =>
+          a.localeCompare(b)
+        );
+      }
+
+      if (this.displayMem) {
+        this.memData[podName] = {};
+        pod.memoryMetrics.forEach((data) => {
+          const time = parseTime(data.time, this.timeFormat);
+          this.memHistoryTimeArray.push(time);
+          this.memData[podName][time] = Math.round(memNormalize(data.value, 'Ki') * 10) / 10;
+        });
+        this.memHistoryTimeArray = Array.from(new Set(this.memHistoryTimeArray)).sort((a, b) =>
+          a.localeCompare(b)
+        );
+      }
+
+      if (this.displayGpu) {
+        this.$set(this.gpuData, podName, {});
+
+        let isFirstCard = true; // 只针对第一张 GPU 卡插入时间点
+        this.gpuData[podName].cardSet = new Set();
+
+        pod.gpuMetrics.forEach((card) => {
+          // 如果存在重复的卡，则忽略重复数据
+          if (this.gpuData[podName].cardSet.has(card.accId)) return;
+
+          this.gpuData[podName].cardSet.add(card.accId);
+          this.gpuData[podName][card.accId] = {};
+          card.values.forEach((data) => {
+            const time = parseTime(data.time, this.timeFormat);
+            // 只针对第一张 GPU 卡插入时间点
+            isFirstCard && this.gpuHistoryTimeArray.push(time);
+            this.gpuData[podName][card.accId][time] = data.value;
+          });
+          isFirstCard && (isFirstCard = false);
+        });
+        this.gpuHistoryTimeArray = Array.from(new Set(this.gpuHistoryTimeArray)).sort((a, b) =>
+          a.localeCompare(b)
+        );
+      }
+    },
+    parseData(data) {
+      const {
+        podName,
+
+        cpuRequestAmount,
+        cpuRequestFormat,
+        cpuUsageAmount,
+        cpuUsageFormat,
+
+        memoryUsageAmount,
+        memoryUsageFormat,
+      } = data;
+      // 必须先插入时间，然后进行数据解析
+      const now = this.pollTimeArray[this.pollTimeArray.length - 1];
+
+      if (!this.podNameSet.has(podName)) {
+        this.podNameSet.add(podName);
+        this.displayCpu && (this.cpuData[podName] = {});
+        this.displayMem && (this.memData[podName] = {});
+        this.displayGpu && this.$set(this.gpuData, podName, { cardSet: new Set() });
+      }
+
+      // 解析 CPU 数据
+      this.displayCpu &&
+        (this.cpuData[podName][now] = cpuPercentage(
+          cpuUsageAmount,
+          cpuUsageFormat,
+          cpuRequestAmount,
+          cpuRequestFormat
+        ));
+
+      // 解析内存数据
+      this.displayMem &&
+        (this.memData[podName][now] =
+          Math.round(memNormalize(memoryUsageAmount, memoryUsageFormat) * 10) / 10);
+
+      // 解析 GPU 数据
+      if (this.displayGpu) {
+        data.gpuUsagePersent.forEach((card) => {
+          if (!this.gpuData[podName].cardSet.has(card.accId)) {
+            this.gpuData[podName].cardSet.add(card.accId);
+            this.gpuData[podName][card.accId] = {};
+          }
+          this.gpuData[podName][card.accId][now] = card.usage;
+        });
+      }
+    },
+
+    // 出口方法
+    stop() {
+      this.pollId += 1; // 退出时自增，避免轮询干扰
+      this.cpuChart && this.cpuChart.clear();
+      this.memChart && this.memChart.clear();
+      this.gpuChart && this.gpuChart.clear();
+
+      this.podNameSet.clear();
+      this.cpuChart = this.memChart = this.gpuChart = null;
+      this.cpuHistoryTimeArray.length = 0;
+      this.memHistoryTimeArray.length = 0;
+      this.gpuHistoryTimeArray.length = 0;
+      this.pollTimeArray.length = 0;
+      this.cpuData = {};
+      this.memData = {};
+      this.gpuData = {};
+
+      this.polling = false;
+    },
+
+    // 入口方法
+    async init() {
+      if (this.polling) {
+        this.stop();
+      }
+
+      this.initCharts();
+      this.polling = true;
+
+      await this.getHistoryMetrics();
+      this.getMetrics({ pollId: this.pollId });
+    },
+    initCharts() {
+      if (this.displayCpu) {
+        this.initCpu();
+      }
+      if (this.displayMem) {
+        this.initMem();
+      }
+      if (this.displayGpu) {
+        this.initGpu();
+      }
+    },
+    initCpu() {
+      this.cpuChart = echarts.init(document.getElementById(this.cpuId));
+      this.cpuChart.setOption(defaultOption);
+      this.cpuChart.setOption(cpuOption);
+    },
+    initMem() {
+      this.memChart = echarts.init(document.getElementById(this.memId));
+      this.memChart.setOption(defaultOption);
+      this.memChart.setOption(memOption);
+    },
+    initGpu() {
+      this.gpuChart = echarts.init(document.getElementById(this.gpuId));
+      this.gpuChart.setOption(defaultOption);
+      this.gpuChart.setOption(gpuOption);
+    },
+    drawCharts() {
+      if (this.displayCpu) {
+        this.drawCpu();
+      }
+      if (this.displayMem) {
+        this.drawMem();
+      }
+      if (this.displayGpu) {
+        this.drawGpu();
+      }
+    },
+    drawCpu() {
+      // 数据计算放在画图的地方来做，在不需要画图时就无需计算
+      const timeArray = this.cpuHistoryTimeArray.concat(this.pollTimeArray);
+      const seriesData = [];
+      Object.keys(this.cpuData).forEach((podName) => {
+        const data = timeArray.map((time) => this.cpuData[podName][time]);
+        seriesData.push({
+          name: podName,
+          type: 'line',
+          data,
+        });
+      });
+
+      this.cpuChart &&
+        this.cpuChart.setOption({
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: timeArray,
+          },
+          series: seriesData,
+          legend: {
+            data: Object.keys(this.cpuData),
+          },
+        });
+    },
+    drawMem() {
+      // 数据计算放在画图的地方来做，在不需要画图时就无需计算
+      const timeArray = this.memHistoryTimeArray.concat(this.pollTimeArray);
+      const seriesData = [];
+      Object.keys(this.memData).forEach((podName) => {
+        const data = timeArray.map((time) => this.memData[podName][time]);
+        seriesData.push({
+          name: podName,
+          type: 'line',
+          data,
+        });
+      });
+
+      this.memChart &&
+        this.memChart.setOption({
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: timeArray,
+          },
+          series: seriesData,
+          legend: {
+            data: Object.keys(this.memData),
+          },
+        });
+    },
+    drawGpu(noMerge) {
+      // 数据计算放在画图的地方来做，在不需要画图时就无需计算
+      const timeArray = this.gpuHistoryTimeArray.concat(this.pollTimeArray);
+      const seriesData = [];
+      const legendList = [];
+      let name;
+      Object.keys(this.gpuData).forEach((pod) => {
+        if (this.selectedPod && this.selectedPod !== pod) return;
+        Array.from(this.gpuData[pod].cardSet).forEach((card) => {
+          name = `${pod}: ${card
+            .split('-')
+            .slice(0, 2)
+            .join('-')}`; // 由于卡名的构成是 UUID，为缩减长度，画图时只截取前两段
+          legendList.push(name);
+          const data = timeArray.map((time) => this.gpuData[pod][card][time]);
+          seriesData.push({
+            name,
+            type: 'line',
+            data,
+          });
+        });
+      });
+      // noMerge 模式下完全重新绘制
+      if (noMerge) {
+        this.gpuChart.clear();
+        this.gpuChart.setOption(defaultOption);
+        this.gpuChart.setOption(gpuOption);
+      }
+      this.gpuChart &&
+        this.gpuChart.setOption({
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: timeArray,
+          },
+          series: seriesData,
+          legend: {
+            data: legendList,
+          },
+        });
+    },
+
+    onPodSelectChange() {
+      this.drawGpu(true);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.charts {
+  min-height: 300px;
+}
+</style>
diff --git a/webapp/src/components/PodMonitor/util.js b/webapp/src/components/PodMonitor/util.js
new file mode 100644
index 0000000..f81be94
--- /dev/null
+++ b/webapp/src/components/PodMonitor/util.js
@@ -0,0 +1,147 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { round } from 'lodash';
+
+// 公共默认配置
+export const defaultOption = {
+  // x轴
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+  },
+  // y轴
+  yAxis: {
+    splitLine: {
+      show: false,
+    },
+    min(value) {
+      // 如果图中没有值，y轴最小值默认设为 0
+      if (value.min === Infinity) {
+        return 0;
+      }
+      // y轴最小值不小于 0; y轴最小值与数据最小值的距离不大于 10，且不大于数据最大值与 100 之间的距离
+      return round(Math.max(value.min - Math.min(100 - value.max, 10), 0), 2);
+    },
+    max(value) {
+      // 如果图中没有值，y轴最大值默认设为 100
+      if (value.max === -Infinity) {
+        return 100;
+      }
+      // y轴最大值不大于 100; y轴最大值与数据最大值的距离不大于 10，且不大于数据最小值与 0 之间的距离
+      return round(Math.min(value.max + Math.min(value.min, 10), 100), 2);
+    },
+  },
+  grid: {
+    right: '5%',
+  },
+  // 图例，涉及多节点展示
+  legend: {
+    show: true,
+    width: 400,
+    data: [],
+  },
+  series: {
+    type: 'line',
+    data: [],
+  },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(245, 245, 245, 0.8)',
+    borderWidth: 1,
+    borderColor: '#ccc',
+    textStyle: {
+      color: '#000',
+    },
+    formatter(params) {
+      const toolTips = params.map(({ seriesName, value }) => {
+        return `${seriesName}: <strong>${value === undefined ? '-' : value}</strong>`;
+      });
+      return toolTips.join('<br />');
+    },
+  },
+  toolbox: {
+    right: 30,
+    feature: {
+      dataZoom: {
+        yAxisIndex: 'none',
+      },
+      restore: {},
+    },
+  },
+  dataZoom: [
+    {
+      start: 0,
+    },
+    {
+      type: 'inside',
+    },
+  ],
+};
+
+export const cpuOption = {
+  title: {
+    text: 'CPU',
+  },
+  // y轴
+  yAxis: {
+    name: 'CPU 占用率(%)',
+  },
+};
+
+export const memOption = {
+  title: {
+    text: '内存',
+  },
+  // y轴
+  yAxis: {
+    name: '内存使用量(Gi)',
+    min(value) {
+      if (value.min === Infinity) {
+        return 0;
+      }
+      // 内存 y轴最小值不小于 0; y轴最小值与数据最小值的距离不大于 1。内存理论上不设置内存上限
+      return round(Math.max(value.min - 1, 0), 2);
+    },
+    max(value) {
+      // 内存无数据时默认设置 y 轴上限为 8
+      if (value.max === -Infinity) {
+        return 8;
+      }
+      // 内存 y轴最大值与数据最大值的距离不大于 1，且不大于数据最小值与 0 之间的距离; 理论上不设置上限
+      return round(value.max + Math.min(1, value.min), 2);
+    },
+  },
+};
+
+export const gpuOption = {
+  title: {
+    text: 'GPU',
+  },
+  // y轴
+  yAxis: {
+    name: 'GPU 占用率(%)',
+  },
+  tooltip: {
+    formatter(params) {
+      const toolTips = params.map(({ seriesName, value }) => {
+        const [podName, accId] = seriesName.split(': ');
+        return `${podName}: <br />${accId}: <strong>${value === undefined ? '-' : value}</strong>`;
+      });
+      return toolTips.join('<br />');
+    },
+  },
+};
diff --git a/webapp/src/components/Prism/index.vue b/webapp/src/components/Prism/index.vue
index e3d9827..978b255 100644
--- a/webapp/src/components/Prism/index.vue
+++ b/webapp/src/components/Prism/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="prism-wrapper">
@@ -22,7 +22,7 @@
 
 <script>
 import 'prismjs';
-import 'prismjs/themes/prism.css';
+import 'prism-themes/themes/prism-atom-dark.css';
 import 'prismjs/components/prism-python';
 import Prism from 'vue-prism-component';
 
@@ -41,13 +41,9 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-  .prism-wrapper .prism-content {
-    background: none;
-  }
-
-  code[class*="language-"],
-  pre[class*="language-"] {
-    word-wrap: break-word;
-    white-space: pre-wrap;
-  }
+code[class*='language-'],
+pre[class*='language-'] {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
 </style>
diff --git a/webapp/src/components/ProTable/header.vue b/webapp/src/components/ProTable/header.vue
new file mode 100644
index 0000000..b783296
--- /dev/null
+++ b/webapp/src/components/ProTable/header.vue
@@ -0,0 +1,127 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="pro-table-header flex py-4">
+    <span class="header-left">
+      <slot name="left">
+        <el-button
+          v-if="showCreate"
+          type="primary"
+          icon="el-icon-plus"
+          round
+          :disabled="createDisabled"
+          @click="onCreate"
+          >{{ createTitle }}</el-button
+        >
+        <slot name="betweenOps" />
+        <el-button
+          v-if="showDelete"
+          type="danger"
+          icon="el-icon-delete"
+          round
+          :disabled="deleteDisabled"
+          @click="onDelete"
+          >{{ deleteTitle }}</el-button
+        >
+      </slot>
+    </span>
+    <span class="header-right ml-auto">
+      <slot name="right">
+        <BaseForm
+          ref="queryForm"
+          inline
+          class="query-form"
+          :form-items="formItems"
+          :model="formModel"
+        />
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script>
+import BaseForm from '@/components/BaseForm';
+
+export default {
+  name: 'ProTableHeader',
+  components: {
+    BaseForm,
+  },
+  props: {
+    // 是否展示创建按钮
+    showCreate: {
+      type: Boolean,
+      default: true,
+    },
+    // 创建按钮展示名
+    createTitle: {
+      type: String,
+      default: '创建',
+    },
+    // 是否禁用创建按钮
+    createDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否展示删除按钮
+    showDelete: {
+      type: Boolean,
+      default: false,
+    },
+    // 删除按钮展示名
+    deleteTitle: {
+      type: String,
+      default: '删除',
+    },
+    // 是否禁用创建按钮
+    deleteDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 数据搜索表单项定义数组
+    formItems: {
+      type: Array,
+      default: () => [],
+    },
+    // 数据搜索表单值绑定
+    formModel: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    // 点击创建按钮，抛出创建事件
+    const onCreate = () => {
+      emit('create');
+    };
+    // 点击删除按钮，抛出删除事件
+    const onDelete = () => {
+      emit('delete');
+    };
+    return {
+      onCreate,
+      onDelete,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep.query-form .el-form-item {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/webapp/src/components/ProTable/index.vue b/webapp/src/components/ProTable/index.vue
new file mode 100644
index 0000000..c27bea7
--- /dev/null
+++ b/webapp/src/components/ProTable/index.vue
@@ -0,0 +1,420 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="pro-table-container">
+    <ProTableHeader
+      :show-create="showCreate"
+      :create-disabled="createDisabled"
+      :create-title="createTitle"
+      :show-delete="showDelete"
+      :delete-disabled="mergedDeleteDisabled"
+      :delete-title="deleteTitle"
+      :form-items="mergedFormItems"
+      :form-model="state.queryFormModel"
+      @create="onCreate"
+      @delete="onDelete"
+    >
+      <template v-slot:left>
+        <slot name="left" />
+      </template>
+      <template v-slot:right>
+        <slot name="right" />
+      </template>
+      <template v-slot:betweenOps>
+        <slot name="betweenOps" />
+      </template>
+    </ProTableHeader>
+    <el-tabs
+      v-if="showTabs"
+      v-model="state.activeTab"
+      class="eltabs-inlineblock"
+      @tab-click="onTabClick"
+    >
+      <el-tab-pane
+        v-for="tab of tabs"
+        :key="tab.name"
+        :label="tab.label"
+        :name="tab.name"
+        :disabled="tab.disabled"
+      />
+    </el-tabs>
+    <slot name="header-refresh">
+      <el-tooltip v-if="showRefresh" effect="dark" content="刷新" placement="top">
+        <el-button
+          class="with-border fr mr-10"
+          style="padding: 8px;"
+          icon="el-icon-refresh"
+          @click="onRefresh"
+        />
+      </el-tooltip>
+    </slot>
+    <BaseTable
+      ref="table"
+      v-loading="state.loading"
+      v-bind="tableAttrs"
+      :columns="mergedColumns"
+      :data="state.data"
+      @sort-change="onSortChange"
+      @selection-change="onSelectionChange"
+      v-on="$listeners"
+    >
+      <template v-for="slot of slotLeft" v-slot:[slot.name]="scope">
+        <slot :row="scope.row" :name="slot.name" />
+      </template>
+    </BaseTable>
+    <el-pagination
+      v-if="showPagination"
+      v-bind="mergedPageAttrs"
+      :style="`text-align:${pageAlign}; margin-top: 8px;`"
+      @size-change="onSizeChange"
+      @current-change="onPageChange"
+    />
+  </div>
+</template>
+
+<script>
+import { computed, onMounted, reactive, toRefs, watch } from '@vue/composition-api';
+import { MessageBox } from 'element-ui';
+
+import BaseTable from '@/components/BaseTable';
+import { Constant } from '@/utils';
+import { usePagination } from '@/hooks';
+
+import ProTableHeader from './header';
+
+const defaultSlots = ['left', 'betweenOps', 'right', 'header-refresh'];
+
+export default {
+  name: 'ProTable',
+  components: {
+    ProTableHeader,
+    BaseTable,
+  },
+  props: {
+    // 是否展示创建按钮
+    showCreate: {
+      type: Boolean,
+      default: true,
+    },
+    // 创建按钮展示名
+    createTitle: {
+      type: String,
+      default: '创建',
+    },
+    // 是否禁用创建按钮
+    createDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否展示删除按钮
+    showDelete: {
+      type: Boolean,
+      default: false,
+    },
+    // 删除按钮展示名
+    deleteTitle: {
+      type: String,
+      default: '删除',
+    },
+    // 是否禁用创建按钮
+    deleteDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 数据搜索表单项定义数组
+    formItems: {
+      type: Array,
+      default: () => [],
+    },
+    // 标签页定义数组
+    tabs: {
+      type: Array,
+      default: () => [],
+    },
+    // 是否展示刷新按钮
+    showRefresh: {
+      type: Boolean,
+      default: false,
+    },
+    // 表格列定义数组
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    // 表格其他属性
+    tableAttrs: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 是否展示分页
+    showPagination: {
+      type: Boolean,
+      default: true,
+    },
+    // 分页组件位置
+    pageAlign: {
+      type: String,
+      default: 'center',
+    },
+    // 分页其他属性
+    paginationAttrs: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 请求数据方法
+    listRequest: Function,
+    // 请求接口额外参数
+    listOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 删除数据方法
+    delRequest: Function,
+    // 调用默认删除接口时用于获取 ID 字段
+    idField: {
+      type: String,
+      default: 'id',
+    },
+  },
+  setup(props, ctx) {
+    const { formItems, paginationAttrs, deleteDisabled, columns } = toRefs(props);
+    const { listRequest, delRequest } = props;
+
+    // data
+    const state = reactive({
+      activeTab: null, // 激活的标签页
+      queryFormModel: {}, // 查询表单值
+      data: [], // 表格数据
+      selectedRows: [], // 表格多选行
+      loading: false, // 表格 loading 状态
+      queryObj: {}, // 其他查询对象
+    });
+
+    // 搜索
+    let defaultFormModel;
+    const setQuery = (query = {}) => {
+      Object.assign(state.queryFormModel, query);
+    };
+    watch(
+      () => formItems.value,
+      (items) => {
+        const newModel = {};
+        items.forEach((item) => {
+          // 不添加没有 prop 属性的表单项，如按钮
+          item.prop && (newModel[item.prop] = undefined);
+        });
+        defaultFormModel = newModel;
+        // 根据表单项获取并赋值 query 对象
+        state.queryFormModel = { ...defaultFormModel };
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    // Tabs
+    const showTabs = computed(() => {
+      return props.tabs.length > 0;
+    });
+    if (showTabs.value) {
+      state.activeTab = props.tabs[0].name; // 默认打开第一个 tab
+    }
+    const onTabClick = () => {
+      ctx.emit('tab-change', state.activeTab);
+    };
+
+    // 分页 & 数据
+    const { mergedPageAttrs, pagination, setPagination } = usePagination({
+      ...paginationAttrs.value,
+    });
+
+    // 排序
+    const sortInfo = reactive({
+      sort: null,
+      order: null,
+    });
+    const setSort = (sort = {}) => {
+      Object.assign(sortInfo, sort);
+    };
+
+    // 数据请求
+    const refresh = async (queryObj) => {
+      if (typeof listRequest === 'function') {
+        state.loading = true;
+        const { currentPage, pageSize } = pagination;
+        // 清除空的查询参数
+        Object.keys(state.queryFormModel).forEach((key) => {
+          if (state.queryFormModel[key] === '' || state.queryFormModel[key] === null) {
+            state.queryFormModel[key] = undefined;
+          }
+        });
+        const { page, result } = await listRequest({
+          ...state.queryFormModel,
+          current: currentPage,
+          size: pageSize,
+          sort: sortInfo.sort || undefined,
+          order: sortInfo.order || undefined,
+          ...state.queryObj,
+          ...props.listOptions,
+          ...queryObj,
+        }).finally(() => {
+          state.loading = false;
+        });
+        // 如果当前非第一页，且总数据量已经小于或等于上一页能展示的所有数据，那么重新请求上一页的数据
+        if (page.current > 1 && page.total <= page.size * (page.current - 1)) {
+          refresh({ current: currentPage - 1 });
+          return;
+        }
+        setPagination(page);
+        state.data = result;
+      }
+    };
+    // 数据查询
+    const query = (queryObj = {}) => {
+      setPagination({
+        current: 1,
+      });
+      refresh(queryObj);
+    };
+    // 查询重置
+    const resetQuery = () => {
+      setQuery(defaultFormModel);
+      query();
+    };
+
+    const onSizeChange = (size) => {
+      setPagination({
+        size,
+        current: 1,
+      });
+      query();
+    };
+    const onPageChange = (page) => {
+      setPagination({
+        current: page,
+      });
+      refresh();
+    };
+    const onSortChange = ({ prop, order }) => {
+      setSort({
+        sort: order && prop,
+        order: order && Constant.tableSortMap[order],
+      });
+      query();
+    };
+    const onSelectionChange = (selections) => {
+      state.selectedRows = selections;
+    };
+
+    // 列定义预处理
+    const mergedColumns = computed(() => {
+      return columns.value.map((column) => {
+        // 为下拉表头绑定默认查询方法
+        if (column.dropdownList && typeof column.func !== 'function') {
+          column.func = (value) => {
+            state.queryObj[column.prop] = value;
+            query();
+          };
+        }
+        return column;
+      });
+    });
+
+    // 配置一个 funcObj 来提供查询和重置方法
+    const funcObj = { query, resetQuery };
+    const mergedFormItems = computed(() => {
+      return formItems.value.map((item) => {
+        const copyItem = { ...item };
+        if (item.func in funcObj) {
+          const func = funcObj[item.func];
+          copyItem.func = () => func();
+        }
+        if (item.change in funcObj) {
+          const func = funcObj[item.change];
+          copyItem.change = () => func();
+        }
+        return copyItem;
+      });
+    });
+
+    // 表格插槽
+    const slotLeft = computed(() => {
+      return Object.keys(ctx.slots)
+        .filter((name) => !defaultSlots.includes(name))
+        .map((name) => ({ name }));
+    });
+
+    // 创建按钮
+    const onCreate = () => {
+      ctx.emit('add');
+    };
+    // 删除按钮
+    const onDelete = async () => {
+      if (typeof delRequest === 'function') {
+        const ids = state.selectedRows.map((row) => row[props.idField]);
+        await MessageBox.confirm(`确认删除选中的${ids.length}条数据?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        });
+        await delRequest({ ids });
+        refresh();
+      }
+      ctx.emit('delete', state.selectedRows);
+    };
+    const mergedDeleteDisabled = computed(() => {
+      return deleteDisabled.value || state.selectedRows.length === 0;
+    });
+    // 刷新按钮
+    const onRefresh = () => {
+      refresh();
+    };
+
+    // 渲染后调用一次查询
+    onMounted(query);
+
+    return {
+      state,
+
+      onCreate,
+      onDelete,
+      mergedDeleteDisabled,
+      onRefresh,
+      defaultFormModel,
+
+      showTabs,
+      onTabClick,
+
+      refresh,
+      query,
+      resetQuery,
+      setSort,
+      onSizeChange,
+      pagination,
+      setPagination,
+      onPageChange,
+      onSortChange,
+      onSelectionChange,
+      mergedPageAttrs,
+      mergedColumns,
+      mergedFormItems,
+
+      slotLeft,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/components/SearchBox/index.vue b/webapp/src/components/SearchBox/index.vue
new file mode 100644
index 0000000..ac8c057
--- /dev/null
+++ b/webapp/src/components/SearchBox/index.vue
@@ -0,0 +1,245 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <el-popover v-model="state.visible" v-bind="popperAttrs" :popper-class="popperClass">
+    <div>
+      <!-- 搜索条件 -->
+      <el-form ref="formRef" v-model="state.formModel" v-bind="attrs" :label-width="labelWidth">
+        <el-form-item
+          v-for="item in mergedFormItems"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+        >
+          <template v-if="item.type === 'select'">
+            <el-select
+              v-model="state.formModel[item.prop]"
+              v-bind="item.attrs"
+              size="small"
+              @change="handleChange"
+            >
+              <el-option
+                v-for="option of item.options"
+                :key="option.value"
+                :value="option.value"
+                :label="option.label"
+                :disabled="option.disabled"
+              />
+            </el-select>
+          </template>
+          <template v-if="item.type === 'checkboxGroup'">
+            <el-checkbox-group
+              v-model="state.formModel[item.prop]"
+              class="flex flex-wrap"
+              @change="handleChange"
+            >
+              <el-checkbox
+                v-for="option of item.options"
+                :key="option.value"
+                :label="option.value"
+                :disabled="option.disabled"
+                @change="(val) => handleCheckboxChange(val, item.prop, option.value)"
+              >
+                {{ option.label }}
+              </el-checkbox>
+            </el-checkbox-group>
+          </template>
+        </el-form-item>
+      </el-form>
+
+      <!-- 搜索按钮 -->
+      <div class="mt-20">
+        <el-button
+          v-if="btnOptions.includes('search')"
+          size="mini"
+          type="primary"
+          @click="handleOk"
+        >
+          完成
+        </el-button>
+        <el-button v-if="btnOptions.includes('reset')" size="mini" type="default" @click="onReset">
+          重置
+        </el-button>
+      </div>
+    </div>
+    <slot slot="reference" name="trigger" />
+  </el-popover>
+</template>
+
+<script>
+import { computed, reactive, ref } from '@vue/composition-api';
+import { without, pick } from 'lodash';
+import cx from 'classnames';
+
+const formRef = ref(null);
+
+const defaultFormAttrs = {}; // 默认表单属性
+
+export default {
+  name: 'SearchBox',
+  props: {
+    formItems: {
+      type: Array,
+      default: () => [],
+    },
+    btnOptions: {
+      type: Array,
+      default: () => ['search', 'reset'],
+    },
+    handleFilter: {
+      type: Function,
+    },
+    // 重置后的选项值
+    initialValue: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 初次进入的默认值
+    defaultValue: {
+      type: Object,
+    },
+    labelWidth: {
+      type: String,
+      default: '80px',
+    },
+    klass: {
+      type: String,
+    },
+    popperAttrs: {
+      type: Object,
+    },
+  },
+
+  setup(props, ctx) {
+    // 选中全部
+    const checkAll = (formItem) => formItem.options.map((d) => d.value);
+
+    // 生成数据模型（对多选 all 做特殊处理）
+    const buildModel = (values) => {
+      return props.formItems.reduce((acc, cur) => {
+        const item = pick(values, [cur.prop]);
+        const itemValue = item[cur.prop];
+        // 多选单独处理
+        if (cur.type === 'checkboxGroup') {
+          if (typeof itemValue === 'undefined') {
+            return acc;
+          }
+          if (itemValue && itemValue.length === 1 && itemValue[0] === 'all') {
+            // 全选
+            return { ...acc, ...{ [cur.prop]: checkAll(cur) } };
+          }
+          return { ...acc, ...item };
+        }
+
+        return { ...acc, ...item };
+      }, {});
+    };
+
+    const state = reactive({
+      visible: false,
+      formModel: buildModel(props.defaultValue || props.initialValue),
+    });
+
+    // 合并表单默认属性和 $attrs
+    const attrs = computed(() => {
+      return { ...defaultFormAttrs, ...ctx.attrs };
+    });
+
+    const popperClass = computed(() =>
+      cx('search-box', {
+        [props.klass]: !!props.klass,
+      })
+    );
+
+    // 表单项预处理
+    const mergedFormItems = computed(() => {
+      return props.formItems.map((item) => {
+        return { ...item };
+      });
+    });
+
+    // change
+    const handleChange = (...params) => {
+      ctx.emit('change', ...params);
+    };
+
+    // 搜索
+    const handleOk = () => {
+      state.visible = false;
+      props.handleFilter(state.formModel);
+    };
+    // 重置
+    const onReset = () => {
+      state.formModel = { ...props.initialValue };
+      handleOk();
+    };
+
+    // 空串''表示搜索条件为不限
+    const handleCheckboxChange = (checked, prop, value) => {
+      const formItem = props.formItems.find((d) => d.prop === prop) || {};
+      if (checked) {
+        if (value === 'all') {
+          const values = checkAll(formItem);
+          state.formModel[prop] = values;
+        } else if (value === '') {
+          // 选中不限，清理其他参数
+          state.formModel[prop] = [''];
+        } else {
+          // 选中其他，移除不限
+          state.formModel[prop] = without(state.formModel[prop], '');
+        }
+      } else if (value === 'all') {
+        // 取消全部选择
+        state.formModel[prop] = [''];
+      }
+    };
+
+    // 供外部调用更改选项值
+    const changeOption = (option, val) => {
+      state.formModel[option] = val;
+    };
+
+    return {
+      formRef,
+      state,
+      attrs,
+      mergedFormItems,
+      handleCheckboxChange,
+      handleOk,
+      onReset,
+      handleChange,
+      popperClass,
+      changeOption,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.search-box {
+  padding-right: 20px;
+  padding-left: 20px;
+
+  .el-form-item {
+    margin-bottom: 10px;
+
+    .el-select {
+      width: 80%;
+    }
+  }
+}
+</style>
diff --git a/webapp/src/components/SortingMenu/index.vue b/webapp/src/components/SortingMenu/index.vue
index 2597117..7737e9a 100644
--- a/webapp/src/components/SortingMenu/index.vue
+++ b/webapp/src/components/SortingMenu/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <script>
 import { isNil } from 'lodash';
@@ -25,7 +25,7 @@ export default {
     menuList: {
       type: Array,
       required: true,
-      default: () => ([]),
+      default: () => [],
     },
     labelKey: {
       type: String,
@@ -58,7 +58,7 @@ export default {
       }
     };
 
-    const handleVisibleChange = visible => {
+    const handleVisibleChange = (visible) => {
       if (visible !== state.isOpen) {
         state.isOpen = visible;
       }
@@ -73,7 +73,7 @@ export default {
   render() {
     const { labelKey, valueKey } = this;
     // 选中的 item
-    const selectedItem = this.menuList.find(d => d[valueKey] === this.state.selectedValue);
+    const selectedItem = this.menuList.find((d) => d[valueKey] === this.state.selectedValue);
 
     // 文本
     const label = (selectedItem || {})[labelKey];
@@ -96,18 +96,16 @@ export default {
       <el-dropdown {...dropdownProps}>
         <label class={klass}>
           <el-link underline={false}>{label}</el-link>
-          <span class='caret' />
+          <span class="caret" />
         </label>
-        <el-dropdown-menu slot='dropdown'>
-          {
-            this.menuList.map(menu => {
-              return (
-                <el-dropdown-item key={menu[valueKey]} command={menu[valueKey]}>
-                  {menu[labelKey]}
-                </el-dropdown-item>
-              );
-            })
-          }
+        <el-dropdown-menu slot="dropdown">
+          {this.menuList.map((menu) => {
+            return (
+              <el-dropdown-item key={menu[valueKey]} command={menu[valueKey]}>
+                {menu[labelKey]}
+              </el-dropdown-item>
+            );
+          })}
         </el-dropdown-menu>
       </el-dropdown>
     );
diff --git a/webapp/src/components/Training/algorithmDetail.vue b/webapp/src/components/Training/algorithmDetail.vue
index 3d3515a..d08553f 100644
--- a/webapp/src/components/Training/algorithmDetail.vue
+++ b/webapp/src/components/Training/algorithmDetail.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="ts-drawer">
@@ -54,7 +54,7 @@
     </el-row>
     <el-row class="row">
       <el-col :xl="5" :lg="8" :span="24">
-        <div class="label">算法用途</div>
+        <div class="label">模型类别</div>
       </el-col>
       <el-col :xl="19" :lg="16" :span="24">
         <div class="text">{{ item.algorithmUsage }}</div>
@@ -62,12 +62,12 @@
           v-if="displayType === 1"
           v-model="usageEditVisible"
           placement="bottom"
-          title="修改算法用途"
+          title="修改模型类别"
           @show="onUsageEditShow"
         >
           <el-select
             v-model="localUsage"
-            placeholder="请选择或输入算法用途"
+            placeholder="请选择或输入模型类别"
             filterable
             clearable
             allow-create
@@ -85,7 +85,8 @@
                 class="select-del-btn"
                 type="text"
                 @click.stop="delAlgorithmUsage(usage)"
-              ><i class="el-icon-close" /></el-button>
+                ><i class="el-icon-close"
+              /></el-button>
             </el-option>
           </el-select>
           <div class="tc" style="margin-top: 8px;">
@@ -98,27 +99,25 @@
     </el-row>
     <el-row class="row">
       <el-col :xl="5" :lg="8" :span="24">
-        <div class="label">日志输出</div>
+        <div class="label">文件输出</div>
       </el-col>
       <el-col :xl="19" :lg="16" :span="24">
         <div class="text">
-          <div
-            v-if="displayType === 1"
-          >
+          <div v-if="displayType === 1">
             <el-switch
-              v-model="item.isTrainLog"
-              @change="value => editAlgorithm('isTrainLog', value)"
+              v-model="item.isTrainOut"
+              @change="(value) => editAlgorithm('isTrainOut', value)"
             />
             <el-tooltip
               class="item"
               effect="dark"
-              content="请确保代码中包含“train_log”参数用于接收训练的日志输出路径"
+              content="请确保代码中包含“train_out”参数用于接收训练的文件输出路径"
               placement="top"
             >
               <i class="el-icon-warning-outline primary f18 v-bottom" />
             </el-tooltip>
           </div>
-          <span v-else>{{ item.isTrainLog ? '是' : '否' }}</span>
+          <span v-else>{{ item.isTrainOut ? '是' : '否' }}</span>
         </div>
       </el-col>
     </el-row>
@@ -128,12 +127,10 @@
       </el-col>
       <el-col :xl="19" :lg="16" :span="24">
         <div class="text">
-          <div
-            v-if="displayType === 1"
-          >
+          <div v-if="displayType === 1">
             <el-switch
               v-model="item.isVisualizedLog"
-              @change="value => editAlgorithm('isVisualizedLog', value)"
+              @change="(value) => editAlgorithm('isVisualizedLog', value)"
             />
             <el-tooltip
               class="item"
@@ -181,7 +178,9 @@
         </el-col>
         <el-col :xl="19" :lg="16" :span="24">
           <div class="text">
-            <div v-for="(p, index) in runParamsList" :key="p.key">{{ p.key }} = {{ p.value }}{{ index === runParamsList.length - 1 ? '' : ', ' }}</div>
+            <div v-for="(p, index) in runParamsList" :key="p.key">
+              {{ p.key }} = {{ p.value }}{{ index === runParamsList.length - 1 ? '' : ', ' }}
+            </div>
           </div>
         </el-col>
       </el-row>
@@ -192,7 +191,11 @@
 <script>
 import { convertMapToList } from '@/utils';
 import { edit as editAlgorithm } from '@/api/algorithm/algorithm';
-import { list as getUsages, add as addUsage, del as deleteUsage } from '@/api/algorithm/algorithmUsage';
+import {
+  list as getUsages,
+  add as addUsage,
+  del as deleteUsage,
+} from '@/api/algorithm/algorithmUsage';
 import Edit from '@/components/InlineTableEdit';
 
 export default {
@@ -279,7 +282,7 @@ export default {
       this.getAlgorithmUsages();
     },
     onAlgorithmUsageChange(value) {
-      const usage = this.algorithmUsageList.find(usage => usage.auxInfo === value);
+      const usage = this.algorithmUsageList.find((usage) => usage.auxInfo === value);
       if (value && !usage) {
         this.createAlgorithmUsage(value);
       }
diff --git a/webapp/src/components/Training/dataSourceSelector.vue b/webapp/src/components/Training/dataSourceSelector.vue
index ea95339..75e7f36 100644
--- a/webapp/src/components/Training/dataSourceSelector.vue
+++ b/webapp/src/components/Training/dataSourceSelector.vue
@@ -1,24 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
     <el-select
       v-model="algoUsage"
       placeholder="请选择数据集用途"
+      filterable
       @change="onAlgorithmUsageChange"
     >
       <el-option :value="null" label="全部" />
@@ -36,17 +37,13 @@
       value-key="id"
       @change="onDataSourceChange"
     >
-      <el-option
-        v-for="item in datasetIdList"
-        :key="item.id"
-        :value="item"
-        :label="item.name"
-      />
+      <el-option v-for="item in datasetIdList" :key="item.id" :value="item" :label="item.name" />
     </el-select>
     <el-select
       v-model="dataSourceVersion"
       placeholder="请选择您挂载的数据集版本"
       value-key="versionUrl"
+      filterable
       @change="onDataSourceVersionChange"
     >
       <el-option
@@ -59,12 +56,15 @@
     <el-tooltip effect="dark" :content="urlTooltip" placement="top">
       <i class="el-icon-warning-outline primary f18 v-text-top" />
     </el-tooltip>
-    <el-tooltip effect="dark" :disabled="!dataSourceVersion" :content="ofRecordTooltip" placement="top">
-      <el-checkbox
-        v-model="useOfRecord"
-        :disabled="!ofRecordDisabled"
-        @change="onUseOfRecordChange"
-      >使用 OfRecord</el-checkbox>
+    <el-tooltip
+      effect="dark"
+      :disabled="!dataSourceVersion"
+      :content="ofRecordTooltip"
+      placement="top"
+    >
+      <el-checkbox v-model="useOfRecord" :disabled="!ofRecordDisabled" @change="onUseOfRecordChange"
+        >使用 OFRecord</el-checkbox
+      >
     </el-tooltip>
   </div>
 </template>
@@ -115,7 +115,7 @@ export default {
   computed: {
     ofRecordTooltip() {
       const content = this.dataSourceVersion?.versionOfRecordUrl
-        ? '选中 OfRecord 将使用二进制数据集文件'
+        ? '选中 OFRecord 将使用二进制数据集文件'
         : '二进制数据集文件不可用或正在生成中';
       return content;
     },
@@ -143,7 +143,7 @@ export default {
   methods: {
     // handlers
     onAlgorithmUsageChange(annotateType, datasetInit = false) {
-      // 算法用途修改之后，重新获取数据集列表，清空数据集结果
+      // 模型类别修改之后，重新获取数据集列表，清空数据集结果
       this.getDataSetList(annotateType, datasetInit);
     },
     async onDataSourceChange(dataSource) {
@@ -178,7 +178,7 @@ export default {
         current: 1,
         size: 1000,
       };
-      getAlgorithmUsages(params).then(res => {
+      getAlgorithmUsages(params).then((res) => {
         this.algorithmUsageList = res.result;
       });
     },
@@ -199,7 +199,9 @@ export default {
         this.dataSource = this.dataSourceVersion = this.result.dataSourceName = this.result.dataSourcePath = null;
       } else {
         // 根据传入的数据集信息进行初始化
-        this.dataSource = this.datasetIdList.find(dataset => dataset.name === this.dataSourceName.split(':')[0]);
+        this.dataSource = this.datasetIdList.find(
+          (dataset) => dataset.name === this.dataSourceName.split(':')[0]
+        );
         if (!this.dataSource) {
           // 无法在数据集列表中找到同名的数据集
           this.$message.warning('原有数据集不存在，请重新选择');
@@ -208,10 +210,14 @@ export default {
         }
         this.datasetVersionList = await getDatasetVersions(this.dataSource.id);
         // 首先尝试使用 versionUrl 进行数据集路径匹配
-        this.dataSourceVersion = this.datasetVersionList.find(dataset => dataset.versionUrl === this.dataSourcePath);
+        this.dataSourceVersion = this.datasetVersionList.find(
+          (dataset) => dataset.versionUrl === this.dataSourcePath
+        );
         if (!this.dataSourceVersion) {
           // 无法匹配上时使用 versionOfRecordUrl 进行数据集路径匹配
-          this.dataSourceVersion = this.datasetVersionList.find(dataset => dataset.versionOfRecordUrl === this.dataSourcePath);
+          this.dataSourceVersion = this.datasetVersionList.find(
+            (dataset) => dataset.versionOfRecordUrl === this.dataSourcePath
+          );
           this.dataSourceVersion && (this.useOfRecord = true);
         }
         // 如果二者都不能匹配上，说明原有的数据集版本目前不存在
@@ -223,8 +229,11 @@ export default {
     },
     // 外部调用接口方法
     updateAlgorithmUsage(usage, init = false) {
-      this.algoUsage = usage || null;
-      this.onAlgorithmUsageChange(usage, init);
+      // 如果新的算法用途与原有的一致，则不做任何修改
+      if (init || this.algoUsage !== usage) {
+        this.algoUsage = usage || null;
+        this.onAlgorithmUsageChange(usage, init);
+      }
     },
     reset() {
       Object.assign(this.result, {
diff --git a/webapp/src/components/Training/jobForm.vue b/webapp/src/components/Training/jobForm.vue
index cbbc9a1..4ecadfb 100644
--- a/webapp/src/components/Training/jobForm.vue
+++ b/webapp/src/components/Training/jobForm.vue
@@ -1,20 +1,20 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
-<!--使用场景: add: 任务创建(jobAdd）， edit：任务版本修改（jobDetail），paramAdd:模板创建（jobDetail），paramEdit：模板修改（job）-->
+<!--使用场景: add: 任务创建(jobAdd), edit: 任务版本修改(jobDetail), paramsAdd: 模板创建(jobDetail), paramsEdit: 模板修改(job)-->
 <template>
   <div>
     <el-form
@@ -24,13 +24,21 @@
       label-width="120px"
       :style="`width: ${widthPercent}%; margin-top: 20px;`"
     >
-      <el-form-item v-if="type==='add' || type === 'paramsAdd' || type === 'algoAdd'" label="任务名称" prop="trainName">
+      <el-form-item
+        v-if="type === 'add' || type === 'paramsAdd' || type === 'algoAdd'"
+        label="任务名称"
+        prop="trainName"
+      >
         <el-input v-model="form.trainName" />
       </el-form-item>
-      <el-form-item v-if="type==='edit'" label="任务名称" prop="jobName">
+      <el-form-item v-if="type === 'edit'" label="任务名称" prop="jobName">
         <div>{{ form.jobName }}</div>
       </el-form-item>
-      <el-form-item v-if="type==='saveParams' || type==='paramEdit'" label="任务模板名称" prop="paramName">
+      <el-form-item
+        v-if="type === 'saveParams' || type === 'paramsEdit'"
+        label="任务模板名称"
+        prop="paramName"
+      >
         <el-input id="paramName" v-model="form.paramName" />
       </el-form-item>
       <el-form-item label="描述" prop="description">
@@ -38,32 +46,25 @@
       </el-form-item>
       <el-divider />
       <!--可编辑-->
-      <template v-if="type!=='saveParams'">
+      <template v-if="type !== 'saveParams'">
         <el-form-item label="选用算法类型" prop="algorithmSource">
           <el-radio-group v-model="form.algorithmSource" @change="onAlgorithmSourceChange">
-            <el-radio
-              id="algorithm_tab_0"
-              :label="1"
-              border
-            >我的算法</el-radio>
-            <el-radio
-              id="algorithm_tab_1"
-              :label="2"
-              border
-            >预置算法</el-radio>
+            <el-radio id="algorithm_tab_0" :label="ALGORITHM_RESOURCE_ENUM.CUSTOM" border
+              >我的算法</el-radio
+            >
+            <el-radio id="algorithm_tab_1" :label="ALGORITHM_RESOURCE_ENUM.PRESET" border
+              >预置算法</el-radio
+            >
           </el-radio-group>
         </el-form-item>
-        <el-form-item
-          ref="algorithmId"
-          label="选用算法"
-          prop="algorithmId"
-        >
+        <el-form-item ref="algorithmId" label="选用算法" prop="algorithmId">
           <el-select
             id="algorithmId"
             v-model="form.algorithmId"
             v-el-select-load-more="getAlgorithmList"
             placeholder="请选择您使用的算法代码"
             class="w270"
+            filterable
             @change="onAlgorithmChange"
           >
             <el-option
@@ -74,25 +75,17 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item
-          ref="imageTag"
-          label="镜像选择"
-          prop="imageTag"
-        >
+        <el-form-item ref="imageTag" label="镜像选择" prop="imageTag">
           <el-select
             id="imageName"
             v-model="form.imageName"
             placeholder="请选择镜像"
             style="width: 190px;"
             clearable
+            filterable
             @change="getHarborImages"
           >
-            <el-option
-              v-for="item in harborProjectList"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
+            <el-option v-for="item in harborProjectList" :key="item" :label="item" :value="item" />
           </el-select>
           <el-select
             id="imageTag"
@@ -100,6 +93,7 @@
             placeholder="请选择镜像版本"
             style="width: 305px;"
             clearable
+            filterable
             @change="validateField('imageTag')"
           >
             <el-option
@@ -111,31 +105,31 @@
           </el-select>
         </el-form-item>
         <el-form-item label="加载模型">
-          <el-switch
-            v-model="useModel"
-            @change="onUseModelChange"
-          />
+          <el-switch v-model="useModel" @change="onUseModelChange" />
         </el-form-item>
         <el-form-item v-if="useModel" label="选用模型类型">
           <el-radio-group v-model="form.modelResource" @change="onModelResourceChange">
-            <el-radio :label="0" border>我的模型</el-radio>
-            <el-radio :label="1" border>预训练模型</el-radio>
-            <el-radio :label="2" border>炼知模型</el-radio>
+            <el-radio :label="MODEL_RESOURCE_ENUM.CUSTOM" border>我的模型</el-radio>
+            <el-radio :label="MODEL_RESOURCE_ENUM.PRESET" border>预训练模型</el-radio>
+            <el-radio :label="MODEL_RESOURCE_ENUM.ATLAS" border>炼知模型</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item
-          v-if="[0, 1].includes(form.modelResource)"
+          v-if="
+            [MODEL_RESOURCE_ENUM.CUSTOM, MODEL_RESOURCE_ENUM.PRESET].includes(form.modelResource)
+          "
           key="modelSelect"
           label="模型选择"
           class="is-required"
           :error="modelSelectionErrorMsg"
         >
           <el-select
-            id="modelId" 
+            id="modelId"
             v-model="form.modelId"
             placeholder="请选择模型"
             style="width: 190px;"
             clearable
+            filterable
             @change="onModelChange"
           >
             <el-option
@@ -146,22 +140,27 @@
             />
           </el-select>
           <el-select
-            v-if="useMineModel"
+            v-if="useCustomModel"
             id="modelBranchId"
             v-model="form.modelBranchId"
             placeholder="请选择模型版本"
             style="width: 305px;"
             clearable
+            filterable
             @change="onModelBranchChange"
           >
             <el-option
               v-for="item in modelBranchList"
               :key="item.id"
-              :label="item.versionNum"
+              :label="item.version"
               :value="item.id"
             />
           </el-select>
-          <el-tooltip effect="dark" content="模型路径通过 model_load_dir 传到算法内部" placement="top">
+          <el-tooltip
+            effect="dark"
+            content="模型路径通过“model_load_dir”传到算法内部"
+            placement="top"
+          >
             <i class="el-icon-warning-outline primary f18 v-text-top" />
           </el-tooltip>
         </el-form-item>
@@ -176,6 +175,7 @@
             v-model="teacherModelIds"
             multiple
             clearable
+            filterable
             placeholder="请选择教师模型"
             @change="onTeacherModelChange"
           >
@@ -187,14 +187,12 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item
-          v-if="useAtlasModel"
-          label="学生模型"
-        >
+        <el-form-item v-if="useAtlasModel" label="学生模型">
           <el-select
             v-model="studentModelIds"
             multiple
             clearable
+            filterable
             placeholder="请选择学生模型"
           >
             <el-option
@@ -215,10 +213,7 @@
             @change="onTrainDataSourceChange"
           />
         </el-form-item>
-        <el-form-item
-          label="验证数据集"
-          prop="valType"
-        >
+        <el-form-item label="验证数据集" prop="valType">
           <el-switch
             v-model="form.valType"
             :active-value="1"
@@ -226,7 +221,12 @@
             @change="onVerifyTypeChange"
           />
         </el-form-item>
-        <el-form-item v-if="form.valType" ref="verifyDataSource" label="验证数据集" prop="verifyDataSourcePath">
+        <el-form-item
+          v-if="form.valType"
+          ref="verifyDataSource"
+          label="验证数据集"
+          prop="verifyDataSourcePath"
+        >
           <DataSourceSelector
             ref="verifyDataSourceSelector"
             type="verify"
@@ -254,82 +254,60 @@
           @updateRunParams="updateRunParams"
         />
         <el-divider />
-        <el-form-item
-          label="分布式训练"
-          prop="trainType"
-          class="mt-10"
-        >
-          <el-switch
-            id="trainType"
-            v-model="form.trainType"
-            :active-value="1"
-            :inactive-value="0"
-            @change="onTrainTypeChange"
-          />
-        </el-form-item>
-        <el-form-item
-          v-if="form.trainType"
-          label="节点数"
-          prop="resourcesPoolNode"
-        >
+        <el-form-item label="节点数" prop="resourcesPoolNode">
           <el-input-number
             id="resourcesPoolNode"
             v-model="form.resourcesPoolNode"
-            :min="2"
+            :min="1"
             :max="trainConfig.trainNodeMax"
             :step-strictly="true"
+            @change="onResourcesPoolNodeChange"
           />
-          <el-tooltip effect="dark" content="请确保代码中包含“num_nodes”参数和“node_ips”参数用于接收分布式相关参数" placement="top">
+          <el-tooltip
+            v-show="form.resourcesPoolNode > 1"
+            effect="dark"
+            content="请确保代码中包含“num_nodes”参数和“node_ips”参数用于接收分布式相关参数"
+            placement="top"
+          >
             <i class="el-icon-warning-outline primary f18 v-text-top" />
           </el-tooltip>
         </el-form-item>
         <el-form-item label="节点类型" class="is-required">
-          <el-radio-group
-            v-model="form.resourcesPoolType"
-            @change="onResourcesPoolTypeChange"
-          >
-            <el-radio
-              id="resourcesPoolType_tab_0"
-              :label="0"
-              border
-            >CPU</el-radio>
-            <el-radio
-              id="resourcesPoolType_tab_1"
-              :label="1"
-              border
-            >GPU</el-radio>
+          <el-radio-group v-model="form.resourcesPoolType" @change="onResourcesPoolTypeChange">
+            <el-radio id="resourcesPoolType_tab_0" :label="0" border>CPU</el-radio>
+            <el-radio id="resourcesPoolType_tab_1" :label="1" border>GPU</el-radio>
           </el-radio-group>
-          <el-tooltip v-if="form.resourcesPoolType" effect="dark" content="后台将自动获取并填充参数 gpu_num_per_node" placement="top">
+          <el-tooltip
+            v-if="form.resourcesPoolType"
+            effect="dark"
+            content="后台将自动获取并填充参数 gpu_num_per_node"
+            placement="top"
+          >
             <i class="el-icon-warning-outline primary f18 v-text-top" />
           </el-tooltip>
         </el-form-item>
         <el-form-item ref="trainJobSpecs" label="节点规格" prop="trainJobSpecsName" class="w270">
-          <el-select id="trainJobSpecsName" v-model="form.trainJobSpecsName">
+          <el-select id="trainJobSpecsName" v-model="form.trainJobSpecsName" filterable>
             <el-option
-              v-for="spec in specList"
+              v-for="spec in specsList"
               :key="spec.id"
-              :label="spec.label"
-              :value="spec.label"
+              :label="spec.specsName"
+              :value="spec.specsName"
             />
           </el-select>
-          <el-tooltip v-if="form.trainType" effect="dark" content="每个节点的节点规格" placement="top">
+          <el-tooltip
+            v-if="form.trainType"
+            effect="dark"
+            content="每个节点的节点规格"
+            placement="top"
+          >
             <i class="el-icon-warning-outline primary f18 v-text-top" />
           </el-tooltip>
         </el-form-item>
-        <el-form-item
-          label="延迟启停"
-        >
-          <el-switch
-            id="delayCreateDelete"
-            v-model="delayCreateDelete"
-            @change="onDelayChange"
-          />
+        <el-form-item label="延迟启停">
+          <el-switch id="delayCreateDelete" v-model="delayCreateDelete" @change="onDelayChange" />
         </el-form-item>
-        <el-form-item
-          v-if="delayCreateDelete"
-          label="延迟启动"
-          prop="delayCreateTime"
-        >
+        <el-form-item v-if="delayCreateDelete" label="延迟启动" prop="delayCreateTime">
           <el-input-number
             id="delayCreateTime"
             v-model="form.delayCreateTime"
@@ -338,11 +316,7 @@
             :step-strictly="true"
           />&nbsp;小时
         </el-form-item>
-        <el-form-item
-          v-if="delayCreateDelete"
-          label="训练时长上限"
-          prop="delayDeleteTime"
-        >
+        <el-form-item v-if="delayCreateDelete" label="训练时长上限" prop="delayDeleteTime">
           <el-input-number
             id="delayDeleteTime"
             v-model="form.delayDeleteTime"
@@ -361,9 +335,9 @@
         </el-form-item>
       </template>
       <!--不可编辑-->
-      <template v-if="type==='saveParams'">
+      <template v-if="type === 'saveParams'">
         <el-form-item label="选用算法类型">
-          {{ form.algorithmSource === 2 ? '预置算法' : '我的算法' }}
+          {{ form.algorithmSource === ALGORITHM_RESOURCE_ENUM.PRESET ? '预置算法' : '我的算法' }}
         </el-form-item>
         <el-form-item label="选用算法">
           {{ form.algorithmName }}
@@ -372,21 +346,17 @@
           {{ form.imageName }}
         </el-form-item>
         <el-form-item
-          v-if="[0, 1].includes(form.modelResource)"
+          v-if="
+            [MODEL_RESOURCE_ENUM.CUSTOM, MODEL_RESOURCE_ENUM.PRESET].includes(form.modelResource)
+          "
           label="模型选择"
         >
           {{ trainModel.name }}
         </el-form-item>
-        <el-form-item
-          v-if="useAtlasModel"
-          label="教师模型"
-        >
+        <el-form-item v-if="useAtlasModel" label="教师模型">
           {{ teacherModelNames }}
         </el-form-item>
-        <el-form-item
-          v-if="useAtlasModel"
-          label="学生模型"
-        >
+        <el-form-item v-if="useAtlasModel" label="学生模型">
           {{ studentModelNames }}
         </el-form-item>
         <el-form-item label="训练数据集">
@@ -399,10 +369,9 @@
           {{ form.runCommand }}
         </el-form-item>
         <el-form-item label="运行参数">
-          <span
-            v-for="key of Object.keys(form.runParams || {})"
-            :key="key"
-          >--{{ key }}={{ form.runParams[key] }} </span>
+          <span v-for="key of Object.keys(form.runParams || {})" :key="key"
+            >--{{ key }}={{ form.runParams[key] }}
+          </span>
         </el-form-item>
         <el-form-item label="分布式训练">
           {{ form.trainType === 1 ? '是' : '否' }}
@@ -423,7 +392,7 @@
           {{ form.resourcesPoolNode }}
         </el-form-item>
         <el-form-item label="节点规格">
-          {{ formSpecs && formSpecs.label }}
+          {{ formSpecs && formSpecs.specsName }}
         </el-form-item>
         <el-form-item label="运行命令预览">
           <div class="command-preview">
@@ -436,14 +405,22 @@
 </template>
 
 <script>
-import { validateNameWithHyphen, getQueueMessage } from '@/utils';
+import {
+  validateNameWithHyphen,
+  getQueueMessage,
+  ALGORITHM_RESOURCE_ENUM,
+  MODEL_RESOURCE_ENUM,
+  RESOURCES_MODULE_ENUM,
+} from '@/utils';
 import { list as getAlgorithmList } from '@/api/algorithm/algorithm';
 import { getModelByResource } from '@/api/model/model';
 import { list as getModelBranchs } from '@/api/model/modelVersion';
 import { getTrainModel } from '@/api/trainingJob/job';
 import { getImageNameList, getImageTagList } from '@/api/trainingImage/index';
+import { list as getSpecsNames } from '@/api/system/resources';
 import { trainConfig } from '@/config';
 import { IMAGE_PROJECT_TYPE } from '@/views/trainingJob/utils';
+
 import RunParamForm from './runParamForm';
 import DataSourceSelector from './dataSourceSelector';
 
@@ -461,7 +438,7 @@ const defaultForm = {
   jobName: '', // 用于编辑训练任务时, 表单展示 jobName
   paramName: '',
   description: '',
-  algorithmSource: 1,
+  algorithmSource: ALGORITHM_RESOURCE_ENUM.CUSTOM,
   algorithmId: null,
   algorithmName: null,
   algorithmUsage: null,
@@ -494,12 +471,11 @@ const defaultForm = {
 
 export default {
   name: 'JobForm',
-  dicts: ['cpu_specs', 'gpu_specs'],
   components: { RunParamForm, DataSourceSelector },
   props: {
     type: {
       type: String,
-      default: 'add', // add: 新增训练任务; paramsAdd: 任务参数创建训练任务; algoAdd: 算法创建训练任务; edit: 修改训练任务; saveParams: 保存训练参数模板; paramEdit: 修改训练参数模板。
+      default: 'add', // add: 新增训练任务; paramsAdd: 任务参数创建训练任务; algoAdd: 算法创建训练任务; edit: 修改训练任务; saveParams: 保存训练参数模板; paramsEdit: 修改训练参数模板。
     },
     widthPercent: {
       type: Number,
@@ -508,6 +484,9 @@ export default {
   },
   data() {
     return {
+      ALGORITHM_RESOURCE_ENUM,
+      MODEL_RESOURCE_ENUM,
+
       algorithmIdList: [],
       harborProjectList: [],
       harborImageList: [],
@@ -532,6 +511,7 @@ export default {
       trainModelList: [],
       teacherModelList: [],
       studentModelList: [],
+      specsList: [],
 
       form: { ...defaultForm },
       rules: {
@@ -545,56 +525,39 @@ export default {
           { max: 32, message: '长度控制在32个字符', trigger: 'blur' },
           { validator: validateNameWithHyphen, trigger: ['blur', 'change'] },
         ],
-        algorithmSource: [
-          { required: true, message: '请选择算法', trigger: 'change' },
-        ],
-        algorithmId: [
-          { required: true, message: '请选择算法', trigger: 'manual' },
-        ],
-        imageTag: [
-          { required: true, message: '请选择镜像', trigger: 'manual' },
-        ],
-        dataSourcePath: [
-          { required: true, message: '请选择数据集', trigger: 'manual' },
-        ],
-        trainJobSpecsName: [
-          { required: true, message: '请选择节点规格', trigger: 'change' },
-        ],
-        runCommand: [
-          { required: true, message: '请输入运行命令', trigger: ['blur', 'change'] },
-        ],
+        algorithmSource: [{ required: true, message: '请选择算法', trigger: 'change' }],
+        algorithmId: [{ required: true, message: '请选择算法', trigger: 'manual' }],
+        imageTag: [{ required: true, message: '请选择镜像', trigger: 'manual' }],
+        dataSourcePath: [{ required: true, message: '请选择数据集', trigger: 'manual' }],
+        trainJobSpecsName: [{ required: true, message: '请选择节点规格', trigger: 'change' }],
+        runCommand: [{ required: true, message: '请输入运行命令', trigger: ['blur', 'change'] }],
       },
     };
   },
   computed: {
     formSpecs() {
-      return this.specList.find(spec => spec.label === this.form.trainJobSpecsName);
-    },
-    specList() {
-      switch(this.form.resourcesPoolType) {
-        case 0:
-          return this.dict.cpu_specs;
-        case 1:
-          return this.dict.gpu_specs;
-        default:
-          return [];
-      }
+      return this.specsList.find((spec) => spec.specsName === this.form.trainJobSpecsName);
     },
     isSaveParams() {
       return this.type === 'saveParams';
     },
     preview() {
       let str = this.form.runCommand;
-      for(const key of Object.keys(this.runParamObj)) {
+      for (const key of Object.keys(this.runParamObj)) {
         str += ` --${key}=${this.runParamObj[key]}`;
       }
       if (this.selectedAlgorithm) {
-        str += this.selectedAlgorithm.isTrainLog? ' --train_log=/workspace/log' : '';
-        str += this.selectedAlgorithm.isTrainOut? ' --train_out=/workspace/out' : '';
-        str += this.selectedAlgorithm.isVisualizedLog? ' --train_visualized_log=/workspace/visualizedlog' : '';
+        str += this.selectedAlgorithm.isTrainOut ? ' --train_out=/workspace/log' : '';
+        str += this.selectedAlgorithm.isTrainModelOut ? ' --train_model_out=/workspace/out' : '';
+        str += this.selectedAlgorithm.isVisualizedLog
+          ? ' --train_visualized_log=/workspace/visualizedlog'
+          : '';
         str += ' --data_url=/dataset';
       }
-      str += this.form.valDataSourceName && this.form.valDataSourcePath ? ' --val_data_url=/valdataset' : '';
+      str +=
+        this.form.valDataSourceName && this.form.valDataSourcePath
+          ? ' --val_data_url=/valdataset'
+          : '';
       str += this.form.modelId && this.form.modelBranchId ? ' --model_load_dir=/modeldir' : '';
       if (this.form.resourcesPoolType) {
         // eslint-disable-next-line no-template-curly-in-string
@@ -602,36 +565,38 @@ export default {
       }
       return str;
     },
-    useMineModel() {
-      return this.form.modelResource === 0;
+    useCustomModel() {
+      return this.form.modelResource === MODEL_RESOURCE_ENUM.CUSTOM;
     },
     useAtlasModel() {
-      return this.form.modelResource === 2;
+      return this.form.modelResource === MODEL_RESOURCE_ENUM.ATLAS;
     },
     trainModel() {
       return this.trainModelList.length ? this.trainModelList[0] : {};
     },
     teacherModelNames() {
-      return this.teacherModelList.map(model => model.name).join(', ');
+      return this.teacherModelList.map((model) => model.name).join(', ');
     },
     studentModelNames() {
-      return this.studentModelList.map(model => model.name).join(', ');
+      return this.studentModelList.map((model) => model.name).join(', ');
+    },
+    usePresetAlgorithm() {
+      return this.form.algorithmSource === ALGORITHM_RESOURCE_ENUM.PRESET;
     },
   },
   created() {
-    this.$on('dictReady', this.getInitResourceSpecs);
     this.callMsg = getQueueMessage();
   },
   methods: {
     initForm(form) {
       const newForm = form || {};
-      Object.keys(this.form).forEach(item => {
+      Object.keys(this.form).forEach((item) => {
         if (newForm[item] !== null && newForm[item] !== undefined) {
           this.form[item] = newForm[item];
         }
       });
       setTimeout(async () => {
-        this.delayCreateDelete = (this.form.delayCreateTime !== 0) && (this.form.delayDeleteTime !== 0);
+        this.delayCreateDelete = this.form.delayCreateTime !== 0 && this.form.delayDeleteTime !== 0;
         this.getAlgorithmList();
         if (!this.isSaveParams) {
           this.getHarborProjects().then(() => {
@@ -639,7 +604,11 @@ export default {
           });
           this.getModels(true);
           this.$refs.trainDataSourceSelector.updateAlgorithmUsage(this.form.algorithmUsage, true);
-          this.form.valType && this.$refs.verifyDataSourceSelector.updateAlgorithmUsage(this.form.valAlgorithmUsage, true);
+          this.form.valType &&
+            this.$refs.verifyDataSourceSelector.updateAlgorithmUsage(
+              this.form.valAlgorithmUsage,
+              true
+            );
         } else if (this.form.modelResource !== null) {
           const { modelList, teacherModelList, studentModelList } = await getTrainModel({
             modelResource: this.form.modelResource,
@@ -652,22 +621,15 @@ export default {
           this.teacherModelList = teacherModelList;
           this.studentModelList = studentModelList;
         }
-        this.getInitResourceSpecs();
+        this.onResourcesPoolTypeChange(!['add', 'algoAdd'].includes(this.type));
 
         // 根据 modelResource 的值来判断是否使用了模型
         this.useModel = this.form.modelResource !== null;
         // runParamObj 初始值为 form.runParams
-        this.runParamObj = {...this.form.runParams};
+        this.runParamObj = { ...this.form.runParams };
         this.clearValidate();
       }, 0);
     },
-    getInitResourceSpecs() {
-      if (!this.dictOrFormReady) {
-        this.dictOrFormReady = true;
-        return;
-      }
-      this.onResourcesPoolTypeChange(!['add', 'algoAdd'].includes(this.type));
-    },
     validate(...args) {
       this.$refs.form.validate.apply(this, args);
     },
@@ -700,8 +662,10 @@ export default {
         });
         return;
       }
-      
-      if (!this.isSaveParams && !this.checkModelValid()) { return; };
+
+      if (!this.isSaveParams && !this.checkModelValid()) {
+        return;
+      }
 
       // 清除模型部分多余字段
       if (!this.useAtlasModel) {
@@ -710,12 +674,15 @@ export default {
           studentModelIds: null,
         });
       }
-      
-      this.$refs.form.validate(async valid => {
+
+      this.$refs.form.validate(async (valid) => {
         if (valid) {
-          const params = {...this.form};
-          params.runParams = {...this.runParamObj};
-          params.trainJobSpecsInfo = this.formSpecs.value;
+          const params = { ...this.form };
+          params.runParams = { ...this.runParamObj };
+          if (this.formSpecs) {
+            const { cpuNum, gpuNum, memNum, workspaceRequest } = this.formSpecs;
+            Object.assign(params, { cpuNum, gpuNum, memNum, workspaceRequest });
+          }
           // 请求交互都不放在组件完成
           this.$emit('getForm', params);
         } else {
@@ -729,7 +696,7 @@ export default {
     // 镜像项目为空时选择默认项目
     resetProject() {
       if (!this.form.imageName) {
-        if (this.harborProjectList.some(project => project === 'oneflow')) {
+        if (this.harborProjectList.some((project) => project === 'oneflow')) {
           this.form.imageName = 'oneflow';
         } else if (this.harborProjectList.length) {
           Object.assign(this.form, { imageName: this.harborProjectList[0] });
@@ -768,14 +735,20 @@ export default {
     },
     async getHarborProjects() {
       this.harborProjectList = await getImageNameList({ projectType: IMAGE_PROJECT_TYPE.TRAIN });
-      if (this.form.imageName && !this.harborProjectList.some(project => project === this.form.imageName)) {
+      if (
+        this.form.imageName &&
+        !this.harborProjectList.some((project) => project === this.form.imageName)
+      ) {
         this.$message.warning('该训练原有的运行项目不存在，请重新选择');
         this.form.imageName = null;
         this.form.imageTag = null;
         return;
       }
-      this.form.imageName && await this.getHarborImages(true);
-      if (this.form.imageTag && !this.harborImageList.some(image => image.imageTag === this.form.imageTag)) {
+      this.form.imageName && (await this.getHarborImages(true));
+      if (
+        this.form.imageTag &&
+        !this.harborImageList.some((image) => image.imageTag === this.form.imageTag)
+      ) {
         this.$message.warning('该训练原有的运行镜像不存在，请重新选择');
         this.form.imageTag = null;
       }
@@ -786,43 +759,51 @@ export default {
       }
       if (!this.form.imageName) {
         this.harborImageList = [];
-        return;
+        return Promise.reject();
       }
-      return getImageTagList({ imageName: this.form.imageName, projectType: IMAGE_PROJECT_TYPE.TRAIN })
-        .then(res => {
-          this.harborImageList = res;
-        });
+      return getImageTagList({
+        imageName: this.form.imageName,
+        projectType: IMAGE_PROJECT_TYPE.TRAIN,
+      }).then((res) => {
+        this.harborImageList = res;
+      });
     },
-    
+
     // saveModel 用于表示是否需要根据模型列表匹配模型/版本/教师模型/学生模型
     async getModels(saveModel = false) {
       // modelResource 不存在时，获取 我的模型 的模型列表
       this.modelList = await getModelByResource(this.form.modelResource || 0);
 
       // 如果不保留则不进行其余任何操作
-      if (!saveModel) { return; }
+      if (!saveModel) {
+        return;
+      }
 
       switch (this.form.modelResource) {
         // 我的模型
         case 0:
-          if (!this.form.modelId) { return; }
-          if (!this.modelList.find(model => model.id === this.form.modelId)) {
+          if (!this.form.modelId) {
+            return;
+          }
+          if (!this.modelList.find((model) => model.id === this.form.modelId)) {
             this.$message.warning('选择的模型不存在，请重新选择');
             this.form.modelId = this.form.modelBranchId = null;
             return;
           }
           this.getModelBranchs(this.form.modelId, saveModel);
           break;
-        
+
         // 预训练模型
         case 1:
-          if (!this.form.modelId) { return; }
-          if (!this.modelList.find(model => model.id === this.form.modelId)) {
+          if (!this.form.modelId) {
+            return;
+          }
+          if (!this.modelList.find((model) => model.id === this.form.modelId)) {
             this.$message.warning('选择的模型不存在，请重新选择');
-            this.form.modelId =  null;
+            this.form.modelId = null;
           }
           break;
-        
+
         // 炼知模型
         case 2:
           this.pushModel(this.teacherModelIds, this.form.teacherModelIds, '教师');
@@ -832,37 +813,43 @@ export default {
       }
     },
     async getModelBranchs(parentId, saveBranchId = false) {
-      if (!this.useMineModel) { return; } // 只有使用 我的模型 时，才获取版本列表
+      if (!this.useCustomModel) {
+        return;
+      } // 只有使用 我的模型 时，才获取版本列表
       this.modelBranchList = (await getModelBranchs({ parentId })).result;
 
       // 如果不保留则清空模型版本选项
       if (!saveBranchId) {
         this.form.modelBranchId = null;
         return;
-      };
+      }
 
-      if (!this.form.modelBranchId) { return; }
-      if (!this.modelBranchList.find(model => model.id === this.form.modelBranchId)) {
+      if (!this.form.modelBranchId) {
+        return;
+      }
+      if (!this.modelBranchList.find((model) => model.id === this.form.modelBranchId)) {
         this.$message.warning('选择的模型版本不存在，请重新选择');
         this.form.modelBranchId = null;
       }
     },
     pushModel(modelList, modelIdString, modelType = '') {
-      if (!modelIdString) { return; }
+      if (!modelIdString) {
+        return;
+      }
       const modelIdList = modelIdString.split(',');
       const existSet = new Set();
       const notExistSet = new Set();
 
       // 教师、学生模型 在修改时，如果部分模型不存在，则只显示剩余模型
-      modelIdList.forEach(id => {
-        if (this.modelList.find(model => model.id === Number(id))) {
+      modelIdList.forEach((id) => {
+        if (this.modelList.find((model) => model.id === Number(id))) {
           existSet.add(Number(id));
         } else {
           notExistSet.add(id);
         }
       });
 
-      Array.from(existSet).forEach(id => modelList.push(id));
+      Array.from(existSet).forEach((id) => modelList.push(id));
       if (notExistSet.size > 0) {
         this.callMsg({
           message: `以下 id 的${modelType}模型不存在: ${Array.from(notExistSet).join('、')}`,
@@ -883,7 +870,7 @@ export default {
     },
     onUseModelChange(useModel) {
       if (useModel) {
-        this.form.modelResource = 0;
+        this.form.modelResource = MODEL_RESOURCE_ENUM.CUSTOM;
       } else {
         Object.assign(this.form, {
           modelResource: null,
@@ -899,8 +886,12 @@ export default {
       }
     },
     onModelChange(id) {
-      if (this.useMineModel) {
-        this.getModelBranchs(id);
+      if (this.useCustomModel) {
+        if (id) {
+          this.getModelBranchs(id);
+        } else {
+          this.modelBranchList = [];
+        }
       } else {
         this.checkModelValid();
       }
@@ -916,7 +907,7 @@ export default {
       let errorMsg = null;
       switch (this.form.modelResource) {
         // 我的模型
-        case 0:
+        case MODEL_RESOURCE_ENUM.CUSTOM:
           if (!this.form.modelId) {
             errorMsg = '模型不能为空';
           } else if (!this.form.modelBranchId) {
@@ -930,7 +921,7 @@ export default {
           break;
 
         // 预训练模型
-        case 1:
+        case MODEL_RESOURCE_ENUM.PRESET:
           if (!this.form.modelId) {
             errorMsg = '模型不能为空';
           }
@@ -942,7 +933,7 @@ export default {
           break;
 
         // 炼知模型
-        case 2:
+        case MODEL_RESOURCE_ENUM.ATLAS:
           if (!this.teacherModelIds.length) {
             errorMsg = '教师模型不能为空';
           }
@@ -967,33 +958,45 @@ export default {
       }
       this.algLoading = true;
       const params = {
-        algorithmSource: Number(this.form.algorithmSource || 1),
+        algorithmSource: this.form.algorithmSource || ALGORITHM_RESOURCE_ENUM.CUSTOM,
         current: this.currentAlgPage,
         size: this.algPageSize,
       };
-      getAlgorithmList(params).then(res => {
-        this.algorithmIdList = this.algorithmIdList.concat(res.result);
-        this.currentAlgPage += 1;
-        this.algLoading = false;
-        if (res.result.length < this.algPageSize) {
-          this.noMoreLoadAlg = true;
-        }
-        if (this.form.algorithmId) {
-          this.selectedAlgorithm = this.algorithmIdList.find(item => item.id === this.form.algorithmId);
-          if (!this.selectedAlgorithm) {
-            this.$message.warning('原有算法不存在，请重新选择');
-            this.form.algorithmId = null;
+      getAlgorithmList(params)
+        .then((res) => {
+          this.algorithmIdList = this.algorithmIdList.concat(res.result);
+          this.currentAlgPage += 1;
+          this.algLoading = false;
+          if (res.result.length < this.algPageSize) {
+            this.noMoreLoadAlg = true;
           }
-        }
-      }).finally(() => {
-        this.algLoading = false;
-      });
+          if (this.form.algorithmId) {
+            this.selectedAlgorithm = this.algorithmIdList.find(
+              (item) => item.id === this.form.algorithmId
+            );
+            if (!this.selectedAlgorithm) {
+              this.$message.warning('原有算法不存在，请重新选择');
+              this.form.algorithmId = null;
+            }
+          }
+        })
+        .finally(() => {
+          this.algLoading = false;
+        });
     },
 
-    onResourcesPoolTypeChange(keepSpec = false) {
+    async onResourcesPoolTypeChange(keepSpec = false) {
+      this.specsList = (
+        await getSpecsNames({
+          module: RESOURCES_MODULE_ENUM.TRAIN,
+          resourcesPoolType: this.form.resourcesPoolType,
+          current: 1,
+          size: 500,
+        })
+      ).result;
       // 当没有显式指定保留节点规格时，选择规格列表第一个选项
-      if (keepSpec !== true && this.specList.length) {
-        this.form.trainJobSpecsName = this.specList[0].label;
+      if (keepSpec !== true && this.specsList.length) {
+        this.form.trainJobSpecsName = this.specsList[0].specsName;
       }
     },
     onTrainDataSourceChange(dataSourceResult) {
@@ -1010,37 +1013,49 @@ export default {
     async onAlgorithmChange(id) {
       // 选用算法变更时，需要对自动填充的表单项进行验证
       this.validateField('algorithmId');
-      // 选用算法变更时，需要同步算法的算法用途、运行项目、运行镜像、运行命令、运行参数
-      const algorithm = this.algorithmIdList.find(i => i.id === id);
+      // 选用算法变更时，需要同步算法的模型类别、运行项目、运行镜像、运行命令、运行参数
+      const algorithm = this.algorithmIdList.find((i) => i.id === id);
       this.selectedAlgorithm = algorithm;
-      this.form.algorithmUsage = algorithm?.algorithmUsage || null;
-      this.form.valAlgorithmUsage = algorithm?.algorithmUsage || null;
-      this.$refs.trainDataSourceSelector.updateAlgorithmUsage(this.form.algorithmUsage);
-      this.form.valType && this.$refs.verifyDataSourceSelector.updateAlgorithmUsage(this.form.valAlgorithmUsage);
-      this.form.runCommand = algorithm?.runCommand || '';
-      this.form.runParams = algorithm?.runParams || {};
-      this.runParamObj = {...this.form.runParams};
-      this.form.imageName = algorithm?.imageName;
-      this.$nextTick(() => {
-        this.clearFieldValidate('runCommand');
-      });
-      if (this.form.imageName && !this.harborProjectList.some(project => project === this.form.imageName)) {
-        this.$message.warning('算法选择的运行项目不存在，请重新选择');
-        this.form.imageName = null;
-        this.form.imageTag = null;
-        return;
-      }
-      this.form.imageName && await this.getHarborImages(true);
-      this.form.imageTag = algorithm?.imageTag;
-      if (this.form.imageTag && !this.harborImageList.some(image => image.imageTag === this.form.imageTag)) {
-        this.$message.warning('算法选择的运行镜像不存在，请重新选择');
-        this.form.imageTag = null;
-        return;
-      }
-      if (this.form.imageTag) {
-        this.validateField('imageTag');
+      this.form.algorithmUsage = algorithm?.algorithmUsage || null; // 同步算法用途
+      this.form.valAlgorithmUsage = algorithm?.algorithmUsage || null; // 同步算法用途到验证数据集
+      this.$refs.trainDataSourceSelector.updateAlgorithmUsage(this.form.algorithmUsage); // 根据算法用途更新数据集列表
+      this.form.valType &&
+        this.$refs.verifyDataSourceSelector.updateAlgorithmUsage(this.form.valAlgorithmUsage); // 根据验证数据集算法用途更新数据集列表
+      if (this.usePresetAlgorithm) {
+        this.form.runCommand = algorithm?.runCommand || ''; // 同步运行命令
+        this.form.runParams = algorithm?.runParams || {}; // 同步运行参数
+        this.runParamObj = { ...this.form.runParams }; // 同步运行参数
+        this.form.imageName = algorithm?.imageName; // 同步镜像名称
+        this.$nextTick(() => {
+          this.clearFieldValidate('runCommand'); // 清空运行命令的表单校验
+        });
+        // 镜像名校验
+        if (
+          this.form.imageName &&
+          !this.harborProjectList.some((project) => project === this.form.imageName)
+        ) {
+          this.$message.warning('算法选择的运行项目不存在，请重新选择');
+          this.form.imageName = null;
+          this.form.imageTag = null;
+          return;
+        }
+        this.form.imageName && (await this.getHarborImages(true)); // 获取镜像版本列表
+        this.form.imageTag = algorithm?.imageTag; // 同步镜像版本
+        // 镜像版本校验
+        if (
+          this.form.imageTag &&
+          !this.harborImageList.some((image) => image.imageTag === this.form.imageTag)
+        ) {
+          this.$message.warning('算法选择的运行镜像不存在，请重新选择');
+          this.form.imageTag = null;
+          return;
+        }
+        if (this.form.imageTag) {
+          this.validateField('imageTag');
+        }
+        // 镜像项目为空时选择默认项目
+        this.resetProject();
       }
-      this.resetProject();
     },
     onDelayChange(isDelay) {
       if (!isDelay) {
@@ -1049,7 +1064,7 @@ export default {
       }
     },
     onVerifyTypeChange() {
-      if (this.form.valType === 0 ) {
+      if (this.form.valType === 0) {
         this.form = Object.assign(this.form, {
           valDataSourceName: null,
           valDataSourcePath: null,
@@ -1058,7 +1073,10 @@ export default {
       } else {
         // 打开训练数据集时获取相应值
         this.$nextTick(() => {
-          this.$refs.verifyDataSourceSelector.updateAlgorithmUsage(this.form.valAlgorithmUsage, false);
+          this.$refs.verifyDataSourceSelector.updateAlgorithmUsage(
+            this.form.valAlgorithmUsage,
+            false
+          );
         });
       }
     },
@@ -1099,7 +1117,7 @@ export default {
       this.harborImageList = [];
       this.resetProject();
       this.onResourcesPoolTypeChange();
-      
+
       // 模型数据重置
       this.useModel = false;
       this.teacherModelIds = [];
@@ -1107,8 +1125,8 @@ export default {
       this.teacherModelErrorMsg = '';
       this.getModels();
     },
-    onTrainTypeChange(trainType) {
-      this.form.resourcesPoolNode = trainType === 0 ? 1 : 2;
+    onResourcesPoolNodeChange(node) {
+      this.form.trainType = node > 1 ? 1 : 0;
     },
   },
 };
diff --git a/webapp/src/components/Training/paramPair.vue b/webapp/src/components/Training/paramPair.vue
index 67a4d1f..3945765 100644
--- a/webapp/src/components/Training/paramPair.vue
+++ b/webapp/src/components/Training/paramPair.vue
@@ -1,32 +1,22 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <el-form
-    ref="form"
-    :label-width="labelWidth"
-    class="mb-20"
-    :model="item"
-  >
-    <el-form-item
-      :label="label + (index + 1)"
-      class="param-pair-item"
-      prop="key"
-      :rules="keyRule"
-    >
+  <el-form ref="form" :label-width="labelWidth" class="mb-20" :model="item">
+    <el-form-item :label="label + (index + 1)" class="param-pair-item" prop="key" :rules="keyRule">
       <el-input
         ref="keyInput"
         v-model="item.key"
@@ -72,7 +62,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'ParamPair',
   props: {
@@ -106,11 +95,11 @@ export default {
     },
     keyRule: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     valueRule: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
   },
   methods: {
diff --git a/webapp/src/components/Training/runParamForm.vue b/webapp/src/components/Training/runParamForm.vue
index f598827..1dc02b0 100644
--- a/webapp/src/components/Training/runParamForm.vue
+++ b/webapp/src/components/Training/runParamForm.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
@@ -38,8 +38,8 @@
         :index="index"
         :label-width="paramLabelWidth"
         :disabled="disabled"
-        :show-add="index==runParamsList.length-1"
-        :show-remove="runParamsList.length>1"
+        :show-add="index == runParamsList.length - 1"
+        :show-remove="runParamsList.length > 1"
         :key-rule="keyRule"
         @add="addP"
         @remove="removeP"
@@ -90,10 +90,12 @@ export default {
       paramsArguments: '',
       argErrorMsg: null,
       // 整体校验规则：对 key 做 python 变量名有效性校验，对 value 不做任何校验
-      keyRule: [{
-        validator: pythonKeyValidator(),
-        trigger: 'blur',
-      }],
+      keyRule: [
+        {
+          validator: pythonKeyValidator(),
+          trigger: 'blur',
+        },
+      ],
       paramId: 0,
       paramRepeatWarning: null,
       hasError: false,
@@ -124,16 +126,18 @@ export default {
     syncListData() {
       const list = [];
       for (const key in this.runParamObj) {
-        const objItem = this.runParamsList.find(p => p.key === key);
+        const objItem = this.runParamsList.find((p) => p.key === key);
         if (objItem) {
           objItem.value = this.runParamObj[key];
         }
-        list.push(objItem || {
-          key,
-          value: this.runParamObj[key],
-          // eslint-disable-next-line no-plusplus
-          id: this.paramId++,
-        });
+        list.push(
+          objItem || {
+            key,
+            value: this.runParamObj[key],
+            // eslint-disable-next-line no-plusplus
+            id: this.paramId++,
+          }
+        );
       }
       this.runParamsList = list;
       if (this.runParamsList.length === 0) {
@@ -146,7 +150,7 @@ export default {
     handleChange(paramPair) {
       // 当参数对的值改变时 key 为空，则把对于的 param 删除
       if (!paramPair.key) {
-        const paramIndex = this.runParamsList.findIndex(p => p.id === paramPair.id);
+        const paramIndex = this.runParamsList.findIndex((p) => p.id === paramPair.id);
         this.runParamsList.splice(paramIndex, 1);
       }
       if (!this.runParamsList.length) {
@@ -156,7 +160,7 @@ export default {
     },
     // 提供修改参数的入口, 如果参数存在则可修改
     updateParam(key, value) {
-      const param = this.runParamsList.find(p => p.key === key);
+      const param = this.runParamsList.find((p) => p.key === key);
       if (param) {
         param.value = value;
         this.updateRunParamObj();
@@ -165,7 +169,7 @@ export default {
     updateRunParamObj() {
       const obj = {};
       const repeatedParams = new Set();
-      this.runParamsList.forEach(param => {
+      this.runParamsList.forEach((param) => {
         // 当 key 为空或者已存在相同 key 时，不加入数值
         if (!param.key) {
           return;
@@ -178,21 +182,23 @@ export default {
       });
       if (repeatedParams.size) {
         this.paramRepeatWarning && this.paramRepeatWarning.close();
-        this.paramRepeatWarning = this.$message.warning(`参数 ${[...repeatedParams].join(', ')} 有重复, 将取用第一个值。`);
+        this.paramRepeatWarning = this.$message.warning(
+          `参数 ${[...repeatedParams].join(', ')} 有重复, 将取用第一个值。`
+        );
       }
       this.$emit('updateRunParams', obj);
     },
     validate() {
       // 单独校验
       let valid = true;
-      const validCallback = pairValid => {
+      const validCallback = (pairValid) => {
         valid = valid && pairValid;
       };
 
       // eslint-disable-next-line no-plusplus
       for (let i = 0; i < this.runParamsList.length; i++) {
         this.paramsMode === 1 && this.$refs.paramPairs[i].validate(validCallback);
-      };
+      }
 
       valid = valid && !this.hasError;
 
@@ -200,12 +206,12 @@ export default {
     },
     onParamsModeChange(value) {
       switch (value) {
-      case 1:
-        this.convertArgsToPairs();
-        break;
-      case 2:
-        this.convertPairsToArgs();
-        break;
+        case 1:
+          this.convertArgsToPairs();
+          break;
+        case 2:
+          this.convertPairsToArgs();
+          break;
         // no default
       }
     },
@@ -215,7 +221,7 @@ export default {
       const re = /^--(.+)=(.*)$/;
       this.hasError = false;
       // 先使用正则进行匹配
-      paramsList.forEach(arg => {
+      paramsList.forEach((arg) => {
         const group = re.exec(arg);
         if (group) {
           pairList.push({
@@ -234,7 +240,7 @@ export default {
       });
       if (this.hasError) return;
       // 其次做参数名验证
-      pairList.forEach(pair => {
+      pairList.forEach((pair) => {
         if (!stringIsValidPythonVariable(pair.key)) {
           this.$nextTick(() => {
             this.argErrorMsg = `参数名'${pair.key}'不是合法参数，请检查运行参数`;
@@ -255,7 +261,7 @@ export default {
     },
     convertPairsToArgs() {
       let args = '';
-      this.runParamsList.forEach(pair => {
+      this.runParamsList.forEach((pair) => {
         // 跳过空参数
         if (!pair.key) return;
         args += args ? ' ' : '';
@@ -280,4 +286,4 @@ export default {
   padding: 10px 0;
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/components/Training/saveModelDialog.vue b/webapp/src/components/Training/saveModelDialog.vue
index edc588f..83ca816 100644
--- a/webapp/src/components/Training/saveModelDialog.vue
+++ b/webapp/src/components/Training/saveModelDialog.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <!--训练管理页面-保存模型Dialog-->
@@ -23,19 +23,31 @@
     width="600px"
     @open="onDialogOpen"
     @close="onDialogClose"
-    @cancel="visible=false"
+    @cancel="visible = false"
     @ok="doSaveModel"
   >
     <el-form ref="modelForm" :model="modelForm" :rules="rules" label-width="100px">
-      <el-form-item label="文件路径" prop="modelAddress">
-        <div>{{ modelForm.modelAddress }}</div>
-      </el-form-item>
       <!--已有模型-->
       <el-form-item v-if="!createModelFlag" label="归属模型" prop="parentId">
-        <el-select v-model="modelForm.parentId" filterable placeholder="请选择模型" style="width: 300px;">
-          <el-option v-for="item in modelList" :key="item.id" :label="formatVersion(item)" :value="item.id" />
+        <el-select
+          v-model="modelForm.parentId"
+          filterable
+          placeholder="请选择模型"
+          style="width: 300px;"
+        >
+          <el-option
+            v-for="item in modelList"
+            :key="item.id"
+            :label="formatVersion(item)"
+            :value="item.id"
+          />
         </el-select>
-        <el-tooltip class="item" effect="dark" content="如果没有对应的模型，请点击新建" placement="right-start">
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="如果没有对应的模型，请点击新建"
+          placement="right-start"
+        >
           <el-button @click="goModel">新建模型</el-button>
         </el-tooltip>
       </el-form-item>
@@ -45,7 +57,7 @@
           <el-input
             v-model.trim="modelForm.name"
             style="width: 300px;"
-            maxlength="15"
+            maxlength="32"
             placeholder="请输入模型名称"
             show-word-limit
           />
@@ -54,7 +66,13 @@
           </el-tooltip>
         </el-form-item>
         <el-form-item label="框架" prop="frameType">
-          <el-select v-model="modelForm.frameType" placeholder="请选择框架" style="width: 300px;">
+          <el-select
+            v-model="modelForm.frameType"
+            placeholder="请选择框架"
+            style="width: 300px;"
+            filterable
+            @change="onFrameTypeChange"
+          >
             <el-option
               v-for="item in dict.frame_type"
               :key="item.value"
@@ -64,9 +82,14 @@
           </el-select>
         </el-form-item>
         <el-form-item label="模型格式" prop="modelType">
-          <el-select v-model="modelForm.modelType" placeholder="请选择模型格式" style="width: 300px;">
+          <el-select
+            v-model="modelForm.modelType"
+            placeholder="请选择模型格式"
+            filterable
+            style="width: 300px;"
+          >
             <el-option
-              v-for="item in dict.model_type"
+              v-for="item in modelTypeList"
               :key="item.value"
               :value="item.value"
               :label="item.label"
@@ -80,6 +103,7 @@
             filterable
             allow-create
             style="width: 300px;"
+            :disabled="modelClassNameDisabled"
             @change="onAlgorithmUsageChange"
           >
             <el-option
@@ -89,9 +113,24 @@
               :value="item.auxInfo"
             />
           </el-select>
+          <el-tooltip
+            v-if="modelClassNameDisabled"
+            effect="dark"
+            :content="modelClassNameDisableTooltip"
+            placement="top"
+          >
+            <i class="el-icon-warning-outline primary f18 v-text-top" />
+          </el-tooltip>
         </el-form-item>
         <el-form-item label="模型描述" prop="modelDescription">
-          <el-input v-model="modelForm.modelDescription" type="textarea" placeholder="请输入模型描述" maxlength="255" show-word-limit style="width: 400px;" />
+          <el-input
+            v-model="modelForm.modelDescription"
+            type="textarea"
+            placeholder="请输入模型描述"
+            maxlength="255"
+            show-word-limit
+            style="width: 400px;"
+          />
         </el-form-item>
       </template>
     </el-form>
@@ -100,9 +139,12 @@
 
 <script>
 import { validateNameWithHyphen } from '@/utils';
-import { list as getModels, add as addModel } from '@/api/model/model';
+import { list as getModels, add as addModel, getModelTypeMap } from '@/api/model/model';
 import { add as addModelVersion } from '@/api/model/modelVersion';
-import { list as getAlgorithmUsages, add as addAlgorithmUsage } from '@/api/algorithm/algorithmUsage';
+import {
+  list as getAlgorithmUsages,
+  add as addAlgorithmUsage,
+} from '@/api/algorithm/algorithmUsage';
 import BaseModal from '@/components/BaseModal';
 
 const defaultModelForm = {
@@ -138,49 +180,65 @@ export default {
   data() {
     return {
       visible: false,
-      modelForm: { ...defaultModelForm},
+      modelForm: { ...defaultModelForm },
       modelList: [],
       algorithmUsageList: [],
       rules: {
-        parentId: [
-          { required: true, message: '请选择模型', trigger: 'blur' },
-        ],
+        parentId: [{ required: true, message: '请选择模型', trigger: 'blur' }],
         name: [
           { required: true, message: '请输入模型名称', trigger: 'blur' },
-          { max: 20, message: '长度在 20 个字符以内', trigger: 'blur' },
+          { max: 32, message: '长度在 32 个字符以内', trigger: 'blur' },
           {
             validator: validateNameWithHyphen,
             trigger: ['blur', 'change'],
           },
         ],
-        frameType: [
-          { required: true, message: '请选择模型框架', trigger: 'blur' },
-        ],
-        modelType: [
-          { required: true, message: '请选择模型格式', trigger: 'blur' },
-        ],
+        frameType: [{ required: true, message: '请选择模型框架', trigger: 'blur' }],
+        modelType: [{ required: true, message: '请选择模型格式', trigger: 'blur' }],
         modelClassName: [
           { required: true, message: '请输入模型类别', trigger: ['blur', 'change'] },
         ],
-        modelDescription: [
-          { required: true, message: '请输入模型描述', trigger: 'blur' },
-          { max: 255, message: '长度在255个字符以内', trigger: 'blur' },
-        ],
+        modelDescription: [{ max: 255, message: '长度在255个字符以内', trigger: 'blur' }],
       },
       createModelFlag: false,
       loading: false,
+      modelTypeMap: {},
+      modelClassNameDisabled: false,
     };
   },
+  computed: {
+    modelTypeList() {
+      if (!this.modelForm.frameType || !this.modelTypeMap[this.modelForm.frameType]) {
+        return this.dict.model_type;
+      }
+      return this.dict.model_type.filter((type) =>
+        this.modelTypeMap[this.modelForm.frameType].includes(+type.value)
+      );
+    },
+    modelClassNameDisableTooltip() {
+      switch (this.type) {
+        case 'training':
+          return '模型类别由训练所用算法指定';
+        case 'optimize':
+          return '模型类别由原模型指定';
+        default:
+          return '模型类别已由外部指定';
+      }
+    },
+  },
   methods: {
     async show(model) {
-      this.modelForm = { ...defaultModelForm, ...model};
+      this.modelForm = { ...defaultModelForm, ...model };
       this.modelForm.modelSource = typeMap[this.type];
       this.createModelFlag = false;
+      this.modelClassNameDisabled = Boolean(this.modelForm.modelClassName);
       const data = await getModels({ current: 1, size: 100 });
       this.modelList = data.result;
       this.visible = true;
     },
     goModel() {
+      // 切换创建创建模型时，清空表单验证
+      this.$refs.modelForm.clearValidate();
       this.createModelFlag = !this.createModelFlag;
     },
     getAlgorithmUsages() {
@@ -189,7 +247,7 @@ export default {
         current: 1,
         size: 1000,
       };
-      getAlgorithmUsages(params).then(res => {
+      getAlgorithmUsages(params).then((res) => {
         this.algorithmUsageList = res.result;
       });
     },
@@ -200,39 +258,55 @@ export default {
     // handle
     onDialogOpen() {
       this.getAlgorithmUsages();
+      this.getModelTypeMap();
     },
     onDialogClose() {
       this.$refs.modelForm && this.$refs.modelForm.clearValidate();
     },
     onAlgorithmUsageChange(value) {
-      const usage = this.algorithmUsageList.find(usage => usage.auxInfo === value);
+      const usage = this.algorithmUsageList.find((usage) => usage.auxInfo === value);
       if (!usage) {
         this.createAlgorithmUsage(value);
       }
     },
+
+    // 获取模型框架 —— 模型格式匹配关系
+    async getModelTypeMap() {
+      this.modelTypeMap = await getModelTypeMap();
+    },
+
+    // 模型框架
+    onFrameTypeChange() {
+      this.modelForm.modelType = null;
+    },
+
     formatVersion(item) {
-      if (item.versionNum) {
-        return `${item.name} (V${(Number(item.versionNum.substr(1)) + 1).toString().padStart(4, '0')})`;
+      if (item.version) {
+        return `${item.name} (V${(Number(item.version.substr(1)) + 1)
+          .toString()
+          .padStart(4, '0')})`;
       }
       return `${item.name} (V0001)`;
     },
     // op
     doSaveModel() {
-      this.$refs.modelForm.validate(valid => {
+      this.$refs.modelForm.validate((valid) => {
         if (valid) {
-          const params = { ...this.modelForm};
+          const params = { ...this.modelForm };
           if (this.createModelFlag) {
             delete params.parentId;
             this.loading = true;
-            addModel(params).then(() => {
-              this.visible = false;
-              this.$message({
-                message: '模型保存成功',
-                type: 'success',
+            addModel(params)
+              .then(() => {
+                this.visible = false;
+                this.$message({
+                  message: '模型保存成功',
+                  type: 'success',
+                });
+              })
+              .finally(() => {
+                this.loading = false;
               });
-            }).finally(() => {
-              this.loading = false;
-            });
           } else {
             delete params.name;
             delete params.frameType;
@@ -240,15 +314,17 @@ export default {
             delete params.modelClassName;
             delete params.modelDescription;
             this.loading = true;
-            addModelVersion(params).then(() => {
-              this.visible = false;
-              this.$message({
-                message: '模型保存成功',
-                type: 'success',
+            addModelVersion(params)
+              .then(() => {
+                this.visible = false;
+                this.$message({
+                  message: '模型保存成功',
+                  type: 'success',
+                });
+              })
+              .finally(() => {
+                this.loading = false;
               });
-            }).finally(() => {
-              this.loading = false;
-            });
           }
         }
       });
diff --git a/webapp/src/components/UploadForm/FileFilter.js b/webapp/src/components/UploadForm/FileFilter.js
index a83f796..e0a2471 100644
--- a/webapp/src/components/UploadForm/FileFilter.js
+++ b/webapp/src/components/UploadForm/FileFilter.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export default class FileFilter {
   constructor(judge, message) {
diff --git a/webapp/src/components/UploadForm/form.js b/webapp/src/components/UploadForm/form.js
index 96ca94f..f1d8724 100644
--- a/webapp/src/components/UploadForm/form.js
+++ b/webapp/src/components/UploadForm/form.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import axios from 'axios';
 import { Message } from 'element-ui';
@@ -23,7 +23,7 @@ const path = require('path');
 
 let msgInstance;
 
-const defaultAccept = d => `${d} MB`;
+const defaultAccept = (d) => `${d} MB`;
 
 export default {
   name: 'UploadForm',
@@ -37,7 +37,8 @@ export default {
       type: Number, // 如果传入 0 代表不限制
       default: 5, // MB
     },
-    acceptSizeFormat: { // 格式化文本
+    acceptSizeFormat: {
+      // 格式化文本
       type: Function,
       default: defaultAccept,
     },
@@ -51,7 +52,7 @@ export default {
     },
     dataType: {
       type: String,
-      default: "visual",
+      default: 'visual',
     },
     /**
      * filters 数组要求：
@@ -60,9 +61,9 @@ export default {
      */
     filters: {
       type: Array,
-      default: () => ([]),
-      validator: value => {
-        for(const filter of value) {
+      default: () => [],
+      validator: (value) => {
+        for (const filter of value) {
           if (!filter.message || typeof filter.judge !== 'function') {
             return false;
           }
@@ -121,18 +122,27 @@ export default {
 
       const addFilter = this.addFileFilter.bind(this, file, fileList);
 
-      if (addFilter(!mimeType, '文件格式不支持')) { return; };
+      // 不限定文件格式时跳过验证
+      if (this.accept !== 'unspecified' && addFilter(!mimeType, '文件格式不支持')) {
+        return;
+      }
 
-      // accept 支持传入 0 代表不限制大小
-      const isOverSize = this.acceptSize !== 0 && (file.size / (1024 * 1024)) > this.acceptSize;
-      if (addFilter(isOverSize, `不能添加大于${this.acceptSize}MB的文件`)) { return; }
+      // acceptSize 支持传入 0 代表不限制大小
+      const isOverSize = this.acceptSize !== 0 && file.size / (1024 * 1024) > this.acceptSize;
+      if (addFilter(isOverSize, `不能添加大于${this.acceptSize}MB的文件`)) {
+        return;
+      }
 
       for (const item of fileList.slice(0, fileList.length - 1)) {
-        if (addFilter(item.name === file.name, '不能添加文件名相同的文件')) { return; };
+        if (addFilter(item.name === file.name, '不能添加文件名相同的文件')) {
+          return;
+        }
       }
 
       for (const filter of this.filters) {
-        if (addFilter(filter.judge(file, fileList), filter.message)) { return; };
+        if (addFilter(filter.judge(file, fileList), filter.message)) {
+          return;
+        }
       }
 
       this.lenOfFileList = fileList.length;
@@ -140,9 +150,10 @@ export default {
       this.$emit('fileChange', file, fileList);
     },
     onProgress(res) {
-      const {loaded} = res;
-      const {total} = res;
-      const uploadPercent = Math.floor((loaded / total) * 100) > 1 ? Math.floor((loaded / total) * 100) : 1;
+      const { loaded } = res;
+      const { total } = res;
+      const uploadPercent =
+        Math.floor((loaded / total) * 100) > 1 ? Math.floor((loaded / total) * 100) : 1;
       this.$emit('onUploadPercent', uploadPercent);
     },
     onRemove(file, fileList) {
@@ -160,7 +171,7 @@ export default {
       }
     },
   },
-  render(h) {
+  render() {
     // vue jsx 属性传递需要把 on- 放到 props 内
     // 详细参考：https://zhuanlan.zhihu.com/p/37920151
     const uploadProps = {
@@ -174,33 +185,39 @@ export default {
     };
 
     return (
-      <div id='upload-form-style' class='upload-form'>
+      <div id="upload-form-style" class="upload-form">
         <el-upload
           action={this.action}
           accept={this.accept}
-          class='upload-field'
+          class="upload-field"
           limit={this.limit}
           multiple
-          list-type={this.lenOfFileList > 100 || this.dataType === "text" ? 'text' : 'picture'}
+          list-type={this.lenOfFileList > 100 || this.dataType === 'text' ? 'text' : 'picture'}
           auto-upload={false}
           disabled={this.uploading}
           {...uploadProps}
         >
-          <el-button disabled={this.uploading || this.$attrs.disabled} size='mini' icon='el-icon-upload'>上传文件</el-button>
-          <div slot='tip' class='flex f1 flex-between' style='margin-left: 20px;'>
-            <div class='upload-tip'>
-              <span>文件格式: { this.acceptFormatStr }</span>
-              {
-                 this.acceptSize > 0 && (
-                   <span>, 单个文件不大于 { this.acceptSizeFormat(this.acceptSize) }</span>
-                 )
-              }
+          <el-button
+            disabled={this.uploading || this.$attrs.disabled}
+            size="mini"
+            icon="el-icon-upload"
+          >
+            上传文件
+          </el-button>
+          <div slot="tip" class="flex f1 flex-between" style="margin-left: 20px;">
+            <div class="upload-tip">
+              {this.accept === 'unspecified' ? (
+                <span>文件格式不限</span>
+              ) : (
+                <span>文件格式：{this.acceptFormatStr}</span>
+              )}
+              {this.acceptSize > 0 && (
+                <span>, 单个文件不大于 {this.acceptSizeFormat(this.acceptSize)}</span>
+              )}
             </div>
-            {
-              this.showFileCount && (
-                <span class='upload-chosen-tip'>已选择{ this.lenOfFileList }个</span>
-              )
-            }
+            {this.showFileCount && (
+              <span class="upload-chosen-tip">已选择{this.lenOfFileList}个</span>
+            )}
           </div>
         </el-upload>
       </div>
diff --git a/webapp/src/components/UploadForm/index.vue b/webapp/src/components/UploadForm/index.vue
index 920e66a..4b26b67 100644
--- a/webapp/src/components/UploadForm/index.vue
+++ b/webapp/src/components/UploadForm/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseModal
@@ -25,10 +25,7 @@
     @cancel="handleCancel"
     @ok="uploadSubmit"
   >
-    <Form
-      ref="formRef"
-      v-bind="$attrs"
-    />
+    <Form ref="formRef" v-bind="$attrs" />
     <slot v-bind="state" />
   </BaseModal>
 </template>
@@ -58,7 +55,7 @@ export default {
     transformFile: Function,
     hash: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     encode: {
       type: Boolean,
@@ -91,7 +88,7 @@ export default {
       const fileList = (formRef.value?.$refs.uploader || {}).uploadFiles;
 
       // 重命名
-      const renameFileList = fileList.map(file => ({
+      const renameFileList = fileList.map((file) => ({
         ...file,
         name: renameFile(file.name, { hash: props.hash, encode: props.encode }),
       }));
@@ -105,31 +102,36 @@ export default {
       // 开始调用上传接口
       const uploader = (result = {}) => {
         state.uploading = true;
-        uploadReqeust({ ...props.params, fileList: renameFileList, transformFile, ...result }, handleUploadProgress)
-        .then(res => {
-          const outputPath = getFileOutputPath(renameFileList, props.params);
-          state.uploading = false;
-          toggleVisible();
-          // 清空已有的记录
-          formRef.value.reset();
-          ctx.emit('uploadSuccess', res, outputPath);
-        })
-        .catch(err => {
-          state.uploading = false;
-          toggleVisible();
-          ctx.emit('uploadError', err);
-        });
+        uploadReqeust(
+          { ...props.params, fileList: renameFileList, transformFile, ...result },
+          handleUploadProgress
+        )
+          .then((res) => {
+            const outputPath = getFileOutputPath(renameFileList, props.params);
+            state.uploading = false;
+            toggleVisible();
+            // 清空已有的记录
+            formRef.value.reset();
+            ctx.emit('uploadSuccess', res, outputPath);
+          })
+          .catch((err) => {
+            state.uploading = false;
+            toggleVisible();
+            ctx.emit('uploadError', err);
+          });
       };
 
       // 触发 before Hook
-      if(typeof beforeUpload === 'function') {
-        beforeUpload({ fileList: renameFileList }).then(result => {
-          // 返回数据集 ID
-          uploader(result);
-        }).catch(err => {
-          state.uploading = false;
-          ctx.emit('uploadError', err);
-        });
+      if (typeof beforeUpload === 'function') {
+        beforeUpload({ fileList: renameFileList })
+          .then((result) => {
+            // 返回数据集 ID
+            uploader(result);
+          })
+          .catch((err) => {
+            state.uploading = false;
+            ctx.emit('uploadError', err);
+          });
       } else {
         uploader();
       }
@@ -142,11 +144,15 @@ export default {
       ctx.emit('close');
     };
 
-    watch(() => props.visible, (next) => {
-      next !== state.visible && Object.assign(state, {
-        visible: next,
-      });
-    });
+    watch(
+      () => props.visible,
+      (next) => {
+        next !== state.visible &&
+          Object.assign(state, {
+            visible: next,
+          });
+      }
+    );
 
     return {
       state,
diff --git a/webapp/src/components/UploadForm/inline.vue b/webapp/src/components/UploadForm/inline.vue
index 7a6299a..d873316 100644
--- a/webapp/src/components/UploadForm/inline.vue
+++ b/webapp/src/components/UploadForm/inline.vue
@@ -1,25 +1,21 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <Form
-    ref="formRef"
-    v-bind="$attrs"
-    @fileChange="handleFileChange"
-  />
+  <Form ref="formRef" v-bind="$attrs" @fileChange="handleFileChange" />
 </template>
 <script>
 import { ref, reactive } from '@vue/composition-api';
@@ -42,7 +38,7 @@ export default {
     transformFile: Function,
     hash: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     encode: {
       type: Boolean,
@@ -64,7 +60,7 @@ export default {
     const uploadByFile = (files, callback, result = {}, errCallback) => {
       const fileList = Array.isArray(files) ? files : [files];
       // 重命名
-      const renameFileList = fileList.map(file => ({
+      const renameFileList = fileList.map((file) => ({
         ...file,
         name: renameFile(file.name, { hash: props.hash, encode: props.encode }),
       }));
@@ -77,13 +73,17 @@ export default {
       ctx.emit('uploadStart', files);
       const uploadReqeust = request || minIOUpload;
       // 开始调用上传接口
-      return uploadReqeust({ ...props.params, fileList: renameFileList, transformFile, ...result }, callback, errCallback)
-        .then(res => {
+      return uploadReqeust(
+        { ...props.params, fileList: renameFileList, transformFile, ...result },
+        callback,
+        errCallback
+      )
+        .then((res) => {
           const outputPath = getFileOutputPath(renameFileList, props.params);
           state.uploading = false;
           ctx.emit('uploadSuccess', res, outputPath);
         })
-        .catch(err => {
+        .catch((err) => {
           state.uploading = false;
           ctx.emit('uploadError', err);
         });
@@ -93,13 +93,15 @@ export default {
     const uploadSubmit = (callback, errCallback) => {
       const fileList = (formRef.value?.$refs.uploader || {}).uploadFiles;
       // 触发 before Hook
-      if(typeof beforeUpload === 'function') {
-        beforeUpload({ fileList }).then(result => {
-          uploadByFile(fileList, callback, result, errCallback);
-        }).catch(err => {
-          state.uploading = false;
-          ctx.emit('uploadError', err);
-        });
+      if (typeof beforeUpload === 'function') {
+        beforeUpload({ fileList })
+          .then((result) => {
+            uploadByFile(fileList, callback, result, errCallback);
+          })
+          .catch((err) => {
+            state.uploading = false;
+            ctx.emit('uploadError', err);
+          });
       } else {
         uploadByFile(fileList, callback, undefined, errCallback);
       }
@@ -117,6 +119,7 @@ export default {
       state,
       formRef,
       uploadSubmit,
+      uploadByFile,
       handleFileChange,
     };
   },
diff --git a/webapp/src/components/UploadForm/style.scss b/webapp/src/components/UploadForm/style.scss
index 7cd3ba6..c0a0f78 100644
--- a/webapp/src/components/UploadForm/style.scss
+++ b/webapp/src/components/UploadForm/style.scss
@@ -25,6 +25,7 @@
     width: 100%;
     height: auto;
     max-height: 408px;
+    margin-top: 10px;
     overflow-y: auto;
 
     &.el-upload-list--picture {
diff --git a/webapp/src/components/UploadForm/util.js b/webapp/src/components/UploadForm/util.js
index 28c62b3..76fe3a1 100644
--- a/webapp/src/components/UploadForm/util.js
+++ b/webapp/src/components/UploadForm/util.js
@@ -1,21 +1,21 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { bucketHost, bucketName } from '@/utils/minIO';
-import { isValidText, isValidVideo } from '@/utils/validate';
+import { isValidVideo } from '@/utils/validate';
 import { generateUuid, performanceTiming } from '@/utils';
 
 const pMap = require('p-map');
@@ -27,21 +27,16 @@ const minIOPrefix = `${process.env.VUE_APP_MINIO_API}/upload`;
 const path = require('path');
 
 // 是否为视频文件
-const isValidVideoFile = file => {
+const isValidVideoFile = (file) => {
   const extname = path.extname(file.name);
   return isValidVideo(extname);
 };
 
-const isValidTextFile = file => {
-  const extname = path.extname(file.name);
-  return isValidText(extname);
-};
-
 // 给图片名称添加时间戳
 export const hashName = (name) => {
   // 后缀名 .png
   const extname = path.extname(name);
-  // 返回文件名称 test
+  // 返回文件名称
   const basename = path.basename(name, extname);
   // 如果是视频文件，直接返回随机字符串名称（算法解析中文会有问题）
   const isVideo = isValidVideo(extname);
@@ -60,7 +55,7 @@ export const putObject = (uploadUrl, file, options = {}) => {
     const xhr = new XMLHttpRequest();
     xhr.open('PUT', uploadUrl, true);
     xhr.withCredentials = false;
-    xhr.onload = e => {
+    xhr.onload = (e) => {
       if (xhr.readyState === 4 && xhr.status === 200) {
         resolve({
           err: null,
@@ -79,29 +74,39 @@ export const putObject = (uploadUrl, file, options = {}) => {
       };
     }
     // todo: 视频进度loaded 解析会回滚，暂时不清楚原因
-    xhr.upload.addEventListener('progress', event => {
-      if (event.lengthComputable) {
-        loaded = event.loaded;
-        total = event.total;
-      } else {
-        // eslint-disable-next-line no-multi-assign
-        loaded = total = event.total;
-      }
-      // 只解析视频进度
-      if (typeof callback === 'function' && isValidVideoFile(file)) {
-        callback(loaded, total);
-      }
-    }, false);
+    xhr.upload.addEventListener(
+      'progress',
+      (event) => {
+        if (event.lengthComputable) {
+          loaded = event.loaded;
+          total = event.total;
+        } else {
+          // eslint-disable-next-line no-multi-assign
+          loaded = total = event.total;
+        }
+        // 只解析视频进度
+        if (typeof callback === 'function' && isValidVideoFile(file)) {
+          callback(loaded, total);
+        }
+      },
+      false
+    );
     xhr.send(file);
   });
 };
 
 // 默认通过 minIO 上传
-export const minIOUpload = async({ objectPath, fileList, transformFile }, callback, errCallback) => {
+export const minIOUpload = async (
+  { objectPath, fileList, transformFile },
+  callback,
+  errCallback
+) => {
   // add 进度条
   let resolved = 0;
+  // 记录已上传的文件列表
+  const resolveFiles = [];
 
-  const mapper = async d => {
+  const mapper = async (d) => {
     // 生成 stream 流
     // const blob = fileReaderStream(d.raw)
 
@@ -116,18 +121,16 @@ export const minIOUpload = async({ objectPath, fileList, transformFile }, callba
     // const result = await window.minioClient.putObject(`${objectPath}/${d.name}`, blob, {
     //   'Content-Type': d.raw.type
     // })
-    resolved+=1;
+    resolved += 1;
+    resolveFiles.push(fileRes);
     // 进度反馈
     if (typeof callback === 'function' && fileList.length >= 1) {
-      callback(resolved, fileList.length);
+      callback(resolved, fileList, resolveFiles);
     }
 
-    // 视频不做转换
+    // 视频文件不做转换
     if (isValidVideoFile(d)) return fileRes;
 
-    // 文本也不做转换
-    if (isValidTextFile(d)) return fileRes;
-
     if (typeof transformFile === 'function') {
       const transformed = await transformFile(fileRes, d);
       return transformed;
@@ -135,7 +138,7 @@ export const minIOUpload = async({ objectPath, fileList, transformFile }, callba
     return fileRes;
   };
 
-  const result = await pMap(fileList, mapper, {concurrency: 10});
+  const result = await pMap(fileList, mapper, { concurrency: 10 });
   return result;
 };
 
@@ -146,27 +149,32 @@ export const renameFile = (name, options = {}) => {
 };
 
 export const getFileOutputPath = (rawFiles, { objectPath }) => {
-  return rawFiles.map(d => `${bucketHost}/${bucketName}/${objectPath}/${d.name}`);
+  return rawFiles.map((d) => `${bucketHost}/${bucketName}/${objectPath}/${d.name}`);
 };
 
 // 对文件进行自定义转换
 export const transformFile = (result, file) => {
   return new Promise((resolve) => {
     const reader = new FileReader();
-    reader.addEventListener("load", () => {
-      const img = new Image();
-      img.onload = () => resolve({
-        ...result,
-        data: {
-          ...result.data,
-          meta: {
-            width: img.width,
-            height: img.height,
-          },
-        },
-      });
-      img.src = reader.result;
-    }, false);
+    reader.addEventListener(
+      'load',
+      () => {
+        const img = new Image();
+        img.onload = () =>
+          resolve({
+            ...result,
+            data: {
+              ...result.data,
+              meta: {
+                width: img.width,
+                height: img.height,
+              },
+            },
+          });
+        img.src = reader.result;
+      },
+      false
+    );
 
     reader.readAsDataURL(file.raw);
   });
diff --git a/webapp/src/components/UploadProgress/index.vue b/webapp/src/components/UploadProgress/index.vue
index 6cbcd7f..ab944c1 100644
--- a/webapp/src/components/UploadProgress/index.vue
+++ b/webapp/src/components/UploadProgress/index.vue
@@ -1,20 +1,19 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-// 仅支持line-upload上传文件,线性进度条
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */ //
+仅支持line-upload上传文件,线性进度条
 <template>
   <div class="progress">
     <el-progress :percentage="Math.floor(progress)" :color="color" :status="status"></el-progress>
@@ -25,7 +24,8 @@
 export default {
   name: 'UploadProgress',
   props: {
-    color: { // 进度条颜色
+    color: {
+      // 进度条颜色
       type: [String, Array, Function],
       default: '#67c23a',
     },
@@ -33,11 +33,13 @@ export default {
       type: String,
       default: null,
     },
-    size: { // 文件大小
+    size: {
+      // 文件大小
       type: Number,
       required: true,
     },
-    progress: { // 进度
+    progress: {
+      // 进度
       type: Number,
       required: true,
     },
@@ -45,7 +47,7 @@ export default {
   mounted() {
     const fileSize = this.size / 1024 / 1024; // 获取文件大小(以MB为单位)
     const uploadTime = fileSize / 10; // 通过10s每兆上传速度
-    const step = 90 / uploadTime * 2; // 每秒刷新的进度上限
+    const step = (90 / uploadTime) * 2; // 每秒刷新的进度上限
     this.interval = setInterval(() => {
       if (this.progress >= 100 - step) {
         clearInterval(this.interval);
@@ -90,4 +92,4 @@ export default {
     opacity: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/components/WaveSurfer/index.vue b/webapp/src/components/WaveSurfer/index.vue
new file mode 100644
index 0000000..250804c
--- /dev/null
+++ b/webapp/src/components/WaveSurfer/index.vue
@@ -0,0 +1,222 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="wrapper">
+    <div class="audio" :class="{ 'flex flex-center': mini }">
+      <!-- mini模式播放按钮 -->
+      <el-button
+        v-if="mini"
+        v-click-once
+        style="margin-right: 5px; font-size: 30px;"
+        class="play no-border"
+        :icon="buttonIcon"
+        circle
+        @click="playOrPause"
+      />
+      <!-- 音频 -->
+      <div id="waveform" ref="waveformRef" class="wave"></div>
+      <!-- 操作 -->
+      <div v-if="!mini" class="action flex flex-between">
+        <div class="flex flex-vertical-align">
+          <!-- 暂停/播放 -->
+          <i v-click-once style="font-size: 25px;" :class="buttonIcon" @click="playOrPause" />
+          <!-- 进度 -->
+          <span class="time">{{ data.currentTime }} / {{ data.duration }}</span>
+          <el-dropdown class="steep" trigger="click" placement="top" @command="onCommand">
+            <label class="el-dropdown-link">
+              {{ data.speed ? `${data.speed.toFixed(2)}x` : '倍速' }}
+            </label>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="item in data.speeds" :key="item" :command="+item"
+                >{{ item }}x</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+        <!-- 音量 -->
+        <div class="flex flex-vertical-align">
+          <i class="el-icon-message-solid"></i>
+          <div style="width: 150px; margin-left: 10px;">
+            <el-slider v-model="data.volume" @input="onVolumeChange" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, computed } from '@vue/composition-api';
+import WaveSurfer from 'wavesurfer.js';
+import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor';
+import { durationTrans } from '@/utils';
+import { getFullFileUrl } from '@/views/dataset/util';
+
+export default {
+  name: 'AudioCard',
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+    mini: Boolean,
+    // 波形的高度
+    height: {
+      type: Number,
+      default: 128, // 插件中默认值
+    },
+  },
+  setup(props) {
+    const waveformRef = ref(null);
+    const wavesurfer = ref(null); // 实例
+
+    const data = reactive({
+      isPlay: false,
+      speeds: ['0.50', '0.75', '1.00', '1.25', '1.50', '2.00'],
+      speed: null,
+      volume: 100,
+      duration: '00:00',
+      currentTime: '00:00',
+    });
+
+    const buttonIcon = computed(() => (data.isPlay ? 'el-icon-video-pause' : 'el-icon-video-play'));
+
+    const initWaveSurfer = () => {
+      let waveSurferConfig = {
+        container: waveformRef.value, // 绑定元素
+        backend: 'MediaElement', // MediaElement是不支持的浏览器的后备。
+        audioRate: '1', // 播放音频的速度.较低的数字较慢
+        height: props.height, // 波形的高度
+        cursorWidth: props.mini ? 0 : 1, // 光标宽度
+        waveColor: '#bae7da', // 光标后的波形填充颜色
+        progressColor: '#7fd1b5', // 光标后面的波形部分的填充色。当progressColor和waveColor相同时，完全不渲染进度波
+        cursorColor: '#eee',
+        hideScrollbar: props.mini, // mini模式隐藏滚动条
+      };
+
+      if (!props.mini) {
+        waveSurferConfig = {
+          ...waveSurferConfig,
+
+          plugins: [
+            // 配置光标插件
+            CursorPlugin.create({
+              warpper: '#waveform',
+              showTime: true,
+              opacity: 1,
+            }),
+          ],
+        };
+      }
+
+      wavesurfer.value = WaveSurfer.create(waveSurferConfig);
+
+      wavesurfer.value.on('error', (e) => console.warn(e));
+
+      // 加载音频
+      wavesurfer.value.load(getFullFileUrl({ url: props.url }));
+
+      // 播放结束后播放变成暂停
+      wavesurfer.value.on('finish', () => Object.assign(data, { isPlay: false }));
+
+      // 加载完成后获取总时长
+      wavesurfer.value.on('ready', () => {
+        data.duration = durationTrans(wavesurfer.value.getDuration());
+      });
+
+      // 单击音波部分返回当前进度
+      wavesurfer.value.on('seek', () => {
+        data.currentTime = durationTrans(wavesurfer.value.getCurrentTime());
+      });
+
+      // 音频播放时返回当前进度
+      wavesurfer.value.on('audioprocess', () => {
+        data.currentTime = durationTrans(wavesurfer.value.getCurrentTime());
+      });
+    };
+
+    const playOrPause = () => {
+      data.isPlay = !data.isPlay;
+      // 播放时暂停, 暂停时播放
+      wavesurfer.value.playPause();
+    };
+
+    const onCommand = (speed) => {
+      Object.assign(data, {
+        speed,
+      });
+      // 设置音频倍速
+      wavesurfer.value.setPlaybackRate(speed);
+    };
+
+    const onVolumeChange = (volume) => {
+      Object.assign(data, {
+        volume,
+      });
+      wavesurfer.value.setVolume(volume / 100);
+    };
+
+    onMounted(initWaveSurfer);
+
+    return {
+      data,
+      waveformRef,
+      buttonIcon,
+      playOrPause,
+      onCommand,
+      onVolumeChange,
+    };
+  },
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.wave {
+  position: relative;
+  width: 100%;
+
+  canvas {
+    width: 100%;
+  }
+}
+
+.action {
+  height: 35px;
+  padding: 0 20px;
+  color: #fff;
+  background: #242f3f;
+
+  .time {
+    margin-left: 10px;
+  }
+
+  .steep {
+    width: 50px;
+    margin-left: 30px;
+  }
+}
+
+.is-circle {
+  padding: 0;
+  color: #5872e5;
+}
+
+.el-dropdown-link {
+  font-size: 15px;
+  color: #409eff;
+  cursor: pointer;
+}
+</style>
diff --git a/webapp/src/components/ZoomContainer/index.vue b/webapp/src/components/ZoomContainer/index.vue
index e146b8d..210d239 100644
--- a/webapp/src/components/ZoomContainer/index.vue
+++ b/webapp/src/components/ZoomContainer/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <script>
 import { onMounted, ref, toRefs, reactive, watch } from '@vue/composition-api';
@@ -22,9 +22,7 @@ import { isFunction, isEqual } from 'lodash';
 
 function zoomTransformFromProps(props) {
   const { zoom, zoomX, zoomY } = props;
-  return zoomIdentity
-    .translate(zoomX || 0, zoomY || 0)
-    .scale(zoom || 1);
+  return zoomIdentity.translate(zoomX || 0, zoomY || 0).scale(zoom || 1);
 }
 
 export default {
@@ -122,30 +120,31 @@ export default {
       });
     });
 
-    watch(() => [props.zoom, props.zoomX, props.zoomY], (nextProps, prevProps) => {
-      const hasChangedZoom = !isEqual(nextProps, prevProps);
-
-      const nextZoomProps = {
-        zoom: nextProps[0],
-        zoomX: nextProps[1],
-        zoomY: nextProps[2],
-      };
-
-      if (hasChangedZoom) {
-        zoomInstance.on('zoom', null);
-        const nextZoomTransform = zoomTransformFromProps(nextZoomProps);
-        zoomInstance.transform(state.selection, nextZoomTransform);
-        zoomInstance.on('zoom', handleZoom);
-
-        state.lastZoomTransform = nextZoomTransform;
-        // 需要强制刷新，vue sucks
-        state.zoomKey = Math.random();
+    watch(
+      () => [props.zoom, props.zoomX, props.zoomY],
+      (nextProps, prevProps) => {
+        const hasChangedZoom = !isEqual(nextProps, prevProps);
+
+        const nextZoomProps = {
+          zoom: nextProps[0],
+          zoomX: nextProps[1],
+          zoomY: nextProps[2],
+        };
+
+        if (hasChangedZoom) {
+          zoomInstance.on('zoom', null);
+          const nextZoomTransform = zoomTransformFromProps(nextZoomProps);
+          zoomInstance.transform(state.selection, nextZoomTransform);
+          zoomInstance.on('zoom', handleZoom);
+
+          state.lastZoomTransform = nextZoomTransform;
+          // 需要强制刷新，vue sucks
+          state.zoomKey = Math.random();
+        }
+
+        _updateZoomProps();
       }
-
-      _updateZoomProps();
-    }, {
-      lazy: true,
-    });
+    );
 
     return {
       wrapperRef,
@@ -153,9 +152,7 @@ export default {
     };
   },
   render() {
-    const zoomTransform = this.wrapperRef
-      ? d3ZoomTransform(this.wrapperRef)
-      : {};
+    const zoomTransform = this.wrapperRef ? d3ZoomTransform(this.wrapperRef) : {};
 
     const { x, y, k } = zoomTransform;
 
@@ -164,12 +161,9 @@ export default {
     };
 
     return (
-      <div ref='wrapperRef' class='zoom-wrapper'>
-        <span class='dn'>{this.zoomKey}</span>
-        <div
-          class='zoom-inner'
-          style={innerStyle}
-        >
+      <div ref="wrapperRef" class="zoom-wrapper">
+        <span class="dn">{this.zoomKey}</span>
+        <div class="zoom-inner" style={innerStyle}>
           {this.$slots.default}
         </div>
       </div>
diff --git a/webapp/src/components/editor/index.vue b/webapp/src/components/editor/index.vue
new file mode 100644
index 0000000..f98c9c5
--- /dev/null
+++ b/webapp/src/components/editor/index.vue
@@ -0,0 +1,98 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <PrismEditor
+    ref="editorRef"
+    class="code-editor"
+    v-bind="attrs"
+    :highlight="highlighter"
+    v-on="listeners"
+  />
+</template>
+<script>
+import { computed, ref } from '@vue/composition-api';
+import { PrismEditor } from 'vue-prism-editor';
+import 'vue-prism-editor/dist/prismeditor.min.css';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+
+import 'prismjs/themes/prism-tomorrow.css';
+
+export default {
+  name: 'Editor',
+  components: {
+    PrismEditor,
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  setup(props, ctx) {
+    const editorRef = ref(null);
+    const attrs = computed(() => ctx.attrs);
+    const highlighter = (code) => {
+      return highlight(code, languages.js);
+    };
+    const getValue = () => editorRef.value.codeData;
+
+    const handleChange = (value) => {
+      ctx.emit('change', value);
+    };
+
+    const listeners = computed(() => ({
+      ...ctx.listeners,
+      input: handleChange,
+    }));
+
+    return {
+      attrs,
+      listeners,
+      highlighter,
+      editorRef,
+      getValue,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.code-editor {
+  position: relative;
+  padding: 5px;
+  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  color: black;
+  background: white;
+
+  ::v-deep .prism-editor__container {
+    .prism-editor__textarea {
+      min-height: 54px;
+      max-height: 400px;
+    }
+
+    .prism-editor__editor {
+      min-height: 54px;
+    }
+
+    .prism-editor__textarea:focus {
+      outline: none;
+    }
+  }
+}
+</style>
diff --git a/webapp/src/components/svg/brush/Brush.js b/webapp/src/components/svg/brush/Brush.js
index 7201531..8873e6b 100644
--- a/webapp/src/components/svg/brush/Brush.js
+++ b/webapp/src/components/svg/brush/Brush.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import cx from 'classnames';
 import Vue from 'vue';
@@ -53,7 +53,7 @@ export default {
     },
   },
 
-  setup(props){
+  setup(props) {
     const { onBrushStart, onBrushMove, left, top, onChange, onBrushEnd, transformZoom } = props;
     const state = reactive({
       start: { x: 0, y: 0 },
@@ -86,10 +86,10 @@ export default {
     const update = (updater, callback) => {
       Object.assign(state, updater(state));
       Vue.nextTick(() => {
-        if(callback) {
+        if (callback) {
           callback(state);
         }
-        if(onChange) {
+        if (onChange) {
           onChange(state);
         }
       });
@@ -104,7 +104,7 @@ export default {
         onBrushStart(start, event);
       }
 
-      update(prevBrush => ({
+      update((prevBrush) => ({
         ...prevBrush,
         start,
         end: undefined,
@@ -123,28 +123,33 @@ export default {
       const end = transformZoom({
         x: draw.x + draw.dx - left,
         y: draw.y + draw.dy - top,
-      });      
-
-      update(prevBrush => {
-        const { start } = prevBrush;
-        const extent = getExtent(start, end);
-        return {
-          ...prevBrush,
-          end,
-          extent,
-        };
-      }, (nextState) => {
-        // 回调
-      typeof onBrushMove === 'function' && onBrushMove(nextState, event);
       });
-    };
 
+      update(
+        (prevBrush) => {
+          const { start } = prevBrush;
+          const extent = getExtent(start, end);
+          return {
+            ...prevBrush,
+            end,
+            extent,
+          };
+        },
+        (nextState) => {
+          // 回调
+          typeof onBrushMove === 'function' && onBrushMove(nextState, event);
+        }
+      );
+    };
 
     const handleDragEnd = (draw, event, options = {}) => {
-      update(prevBrush => ({
-        ...prevBrush,
-        isBrushing: false,
-      }), state => onBrushEnd(state, event, options));
+      update(
+        (prevBrush) => ({
+          ...prevBrush,
+          isBrushing: false,
+        }),
+        (state) => onBrushEnd(state, event, options)
+      );
     };
 
     return {
@@ -159,7 +164,7 @@ export default {
     };
   },
 
-  render(h) {
+  render() {
     const { stageWidth, stageHeight, className, left, top, brushSelectionStyle } = this;
     const { start, end, isBrushing } = this.state;
 
@@ -181,22 +186,20 @@ export default {
       <Group className={cx('db-brush', className)} left={left} top={top}>
         {/* overlay */}
         <Drag {...dragProps}>
-          {
-            (drag) => (
-              <rect
-                className='brush-overlay'
-                fill='transparent'
-                x={0}
-                y={0}
-                width={stageWidth}
-                height={stageHeight}
-                style={{ cursor: 'crosshair' }}
-                onMousedown={drag.dragStart}
-                onMousemove={drag.dragMove}
-                onMouseup={drag.dragEnd}
-              />
-            )
-          }
+          {(drag) => (
+            <rect
+              className="brush-overlay"
+              fill="transparent"
+              x={0}
+              y={0}
+              width={stageWidth}
+              height={stageHeight}
+              style={{ cursor: 'crosshair' }}
+              onMousedown={drag.dragStart}
+              onMousemove={drag.dragMove}
+              onMouseup={drag.dragEnd}
+            />
+          )}
         </Drag>
         {start && end && !!isBrushing && (
           <g>
diff --git a/webapp/src/components/svg/brush/BrushCorner.js b/webapp/src/components/svg/brush/BrushCorner.js
index 2a3863e..05bb662 100644
--- a/webapp/src/components/svg/brush/BrushCorner.js
+++ b/webapp/src/components/svg/brush/BrushCorner.js
@@ -1,21 +1,22 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import Drag from '@/components/Drag';
 import { chroma } from '@/utils';
+import { defaultFill } from '@/views/dataset/util';
 
 export default {
   name: 'BrushCorner',
@@ -45,7 +46,7 @@ export default {
 
     const handleDragStart = (drag, event) => {
       // 开始拖拽是选中当前标注
-      if(handleBrushStart) {
+      if (handleBrushStart) {
         handleBrushStart(drag, event);
       }
     };
@@ -53,7 +54,7 @@ export default {
     const handleDragMove = (drag) => {
       if (!drag.isDragging) return;
       const { zoom } = getZoom();
-      updateBrush(prevBrush => {
+      updateBrush((prevBrush) => {
         const { start, end } = prevBrush;
         let nextState = {};
 
@@ -130,7 +131,7 @@ export default {
                 y1: Math.min(Math.max(moveY, start.y), prevBrush.bounds.y1),
               },
             };
-          break;
+            break;
           default:
             break;
         }
@@ -139,7 +140,7 @@ export default {
     };
 
     const handleDragEnd = () => {
-      updateBrushEnd(prevBrush => {
+      updateBrushEnd((prevBrush) => {
         const { start, end, extent } = { ...prevBrush };
         start.x = Math.min(extent.x0, extent.x1);
         start.y = Math.min(extent.y0, extent.y0);
@@ -169,19 +170,29 @@ export default {
     };
   },
 
-  render(h) {
-    const { annotate, transformer, currentAnnotationId, stageWidth, stageHeight, type, x, y, width, height } = this;
+  render() {
+    const {
+      annotate,
+      transformer,
+      currentAnnotationId,
+      stageWidth,
+      stageHeight,
+      type,
+      x,
+      y,
+      width,
+      height,
+    } = this;
 
     const cursor = type === 'topLeft' || type === 'bottomRight' ? 'nwse-resize' : 'nesw-resize';
 
     let transform = null;
-    if(annotate.id === transformer.id) {
+    if (annotate.id === transformer.id) {
       transform = `translate(${transformer.dx}, ${transformer.dy})`;
     }
 
     const { data = {} } = annotate;
     const { color } = data;
-    const defaultFill = 'rgba(102, 181, 245, 0.1)';
     const bgColor = color || defaultFill;
     const isActive = currentAnnotationId === annotate.id;
     const colorAlpha = isActive ? 1 : 0;
@@ -204,23 +215,21 @@ export default {
 
     return (
       <Drag {...dragProps}>
-        {
-          (drag) => (
-            <rect
-              x={x}
-              y={y}
-              width={width}
-              height={height}
-              transform={transform}
-              fill={fillColor}
-              class={`brush-corner-${type}`}
-              onMousedown={drag.dragStart}
-              onMousemove={drag.dragMove}
-              onMouseup={drag.dragEnd}
-              style={style}
-            />
-          )
-        }
+        {(drag) => (
+          <rect
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            transform={transform}
+            fill={fillColor}
+            class={`brush-corner-${type}`}
+            onMousedown={drag.dragStart}
+            onMousemove={drag.dragMove}
+            onMouseup={drag.dragEnd}
+            style={style}
+          />
+        )}
       </Drag>
     );
   },
diff --git a/webapp/src/components/svg/brush/BrushHandle.js b/webapp/src/components/svg/brush/BrushHandle.js
index 7ade8fb..0a06030 100644
--- a/webapp/src/components/svg/brush/BrushHandle.js
+++ b/webapp/src/components/svg/brush/BrushHandle.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import Drag from '@/components/Drag';
 
@@ -42,7 +42,7 @@ export default {
 
     const handleDragStart = (drag, event) => {
       // 开始拖拽是选中当前标注
-      if(handleBrushStart) {
+      if (handleBrushStart) {
         handleBrushStart(drag, event);
       }
     };
@@ -50,7 +50,7 @@ export default {
     const handleDragMove = (drag) => {
       if (!drag.isDragging) return;
       const { zoom } = getZoom();
-      updateBrush(prevBrush => {
+      updateBrush((prevBrush) => {
         const { start, end } = prevBrush;
         let nextState = {};
         let move = 0;
@@ -109,7 +109,7 @@ export default {
                 y1: Math.max(move, start.y),
               },
             };
-          break;
+            break;
           default:
             break;
         }
@@ -118,7 +118,7 @@ export default {
     };
 
     const handleDragEnd = () => {
-      updateBrushEnd(prevBrush => {
+      updateBrushEnd((prevBrush) => {
         const { start, end, extent } = { ...prevBrush };
         start.x = Math.min(extent.x0, extent.x1);
         start.y = Math.min(extent.y0, extent.y0);
@@ -148,7 +148,7 @@ export default {
     };
   },
 
-  render(h) {
+  render() {
     const { stageWidth, stageHeight, handle, type } = this;
     const { x, y, width, height } = handle;
 
@@ -171,22 +171,20 @@ export default {
 
     return (
       <Drag {...dragProps}>
-        {
-          (drag) => (
-            <rect
-              x={x}
-              y={y}
-              width={width}
-              height={height}
-              fill='transparent'
-              class={`brush-handle-${type}`}
-              onMousedown={drag.dragStart}
-              onMousemove={drag.dragMove}
-              onMouseup={drag.dragEnd}
-              style={style}
-            />
-          )
-        }
+        {(drag) => (
+          <rect
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            fill="transparent"
+            class={`brush-handle-${type}`}
+            onMousedown={drag.dragStart}
+            onMousemove={drag.dragMove}
+            onMouseup={drag.dragEnd}
+            style={style}
+          />
+        )}
       </Drag>
     );
   },
diff --git a/webapp/src/components/svg/brush/BrushSelection.js b/webapp/src/components/svg/brush/BrushSelection.js
index 9e5ea6f..a41407e 100644
--- a/webapp/src/components/svg/brush/BrushSelection.js
+++ b/webapp/src/components/svg/brush/BrushSelection.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export default {
   name: 'BrushSelection',
@@ -34,7 +34,7 @@ export default {
     },
   },
 
-  render(h) {
+  render() {
     const { width, height, brush, disableDraggingSelection, selectionStyle } = this;
 
     return (
@@ -43,7 +43,7 @@ export default {
         y={Math.min(brush.extent.y0, brush.extent.y1)}
         width={width}
         height={height}
-        className='db-brush-selection'
+        className="db-brush-selection"
         style={{
           ...selectionStyle,
           pointerEvents: brush.isBrushing || brush.activeHandle ? 'none' : 'all',
diff --git a/webapp/src/components/svg/brush/index.js b/webapp/src/components/svg/brush/index.js
index 378385f..0fcedca 100644
--- a/webapp/src/components/svg/brush/index.js
+++ b/webapp/src/components/svg/brush/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as Brush } from './Brush';
 export { default as BrushHandle } from './BrushHandle';
diff --git a/webapp/src/components/svg/group/index.js b/webapp/src/components/svg/group/index.js
index b4c1ff6..82cd81c 100644
--- a/webapp/src/components/svg/group/index.js
+++ b/webapp/src/components/svg/group/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import cx from 'classnames';
 
@@ -21,22 +21,16 @@ export default {
   functional: true,
   render(h, context) {
     const { props, children } = context;
-    const {
-      top = 0,
-      left = 0,
-      transform,
-      className,
-      ...otherProps
-    } = props;
+    const { top = 0, left = 0, transform, className, ...otherProps } = props;
 
-  return (
-    <g
-      class={cx('db-group', className)}
-      transform={transform || `translate(${left}, ${top})`}
-      {...otherProps}
-    >
-      {children}
-    </g>
-  );
+    return (
+      <g
+        class={cx('db-group', className)}
+        transform={transform || `translate(${left}, ${top})`}
+        {...otherProps}
+      >
+        {children}
+      </g>
+    );
   },
 };
diff --git a/webapp/src/components/svg/index.js b/webapp/src/components/svg/index.js
index c89fb2d..98bd867 100644
--- a/webapp/src/components/svg/index.js
+++ b/webapp/src/components/svg/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as Group } from './group';
 export * from './brush';
diff --git a/webapp/src/components/textEditor.vue b/webapp/src/components/textEditor.vue
index 2cb9464..8746226 100644
--- a/webapp/src/components/textEditor.vue
+++ b/webapp/src/components/textEditor.vue
@@ -1,26 +1,26 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <div v-loading="loading" class='textEditor'>
+  <div v-loading="loading" class="textEditor" v-on="listeners">
     <pre>{{ txt }}</pre>
   </div>
 </template>
 <script>
-
+import { onMounted } from '@vue/composition-api';
 
 export default {
   name: 'TextEditor',
@@ -31,21 +31,32 @@ export default {
       default: false,
     },
   },
+  setup(props, ctx) {
+    const { listeners } = ctx;
+
+    onMounted(() => {
+      ctx.emit('mount');
+    });
+
+    return {
+      listeners,
+    };
+  },
 };
 </script>
 <style lang="scss" scoped>
-  .textEditor {
-    max-height: 40vh;
-    overflow: auto;
+.textEditor {
+  max-height: 40vh;
+  overflow: auto;
 
-    pre {
-      width: 100%;
-      min-height: 100%;
-      padding: 20px;
-      line-height: 26px;
-      word-break: break-word;
-      white-space: pre-wrap;
-      background: #fff;
-    }
+  pre {
+    width: 100%;
+    min-height: 100%;
+    padding: 20px;
+    line-height: 1.8;
+    word-break: break-word;
+    white-space: pre-wrap;
+    background: #fff;
   }
+}
 </style>
diff --git a/webapp/src/config/index.js b/webapp/src/config/index.js
index 7ddf17d..9c62c27 100644
--- a/webapp/src/config/index.js
+++ b/webapp/src/config/index.js
@@ -1,18 +1,41 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+export const api_version = 'v1';
+export const api_prefix = '/api';
+
+export const API_MODULE_NAME = {
+  ADMIN: 'admin', // 系统接口
+  DATA: 'data', // 数据管理
+  NOTEBOOK: 'notebook', // Notebook
+  ALGORITHM: 'algorithm', // 算法管理
+  IMAGE: 'image', // 镜像管理
+  TRAIN: 'train', // 训练管理
+  MODEL: 'model', // 模型管理
+  MODEL_OPTIMIZE: 'optimize', // 模型优化
+  CLOUD_SERVING: 'serving', // 云端 Serving 在线服务
+  BATCH_SERVING: 'batchServing', // 云端 Serving 批量服务
+  ATLAS: 'measure', // 模型炼知
+  K8S: 'k8s', // K8S
+  DCM: 'dcm', // 医学dcm
+};
+
+// 登录、注册参数配置
+export const loginConfig = {
+  allowRegister: process.env.NODE_ENV !== 'production', // 是否允许注册
+};
 
 // 训练管理模块参数配置
 export const trainConfig = {
@@ -28,6 +51,7 @@ export const algorithmConfig = {
 
 // 镜像管理参数配置
 export const imageConfig = {
+  allowUploadImage: process.env.NODE_ENV !== 'production', // 是否允许上传镜像
   uploadFileAcceptSize: 0, // 上传镜像文件大小限制，单位为 MB，0 表示不限制大小
 };
 
@@ -39,6 +63,7 @@ export const modelConfig = {
 // 云端 Serving 模块参数配置
 export const servingConfig = {
   onlineServingNodeSumMax: 10,
+  onlinePredictFileSizeSum: 10, // 在线服务预测时总文件上传大小限制，单位为 MB，test 和 prod 环境暂时限制为 10MB
 };
 
 // 模型炼知模块参数配置
diff --git a/webapp/src/directives/index.js b/webapp/src/directives/index.js
index b021fef..817e0bc 100644
--- a/webapp/src/directives/index.js
+++ b/webapp/src/directives/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import elSelectLoadMore from './modules/elSelectLoadMore';
 import mouseWheel from './modules/mouseWheel';
diff --git a/webapp/src/directives/modules/clickOnce.js b/webapp/src/directives/modules/clickOnce.js
index 5470b85..99d1c89 100644
--- a/webapp/src/directives/modules/clickOnce.js
+++ b/webapp/src/directives/modules/clickOnce.js
@@ -1,28 +1,36 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { isNumber, isPlainObject } from 'lodash';
 
 export default {
   inserted(el, binding) {
     el.addEventListener('click', () => {
       if (!el.disabled) {
-        let disabledTime = 1000;
+        const { value } = binding;
+        let disabledTime = 1000; // 默认禁用时间
         el.disabled = true;
-        if (binding.value !== undefined) {
-          if (binding.value.time !== undefined) {
-            const time = Number(binding.value.time);
+        el.style.cursor = 'unset';
+        if (isNumber(value)) {
+          disabledTime = value;
+        }
+        if (isPlainObject(value)) {
+          if (value?.time !== undefined) {
+            const time = Number(value.time);
+            // eslint-disable-next-line no-restricted-globals
             if (!isNaN(time) && time > 0) {
               disabledTime = time;
             }
diff --git a/webapp/src/directives/modules/elSelectLoadMore.js b/webapp/src/directives/modules/elSelectLoadMore.js
index 213918a..efadc30 100644
--- a/webapp/src/directives/modules/elSelectLoadMore.js
+++ b/webapp/src/directives/modules/elSelectLoadMore.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export default {
   bind(el, binding) {
diff --git a/webapp/src/directives/modules/mouseWheel.js b/webapp/src/directives/modules/mouseWheel.js
index 0c3fc7a..af27d69 100644
--- a/webapp/src/directives/modules/mouseWheel.js
+++ b/webapp/src/directives/modules/mouseWheel.js
@@ -1,23 +1,24 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export default {
   bind(el, binding) {
-    const {value} = binding;
-    let mouseWheelDown; let mouseWheelUp;
+    const { value } = binding;
+    let mouseWheelDown;
+    let mouseWheelUp;
     if (typeof value === 'function') {
       mouseWheelDown = value;
     } else if (typeof value === 'object' && value !== null) {
@@ -26,7 +27,9 @@ export default {
     }
     // eslint-disable-next-line func-names
     el.addEventListener('mousewheel', function(event) {
-      const downAvaliable = this.scrollHeight === this.clientHeight || this.scrollHeight - this.scrollTop <= this.clientHeight + 10;
+      const downAvaliable =
+        this.scrollHeight === this.clientHeight ||
+        this.scrollHeight - this.scrollTop <= this.clientHeight + 10;
       const upAvaliable = this.scrollHeight === this.clientHeight || this.scrollTop <= 10;
       if (downAvaliable && event.deltaY > 0 && mouseWheelDown) {
         mouseWheelDown();
diff --git a/webapp/src/hooks/brush/BasicBrush.js b/webapp/src/hooks/brush/BasicBrush.js
index b8c8368..8a05dbf 100644
--- a/webapp/src/hooks/brush/BasicBrush.js
+++ b/webapp/src/hooks/brush/BasicBrush.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 // 基础 Brush 组件，用于在手动标注页面框选标注
 import cx from 'classnames';
@@ -41,7 +41,7 @@ export default {
 
     return (
       <g className={cx('basic-brush', className)}>
-        {isBrushing &&
+        {isBrushing && (
           <rect
             fill={fill}
             stroke={stroke}
@@ -52,7 +52,7 @@ export default {
             height={height}
             {...otherProps}
           />
-        }
+        )}
       </g>
     );
   },
diff --git a/webapp/src/hooks/brush/index.js b/webapp/src/hooks/brush/index.js
index e1807f0..714908e 100644
--- a/webapp/src/hooks/brush/index.js
+++ b/webapp/src/hooks/brush/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as useBrush } from './useBrush';
 export { default as BasicBrush } from './BasicBrush';
diff --git a/webapp/src/hooks/brush/useBrush.js b/webapp/src/hooks/brush/useBrush.js
index 14c808c..4ac4845 100644
--- a/webapp/src/hooks/brush/useBrush.js
+++ b/webapp/src/hooks/brush/useBrush.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 // brush hook
 import { reactive } from '@vue/composition-api';
@@ -49,7 +49,7 @@ function useBrush() {
   }
 
   function onBrushMove({ x, y }) {
-    const extent = getExtent(state.start, {x, y});
+    const extent = getExtent(state.start, { x, y });
     Object.assign(state, {
       end: { x, y },
       extent,
@@ -83,12 +83,12 @@ function useBrush() {
   function updateBrush(updater, callback) {
     const newState = updater(state);
     Object.assign(state, newState);
-    if(typeof callback === 'function') {
+    if (typeof callback === 'function') {
       callback(state);
     }
   }
 
-  return ({
+  return {
     brush: state,
     getExtent,
     onBrushStart,
@@ -96,7 +96,7 @@ function useBrush() {
     onBrushEnd,
     updateBrush,
     onBrushReset,
-  });
+  };
 }
 
 export default useBrush;
diff --git a/webapp/src/hooks/dict/index.js b/webapp/src/hooks/dict/index.js
new file mode 100644
index 0000000..235093f
--- /dev/null
+++ b/webapp/src/hooks/dict/index.js
@@ -0,0 +1,80 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { reactive, ref } from '@vue/composition-api';
+import { dictDetail } from '@/api/user';
+
+// 字典数据缓存
+const cache = {};
+
+/**
+ * 使用字典名列表获取字典
+ * @param {Array<String>} names 字典名列表
+ */
+export function useDicts(names) {
+  // 根据 names 初始化字典和标签对象
+  const dicts = {};
+  const labels = {};
+  names.forEach((name) => {
+    dicts[name] = null;
+    labels[name] = null;
+  });
+
+  // 生成响应式字典和标签对象
+  const reactiveDicts = reactive(dicts);
+  const reactiveLabels = reactive(labels);
+
+  // 字典数据处理
+  const handleData = (data) => {
+    Object.assign(reactiveDicts, { [data.name]: data.dictDetails });
+    const labelResult = {};
+    data.dictDetails.forEach((detail) => {
+      labelResult[detail.value] = detail.label;
+    });
+    Object.assign(reactiveLabels, { [data.name]: labelResult });
+  };
+
+  const ps = [];
+  names.forEach((dict) => {
+    // 如果存在缓存数据，则直接添加到数组中
+    if (cache[dict]) {
+      handleData(cache[dict]);
+      return;
+    }
+    ps.push(
+      dictDetail(dict).then((data) => {
+        handleData(data);
+        // 同一页面多个组件同时请求同一字典时，只有第一个返回的数据才会写入缓存
+        if (!cache[dict]) {
+          cache[dict] = data;
+        }
+      })
+    );
+  });
+
+  // 字典请求完成标志
+  const dictReadyFlag = ref(false);
+
+  Promise.all(ps).then(() => {
+    dictReadyFlag.value = true;
+  });
+
+  return {
+    dicts: reactiveDicts,
+    labels: reactiveLabels,
+    dictReadyFlag,
+  };
+}
diff --git a/webapp/src/hooks/draw/index.js b/webapp/src/hooks/draw/index.js
new file mode 100644
index 0000000..c1e0765
--- /dev/null
+++ b/webapp/src/hooks/draw/index.js
@@ -0,0 +1,17 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+export { default as useDraw } from './useDraw';
diff --git a/webapp/src/hooks/draw/useDraw.js b/webapp/src/hooks/draw/useDraw.js
new file mode 100644
index 0000000..328c144
--- /dev/null
+++ b/webapp/src/hooks/draw/useDraw.js
@@ -0,0 +1,63 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { reactive } from '@vue/composition-api';
+
+function useDraw() {
+  const state = reactive({
+    start: undefined,
+    end: undefined,
+    isDrawing: false,
+  });
+
+  function onDrawStart({ x, y }) {
+    Object.assign(state, {
+      start: { x, y },
+      isDrawing: true,
+      end: undefined,
+    });
+  }
+
+  function onDrawMove({ x, y }) {
+    Object.assign(state, {
+      end: { x, y },
+    });
+  }
+
+  function onDrawEnd() {
+    Object.assign(state, {
+      isDrawing: false,
+    });
+  }
+
+  function onDrawReset() {
+    Object.assign(state, {
+      start: undefined,
+      end: undefined,
+      isDrawing: false,
+    });
+  }
+
+  return {
+    draw: state,
+    onDrawStart,
+    onDrawMove,
+    onDrawEnd,
+    onDrawReset,
+  };
+}
+
+export default useDraw;
diff --git a/webapp/src/hooks/image/index.js b/webapp/src/hooks/image/index.js
index c08743f..3b716c0 100644
--- a/webapp/src/hooks/image/index.js
+++ b/webapp/src/hooks/image/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 // image hook，用于在标注页面根据图片加载状态、尺寸进行定位、展示
 import { reactive } from '@vue/composition-api';
diff --git a/webapp/src/hooks/index.js b/webapp/src/hooks/index.js
index 3780386..79d5680 100644
--- a/webapp/src/hooks/index.js
+++ b/webapp/src/hooks/index.js
@@ -1,21 +1,27 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export * from './brush';
 export * from './zoom';
 export * from './tooltip';
 export * from './image';
+export * from './draw';
 export * from './utils';
+export * from './mapGetters';
+export * from './dict';
+export * from './localStorage';
+export * from './pagination';
+export * from './sort';
diff --git a/webapp/src/hooks/localStorage/index.js b/webapp/src/hooks/localStorage/index.js
new file mode 100644
index 0000000..e5bb0e2
--- /dev/null
+++ b/webapp/src/hooks/localStorage/index.js
@@ -0,0 +1,38 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { ref } from '@vue/composition-api';
+
+export function useLocalStorage(key, initialValue = undefined) {
+  const valueRef = ref(initialValue);
+
+  // 读值
+  try {
+    const item = window.localStorage.getItem(key);
+    valueRef.value = item ? JSON.parse(item) : initialValue;
+  } catch (err) {
+    console.error(err);
+    valueRef.value = initialValue;
+  }
+
+  // 写入
+  const setValue = (value) => {
+    valueRef.value = value;
+    window.localStorage.setItem(key, JSON.stringify(value));
+  };
+
+  return [valueRef.value, setValue];
+}
diff --git a/webapp/src/hooks/mapGetters/index.js b/webapp/src/hooks/mapGetters/index.js
new file mode 100644
index 0000000..55e6007
--- /dev/null
+++ b/webapp/src/hooks/mapGetters/index.js
@@ -0,0 +1,30 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import store from '@/store';
+
+/**
+ * 使用 hooks 实现类似 mapGetters
+ * 无法根据 store 的实时变更进行进行调整，只有调用时会拉取一次
+ * @param {Array<String>} getters getters 列表，对应 mapGetters 的数组
+ */
+export function useMapGetters(getters) {
+  const map = {};
+  for (const getter of getters) {
+    map[getter] = store.getters[getter];
+  }
+  return map;
+}
diff --git a/webapp/src/hooks/pagination/index.js b/webapp/src/hooks/pagination/index.js
new file mode 100644
index 0000000..7391340
--- /dev/null
+++ b/webapp/src/hooks/pagination/index.js
@@ -0,0 +1,71 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { computed, reactive } from '@vue/composition-api';
+import { isNil } from 'lodash';
+
+/**
+ * 使用 hooks 提供对分页信息工作的代理，提高分页功能易用度
+ * options 选项:
+ *   pageSize - 定义分页大小；
+ *   pageAttrs - 除 pageSize 外其他所有 el-pagination 可用属性
+ */
+export function usePagination(options = {}) {
+  // el-pagination 组件属性
+  const pageAttrs = reactive({
+    layout: 'total, prev, pager, next, sizes',
+    pageSizes: [10, 20, 50],
+    ...options.pageAttrs,
+  });
+
+  // 用于动态更新分页属性
+  const setPageAttrs = (attr) => {
+    Object.assign(pageAttrs, attr);
+  };
+
+  // 用于记录分页信息
+  const pagination = reactive({
+    total: 0,
+    pageSize: options.pageSize || 10,
+    currentPage: 0,
+  });
+
+  // 更新分页信息，传入字段与现前后端约定一致
+  const setPagination = (pageInfo) => {
+    const info = {};
+    !isNil(pageInfo.total) && (info.total = pageInfo.total);
+    !isNil(pageInfo.size) && (info.pageSize = pageInfo.size);
+    !isNil(pageInfo.current) && (info.currentPage = pageInfo.current);
+    Object.assign(pagination, info);
+  };
+
+  // 同时携带了分页信息以及其他属性的 attrs 对象
+  const mergedPageAttrs = computed(() => {
+    return {
+      ...pageAttrs,
+      ...pagination,
+    };
+  });
+
+  return {
+    pageAttrs,
+    pagination,
+    mergedPageAttrs,
+
+    setPageAttrs,
+    setPagination,
+  };
+}
diff --git a/webapp/src/hooks/sort/index.js b/webapp/src/hooks/sort/index.js
new file mode 100644
index 0000000..b3607f2
--- /dev/null
+++ b/webapp/src/hooks/sort/index.js
@@ -0,0 +1,36 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { reactive } from '@vue/composition-api';
+
+export function useSort() {
+  const sortInfo = reactive({
+    sort: undefined,
+    order: undefined,
+  });
+
+  const setSort = (sort) => {
+    Object.assign(sortInfo, {
+      sort: sort.sort || undefined,
+      order: sort.order || undefined,
+    });
+  };
+
+  return {
+    sortInfo,
+    setSort,
+  };
+}
diff --git a/webapp/src/hooks/tooltip/BasicTooltip.js b/webapp/src/hooks/tooltip/BasicTooltip.js
index 113acef..5f17150 100644
--- a/webapp/src/hooks/tooltip/BasicTooltip.js
+++ b/webapp/src/hooks/tooltip/BasicTooltip.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 // 基础 Tooltip 组件，用于在手动标注页面框选标注，选择标签
 import { isFunction } from 'lodash';
@@ -78,7 +78,7 @@ export default {
       }
     },
     onDocumentClick(event) {
-      const {target} = event;
+      const { target } = event;
       const root = this.$el;
       // 过滤 popper
       // element popper 是挂在 document 下面，临时过滤
@@ -99,7 +99,7 @@ export default {
   beforeDestroy() {
     this.clearOutsideHandler();
   },
-  render(h) {
+  render() {
     const { position = {}, curVisible } = this;
 
     // // this sucks~
@@ -121,7 +121,7 @@ export default {
 
     return (
       <div class={`zj-tooltip basic-tooltip`} style={positionStyle}>
-        { this.$slots.default }
+        {this.$slots.default}
       </div>
     );
   },
diff --git a/webapp/src/hooks/tooltip/TooltipContainer.js b/webapp/src/hooks/tooltip/TooltipContainer.js
index eaff85f..bf709ab 100644
--- a/webapp/src/hooks/tooltip/TooltipContainer.js
+++ b/webapp/src/hooks/tooltip/TooltipContainer.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 // tooltip 容器
 import { ref, reactive } from '@vue/composition-api';
@@ -37,7 +37,7 @@ const TooltipContainer = {
     const slotChildren = h(
       'div',
       { style: { position: 'relative' }, ref: 'containerRef' },
-      this.$scopedSlots.default({ data: this.state }),
+      this.$scopedSlots.default({ data: this.state })
     );
 
     return slotChildren;
diff --git a/webapp/src/hooks/tooltip/index.js b/webapp/src/hooks/tooltip/index.js
index a13ca3c..c7fac3d 100644
--- a/webapp/src/hooks/tooltip/index.js
+++ b/webapp/src/hooks/tooltip/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as useTooltip } from './useTooltip';
 export { default as TooltipContainer } from './TooltipContainer';
diff --git a/webapp/src/hooks/tooltip/tableTooltip.js b/webapp/src/hooks/tooltip/tableTooltip.js
index a2d5fb6..3282f08 100644
--- a/webapp/src/hooks/tooltip/tableTooltip.js
+++ b/webapp/src/hooks/tooltip/tableTooltip.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 // 多系列数据 tooltip 公共展示组件
 import cx from 'classnames';
@@ -54,32 +54,43 @@ export default {
   },
   render(h, context) {
     const { props } = context;
-    const { className, keys, title, colorScale, keyAccessor, valueAccessor, showIcon, data } = props;
+    const {
+      className,
+      keys,
+      title,
+      colorScale,
+      keyAccessor,
+      valueAccessor,
+      showIcon,
+      data,
+    } = props;
     if (!keys.length) return null;
     const klass = cx('tt-wrapper', {
       [className]: !!className,
     });
     return (
       <div class={klass}>
-        {title && <div class='el-popover__title ellipsis' title={title}>{title}</div>}
-        {
-          keys.map((key, idx) => {
-            const style = {
-              icon: {
-                backgroundColor: colorScale ? colorScale(key) : '',
-              },
-            };
-            return (
-              <div key={key} class='tooltip-item-row'>
-                <div class='tooltip-item-label'>
-                  {!!showIcon && <span class='tooltip-item-icon' style={style.icon} />}
-                  <span class='tooltip-item-key'>{keyAccessor(key, idx, data)}：</span>
-                </div>
-                <div class='tooltip-item-text'>{valueAccessor(key, idx, data)}</div>
+        {title && (
+          <div class="el-popover__title ellipsis" title={title}>
+            {title}
+          </div>
+        )}
+        {keys.map((key, idx) => {
+          const style = {
+            icon: {
+              backgroundColor: colorScale ? colorScale(key) : '',
+            },
+          };
+          return (
+            <div key={key} class="tooltip-item-row">
+              <div class="tooltip-item-label">
+                {!!showIcon && <span class="tooltip-item-icon" style={style.icon} />}
+                <span class="tooltip-item-key">{keyAccessor(key, idx, data)}：</span>
               </div>
-            );
-          })
-        }
+              <div class="tooltip-item-text">{valueAccessor(key, idx, data)}</div>
+            </div>
+          );
+        })}
       </div>
     );
   },
diff --git a/webapp/src/hooks/tooltip/useTooltip.js b/webapp/src/hooks/tooltip/useTooltip.js
index f991afa..17dd3bf 100644
--- a/webapp/src/hooks/tooltip/useTooltip.js
+++ b/webapp/src/hooks/tooltip/useTooltip.js
@@ -1,24 +1,26 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 // tooltip hook，用于管理 tooltip 位置
 import { reactive } from '@vue/composition-api';
 import { getBounding } from '@/utils';
 
-function useTooltip(containerRef) {
+const assert = require('assert');
+
+function useTooltip() {
   const state = reactive({
     visible: false,
     position: {},
@@ -26,11 +28,11 @@ function useTooltip(containerRef) {
   });
 
   function showTooltip(data, event, options = {}) {
+    assert(options.el, 'options.el is required');
     const { clientX, clientY } = event;
-    const bounding = getBounding(containerRef.value);
+    const bounding = getBounding(options.el);
     const x = clientX - bounding.left;
     const y = clientY - bounding.top;
-
     let position = {};
 
     if (typeof options.position === 'function') {
@@ -64,12 +66,12 @@ function useTooltip(containerRef) {
     });
   }
 
-  return ({
+  return {
     tooltipData: state,
     keepTooltipVisible,
     showTooltip,
     hideTooltip,
-  });
+  };
 }
 
 export default useTooltip;
diff --git a/webapp/src/hooks/utils.js b/webapp/src/hooks/utils.js
index 69e8f8e..1c8fe10 100644
--- a/webapp/src/hooks/utils.js
+++ b/webapp/src/hooks/utils.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { isRef } from '@vue/composition-api';
 
diff --git a/webapp/src/hooks/zoom/index.js b/webapp/src/hooks/zoom/index.js
index f85fd38..e938945 100644
--- a/webapp/src/hooks/zoom/index.js
+++ b/webapp/src/hooks/zoom/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as useZoom } from './useZoom';
diff --git a/webapp/src/hooks/zoom/useZoom.js b/webapp/src/hooks/zoom/useZoom.js
index 756ffc6..973c17a 100644
--- a/webapp/src/hooks/zoom/useZoom.js
+++ b/webapp/src/hooks/zoom/useZoom.js
@@ -1,27 +1,31 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 // zoom hook，用于图片、容器缩放管理
 import { reactive } from '@vue/composition-api';
 import { getBounding } from '@/utils';
 
-function useZoom(initialZoom, wrapperRef, options = {
-  max: 4,
-  min: 0.2,
-}) {
+function useZoom(
+  initialZoom,
+  wrapperRef,
+  options = {
+    max: 4,
+    min: 0.2,
+  }
+) {
   const state = reactive(initialZoom);
   const { max, min } = options;
 
@@ -29,12 +33,12 @@ function useZoom(initialZoom, wrapperRef, options = {
     const bounding = wrapperRef.value ? getBounding(wrapperRef.value) : {};
     return bounding;
   }
-  
+
   function updateZoom({ newZoom, zoom, zoomX, zoomY }) {
     const { width, height } = bounding(wrapperRef.value);
     const result = {
-      zoomX: width / 2 - newZoom / zoom * (width / 2 - zoomX),
-      zoomY: height / 2 - newZoom / zoom * (height / 2 - zoomY),
+      zoomX: width / 2 - (newZoom / zoom) * (width / 2 - zoomX),
+      zoomY: height / 2 - (newZoom / zoom) * (height / 2 - zoomY),
       zoom: newZoom,
     };
     Object.assign(state, result);
@@ -66,18 +70,18 @@ function useZoom(initialZoom, wrapperRef, options = {
     updateZoom({ newZoom: 1, zoom: 1, zoomX: 0, zoomY: 0 });
   }
 
-  function getZoom(){
+  function getZoom() {
     return state;
   }
 
-  return ({
+  return {
     zoom: state,
     getZoom,
     setZoom,
     zoomIn,
     zoomOut,
     reset,
-  });
+  };
 }
 
 export default useZoom;
diff --git a/webapp/src/layout/BaseLayout.vue b/webapp/src/layout/BaseLayout.vue
index 0b0d1a5..ef6618d 100644
--- a/webapp/src/layout/BaseLayout.vue
+++ b/webapp/src/layout/BaseLayout.vue
@@ -1,26 +1,26 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
     <sidebar v-if="showSidebar" class="sidebar-container" />
-    <div class="main-container">
-      <div v-if="showNav" :class="{'fixed-header': fixedHeader}">
-        <navbar :showBack="showBack" :showSidebar="showSidebar" :showTitle="showTitle" @go-back="onClickBack">
+    <div class="main-container" :class="wrapperClass">
+      <div v-if="showNav" :class="{ 'fixed-header': fixedHeader }">
+        <navbar
+          :showBack="showBack"
+          :showSidebar="showSidebar"
+          :showTitle="showTitle"
+          @go-back="onClickBack"
+        >
           <template v-slot:left>
             <slot name="left-options" />
           </template>
@@ -79,12 +79,13 @@ export default {
       type: Boolean,
       default: true,
     },
+    wrapperClass: String,
   },
   computed: {
     ...mapState({
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      fixedHeader: state => state.settings.fixedHeader,
+      sidebar: (state) => state.app.sidebar,
+      device: (state) => state.app.device,
+      fixedHeader: (state) => state.settings.fixedHeader,
     }),
     classObj() {
       return {
@@ -121,68 +122,68 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
+@import '~@/assets/styles/mixin.scss';
+@import '~@/assets/styles/variables.scss';
 
-  .app-wrapper {
-    @include clearfix;
+.app-wrapper {
+  @include clearfix;
 
-    position: relative;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .drawer-bg {
+    position: absolute;
+    top: 0;
+    z-index: 999;
     width: 100%;
     height: 100%;
-
-    .drawer-bg {
-      position: absolute;
-      top: 0;
-      z-index: 999;
-      width: 100%;
-      height: 100%;
-      background: #000;
-      opacity: 0.3;
-    }
-
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
+    background: #000;
+    opacity: 0.3;
   }
 
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
-    padding: 0;
-    transition: width 0.28s;
   }
+}
 
-  .noSidebar .fixed-header {
-    width: 100%;
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  padding: 0;
+  transition: width 0.28s;
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - #{$iconBarWidth});
-  }
+.noSidebar .fixed-header {
+  width: 100%;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.hideSidebar .fixed-header {
+  width: calc(100% - #{$iconBarWidth});
+}
 
-  #el-main-footer {
-    position: fixed;
-    bottom: 0;
-    z-index: 99;
-    width: 100%;
-    height: 33px;
-    padding: 10px 6px 0 6px;
-    overflow: hidden;
-    font-family: Arial, sans-serif !important;
-    font-size: 0.7rem !important;
-    color: #7a8b9a;
-    letter-spacing: 0.8px;
-    pointer-events: none;
-    background: none repeat scroll 0 0 white;
-    border-top: 1px solid #e7eaec;
-  }
+.mobile .fixed-header {
+  width: 100%;
+}
+
+#el-main-footer {
+  position: fixed;
+  bottom: 0;
+  z-index: 99;
+  width: 100%;
+  height: 33px;
+  padding: 10px 6px 0 6px;
+  overflow: hidden;
+  font-family: Arial, sans-serif !important;
+  font-size: 0.7rem !important;
+  color: #7a8b9a;
+  letter-spacing: 0.8px;
+  pointer-events: none;
+  background: none repeat scroll 0 0 white;
+  border-top: 1px solid #e7eaec;
+}
 </style>
diff --git a/webapp/src/layout/DatasetLayout.vue b/webapp/src/layout/DatasetLayout.vue
index 438a5ad..6dba02e 100644
--- a/webapp/src/layout/DatasetLayout.vue
+++ b/webapp/src/layout/DatasetLayout.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseLayout :showBack="true" :showSidebar="false" :showFooter="false" />
diff --git a/webapp/src/layout/DetailLayout.vue b/webapp/src/layout/DetailLayout.vue
index ce2bebf..f8d1cd5 100644
--- a/webapp/src/layout/DetailLayout.vue
+++ b/webapp/src/layout/DetailLayout.vue
@@ -1,21 +1,26 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <BaseLayout :showBack="true" :showSidebar="false" />
+  <BaseLayout
+    :showBack="true"
+    :showSidebar="false"
+    :showFooter="false"
+    wrapperClass="detail-page"
+  />
 </template>
 
 <script>
@@ -28,3 +33,69 @@ export default {
   },
 };
 </script>
+<style lang="scss">
+@import '@/assets/styles/variables.scss';
+@import '@/assets/styles/mixin.scss';
+
+.detail-page {
+  .app-container {
+    min-height: calc(100vh - 50px);
+    overflow: auto;
+  }
+
+  .app-container.greyBg {
+    background-color: $imageBg;
+  }
+
+  .app-page-header {
+    padding: 12px 24px;
+    line-height: 1.5;
+    background: #fff;
+    border: 1px solid $borderColor;
+  }
+
+  .app-page-header-title {
+    margin-right: 12px;
+    margin-bottom: 0;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 32px;
+    color: rgba(0, 0, 0, 0.85);
+
+    @include text-overflow;
+  }
+
+  .ant-page-header-content {
+    padding-top: 12px;
+  }
+
+  .app-page-container-content {
+    margin: 16px 0 0;
+  }
+
+  .app-page-form-steps-desc {
+    padding: 0 56px;
+    color: rgba(0, 0, 0, 0.55);
+
+    h3 {
+      margin: 0 0 8px;
+      font-size: 16px;
+      line-height: 32px;
+      color: rgba(0, 0, 0, 0.8);
+    }
+
+    h4 {
+      margin: 0 0 4px;
+      font-size: 14px;
+      line-height: 22px;
+      color: rgba(0, 0, 0, 0.65);
+    }
+
+    p {
+      margin-top: 0;
+      margin-bottom: 12px;
+      line-height: 22px;
+    }
+  }
+}
+</style>
diff --git a/webapp/src/layout/FullpageLayout.vue b/webapp/src/layout/FullpageLayout.vue
index 3ae0ff6..4e44bac 100644
--- a/webapp/src/layout/FullpageLayout.vue
+++ b/webapp/src/layout/FullpageLayout.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseLayout :showSidebar="false" :showFooter="false" :showNav="false" />
diff --git a/webapp/src/layout/SubpageLayout.vue b/webapp/src/layout/SubpageLayout.vue
index a6cf9dd..3b274da 100644
--- a/webapp/src/layout/SubpageLayout.vue
+++ b/webapp/src/layout/SubpageLayout.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseLayout :showSidebar="true" :showBack="true" />
diff --git a/webapp/src/layout/components/AppMain/index.vue b/webapp/src/layout/components/AppMain/index.vue
index 41706ce..aaf2055 100644
--- a/webapp/src/layout/components/AppMain/index.vue
+++ b/webapp/src/layout/components/AppMain/index.vue
@@ -1,18 +1,9 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <section class="app-main">
diff --git a/webapp/src/layout/components/Feedback/index.vue b/webapp/src/layout/components/Feedback/index.vue
index ec6f169..73deef3 100644
--- a/webapp/src/layout/components/Feedback/index.vue
+++ b/webapp/src/layout/components/Feedback/index.vue
@@ -1,48 +1,43 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div v-click-outside="onClickOutside" class="feedback-outside">
     <div ref="triggerRef" class="feedback" @click="handleOpen">
       我要反馈
     </div>
-    <el-card v-show="tooltipData.visible" class="feed-content box-card" :style="contentStyle">
+    <el-card v-show="tooltipData.visible" class="feed-content box-card g6" :style="contentStyle">
       <div slot="header" class="clearfix">
         我要反馈
       </div>
       <el-row :gutter="20">
         <el-col :span="12">
-          <a class="feed-action" target="_blank" :href="Community">
+          <a class="feed-action g6" target="_blank" :href="Community">
             <i class="el-icon-edit-outline" />
             <div>在线社区</div>
           </a>
         </el-col>
         <el-col :span="12">
-
-          <el-popover
-            placement="bottom"
-            trigger="click"
-          >
-            <img src="../../../assets/images/dingtalk.jpg" width="200" alt="">
+          <el-popover placement="bottom" trigger="click">
+            <img src="../../../assets/images/dingtalk.jpg" width="200" alt="" />
             <div slot="reference" class="feed-action">
               <i class="el-icon-chat-dot-square" />
               <div>钉钉交流群</div>
             </div>
           </el-popover>
-        
         </el-col>
       </el-row>
       <div class="f12 g6 mt-10">您的意见对于我们很重要，我们将尽快回复，谢谢</div>
@@ -75,10 +70,11 @@ export default {
     const handleOpen = (event) => {
       showTooltip({}, event, {
         position: setPosition,
+        el: triggerRef.value,
       });
     };
 
-    const onClickOutside = event => {
+    const onClickOutside = (event) => {
       if (!event.target.closest('.feedback-outside') && !!tooltipData.visible) {
         hideTooltip();
       }
@@ -103,7 +99,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "~@/assets/styles/variables.scss";
+@import '~@/assets/styles/variables.scss';
 
 .feedback {
   margin-right: 20px;
diff --git a/webapp/src/layout/components/Guideline/index.vue b/webapp/src/layout/components/Guideline/index.vue
index e11d767..aa59a0c 100644
--- a/webapp/src/layout/components/Guideline/index.vue
+++ b/webapp/src/layout/components/Guideline/index.vue
@@ -1,22 +1,22 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <div class="doc-link" >
-    <a class="link-action" target="_blank" :href="DocLink">
+  <div class="doc-link">
+    <a class="link-action" target="_blank" :href="docsUrl">
       使用文档
       <IconFont type="externallink" />
     </a>
@@ -24,20 +24,20 @@
 </template>
 
 <script>
-import { DocLink } from '@/settings';
+const docsUrl = process.env.VUE_APP_DOCS_URL;
 
-export default { 
+export default {
   name: 'Guideline',
   setup() {
     return {
-      DocLink,
+      docsUrl,
     };
   },
 };
 </script>
 
 <style lang="scss">
-@import "~@/assets/styles/variables.scss";
+@import '~@/assets/styles/variables.scss';
 
 .doc-link {
   margin-right: 20px;
diff --git a/webapp/src/layout/components/Navbar/BackIcon.vue b/webapp/src/layout/components/Navbar/BackIcon.vue
index ff4485f..8cdc0c4 100644
--- a/webapp/src/layout/components/Navbar/BackIcon.vue
+++ b/webapp/src/layout/components/Navbar/BackIcon.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <span :class="classname" @click="handleBack">
diff --git a/webapp/src/layout/components/Navbar/index.vue b/webapp/src/layout/components/Navbar/index.vue
index 56fd5a3..23d4cbf 100644
--- a/webapp/src/layout/components/Navbar/index.vue
+++ b/webapp/src/layout/components/Navbar/index.vue
@@ -1,25 +1,22 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div class="navbar">
     <div class="navbar-left">
-      <hamburger v-if="showSidebar" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+      <hamburger
+        v-if="showSidebar"
+        id="hamburger-container"
+        :is-active="sidebar.opened"
+        class="hamburger-container"
+        @toggleClick="toggleSideBar"
+      />
       <BackIcon v-if="showBack" classname="navbar-back" v-on="$listeners" />
-      <div v-if="showTitle" class="navbar-title" :class="{'navbar-title-split': showBack}">
+      <div v-if="showTitle" class="navbar-title" :class="{ 'navbar-title-split': showBack }">
         {{ $route.meta && $route.meta.title }}
       </div>
       <!-- 左边占位符 -->
@@ -32,7 +29,7 @@
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="user.avatar" class="user-avatar">
+          <img :src="user.avatar" class="user-avatar" />
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -84,11 +81,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'device',
-      'user',
-    ]),
+    ...mapGetters(['sidebar', 'device', 'user']),
   },
   methods: {
     toggleSideBar() {
@@ -105,7 +98,7 @@ export default {
     },
     logout() {
       this.$store.dispatch('LogOut').then(() => {
-        location.reload();
+        window.location.reload();
       });
     },
   },
diff --git a/webapp/src/layout/components/Sidebar/Item.vue b/webapp/src/layout/components/Sidebar/Item.vue
index d239c17..94096b7 100644
--- a/webapp/src/layout/components/Sidebar/Item.vue
+++ b/webapp/src/layout/components/Sidebar/Item.vue
@@ -1,18 +1,9 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <script>
 export default {
@@ -33,11 +24,11 @@ export default {
     const vnodes = [];
 
     if (icon) {
-      vnodes.push(<IconFont type={icon}/>);
+      vnodes.push(<IconFont type={icon} />);
     }
 
     if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>);
+      vnodes.push(<span slot="title">{title}</span>);
     }
     return vnodes;
   },
diff --git a/webapp/src/layout/components/Sidebar/Link.vue b/webapp/src/layout/components/Sidebar/Link.vue
index d6138a7..96c4a69 100644
--- a/webapp/src/layout/components/Sidebar/Link.vue
+++ b/webapp/src/layout/components/Sidebar/Link.vue
@@ -1,18 +1,9 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <a v-if="isExternal" :href="url" target="_blank" rel="noopener noreferrer">
diff --git a/webapp/src/layout/components/Sidebar/Logo.vue b/webapp/src/layout/components/Sidebar/Logo.vue
index 46c4467..68b04c3 100644
--- a/webapp/src/layout/components/Sidebar/Logo.vue
+++ b/webapp/src/layout/components/Sidebar/Logo.vue
@@ -1,23 +1,14 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div class="sidebar-logo-container">
     <router-link class="sidebar-logo-link ellipsis" to="/">
-      <img :src="title" class="sidebar-title">
+      <img :src="title" class="sidebar-title" />
     </router-link>
   </div>
 </template>
@@ -42,7 +33,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/assets/styles/variables.scss";
+@import '~@/assets/styles/variables.scss';
 
 .sidebar-logo-container {
   position: relative;
diff --git a/webapp/src/layout/components/Sidebar/SidebarItem.vue b/webapp/src/layout/components/Sidebar/SidebarItem.vue
index 04e3f22..ea7f57c 100644
--- a/webapp/src/layout/components/Sidebar/SidebarItem.vue
+++ b/webapp/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,25 +1,21 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)">
+    <template
+      v-if="hasOneShowingChild(item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)"
+    >
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+          <item
+            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
+            :title="onlyOneChild.meta.title"
+          />
         </el-menu-item>
       </app-link>
     </template>
@@ -66,11 +62,12 @@ export default {
   methods: {
     hasOneShowingChild(parent) {
       const { children = [] } = parent;
-      const showingChildren = children.filter(item => !item.hidden);
+      const showingChildren = children.filter((item) => !item.hidden);
       if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true };
+        this.onlyOneChild = { ...parent, path: '', noShowingChildren: true };
         return true;
-      } if (showingChildren.length === 1 && !this.item.name) {
+      }
+      if (showingChildren.length === 1 && !this.item.name) {
         // eslint-disable-next-line prefer-destructuring
         this.onlyOneChild = showingChildren[0];
         return true;
diff --git a/webapp/src/layout/components/Sidebar/index.vue b/webapp/src/layout/components/Sidebar/index.vue
index c0e1de2..b92ee86 100644
--- a/webapp/src/layout/components/Sidebar/index.vue
+++ b/webapp/src/layout/components/Sidebar/index.vue
@@ -1,21 +1,12 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
-  <div :class="{'has-logo':showLogo}">
+  <div :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
@@ -28,7 +19,12 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="route in allRoutes" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item
+          v-for="route in allRoutes"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path"
+        />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -43,10 +39,7 @@ import SidebarItem from './SidebarItem';
 export default {
   components: { SidebarItem, Logo },
   computed: {
-    ...mapGetters([
-      'allRoutes',
-      'sidebar',
-    ]),
+    ...mapGetters(['allRoutes', 'sidebar']),
     activeMenu() {
       const route = this.$route;
       const { meta, path } = route;
diff --git a/webapp/src/layout/components/index.js b/webapp/src/layout/components/index.js
index 8be6073..b80eadd 100644
--- a/webapp/src/layout/components/index.js
+++ b/webapp/src/layout/components/index.js
@@ -1,21 +1,21 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as AppMain } from './AppMain';
 export { default as Navbar } from './Navbar';
 export { default as Sidebar } from './Sidebar';
-export { default as Guideline } from './Guideline'; 
+export { default as Guideline } from './Guideline';
 export { default as Feedback } from './Feedback';
diff --git a/webapp/src/layout/index.vue b/webapp/src/layout/index.vue
index cd239a4..f514bb4 100644
--- a/webapp/src/layout/index.vue
+++ b/webapp/src/layout/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <component :is="layout">
diff --git a/webapp/src/layout/mixin/ResizeHandler.js b/webapp/src/layout/mixin/ResizeHandler.js
index aeb934a..ccc9960 100644
--- a/webapp/src/layout/mixin/ResizeHandler.js
+++ b/webapp/src/layout/mixin/ResizeHandler.js
@@ -1,18 +1,18 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import store from '@/store';
 
diff --git a/webapp/src/lib/api-map/index.js b/webapp/src/lib/api-map/index.js
new file mode 100644
index 0000000..ff14c95
--- /dev/null
+++ b/webapp/src/lib/api-map/index.js
@@ -0,0 +1,47 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+import { api_version, api_prefix } from '../../config';
+import { findMatchRule, isURL } from './util';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+const url = require('url');
+
+const { VUE_APP_DATA_API, VUE_APP_VISUAL_API, VUE_APP_BASE_API } = process.env;
+
+const fullPrefix = `${api_prefix}/${api_version}`;
+
+// 路由访问规则配置，最后一个为默认访问配置
+const rules = [
+  {
+    match: /^\/data/,
+    host: url.resolve(VUE_APP_DATA_API, fullPrefix),
+  },
+  {
+    match: /^\/visual\/api/,
+    host: VUE_APP_VISUAL_API,
+  },
+  {
+    host: url.resolve(VUE_APP_BASE_API, fullPrefix),
+  },
+];
+
+const mapper = (pathname) => {
+  if (isURL(pathname)) return undefined;
+  const rule = findMatchRule(rules)(pathname);
+  return rule.host;
+};
+
+export default mapper;
diff --git a/webapp/src/lib/api-map/util.js b/webapp/src/lib/api-map/util.js
new file mode 100644
index 0000000..fa2f5b8
--- /dev/null
+++ b/webapp/src/lib/api-map/util.js
@@ -0,0 +1,27 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+export const findMatchRule = (rules) => {
+  return (pathname) => {
+    return rules.find(({ match }) => {
+      return match instanceof RegExp ? match.test(pathname) : true;
+    });
+  };
+};
+
+export const isURL = (path) => {
+  return path.startsWith('http://') || path.startsWith('https://');
+};
diff --git a/webapp/src/main.js b/webapp/src/main.js
index ae1275c..a9e3933 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -1,22 +1,22 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import Vue from 'vue';
 import Element from 'element-ui';
-import VueCompositionApi from '@vue/composition-api';
+import VueCompositionAPI from '@vue/composition-api';
 // 快捷键
 import VueHotkey from 'v-hotkey';
 import PortalVue from 'portal-vue';
@@ -42,7 +42,7 @@ import './assets/VisualIcon/iconfont.css';
 import './assets/styles/index.scss';
 
 Vue.use(Element);
-Vue.use(VueCompositionApi);
+Vue.use(VueCompositionAPI);
 Vue.use(VueHotkey);
 Vue.use(dict);
 Vue.component(IconFont.name, IconFont);
@@ -51,7 +51,7 @@ Vue.component('ValidationProvider', ValidationProvider);
 Vue.component('ValidationObserver', ValidationObserver);
 Vue.use(PortalVue);
 
-Object.keys(directives).forEach(key => {
+Object.keys(directives).forEach((key) => {
   Vue.directive(key, directives[key]);
 });
 
@@ -62,5 +62,5 @@ new Vue({
   el: '#app',
   router,
   store,
-  render: h => h(App),
+  render: (h) => h(App),
 });
diff --git a/webapp/src/mixins/baseMixin.js b/webapp/src/mixins/baseMixin.js
index 44a1f6b..2d344a4 100644
--- a/webapp/src/mixins/baseMixin.js
+++ b/webapp/src/mixins/baseMixin.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export default {
   methods: {
diff --git a/webapp/src/mixins/datePickerMixin.js b/webapp/src/mixins/datePickerMixin.js
index 88684a4..03f2a60 100644
--- a/webapp/src/mixins/datePickerMixin.js
+++ b/webapp/src/mixins/datePickerMixin.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export default {
   data() {
diff --git a/webapp/src/mixins/openNotebookMixin.js b/webapp/src/mixins/openNotebookMixin.js
index 1a5a2b2..22ff9fc 100644
--- a/webapp/src/mixins/openNotebookMixin.js
+++ b/webapp/src/mixins/openNotebookMixin.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { createNotebook, getNotebookAddress } from '@/api/development/notebook';
 
@@ -27,6 +27,7 @@ export default {
     return {
       askNotebookInfoLoading: false,
       keepAskAddress: false,
+      notebookNotifyInstance: null,
     };
   },
   computed: {
@@ -35,6 +36,13 @@ export default {
       return this.askNotebookInfoLoading || this.keepAskAddress;
     },
   },
+  beforeDestroy() {
+    this.keepAskAddress = false;
+    if (this.notebookNotifyInstance) {
+      this.notebookNotifyInstance.close();
+      this.notebookNotifyInstance = null;
+    }
+  },
   methods: {
     /**
      * 根据 算法ID 和 算法路径 获取 Notebook 信息, 入口方法
@@ -55,6 +63,12 @@ export default {
         return;
       }
       this.callHook(OPEN_NOTEBOOK_HOOKS.START);
+      this.notebookNotifyInstance = this.$notify({
+        title: '正在启动 Notebook',
+        message: '正在启动 Notebook，请稍等',
+        iconClass: 'el-icon-loading',
+        duration: 0,
+      });
       this.askNotebookInfoLoading = true;
       const notebookInfo = await createNotebook(1, {
         sourceId: algorithmId,
@@ -74,18 +88,20 @@ export default {
       if (!this.keepAskAddress) {
         return;
       }
-      getNotebookAddress(id).then(url => {
-        if (url) {
-          this.openNotebook(url);
-        } else {
-          setTimeout(() => {
-            this.getNotebookAddress(id);
-          }, 1000);
-        }
-      }).catch(err => {
-        this.keepAskAddress = false;
-        throw new Error(err);
-      });
+      getNotebookAddress(id)
+        .then((url) => {
+          if (url) {
+            this.openNotebook(url);
+          } else {
+            setTimeout(() => {
+              this.getNotebookAddress(id);
+            }, 1000);
+          }
+        })
+        .catch((err) => {
+          this.keepAskAddress = false;
+          throw new Error(err);
+        });
     },
     // 根据 Notebook 地址打开页面，同时跳转算法管理页
     openNotebook(url) {
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index 42b576f..c701784 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -1,35 +1,34 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import NProgress from 'nprogress'; // progress bar
-import 'nprogress/nprogress.css';// progress bar style
+import 'nprogress/nprogress.css'; // progress bar style
 import store from '@/store';
+import { userMenus } from '@/api/user';
 import { getToken } from '@/utils/auth'; // getToken from cookie
 import { updateTitle } from '@/utils';
 import MinioClient from '@/utils/minIO';
 import constantRoutes from './routes';
-import modulesRoutes from './modules';
-import systemRoute from './modules/system';
 
 const originalPush = VueRouter.prototype.push;
 VueRouter.prototype.push = function push(location, onResolve, onReject) {
   if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject);
-  return originalPush.call(this, location).catch(err => err);
+  return originalPush.call(this, location).catch((err) => err);
 };
 
 Vue.use(VueRouter);
@@ -41,34 +40,49 @@ const router = new VueRouter({
 });
 
 // no redirect whitelist
-const whiteList = [
-  '/login',
-  '/register',
-  '/resetpassword',
-];
+const whiteList = ['/login', '/register', '/resetpassword'];
 
+const filterAsyncRoute = (routes) => {
+  return routes.filter((route) => {
+    if (route.component) {
+      if (route.component === 'Layout') {
+        route.component = () => import('@/layout/index');
+      } else {
+        const { component } = route;
+        route.component = () => import(/* webpackChunkName: "[request]" */ `@/views/${component}`);
+      }
+    }
+    if (route.children && route.children.length) {
+      route.children = filterAsyncRoute(route.children);
+    }
+    return true;
+  });
+};
 
 const loadUserMenus = (next, to) => {
-  const { roles } = store.getters.user;
-  const asyncRoutes = roles && roles.length && roles[0].permission === 'admin' ? modulesRoutes.concat(systemRoute) : modulesRoutes;
-  asyncRoutes.push({ path: '*', redirect: '/', hidden: true });
-  store.dispatch('app/addRoutes', asyncRoutes).then(() => {
-    router.addRoutes(asyncRoutes);
-    next({ ...to, replace: true });
+  userMenus().then((res) => {
+    const asyncRoutes = filterAsyncRoute(res);
+    asyncRoutes.push({ path: '*', redirect: '/', hidden: true });
+    store.dispatch('app/addRoutes', asyncRoutes).then(() => {
+      router.addRoutes(asyncRoutes);
+      next({ ...to, replace: true });
+    });
   });
 };
 
 // NProgress Configuration
 NProgress.configure({ showSpinner: false });
 
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   updateTitle(to.meta.title);
   to.meta.fromPath = from.path;
   NProgress.start();
   if (getToken()) {
     // 全局 minioClient 只初始化一次
     if (!window.minioClient) {
-      window.minioClient = new MinioClient();
+      const instance = new MinioClient();
+      const minioClient = await instance.init();
+      window.minioClient = minioClient;
     }
     // 已登录且要跳转的页面是登录页
     if (to.path === '/login') {
@@ -76,13 +90,16 @@ router.beforeEach((to, from, next) => {
       NProgress.done();
     } else if (!store.getters.user.username) {
       // 登录状态刷新页面，重新拉取用户信息和菜单
-      store.dispatch('GetInfo').then(() => {
-        loadUserMenus(next, to);
-      }).catch(() => {
-        store.dispatch('LogOut').then(() => {
-          location.reload();
+      store
+        .dispatch('GetInfo')
+        .then(() => {
+          loadUserMenus(next, to);
+        })
+        .catch(() => {
+          store.dispatch('LogOut').then(() => {
+            window.location.reload();
+          });
         });
-      });
     } else if (!store.getters.menuLoaded) {
       // 登录后在此处拉取菜单
       loadUserMenus(next, to);
@@ -91,7 +108,8 @@ router.beforeEach((to, from, next) => {
     }
   } else {
     /* has no token */
-    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
+    if (whiteList.indexOf(to.path) !== -1) {
+      // 在免登录白名单，直接进入
       next();
     } else {
       next(`/login`); // 否则全部重定向到登录页
diff --git a/webapp/src/router/modules/atlas.js b/webapp/src/router/modules/atlas.js
deleted file mode 100644
index 0432beb..0000000
--- a/webapp/src/router/modules/atlas.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-export default [
-  {
-    name: '模型炼知',
-    path: '/atlas',
-    hidden: false,
-    component: () => import('@/layout/index'),
-    meta: {
-      title: '模型炼知',
-      icon: 'icon_huabanfuben1',
-      layout: null,
-      noCache: true,
-    },
-    children: [
-      {
-        name: 'Measure',            // 路由名称
-        path: 'measure',            // 路由地址
-        hidden: false,              // 是否隐藏
-        component: () => import('@/views/atlas/measure'),  // 路由组件地址
-        meta: {
-          title: '度量管理',         // 菜单标题
-          icon: 'icon_huabanfuben1',// 菜单图标
-          layout: 'BaseLayout',     // 页面布局
-          noCache: true,
-        },
-      },
-      {
-        name: 'AtlasGraphVisual',
-        path: 'graphvisual',
-        hidden: false,
-        component: () => import('@/views/atlas/graphVisual'),
-        meta: {
-          title: '图谱可视化',
-          icon: 'icon_huabanfuben1',
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'AtlasGraph',
-        path: 'graph',
-        hidden: false,
-        component: () => import('@/views/atlas/graphList'),
-        meta: {
-          title: '图谱列表',
-          icon: 'icon_huabanfuben1',
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-    ],
-  },
-];
\ No newline at end of file
diff --git a/webapp/src/router/modules/cloudserving.js b/webapp/src/router/modules/cloudserving.js
deleted file mode 100644
index 4415e55..0000000
--- a/webapp/src/router/modules/cloudserving.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-export default [
-  {
-    name: '云端Serving',
-    path: '/cloudserving',
-    hidden: false,
-    component: () => import('@/layout/index'),
-    meta: {
-      title: '云端Serving',
-      icon: 'shujumoxing',
-      layout: null,
-      noCache: true,
-    },
-    children: [
-      {
-        name: 'CloudServing',       // 路由名称
-        path: 'onlineserving',      // 路由地址
-        hidden: false,              // 是否隐藏
-        component: () => import('@/views/cloudServing'),  // 路由组件地址
-        meta: {
-          title: '在线服务',         // 菜单标题
-          icon: 'shujumoxing',      // 菜单图标
-          layout: 'BaseLayout',     // 页面布局
-          noCache: true,
-        },
-      },
-      {
-        name: 'BatchServing',
-        path: 'batchserving',
-        hidden: false,
-        component: () => import('@/views/cloudServing/batch'),
-        meta: {
-          title: '批量服务',
-          icon: 'shujumoxing',
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'CloudServingDetail',
-        path: 'onlineserving/detail',
-        hidden: true,
-        component: () => import('@/views/cloudServing/detail'),
-        meta: {
-          title: '部署详情',
-          icon: null,
-          layout: 'SubpageLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'BatchServingDetail',
-        path: 'batchserving/detail',
-        hidden: true,
-        component: () => import('@/views/cloudServing/batchDetail'),
-        meta: {
-          title: '部署详情',
-          icon: null,
-          layout: 'SubpageLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'CloudServingForm',
-        path: 'onlineserving/form',
-        hidden: true,
-        component: () => import('@/views/cloudServing/formPage'),
-        meta: {
-          title: '创建在线服务',
-          icon: null,
-          layout: 'SubpageLayout',
-          noCache: true,
-        },
-      },
-    ],
-  },
-];
\ No newline at end of file
diff --git a/webapp/src/router/modules/dashboard.js b/webapp/src/router/modules/dashboard.js
deleted file mode 100644
index caae9a4..0000000
--- a/webapp/src/router/modules/dashboard.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-export default [
-  {
-    path: '/dashboard',   
-    component: () => import('@/layout/index'),  // 路由组件路径
-    hidden: false,        // 是否隐藏菜单
-    children: [
-      {
-        name: 'Dashboard',   // 路由名称
-        path: '/dashboard',  // 路由地址
-        meta: {
-          title: '概览',     // 菜单名称
-          icon: 'yibiaopan', // 菜单图标
-          // 页面布局: 'BaseLayout'基本布局, 'SubpageLayout'二级页面, 'DetailLayout'详情页面, 'DatasetLayout'数据集页面, 'FullpageLayout'数据集页面
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-        component: () => import('@/views/dashboard/dashboard'),
-      },
-    ],
-  },
-];
diff --git a/webapp/src/router/modules/data.js b/webapp/src/router/modules/data.js
deleted file mode 100644
index f643949..0000000
--- a/webapp/src/router/modules/data.js
+++ /dev/null
@@ -1,265 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-export default [
-  {
-    name: '数据管理',
-    path: '/data',
-    hidden: false,
-    component: () => import('@/layout/index'),
-    meta: {
-      title: '数据管理',
-      icon: 'shujuguanli',
-      layout: null,
-      noCache: true,
-    },
-    children: [
-      // BaseLayout 基本布局
-      {
-        name: 'DatasetFork',         // 路由名称
-        path: 'datasets',            // 路由地址
-        hidden: false,               // 是否隐藏
-        component: () => import('@/views/dataset/fork'),   // 路由组件地址
-        meta: {
-          title: '数据集管理',        // 菜单名称
-          icon: 'shujuguanli',       // 菜单图标
-          layout: 'BaseLayout',      // 页面布局
-          noCache: true,
-        },
-      },
-      {
-        name: 'LabelGroup',
-        path: 'labelgroup',
-        hidden: false,
-        component: () => import('@/views/labelGroup/index'),
-        meta: {
-          title: '标签组管理',
-          icon: 'mobanguanli',
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'Datasets', 
-        path: 'datasets/list',
-        hidden: true, 
-        component: () => import('@/views/dataset/list'),
-        meta: {
-          title: '视觉/文本数据集',     
-          icon: 'shujuguanli',
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'Entrance',
-        path: 'datasets/entrance',
-        hidden: true,
-        component: () => import('@/views/dataset/entrance'),
-        meta: {
-          title: '数据集场景选择',
-          icon: null,
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'DatasetMedical',
-        path: 'datasets/medical',
-        hidden: true,
-        component: () => import('@/views/dataset/medical/list'),
-        meta: {
-          title: '医疗影像数据集',
-          icon: null,
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-      // DetailLayout 详情页面
-      {
-        name: 'DatasetClassify',
-        path: 'datasets/classify/:datasetId',
-        hidden: true,
-        component: () => import('@/views/dataset/classify'),
-        meta: {
-          title: '图像分类',
-          icon: null,
-          layout: 'DetailLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'TextClassify',
-        path: 'datasets/textclassify/:datasetId',
-        hidden: true,
-        component: () => import('@/views/dataset/nlp/textClassify'),
-        meta: {
-          title: '文本分类',
-          icon: null,
-          layout: 'DetailLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'TextAnnotation',
-        path: 'datasets/text/annotation/:datasetId',
-        hidden: true,
-        component: () => import('@/views/dataset/nlp/annotation'),
-        meta: {
-          title: '文本标注',
-          icon: null,
-          layout: 'DetailLayout',
-          noCache: true,
-        },
-      },
-      // DatasetLayout 数据集页面
-      {
-        name: 'AnnotateDatasetFile',
-        path: 'datasets/annotate/:datasetId/file/:fileId',
-        hidden: true,
-        component: () => import('@/views/dataset/annotate'),
-        meta: {
-          title: '目标检测',
-          icon: null,
-          layout: 'DatasetLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'AnnotateDataset',
-        path: 'datasets/annotate/:datasetId',
-        hidden: true,
-        component: () => import('@/views/dataset/annotate'),
-        meta: {
-          title: '目标检测',
-          icon: null,
-          layout: 'DatasetLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'TrackDatasetFile',
-        path: 'datasets/track/:datasetId/file/:fileId',
-        hidden: true,
-        component: () => import('@/views/dataset/annotate'),
-        meta: {
-          title: '目标跟踪',
-          icon: null,
-          layout: 'DatasetLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'TrackDataset',
-        path: 'datasets/track/:datasetId',
-        hidden: true,
-        component: () => import('@/views/dataset/annotate'),
-        meta: {
-          title: '目标跟踪',
-          icon: null,
-          layout: 'DatasetLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'SegmentationDatasetFile',
-        path: 'datasets/segmentation/:datasetId/file/:fileId',
-        hidden: true,
-        component: () => import('@/views/dataset/annotate'),
-        meta: {
-          title: '图像分割',
-          icon: null,
-          layout: 'DatasetLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'SegmentationDataset',
-        path: 'datasets/segmentation/:datasetId',
-        hidden: true,
-        component: () => import('@/views/dataset/annotate'),
-        meta: {
-          title: '图像分割',
-          icon: null,
-          layout: 'DatasetLayout',
-          noCache: true,
-        },
-      },
-      // SubpageLayout 二级页面
-      {
-        name: 'LabelGroupCreate',
-        path: 'labelgroup/create',
-        hidden: true,
-        component: () => import('@/views/labelGroup/labelGroupForm'),
-        meta: {
-          title: '创建标签组',
-          icon: null,
-          layout: 'SubpageLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'LabelGroupDetail',
-        path: 'labelgroup/detail',
-        hidden: true,
-        component: () => import('@/views/labelGroup/labelGroupForm'),
-        meta: {
-          title: '标签组详情',
-          icon: null,
-          layout: 'SubpageLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'LabelGroupEdit',
-        path: 'labelgroup/edit',
-        hidden: true,
-        component: () => import('@/views/labelGroup/labelGroupForm'),
-        meta: {
-          title: '编辑标签组',
-          icon: null,
-          layout: 'SubpageLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'DatasetVersion',
-        path: 'datasets/:datasetId/version',
-        hidden: true,
-        component: () => import('@/views/dataset/version'),
-        meta: {
-          title: '数据集版本管理',
-          icon: null,
-          layout: 'SubpageLayout',
-          noCache: true,
-        },
-      },
-      // FullpageLayout 全屏布局
-      {
-        name: 'DatasetMedicalViewer',
-        path: 'datasets/medical/viewer/:medicalId',
-        hidden: true,
-        component: () => import('@/views/dataset/medical/viewer'),
-        meta: {
-          title: '医学影像阅读',
-          icon: 'beauty',
-          layout: 'FullpageLayout',
-          noCache: true,
-        },
-      },
-    ],
-  },
-];
\ No newline at end of file
diff --git a/webapp/src/router/modules/development.js b/webapp/src/router/modules/development.js
deleted file mode 100644
index 310e1ab..0000000
--- a/webapp/src/router/modules/development.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-export default [
-  {
-    name: '模型开发',
-    path: '/development',
-    hidden: false,
-    component: () => import('@/layout/index'),
-    meta: {
-      title: '模型开发',
-      icon: 'xunlianzhunbei',
-      layout: null,
-      noCache: true,
-    },
-    children: [
-      {
-        name: 'Notebook',            // 路由名称
-        path: 'notebook',            // 路由地址
-        hidden: false,               // 是否隐藏
-        component: () => import('@/views/development/notebook'),   // 路由组件地址
-        meta: {
-          title: 'Notebook',         // 菜单名称
-          icon: 'kaifahuanjing',     // 菜单图标
-          layout: 'BaseLayout',      // 页面布局
-          noCache: true,
-        },
-      },
-      {
-        name: 'Algorithm',
-        path: 'algorithm',
-        hidden: false,
-        component: () => import('@/views/algorithm/index'),
-        meta: {
-          title: '算法管理',
-          icon: 'mobanguanli',
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-    ],
-  },
-];
\ No newline at end of file
diff --git a/webapp/src/router/modules/index.js b/webapp/src/router/modules/index.js
deleted file mode 100644
index 7dba976..0000000
--- a/webapp/src/router/modules/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-import dashboardRoute from './dashboard';
-import dataRoute from './data';
-import devRoute from './development';
-import trainRoute from './training';
-import modelRoute from './model';
-import servingRoute from './cloudserving';
-import altasRoute from './atlas';
-
-const modulesRoutes = [...dashboardRoute, ...dataRoute, ...devRoute, ...trainRoute, ...modelRoute, ...servingRoute, ...altasRoute];
-
-export default modulesRoutes;
\ No newline at end of file
diff --git a/webapp/src/router/modules/model.js b/webapp/src/router/modules/model.js
deleted file mode 100644
index 689a05b..0000000
--- a/webapp/src/router/modules/model.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-export default [
-  {
-    name: '模型管理',
-    path: '/model',
-    hidden: false,
-    component: () => import('@/layout/index'),
-    meta: {
-      title: '模型管理',
-      icon: 'moxingguanli',
-      layout: null,
-      noCache: true,
-    },
-    children: [
-      {
-        name: 'ModelModel',       // 路由名称
-        path: 'model',            // 路由地址
-        hidden: false,            // 是否隐藏
-        component: () => import('@/views/model/index'),   // 路由组件地址
-        meta: {
-          title: '模型列表',       // 菜单标题
-          icon: 'zongshili',      // 菜单图标
-          layout: 'BaseLayout',   // 页面布局
-          noCache: true,
-        },
-      },
-      {
-        name: 'ModelOptimize',
-        path: 'optimize',
-        hidden: false,
-        component: () => import('@/views/modelOptimize/index'),
-        meta: {
-          title: '模型优化',
-          icon: 'caidanguanli',
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'ModelVersion',
-        path: 'version',
-        hidden: true,
-        component: () => import('@/views/model/version'),
-        meta: {
-          title: '模型版本管理',
-          icon: null,
-          layout: 'SubpageLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'ModelOptRecord',
-        path: 'optimize/record',
-        hidden: true,
-        component: () => import('@/views/modelOptimize/record'),
-        meta: {
-          title: '模型优化执行记录',
-          icon: null,
-          layout: 'SubpageLayout',
-          noCache: true,
-        },
-      },
-    ],
-  },
-];
\ No newline at end of file
diff --git a/webapp/src/router/modules/system.js b/webapp/src/router/modules/system.js
deleted file mode 100644
index 9d840c8..0000000
--- a/webapp/src/router/modules/system.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-export default [
-  {
-    name: '控制台',
-    path: '/system',
-    hidden: false,
-    component: () => import('@/layout/index'),
-    meta: {
-      title: '控制台',
-      icon: 'kongzhitaixitongguanliyuankejian',
-      layout: null,
-      noCache: true,
-    },
-    children: [
-      {
-        name: 'SystemUser',          // 路由名称
-        path: 'user',                // 路由地址
-        hidden: false,               // 是否隐藏
-        component: () => import('@/views/system/user/index'), // 路由组件地址
-        meta: {
-          title: '用户管理',          // 菜单标题
-          icon: 'yonghuguanli',      // 菜单图标
-          layout: 'BaseLayout',      // 页面布局
-          noCache: true,
-        },
-      },
-      {
-        name: 'SystemRole',
-        path: 'role',
-        hidden: false,
-        component: () => import('@/views/system/role/index'),
-        meta: {
-          title: '角色管理',
-          icon: 'jiaoseguanli',
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'SystemDict',
-        path: 'dict',
-        hidden: false,
-        component: () => import('@/views/system/dict/index'),
-        meta: {
-          title: '字典管理',
-          icon: 'mobanguanli',
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'SystemNode',
-        path: 'node',
-        hidden: false,
-        component: () => import('@/views/system/node/index'),
-        meta: {
-          title: '集群状态',
-          icon: 'jiqunguanli',
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-    ],
-  },
-];
\ No newline at end of file
diff --git a/webapp/src/router/modules/training.js b/webapp/src/router/modules/training.js
deleted file mode 100644
index 82c1a64..0000000
--- a/webapp/src/router/modules/training.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-export default [
-  {
-    name: '训练管理',
-    path: '/training',
-    hidden: false,
-    component: () => import('@/layout/index'),
-    meta: {
-      title: '训练管理',
-      icon: 'xunlianguocheng',
-      layout: null,
-      noCache: true,
-    },
-    children: [
-      {
-        name: 'TrainingImage',       // 路由名称
-        path: 'image',               // 路由地址
-        hidden: false,               // 是否隐藏
-        component: () => import('@/views/trainingImage/index'),  // 路由组件地址
-        meta: {
-          title: '镜像管理',          // 菜单标题
-          icon: 'jingxiangguanli',   // 菜单图标
-          layout: 'BaseLayout',      // 页面布局
-          noCache: true,
-        },
-      },
-      {
-        name: 'TrainingJob',
-        path: 'job',
-        hidden: false,
-        component: () => import('@/views/trainingJob/index'),
-        meta: {
-          title: '训练任务',
-          icon: 'renwuguanli',
-          layout: 'BaseLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'JobDetail',
-        path: 'jobdetail',
-        hidden: true,
-        component: () => import('@/views/trainingJob/detail'),
-        meta: {
-          title: '任务详情',
-          icon: null,
-          layout: 'SubpageLayout',
-          noCache: true,
-        },
-      },
-      {
-        name: 'jobAdd',
-        path: 'jobadd',
-        hidden: true,
-        component: () => import('@/views/trainingJob/add'),
-        meta: {
-          title: '添加任务',
-          icon: null,
-          layout: 'SubpageLayout',
-          noCache: true,
-        },
-      },
-    ],
-  },
-];
\ No newline at end of file
diff --git a/webapp/src/router/routes.js b/webapp/src/router/routes.js
index 581d0ca..36d9618 100644
--- a/webapp/src/router/routes.js
+++ b/webapp/src/router/routes.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import Layout from '@/layout/index';
 import { Scalars, ScalarsPanel } from '@/views/visual/Visual/scalars';
@@ -48,12 +48,6 @@ const constantRoutes = [
     component: () => import('@/views/resetpassword'),
     hidden: true,
   },
-  {
-    name: 'Home',
-    path: '/home',
-    component: () => import('@/views/home'),
-    hidden: true,
-  },
   {
     path: '/',
     component: Layout,
diff --git a/webapp/src/settings.js b/webapp/src/settings.js
index d36d935..165d284 100644
--- a/webapp/src/settings.js
+++ b/webapp/src/settings.js
@@ -1,18 +1,18 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 module.exports = {
   /**
@@ -58,13 +58,10 @@ module.exports = {
   /**
    * RSA公钥
    */
-  publicKey: 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ==',
+  publicKey:
+    'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ==',
   /**
    * 用户社区
    */
   Community: 'http://www.aiiaos.cn/index.php?s=/forum/index/forum/id/45.html',
-  /**
-   * 使用文档
-   */
-  DocLink: 'http://docs.dubhe.ai/docs/' ,
 };
diff --git a/webapp/src/store/getters.js b/webapp/src/store/getters.js
index dbe72fe..2b325b8 100644
--- a/webapp/src/store/getters.js
+++ b/webapp/src/store/getters.js
@@ -1,30 +1,31 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 const getters = {
-  size: state => state.app.size,
-  sidebar: state => state.app.sidebar,
-  device: state => state.app.device,
-  allRoutes: state => state.app.allRoutes,
-  menuLoaded: state => state.app.menuLoaded,
-  token: state => state.user.token,
-  user: state => state.user.user,
-  permissions: state => state.user.permissions,
-  dataset: state => state.dataset,
-  cloudServing: state => state.cloudServing,
-  modelOptimize: state => state.modelOptimize,
+  size: (state) => state.app.size,
+  sidebar: (state) => state.app.sidebar,
+  device: (state) => state.app.device,
+  allRoutes: (state) => state.app.allRoutes,
+  menuLoaded: (state) => state.app.menuLoaded,
+  token: (state) => state.user.token,
+  user: (state) => state.user.user,
+  isAdmin: (state) => state.user.isAdmin,
+  permissions: (state) => state.user.permissions,
+  dataset: (state) => state.dataset,
+  cloudServing: (state) => state.cloudServing,
+  modelOptimize: (state) => state.modelOptimize,
 };
 export default getters;
diff --git a/webapp/src/store/index.js b/webapp/src/store/index.js
index a8dd8fe..aee765a 100644
--- a/webapp/src/store/index.js
+++ b/webapp/src/store/index.js
@@ -1,18 +1,18 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import Vue from 'vue';
 import Vuex from 'vuex';
diff --git a/webapp/src/store/modules/Visual/custom.js b/webapp/src/store/modules/Visual/custom.js
index 97c7dcd..a0c0749 100644
--- a/webapp/src/store/modules/Visual/custom.js
+++ b/webapp/src/store/modules/Visual/custom.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 // dubhe-web\src\utils\VisualUtils\api.js
 // import port from '@/utils/VisualUtils/api';
@@ -81,7 +81,7 @@ const mutations = {
     state.clickState = param;
   },
   setAudioData: (state, param) => {
-    const paramStringIndex = `${param.content.run  }/${  Object.keys(param.content.value)[0]}`;
+    const paramStringIndex = `${param.content.run}/${Object.keys(param.content.value)[0]}`;
     let flag = true;
     for (let i = 0; i < state.audio.length; i += 1) {
       if (paramStringIndex === state.audio[i].stringIndex) {
@@ -94,11 +94,15 @@ const mutations = {
       }
     }
     if (flag) {
-      state.audio.push({ stringIndex: paramStringIndex, checked: param.checked, content: param.content });
+      state.audio.push({
+        stringIndex: paramStringIndex,
+        checked: param.checked,
+        content: param.content,
+      });
     }
   },
   setTextData: (state, param) => {
-    const paramStringIndex = `${param.content.run  }/${  Object.keys(param.content.value)[0]}`;
+    const paramStringIndex = `${param.content.run}/${Object.keys(param.content.value)[0]}`;
     let flag = true;
     for (let i = 0; i < state.text.length; i += 1) {
       if (paramStringIndex === state.text[i].stringIndex) {
@@ -111,11 +115,15 @@ const mutations = {
       }
     }
     if (flag) {
-      state.text.push({ stringIndex: paramStringIndex, checked: param.checked, content: param.content });
+      state.text.push({
+        stringIndex: paramStringIndex,
+        checked: param.checked,
+        content: param.content,
+      });
     }
   },
   setImageData: (state, param) => {
-    const paramStringIndex = `${param.content.run  }/${  Object.keys(param.content.value)[0]}`;
+    const paramStringIndex = `${param.content.run}/${Object.keys(param.content.value)[0]}`;
     let flag = true;
     for (let i = 0; i < state.image.length; i += 1) {
       if (paramStringIndex === state.image[i].stringIndex) {
@@ -128,14 +136,23 @@ const mutations = {
       }
     }
     if (flag) {
-      state.image.push({ stringIndex: paramStringIndex, checked: param.checked, content: param.content });
+      state.image.push({
+        stringIndex: paramStringIndex,
+        checked: param.checked,
+        content: param.content,
+      });
     }
   },
   setStatisticData: (state, param) => {
     let flag = -1;
     for (let i = 0; i < state.statistic.length; i += 1) {
-      if (state.statistic[i].ttlabel === param.ttlabel && state.statistic[i].tag === param.tag &&
-       (state.statistic[i].componentName === param.componentName || param.componentName === 'threed' || param.componentName === 'orthographic')) {
+      if (
+        state.statistic[i].ttlabel === param.ttlabel &&
+        state.statistic[i].tag === param.tag &&
+        (state.statistic[i].componentName === param.componentName ||
+          param.componentName === 'threed' ||
+          param.componentName === 'orthographic')
+      ) {
         if (!param.delete) {
           state.statistic.splice(i, 1);
         } else {
@@ -152,7 +169,7 @@ const mutations = {
     }
     if (flag === -1) {
       if (param.itemp < 1000) param.itemp = 1000 + param.itemp;
-      param.divId = `custom${  param.componentName  }${param.itemp}`;
+      param.divId = `custom${param.componentName}${param.itemp}`;
       if (state.statisticMode === '三维' && param.componentName === 'orthographic') {
         param.componentName = 'threed';
       } else if (state.statisticMode === '二维' && param.componentName === 'threed') {
diff --git a/webapp/src/store/modules/Visual/embedding.js b/webapp/src/store/modules/Visual/embedding.js
index 2354007..6348252 100644
--- a/webapp/src/store/modules/Visual/embedding.js
+++ b/webapp/src/store/modules/Visual/embedding.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import http from '@/utils/VisualUtils/request';
 import port from '@/utils/VisualUtils/api';
@@ -41,10 +41,12 @@ const state = {
     initFlag: false, // 是否是初始化页面
     received: false, // 当所有的信息填充之后改变
   },
-  questionInfo: { // 请求每个点需要存储的数据结构
+  questionInfo: {
+    // 请求每个点需要存储的数据结构
     received: false, // 当所有的信息填充之后改变
   },
-  curInfo: { // 当前所处于的信息节点
+  curInfo: {
+    // 当前所处于的信息节点
     curTag: '',
     curStep: 0,
     curMapStep: 0,
@@ -65,7 +67,8 @@ const state = {
   receivedQuestionInfo: false, // 作为别的部分的监听信息
   receivedCurInfo: false, // 作为别的部分的监听信息
   receivedCurData: false,
-  legendColor: [ // 颜色条因为很多地方都会用到直接放在这里
+  legendColor: [
+    // 颜色条因为很多地方都会用到直接放在这里
     '#EF6F38',
     '#EFDD79',
     '#C5507A',
@@ -113,63 +116,65 @@ const actions = {
       context.dispatch('fetchAllStep');
     }
   },
-  async fetchAllStep(context) { // 数据链的第一步
+  async fetchAllStep(context) {
+    // 数据链的第一步
     const allStepTemp = [];
     // console.log('[context.state.categoryInfo]', context.state.categoryInfo)
-    for (let i = 0; i < context.state.categoryInfo.curRuns.length; i+=1) {
+    for (let i = 0; i < context.state.categoryInfo.curRuns.length; i += 1) {
       const oneRunStep = [];
-      for (let j = 0; j < context.state.categoryInfo.curTags[i].length; j+=1) {
-        const param = { run: context.state.categoryInfo.curRuns[i], tag: context.state.categoryInfo.curTags[i][j] };
+      for (let j = 0; j < context.state.categoryInfo.curTags[i].length; j += 1) {
+        const param = {
+          run: context.state.categoryInfo.curRuns[i],
+          tag: context.state.categoryInfo.curTags[i][j],
+        };
         // eslint-disable-next-line no-await-in-loop
-        await http.useGet(port.category.projector, param)
-          .then(res => {
-            if (+res.data.code !== 200) {
-              context.commit('setErrorMessage', `${res.data.msg  }_${  new Date().getTime()}`);
-              return;
-            }
-            const res1 = res.data.data[context.state.categoryInfo.curTags[i][j]];
-            const res2 = res.data.data.shape;
-            const res3 = res.data.data.sample;
-            const res4 = res.data.data.sample_type;
-            oneRunStep.push([res1, res2, res3, res4]);
-          });
+        await http.useGet(port.category.projector, param).then((res) => {
+          if (+res.data.code !== 200) {
+            context.commit('setErrorMessage', `${res.data.msg}_${new Date().getTime()}`);
+            return;
+          }
+          const res1 = res.data.data[context.state.categoryInfo.curTags[i][j]];
+          const res2 = res.data.data.shape;
+          const res3 = res.data.data.sample;
+          const res4 = res.data.data.sample_type;
+          oneRunStep.push([res1, res2, res3, res4]);
+        });
       }
       allStepTemp.push(oneRunStep);
     }
     context.commit('setAllStep', allStepTemp);
   },
   async featchData(context, param) {
-    await http.useGet(port.category.projector_data, param)
-      .then(res => {
-        if (+res.data.code !== 200) {
-          context.commit('setErrorMessage', `${res.data.msg  }_${  new Date().getTime()}`);
-          return;
-        }
-        context.commit('setCurData', res.data.data[param.step]);
-        context.commit('setCurInfo', ['received', true]);
-      });
+    await http.useGet(port.category.projector_data, param).then((res) => {
+      if (+res.data.code !== 200) {
+        context.commit('setErrorMessage', `${res.data.msg}_${new Date().getTime()}`);
+        return;
+      }
+      context.commit('setCurData', res.data.data[param.step]);
+      context.commit('setCurInfo', ['received', true]);
+    });
   },
   async fetchSampleData(context, param) {
     param = param2Obj(param);
-    await http.useGet(port.category.projector_sample, param)
-      .then(res => {
-        if (+res.data.code !== 200) {
-          context.commit('setErrorMessage', `${res.data.msg  }_${  new Date().getTime()}`);
-          return;
-        }
-        context.commit('setPanelSampleData', ['sampData', res.data.data]);
-      });
+    await http.useGet(port.category.projector_sample, param).then((res) => {
+      if (+res.data.code !== 200) {
+        context.commit('setErrorMessage', `${res.data.msg}_${new Date().getTime()}`);
+        return;
+      }
+      context.commit('setPanelSampleData', ['sampData', res.data.data]);
+    });
   },
 };
 
 const mutations = {
-  setSelfCategoryInfo: (state, param) => { // 处理分类
+  setSelfCategoryInfo: (state, param) => {
+    // 处理分类
     state.categoryInfo.curRuns = param[0].slice(0);
     state.categoryInfo.curTags = param[1].slice(0); // 实现深度拷贝[][]
     state.categoryInfo.initFlag = param[2].initStateFlag;
-    for (let i = 0; i < state.categoryInfo.curRuns.length; i+=1) {
+    for (let i = 0; i < state.categoryInfo.curRuns.length; i += 1) {
       state.questionInfo[state.categoryInfo.curRuns[i]] = {};
-      for (let j = 0; j < state.categoryInfo.curTags[i].length; j+=1) {
+      for (let j = 0; j < state.categoryInfo.curTags[i].length; j += 1) {
         state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]] = {};
       }
     }
@@ -188,15 +193,23 @@ const mutations = {
     const firstIndex = 1;
     const secondIndex = 2;
     const thirdIndex = 3;
-    for (let i = 0; i < state.categoryInfo.curRuns.length; i+=1) {
-      for (let j = 0; j < state.categoryInfo.curTags[i].length; j+=1) {
+    for (let i = 0; i < state.categoryInfo.curRuns.length; i += 1) {
+      for (let j = 0; j < state.categoryInfo.curTags[i].length; j += 1) {
         state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]] = {};
-        state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]].allSteps = param[i][j][someIndex];
-        state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]].curMin = param[i][j][someIndex][someIndex];
-        state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]].curMax = param[i][j][someIndex].length - 1;
-        state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]].shape = param[i][j][firstIndex][firstIndex];
-        state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]].sample = param[i][j][secondIndex];
-        state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]].sample_type = param[i][j][thirdIndex];
+        state.questionInfo[state.categoryInfo.curRuns[i]][
+          state.categoryInfo.curTags[i][j]
+        ].allSteps = param[i][j][someIndex];
+        state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]].curMin =
+          param[i][j][someIndex][someIndex];
+        state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]].curMax =
+          param[i][j][someIndex].length - 1;
+        state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]].shape =
+          param[i][j][firstIndex][firstIndex];
+        state.questionInfo[state.categoryInfo.curRuns[i]][state.categoryInfo.curTags[i][j]].sample =
+          param[i][j][secondIndex];
+        state.questionInfo[state.categoryInfo.curRuns[i]][
+          state.categoryInfo.curTags[i][j]
+        ].sample_type = param[i][j][thirdIndex];
       }
     }
     state.questionInfo.received = true; // 当需要请求信息的时候所有的数据已经完备
@@ -235,24 +248,24 @@ const mutations = {
       if (m > n) return 1;
       return 0;
     });
-    for (let i = 0; i < arr.length && i < 10; i+=1) {
-      state.curData.labelType.push(`${arr[i]  }`);
+    for (let i = 0; i < arr.length && i < 10; i += 1) {
+      state.curData.labelType.push(`${arr[i]}`);
     }
     if (arr.length > 10) {
       state.curData.labelType[9] = '其他';
     }
-    for (let i = 0; i < state.curData.labelType.length; i+=1) {
+    for (let i = 0; i < state.curData.labelType.length; i += 1) {
       state.curData.labelTypeColor[state.curData.labelType[i]] = state.legendColor[i];
     }
-    for (let i = 0; i < state.curData.labelType.length; i+=1) {
+    for (let i = 0; i < state.curData.labelType.length; i += 1) {
       state.curData.echaLabelNumber[state.curData.labelType[i]] = 0;
     }
     // 统计每个labelType的个数
-    for (let i = 0; i < param[1].length; i+=1) {
+    for (let i = 0; i < param[1].length; i += 1) {
       if (state.curData.labelType.indexOf(param[1][i].toString()) !== -1) {
-        state.curData.echaLabelNumber[param[1][i].toString()]+=1;
+        state.curData.echaLabelNumber[param[1][i].toString()] += 1;
       } else {
-        state.curData.echaLabelNumber[state.curData.labelType[9]]+=1;
+        state.curData.echaLabelNumber[state.curData.labelType[9]] += 1;
       }
     }
     state.receivedCurData = !state.receivedCurData;
diff --git a/webapp/src/store/modules/Visual/exception.js b/webapp/src/store/modules/Visual/exception.js
index 6c9e217..062399c 100644
--- a/webapp/src/store/modules/Visual/exception.js
+++ b/webapp/src/store/modules/Visual/exception.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import http from '@/utils/VisualUtils/request';
 import port from '@/utils/VisualUtils/api';
@@ -26,7 +26,7 @@ const state = {
   curNewData: [], // 记录点击step后获取的新数据
   curNewExcepBox: [],
   rectCurInfo: {},
-  curIqrTimes: ['', '', '', 1.50, 1.50], // 当前选中的盒线图的一些数据 {run, tag, step, box}
+  curIqrTimes: ['', '', '', 1.5, 1.5], // 当前选中的盒线图的一些数据 {run, tag, step, box}
   linkChecked: false,
   excepBoxStatistic: [], // 异常点数据统计
   errorMessage: '',
@@ -55,7 +55,8 @@ const getters = {
 
 const actions = {
   async getSelfCategoryInfo(context, param) {
-    if (context.state.freshFlag) { // 连类目信息都要等到这一次全部数据获取后再更新
+    if (context.state.freshFlag) {
+      // 连类目信息都要等到这一次全部数据获取后再更新
       context.commit('setFreshFlag', false);
       context.commit('setSelfCategoryInfo', param);
       if (param[2].initStateFlag) {
@@ -66,17 +67,17 @@ const actions = {
     }
   },
   async fetchAllStep(context) {
-    const {run} = context.state;
+    const { run } = context.state;
     if (run.length === 0) return;
-    const {tag} = context.state;
+    const { tag } = context.state;
     const allStepTemp = [];
     // 在用数据的时候限制了顺序，需要再优化
     for (let i = 0; i < run.length; i += 1) {
       for (let j = 0; j < tag[i].length; j += 1) {
         const param = { run: run[i], tag: tag[i][j] };
-        await http.useGet(port.category.exception, param).then(res => {
+        await http.useGet(port.category.exception, param).then((res) => {
           if (Number(res.data.code) !== 200) {
-            context.commit('setErrorMessage', `${run[i]  },${  tag[i][j]  },${  res.data.msg}`);
+            context.commit('setErrorMessage', `${run[i]},${tag[i][j]},${res.data.msg}`);
             return;
           }
           allStepTemp.push([run[i], tag[i][j], res.data.data[tag[i][j]]]);
@@ -85,10 +86,11 @@ const actions = {
     }
     context.commit('setAllStep', allStepTemp);
   },
-  async fetchAllData(context) { // 获得初始数据,step均为step[0]
+  async fetchAllData(context) {
+    // 获得初始数据,step均为step[0]
     context.commit('clearAllData');
-    const {run} = context.state;
-    const {tag} = context.state;
+    const { run } = context.state;
+    const { tag } = context.state;
     let count = 0;
     for (let i = 0; i < run.length && count < context.state.allStep.length; i += 1) {
       for (let j = 0; j < tag[i].length && count < context.state.allStep.length; j += 1) {
@@ -96,17 +98,18 @@ const actions = {
         const param = { run: run[i], tag: tag[i][j], step: initStep };
         const oneDataTemp = [];
         let successFlag = true;
-        await http.useGet(port.category.exception_data, param).then(res => {
+        await http.useGet(port.category.exception_data, param).then((res) => {
           if (Number(res.data.code) !== 200) {
             successFlag = false;
-            context.commit('setErrorMessage', `${run[i]  },${  tag[i][j]  },${  res.data.msg}`);
+            context.commit('setErrorMessage', `${run[i]},${tag[i][j]},${res.data.msg}`);
             return;
           }
           oneDataTemp.push(param.run);
           oneDataTemp.push(param.tag);
           oneDataTemp.push(0);
           const rectDataTemp = res.data.data[initStep];
-          if (rectDataTemp[0].length === 1) { // 处理一维数据
+          if (rectDataTemp[0].length === 1) {
+            // 处理一维数据
             const rectLenTemp = rectDataTemp[0][0];
             rectDataTemp[0][0] = 1;
             rectDataTemp[0].push(rectLenTemp);
@@ -116,33 +119,36 @@ const actions = {
           }
           oneDataTemp.push(rectDataTemp);
         });
-        if (successFlag) { // 默认上一个请求到了，这个也可以请求到，嵌套好像不行
-          await http.useGet(port.category.exception_hist, param).then(res => {
+        if (successFlag) {
+          // 默认上一个请求到了，这个也可以请求到，嵌套好像不行
+          await http.useGet(port.category.exception_hist, param).then((res) => {
             oneDataTemp.push(res.data.data[initStep][0]);
           });
           context.commit('setAllData', oneDataTemp);
         }
-        count  += 1;
+        count += 1;
       }
     }
     // 取完step后立马取出颜色矩阵和直方图，需要这些数据都取到后再刷新
     context.commit('setFreshFlag', true);
   },
   // 双击盒线图调用这个获取一个step的三个数据：直方图、颜色矩阵
-  async fetchOneData(context, param) { // {run: param.run, tag: param.tag, step: param.step, down: param.down, up: param.up}
+  async fetchOneData(context, param) {
+    // {run: param.run, tag: param.tag, step: param.step, down: param.down, up: param.up}
     const oneDataTemp = [];
     let successFlag = true;
-    await http.useGet(port.category.exception_data, param).then(res => {
+    await http.useGet(port.category.exception_data, param).then((res) => {
       if (Number(res.data.code) !== 200) {
         successFlag = false;
-        context.commit('setErrorMessage', `${param.run  },${  param.tag  },${  res.data.msg}`);
+        context.commit('setErrorMessage', `${param.run},${param.tag},${res.data.msg}`);
         return;
       }
       oneDataTemp.push(param.run);
       oneDataTemp.push(param.tag);
       oneDataTemp.push(param.step);
       const rectDataTemp = res.data.data[param.step];
-      if (rectDataTemp[0].length === 1) { // 处理一维数据
+      if (rectDataTemp[0].length === 1) {
+        // 处理一维数据
         const rectLenTemp = rectDataTemp[0][0];
         rectDataTemp[0][0] = 1;
         rectDataTemp[0].push(rectLenTemp);
@@ -154,7 +160,7 @@ const actions = {
     });
     if (successFlag) {
       // 上一个请求成功了再进行下一个请求
-      await http.useGet(port.category.exception_hist, param).then(res => {
+      await http.useGet(port.category.exception_hist, param).then((res) => {
         oneDataTemp.push(res.data.data[param.step][0]);
       });
       oneDataTemp.push(param.index); // index确定当前（run,tag）的数据在allData数组中的下标
@@ -162,10 +168,11 @@ const actions = {
     }
   },
   // 移动盒线图上下边界时获取异常点
-  async fetchExcepBox(context, param) { // param={run:, tag:,step:,down:,up:},异常点数据
-    await http.useGet(port.category.exception_box, param).then(res => {
+  async fetchExcepBox(context, param) {
+    // param={run:, tag:,step:,down:,up:},异常点数据
+    await http.useGet(port.category.exception_box, param).then((res) => {
       if (Number(res.data.code) !== 200) {
-        context.commit('setErrorMessage', `${param.run  },${  param.tag  },${  res.data.msg}`);
+        context.commit('setErrorMessage', `${param.run},${param.tag},${res.data.msg}`);
         return;
       }
       context.commit('setExcepBox', [param.run, param.tag, res.data.data[param.step]]);
@@ -203,7 +210,8 @@ const mutations = {
     state.curNewExcepBox = param;
   },
   // 调整box中上下两条线，根据这个来计算筛选异常点
-  setAllStepBoxDown(state, param) { // param={index:,step:,down}，index:是run\tag对应的下标
+  setAllStepBoxDown(state, param) {
+    // param={index:,step:,down}，index:是run\tag对应的下标
     state.allStep[param.index][2].box[param.step][0][4] = param.down;
   },
   setAllStepBoxUp(state, param) {
@@ -216,8 +224,14 @@ const mutations = {
     // 还是要存储run, tag, step的
     param[3] = Number(param[3]);
     param[4] = Number(param[4]);
-    if (state.curIqrTimes[0] === param[0] && state.curIqrTimes[1] === param[1] && state.curIqrTimes[2] === param[2] &&
-      state.curIqrTimes[3] === param[3] && state.curIqrTimes[4] === param[4]) { // 数据没有变化就不存进去
+    if (
+      state.curIqrTimes[0] === param[0] &&
+      state.curIqrTimes[1] === param[1] &&
+      state.curIqrTimes[2] === param[2] &&
+      state.curIqrTimes[3] === param[3] &&
+      state.curIqrTimes[4] === param[4]
+    ) {
+      // 数据没有变化就不存进去
       return;
     }
     state.curIqrTimes = param;
diff --git a/webapp/src/store/modules/Visual/graph.js b/webapp/src/store/modules/Visual/graph.js
index 8cf661a..cb233cc 100644
--- a/webapp/src/store/modules/Visual/graph.js
+++ b/webapp/src/store/modules/Visual/graph.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { getGraph } from '@/api/visual';
 
@@ -68,13 +68,13 @@ const actions = {
     }
     state.sInitState = 0;
     if (param.tag === 'c_graph') {
-      getGraph(param).then(res => {
+      getGraph(param).then((res) => {
         const data = JSON.parse(res);
         context.commit('setGraphData', data.net);
         context.commit('setRetList', data.operator);
       });
     } else {
-      getGraph(param).then(res => {
+      getGraph(param).then((res) => {
         const data = JSON.parse(res);
         context.commit('setSrcData', data.net);
         context.commit('setGraphData', data.net[0]);
@@ -88,10 +88,10 @@ const actions = {
 const mutations = {
   setOptionList: (state, param) => {
     const optionList = [];
-    for (let i = 0; i < param; i  += 1) {
+    for (let i = 0; i < param; i += 1) {
       const item = {};
       item.value = i;
-      item.label = `结构图${  i}`;
+      item.label = `结构图${i}`;
       optionList.push(item);
     }
     state.list = optionList;
@@ -148,7 +148,7 @@ const mutations = {
     state.isDrawing = param;
   },
   setData: (state, param) => {
-    if(state.curTag === 's_graph') {
+    if (state.curTag === 's_graph') {
       state.graphData = state.srcData[param];
       state.copy[0] = state.srcData[param];
       state.sInitState = param;
diff --git a/webapp/src/store/modules/Visual/hyperparm.js b/webapp/src/store/modules/Visual/hyperparm.js
index 488ac67..32bf4c4 100644
--- a/webapp/src/store/modules/Visual/hyperparm.js
+++ b/webapp/src/store/modules/Visual/hyperparm.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import http from '@/utils/VisualUtils/request';
 import port from '@/utils/VisualUtils/api';
@@ -58,11 +58,11 @@ const actions = {
     }
   },
   async featchAllData(context, param) {
-    http.useGet(port.category.hyperparm, param).then(res => {
+    http.useGet(port.category.hyperparm, param).then((res) => {
       if (+res.data.code !== 200) {
         context.commit('setAllData', 'null');
         const d = new Date();
-        context.commit('setErrorMessage', `${res.data.msg  }_${  d.getTime()}`);
+        context.commit('setErrorMessage', `${res.data.msg}_${d.getTime()}`);
         return;
       }
       context.commit('setAllData', res.data.data);
@@ -85,7 +85,7 @@ const mutations = {
       return;
     }
     const resultData = [];
-    const {hparamsInfo} = data;
+    const { hparamsInfo } = data;
     const size = hparamsInfo.length;
     const mainFilter = new Set();
     const axisFilter = new Set();
@@ -99,7 +99,7 @@ const mutations = {
       const tempData = hparamsInfo[i][tempKey[0]];
       const temp = {};
       tempData.hparams.forEach(function _nonName(d) {
-        if (Number(d.data) <= 0 || isNaN(Number(d.data)) || isBoolean(d.data) || (isString(d.data))) {
+        if (Number(d.data) <= 0 || isNaN(Number(d.data)) || isBoolean(d.data) || isString(d.data)) {
           axisFilter.add(d.name);
         }
         if (!isNumber(d.data)) {
@@ -112,7 +112,7 @@ const mutations = {
         }
       });
       for (let j = 0; j < metricsLength; j += 1) {
-        const mkey = `metric/${  data.metrics[j].tag}`;
+        const mkey = `metric/${data.metrics[j].tag}`;
         const metricsValue = data.metrics[j].value;
         if (Number(metricsValue[i]) <= 0) {
           axisFilter.add(mkey);
@@ -134,8 +134,8 @@ const mutations = {
       tmpDatas.push(tmpData);
     });
     state.allData = tmpDatas;
-    const axisParams = (Object.keys(tmpDatas[0])).filter(x => !axisFilter.has(x));
-    const mainParams = (Object.keys(tmpDatas[0])).filter(x => !mainFilter.has(x));
+    const axisParams = Object.keys(tmpDatas[0]).filter((x) => !axisFilter.has(x));
+    const mainParams = Object.keys(tmpDatas[0]).filter((x) => !mainFilter.has(x));
     state.axisParams = axisParams;
     state.mainParams = mainParams;
     const temp = {};
@@ -143,7 +143,7 @@ const mutations = {
       temp[d] = 'linear';
     });
     state.axisType = temp;
-    [state.selected]= mainParams;
+    [state.selected] = mainParams;
     state.globalSelectedDatas = tmpDatas;
   },
   setSelected(state, param) {
diff --git a/webapp/src/store/modules/Visual/layout.js b/webapp/src/store/modules/Visual/layout.js
index c59b476..7479e47 100644
--- a/webapp/src/store/modules/Visual/layout.js
+++ b/webapp/src/store/modules/Visual/layout.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import constants from '@/utils/VisualUtils/constants';
 // eslint-disable-next-line import/no-cycle
@@ -52,26 +52,27 @@ const getters = {
 
 const actions = {
   async initWaitingPage(context, params) {
-    await initVisual(params)
-      .then(data => {
-        context.commit('setCookie', 'session_id', data.session_id);
-        context.commit('setWaitingMessage', data.msg);
-      });
+    await initVisual(params).then((data) => {
+      context.commit('setCookie', 'session_id', data.session_id);
+      context.commit('setWaitingMessage', data.msg);
+    });
   },
   async initFeatchCategory(context, path) {
     const splitArray = path.split('/');
     const cate = splitArray[splitArray.length - 1];
-    await getCategory({}).then(res => {
+    await getCategory({}).then((res) => {
       const dataCategoryInfo = res;
       let categorys = [];
       const runFile = [];
       const categoryToRunFile = {}; // 根据所选类目显示run信息
-      Object.keys(dataCategoryInfo).forEach(val => {
-        categorys = categorys.concat(Object.keys(dataCategoryInfo[val]).filter(v => !categorys.includes(v)));
+      Object.keys(dataCategoryInfo).forEach((val) => {
+        categorys = categorys.concat(
+          Object.keys(dataCategoryInfo[val]).filter((v) => !categorys.includes(v))
+        );
         runFile.push(val);
       });
       const categoryOrder = [];
-      categorys.forEach(val => {
+      categorys.forEach((val) => {
         categoryOrder.push(constants.CATEGORYORDER.indexOf(val));
       });
       categoryOrder.sort();
@@ -82,11 +83,11 @@ const actions = {
         newIndex = categoryOrder.indexOf(constants.CATEGORYORDER.indexOf(cate));
       }
       if (categorys.length !== 0) {
-        categorys.forEach(ce => {
+        categorys.forEach((ce) => {
           const detailTag = [];
           const tempRunFile = [];
           const temp = [];
-          runFile.forEach(res => {
+          runFile.forEach((res) => {
             if (dataCategoryInfo[res].hasOwnProperty(ce)) {
               tempRunFile.push(res);
               detailTag.push(dataCategoryInfo[res][ce]);
@@ -96,44 +97,53 @@ const actions = {
           });
           if (ce === constants.CATEGORYORDER[categoryOrder[0]] && cate === 'index') {
             context.dispatch(
-              `Visual/${  ce  }/getSelfCategoryInfo`,
-              [tempRunFile, detailTag, { 'initStateFlag': true }],
-              { root: true });
+              `Visual/${ce}/getSelfCategoryInfo`,
+              [tempRunFile, detailTag, { initStateFlag: true }],
+              { root: true }
+            );
           } else if (ce === cate) {
             context.dispatch(
-              `Visual/${  ce  }/getSelfCategoryInfo`,
-              [tempRunFile, detailTag, { 'initStateFlag': true }],
-              { root: true });
+              `Visual/${ce}/getSelfCategoryInfo`,
+              [tempRunFile, detailTag, { initStateFlag: true }],
+              { root: true }
+            );
           } else {
             context.dispatch(
-              `Visual/${  ce  }/getSelfCategoryInfo`,
-              [tempRunFile, detailTag, { 'initStateFlag': false }],
-              { root: true });
+              `Visual/${ce}/getSelfCategoryInfo`,
+              [tempRunFile, detailTag, { initStateFlag: false }],
+              { root: true }
+            );
           }
         });
       } else {
-        context.commit('setErrorMessage', `${'日志文件中尚未发现可展示信息！_'}${  new Date().getTime()}`);
+        context.commit(
+          'setErrorMessage',
+          `${'日志文件中尚未发现可展示信息！_'}${new Date().getTime()}`
+        );
       }
       context.commit('setRunCategoryDetail', categoryToRunFile);
-      context.commit('setCategory', [categoryOrder, newIndex]); 
-      context.commit('setRunCategory', constants.CATEGORYORDER[categoryOrder[newIndex]]); 
+      context.commit('setCategory', [categoryOrder, newIndex]);
+      context.commit('setRunCategory', constants.CATEGORYORDER[categoryOrder[newIndex]]);
     });
   },
-  async timingFeatchCategory(context, parm) { // parm 存储间隔时间
+  async timingFeatchCategory(context, parm) {
+    // parm 存储间隔时间
     const splitArray = parm[1].split('/');
     const cate = splitArray[splitArray.length - 1];
-    const t = setInterval(async() => {
-      await getCategory({ test: 1 }).then(res => {
+    const t = setInterval(async () => {
+      await getCategory({ test: 1 }).then((res) => {
         const dataCategoryInfo = res;
         let categorys = [];
         const runFile = [];
-        const categoryToRunFile = {}; 
-        Object.keys(dataCategoryInfo).forEach(val => {
-          categorys = categorys.concat(Object.keys(dataCategoryInfo[val]).filter(v => !categorys.includes(v)));
+        const categoryToRunFile = {};
+        Object.keys(dataCategoryInfo).forEach((val) => {
+          categorys = categorys.concat(
+            Object.keys(dataCategoryInfo[val]).filter((v) => !categorys.includes(v))
+          );
           runFile.push(val);
         });
         const categoryOrder = [];
-        categorys.forEach(val => {
+        categorys.forEach((val) => {
           categoryOrder.push(constants.CATEGORYORDER.indexOf(val));
         });
         categoryOrder.sort();
@@ -144,11 +154,11 @@ const actions = {
           newIndex = categoryOrder.indexOf(constants.CATEGORYORDER.indexOf(cate));
         }
         if (categorys.length !== 0) {
-          categorys.forEach(ce => {
+          categorys.forEach((ce) => {
             const detailTag = [];
             const tempRunFile = [];
             const temp = [];
-            runFile.forEach(res => {
+            runFile.forEach((res) => {
               if (dataCategoryInfo[res].hasOwnProperty(ce)) {
                 tempRunFile.push(res);
                 detailTag.push(dataCategoryInfo[res][ce]);
@@ -158,23 +168,29 @@ const actions = {
             });
             if (ce === constants.CATEGORYORDER[categoryOrder[0]] && cate === 'index') {
               context.dispatch(
-                `Visual/${  ce  }/getSelfCategoryInfo`,
-                [tempRunFile, detailTag, { 'initStateFlag': true }],
-                { root: true });
+                `Visual/${ce}/getSelfCategoryInfo`,
+                [tempRunFile, detailTag, { initStateFlag: true }],
+                { root: true }
+              );
             } else if (ce === cate) {
               context.dispatch(
-                `Visual/${  ce  }/getSelfCategoryInfo`,
-                [tempRunFile, detailTag, { 'initStateFlag': true }],
-                { root: true });
+                `Visual/${ce}/getSelfCategoryInfo`,
+                [tempRunFile, detailTag, { initStateFlag: true }],
+                { root: true }
+              );
             } else {
               context.dispatch(
-                `Visual/${  ce  }/getSelfCategoryInfo`,
-                [tempRunFile, detailTag, { 'initStateFlag': false }],
-                { root: true });
+                `Visual/${ce}/getSelfCategoryInfo`,
+                [tempRunFile, detailTag, { initStateFlag: false }],
+                { root: true }
+              );
             }
           });
         } else {
-          context.commit('setErrorMessage', `${'日志文件中尚未发现可展示信息！_'}${  new Date().getTime()}`);
+          context.commit(
+            'setErrorMessage',
+            `${'日志文件中尚未发现可展示信息！_'}${new Date().getTime()}`
+          );
         }
         context.commit('setRunCategoryDetail', categoryToRunFile);
         context.commit('setCategory', [categoryOrder, newIndex]);
@@ -186,17 +202,19 @@ const actions = {
   async timingFeatchCategoryOnce(context, parm) {
     const splitArray = parm.split('/');
     const cate = splitArray[splitArray.length - 1];
-    await getCategory({}).then(res => {
+    await getCategory({}).then((res) => {
       const dataCategoryInfo = res;
       let categorys = [];
       const runFile = [];
       const categoryToRunFile = {};
-      Object.keys(dataCategoryInfo).forEach(val => {
-        categorys = categorys.concat(Object.keys(dataCategoryInfo[val]).filter(v => !categorys.includes(v)));
+      Object.keys(dataCategoryInfo).forEach((val) => {
+        categorys = categorys.concat(
+          Object.keys(dataCategoryInfo[val]).filter((v) => !categorys.includes(v))
+        );
         runFile.push(val);
       });
       const categoryOrder = [];
-      categorys.forEach(val => {
+      categorys.forEach((val) => {
         categoryOrder.push(constants.CATEGORYORDER.indexOf(val));
       });
       categoryOrder.sort();
@@ -207,11 +225,11 @@ const actions = {
         newIndex = categoryOrder.indexOf(constants.CATEGORYORDER.indexOf(cate));
       }
       if (categorys.length !== 0) {
-        categorys.forEach(ce => {
+        categorys.forEach((ce) => {
           const detailTag = [];
           const tempRunFile = [];
           const temp = [];
-          runFile.forEach(res => {
+          runFile.forEach((res) => {
             if (dataCategoryInfo[res].hasOwnProperty(ce)) {
               tempRunFile.push(res);
               detailTag.push(dataCategoryInfo[res][ce]);
@@ -221,23 +239,29 @@ const actions = {
           });
           if (ce === constants.CATEGORYORDER[categoryOrder[0]] && cate === 'index') {
             context.dispatch(
-              `Visual/${  ce  }/getSelfCategoryInfo`,
-              [tempRunFile, detailTag, { 'initStateFlag': true }],
-              { root: true });
+              `Visual/${ce}/getSelfCategoryInfo`,
+              [tempRunFile, detailTag, { initStateFlag: true }],
+              { root: true }
+            );
           } else if (ce === cate) {
             context.dispatch(
-              `Visual/${  ce  }/getSelfCategoryInfo`,
-              [tempRunFile, detailTag, { 'initStateFlag': true }],
-              { root: true });
+              `Visual/${ce}/getSelfCategoryInfo`,
+              [tempRunFile, detailTag, { initStateFlag: true }],
+              { root: true }
+            );
           } else {
             context.dispatch(
-              `Visual/${  ce  }/getSelfCategoryInfo`,
-              [tempRunFile, detailTag, { 'initStateFlag': false }],
-              { root: true });
+              `Visual/${ce}/getSelfCategoryInfo`,
+              [tempRunFile, detailTag, { initStateFlag: false }],
+              { root: true }
+            );
           }
         });
       } else {
-        context.commit('setErrorMessage', `${'日志文件中尚未发现可展示信息！_'}${  new Date().getTime()}`);
+        context.commit(
+          'setErrorMessage',
+          `${'日志文件中尚未发现可展示信息！_'}${new Date().getTime()}`
+        );
       }
       context.commit('setRunCategoryDetail', categoryToRunFile);
       context.commit('setCategory', [categoryOrder, newIndex]);
@@ -245,12 +269,12 @@ const actions = {
     });
   },
   async getClickState(context, parm) {
-    context.state.categoryIndex.forEach(value => {
+    context.state.categoryIndex.forEach((value) => {
       const el = constants.CATEGORYORDER[value];
       if (value === parm) {
-        context.commit(`${  el  }/setClickState`, true, { root: true });
+        context.commit(`${el}/setClickState`, true, { root: true });
       } else {
-        context.commit(`${  el  }/setClickState`, false, { root: true });
+        context.commit(`${el}/setClickState`, false, { root: true });
       }
     });
   },
@@ -264,7 +288,7 @@ const mutations = {
     const days = 14;
     const exp = new Date();
     exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
-    document.cookie = `${name  }=${  escape(value)  };expires=${  exp.toGMTString()  }; path=/`;
+    document.cookie = `${name}=${escape(value)};expires=${exp.toGMTString()}; path=/`;
   },
   setCategory: (state, value) => {
     // eslint-disable-next-line
@@ -274,7 +298,7 @@ const mutations = {
       CategoryInfomation.push({
         id: index,
         rawName: constants.CATEGORYORDER[order],
-        routerName: `/visual/${  constants.CATEGORYORDER[order]}`,
+        routerName: `/visual/${constants.CATEGORYORDER[order]}`,
         name: constants.CATEGORY[order][3],
         nameCopy: constants.CATEGORY[order][3],
         icon: constants.CATEGORY[order][4],
@@ -288,7 +312,7 @@ const mutations = {
       state.initShowPanel = CategoryInfomation[value[1]];
     }
     const download = {};
-    state.category.forEach(val =>{
+    state.category.forEach((val) => {
       download[val.rawName] = [];
       if (val.rawName === 'graph') {
         download.graph.push('#svg-canvas');
@@ -311,8 +335,8 @@ const mutations = {
     let temp = '';
     state.runCategoryDetail[value].forEach((val, i) => {
       detailInfo.push({
-        'value': val,
-        'label': val,
+        value: val,
+        label: val,
       });
       if (constants.RUNFILESHOWFlAG[value] === 0) {
         temp = false;
@@ -329,7 +353,7 @@ const mutations = {
         temp = 2;
       }
     });
-    if(value in state.stateStore) {
+    if (value in state.stateStore) {
       state.userSelectRunFile = state.stateStore[value];
     } else {
       state.stateStore[value] = initOption;
diff --git a/webapp/src/store/modules/Visual/media.js b/webapp/src/store/modules/Visual/media.js
index 628e784..3595999 100644
--- a/webapp/src/store/modules/Visual/media.js
+++ b/webapp/src/store/modules/Visual/media.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import http from '@/utils/VisualUtils/request';
 import port from '@/utils/VisualUtils/api';
diff --git a/webapp/src/store/modules/Visual/scalar.js b/webapp/src/store/modules/Visual/scalar.js
index c05c601..a853071 100644
--- a/webapp/src/store/modules/Visual/scalar.js
+++ b/webapp/src/store/modules/Visual/scalar.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import http from '@/utils/VisualUtils/request';
 import port from '@/utils/VisualUtils/api';
@@ -78,11 +78,11 @@ const actions = {
   async getSelfCategoryInfo(context, param) {
     const initDetailData = {};
     const initshowrun = {};
-    for (let i = 0; i < param[1].length; i+=1) {
-      Object.keys(param[1][i]).forEach(value=> {
-        initDetailData[value]= [];
+    for (let i = 0; i < param[1].length; i += 1) {
+      Object.keys(param[1][i]).forEach((value) => {
+        initDetailData[value] = [];
         if (!(value in initshowrun)) {
-          initshowrun[value]= {};
+          initshowrun[value] = {};
         }
         initshowrun[value][param[0][i]] = true;
       });
@@ -96,8 +96,8 @@ const actions = {
   },
   async getData(context, param) {
     if (context.state.detailData[param[0]].length === 0) {
-      for (let j = 0; j < param[1].length; j+=1) {
-        for (let i = 0; i < context.state.categoryInfo[0].length; i+=1) {
+      for (let j = 0; j < param[1].length; j += 1) {
+        for (let i = 0; i < context.state.categoryInfo[0].length; i += 1) {
           if (Object.keys(context.state.categoryInfo[1][i]).indexOf(param[0]) > -1) {
             if (context.state.categoryInfo[1][i][param[0]].indexOf(param[1][j]) > -1) {
               const parameter = {
@@ -105,12 +105,16 @@ const actions = {
                 tag: param[1][j],
               };
               // eslint-disable-next-line no-await-in-loop
-              await http.useGet(port.category.scalar, parameter).then(res => { // port.category.scalar 'scalar' 换成你需要的接口
+              await http.useGet(port.category.scalar, parameter).then((res) => {
+                // port.category.scalar 'scalar' 换成你需要的接口
                 if (+res.data.code !== 200) {
-                  context.commit('setErrorMessage', `${res.data.msg  }_${  new Date().getTime()}`);
+                  context.commit('setErrorMessage', `${res.data.msg}_${new Date().getTime()}`);
                   return;
                 }
-                context.commit('setDetailData', [param[0], { 'run': context.state.categoryInfo[0][i], 'value': res.data.data }]);
+                context.commit('setDetailData', [
+                  param[0],
+                  { run: context.state.categoryInfo[0][i], value: res.data.data },
+                ]);
               });
             }
           }
@@ -212,7 +216,7 @@ const mutations = {
   },
   setdatainit: (state) => {
     state.checkeditem = [];
-    for (let i = 0; i < state.checkedorder.length; i+=1) {
+    for (let i = 0; i < state.checkedorder.length; i += 1) {
       state.downLoadArray.pop();
     }
     state.checkedorder = [];
diff --git a/webapp/src/store/modules/Visual/statistic.js b/webapp/src/store/modules/Visual/statistic.js
index 4bc7c56..b7a4de3 100644
--- a/webapp/src/store/modules/Visual/statistic.js
+++ b/webapp/src/store/modules/Visual/statistic.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { getHistogram, getDistribution } from '@/api/visual';
 /* eslint-disable no-await-in-loop */
@@ -37,7 +37,19 @@ const state = {
   histCheckedArray: [], // 用户定制选中
   distCheckedArray: [],
   // 不同run不同颜色
-  statisticColor: ['#9FA5FA', '#6dd2f0', '#c06f98', '#f07c82', '#57c3c2', '#9359b1', '#8cc269', '#ffa60f', '#de5991', '#EA7E53', '#cc95c0'], // #6464FF
+  statisticColor: [
+    '#9FA5FA',
+    '#6dd2f0',
+    '#c06f98',
+    '#f07c82',
+    '#57c3c2',
+    '#9359b1',
+    '#8cc269',
+    '#ffa60f',
+    '#de5991',
+    '#EA7E53',
+    '#cc95c0',
+  ], // #6464FF
   // 控制面板信息
   statisticInfo: [],
   errorMessage: '',
@@ -90,11 +102,20 @@ const actions = {
     for (let k = 0; k < context.state.dataSets.length; k += 1) {
       for (let i = 0; i < context.state.histTags[k].length; i += 1) {
         await getDistribution({ run: context.state.dataSets[k], tag: context.state.histTags[k][i] })
-          .then(res => {
-            context.commit('storeDistData', [context.state.dataSets[k], context.state.histTags[k][i], res[context.state.histTags[k][i]], k]);
+          .then((res) => {
+            context.commit('storeDistData', [
+              context.state.dataSets[k],
+              context.state.histTags[k][i],
+              res[context.state.histTags[k][i]],
+              k,
+            ]);
             context.commit('manageDistData');
-          }).catch((e) => {
-            context.commit('setErrorMessage', `${context.state.dataSets[k]  },${  context.state.histTags[k][i]  },${  e}`);
+          })
+          .catch((e) => {
+            context.commit(
+              'setErrorMessage',
+              `${context.state.dataSets[k]},${context.state.histTags[k][i]},${e}`
+            );
           });
       }
     }
@@ -105,22 +126,33 @@ const actions = {
     context.commit('setDrawAllSvgFinished', false);
     for (let k = 0; k < context.state.dataSets.length; k += 1) {
       for (let i = 0; i < context.state.histTags[k].length; i += 1) {
-        await getHistogram(
-          { run: context.state.dataSets[k], tag: context.state.histTags[k][i] })
-          .then(res => {
+        await getHistogram({ run: context.state.dataSets[k], tag: context.state.histTags[k][i] })
+          .then((res) => {
             // 根据数据step个数确定显示比例
             const dataLen = res[context.state.histTags[k][i]].length;
-            if ((dataLen > 50) && (5000.0 / dataLen < context.state.showNumber)) {
+            if (dataLen > 50 && 5000.0 / dataLen < context.state.showNumber) {
               context.commit('changeShownumber', Math.round(5000.0 / dataLen));
             }
             // 根据上面也可以确定桶个数的最大值
-            if (k === context.state.dataSets.length - 1 && i === context.state.histTags[k].length - 1) {
+            if (
+              k === context.state.dataSets.length - 1 &&
+              i === context.state.histTags[k].length - 1
+            ) {
               context.commit('setFeatchDataFinished', true);
             }
-            context.commit('storeHistData', [context.state.dataSets[k], context.state.histTags[k][i], res[context.state.histTags[k][i]], k]);
+            context.commit('storeHistData', [
+              context.state.dataSets[k],
+              context.state.histTags[k][i],
+              res[context.state.histTags[k][i]],
+              k,
+            ]);
             context.commit('manageHistData', false);
-          }).catch((e) => {
-            context.commit('setErrorMessage', `${context.state.dataSets[k]  },${  context.state.histTags[k][i]  },${  e}`);
+          })
+          .catch((e) => {
+            context.commit(
+              'setErrorMessage',
+              `${context.state.dataSets[k]},${context.state.histTags[k][i]},${e}`
+            );
           });
       }
     }
@@ -191,7 +223,13 @@ const mutations = {
         newData[i][j].push(newData[i - 1][j][1]);
       }
     }
-    state.distData.push([state.oldDistData[k][0], state.oldDistData[k][1], newData, state.oldDistData[k][3], k]);
+    state.distData.push([
+      state.oldDistData[k][0],
+      state.oldDistData[k][1],
+      newData,
+      state.oldDistData[k][3],
+      k,
+    ]);
     state.distCheckedArray.push(false);
   },
   clearData: (state) => {
@@ -224,7 +262,8 @@ const mutations = {
         if (max < data[i][3]) max = data[i][3];
       }
       const binWidth = (max - min) / state.binNum;
-      for (let i = 0; i < data.length; i += 1) { // 遍历step
+      for (let i = 0; i < data.length; i += 1) {
+        // 遍历step
         const onedata = data[i][4];
         // 处理一下首尾
         onedata[0][0] = onedata[0][1] - binWidth / 2;
@@ -244,21 +283,30 @@ const mutations = {
             const maxleft = Math.max(binleft, onedata[curbucket][0]);
             const curBinWidth = onedata[curbucket][1] - onedata[curbucket][0];
             if (binright <= onedata[curbucket][1]) {
-              if (curBinWidth !== 0) count += (binright - maxleft) / curBinWidth * onedata[curbucket][2];
+              if (curBinWidth !== 0)
+                count += ((binright - maxleft) / curBinWidth) * onedata[curbucket][2];
               break;
-            } else if (curBinWidth !== 0) count += (onedata[curbucket][1] - maxleft) / curBinWidth * onedata[curbucket][2];
+            } else if (curBinWidth !== 0)
+              count += ((onedata[curbucket][1] - maxleft) / curBinWidth) * onedata[curbucket][2];
           }
           newOneData.push([(binleft + binright) / 2, count, data[i][1]]);
         }
         newOneData.push([max + binWidth / 2, 0, data[i][1]]);
         newdata.push(newOneData);
       }
-      histDataTemp.push([state.oldHistData[k][0], state.oldHistData[k][1], newdata, state.oldHistData[k][3], k]);
+      histDataTemp.push([
+        state.oldHistData[k][0],
+        state.oldHistData[k][1],
+        newdata,
+        state.oldHistData[k][3],
+        k,
+      ]);
     }
     if (!param) {
       state.histData.push(histDataTemp[0]);
       state.histCheckedArray.push(false);
-    } else { // 修改桶数
+    } else {
+      // 修改桶数
       state.histData = histDataTemp;
     }
   },
diff --git a/webapp/src/store/modules/app.js b/webapp/src/store/modules/app.js
index 9cfbccd..66f1657 100644
--- a/webapp/src/store/modules/app.js
+++ b/webapp/src/store/modules/app.js
@@ -1,18 +1,18 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import Cookies from 'js-cookie';
 import constantRoutes from '@/router/routes';
@@ -29,7 +29,7 @@ const state = {
 };
 
 const mutations = {
-  TOGGLE_SIDEBAR: state => {
+  TOGGLE_SIDEBAR: (state) => {
     state.sidebar.opened = !state.sidebar.opened;
     state.sidebar.withoutAnimation = false;
     if (state.sidebar.opened) {
diff --git a/webapp/src/store/modules/cloudServing.js b/webapp/src/store/modules/cloudServing.js
index 16e2a86..52f7227 100644
--- a/webapp/src/store/modules/cloudServing.js
+++ b/webapp/src/store/modules/cloudServing.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 /**
  * 云端 Serving 持久化状态存储
diff --git a/webapp/src/store/modules/dataset.js b/webapp/src/store/modules/dataset.js
index 6b473e8..779d6cd 100644
--- a/webapp/src/store/modules/dataset.js
+++ b/webapp/src/store/modules/dataset.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 /**
  * 数据集持久化状态存储
diff --git a/webapp/src/store/modules/modelOptimize.js b/webapp/src/store/modules/modelOptimize.js
index 9ccaf25..c452be6 100644
--- a/webapp/src/store/modules/modelOptimize.js
+++ b/webapp/src/store/modules/modelOptimize.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 /**
  * 模型优化持久化状态存储
diff --git a/webapp/src/store/modules/settings.js b/webapp/src/store/modules/settings.js
index f3fcaf7..cf91db7 100644
--- a/webapp/src/store/modules/settings.js
+++ b/webapp/src/store/modules/settings.js
@@ -1,22 +1,29 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import defaultSettings from '@/settings';
 
-const { fixedHeader, sidebarLogo, uniqueOpened, showFooter, footerTxt, caseNumber } = defaultSettings;
+const {
+  fixedHeader,
+  sidebarLogo,
+  uniqueOpened,
+  showFooter,
+  footerTxt,
+  caseNumber,
+} = defaultSettings;
 
 const state = {
   fixedHeader,
@@ -47,4 +54,3 @@ export default {
   mutations,
   actions,
 };
-
diff --git a/webapp/src/store/modules/user.js b/webapp/src/store/modules/user.js
index ac66304..bf056e8 100644
--- a/webapp/src/store/modules/user.js
+++ b/webapp/src/store/modules/user.js
@@ -1,31 +1,35 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import { login, getInfo, logout } from '@/api/auth';
 import { userInfo, editUser } from '@/api/user';
 import { getToken, setToken, removeToken } from '@/utils/auth';
 import { bucketHost } from '@/utils/minIO';
 import { encrypt } from '@/utils/rsaEncrypt';
+import { ADMIN_ROLE_ID } from '@/utils';
 import defaultAvatar from '@/assets/images/avatar.png';
 
+// TODO: 平台权限系统需要改造，规划根据权限标识对页面、菜单和操作进行权限管理
+
 const user = {
   state: {
     token: getToken(),
     user: {},
     permissions: [],
+    isAdmin: false,
   },
 
   mutations: {
@@ -34,8 +38,8 @@ const user = {
     },
     SET_USER: (state, user) => {
       state.user = user;
-      if (user.userAvatar && user.userAvatar.path) {
-        state.user.avatar = `${bucketHost}/${user.userAvatar.path}`;
+      if (user.userAvatarPath) {
+        state.user.avatar = `${bucketHost}/${user.userAvatarPath}`;
       } else {
         state.user.avatar = defaultAvatar;
       }
@@ -43,12 +47,15 @@ const user = {
     SET_PERMISSIONS: (state, permissions) => {
       state.permissions = permissions;
     },
+    SET_IS_ADMIN: (state, isAdmin) => {
+      state.isAdmin = isAdmin;
+    },
   },
 
   actions: {
     // 登录
     Login({ commit }, userInfo) {
-      const {rememberMe} = userInfo;
+      const { rememberMe } = userInfo;
       const loginData = {
         username: userInfo.username,
         password: encrypt(userInfo.password),
@@ -56,67 +63,79 @@ const user = {
         uuid: userInfo.uuid,
       };
       return new Promise((resolve, reject) => {
-        login(loginData).then(res => {
-          setToken(res.token, rememberMe);
-          commit('SET_TOKEN', res.token);
-          commit('SET_USER', res.user);
-          commit('SET_PERMISSIONS', res.permissions);
-          resolve();
-        }).catch(error => {
-          reject(error);
-        });
+        login(loginData)
+          .then((res) => {
+            setToken(res.token, rememberMe);
+            commit('SET_TOKEN', res.token);
+            commit('SET_USER', res.user);
+            commit('SET_IS_ADMIN', res.user.roles.length && res.user.roles[0].id === ADMIN_ROLE_ID);
+            commit('SET_PERMISSIONS', res.permissions);
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
       });
     },
 
     // 获取用户信息和权限
     GetInfo({ commit }) {
       return new Promise((resolve, reject) => {
-        getInfo().then(res => {
-          commit('SET_USER', res.user);
-          commit('SET_PERMISSIONS', res.permissions);
-          resolve(res);
-        }).catch(error => {
-          reject(error);
-        });
+        getInfo()
+          .then((res) => {
+            commit('SET_USER', res.user);
+            commit('SET_IS_ADMIN', res.user.roles.length && res.user.roles[0].id === ADMIN_ROLE_ID);
+            commit('SET_PERMISSIONS', res.permissions);
+            resolve(res);
+          })
+          .catch((error) => {
+            reject(error);
+          });
       });
     },
 
     // 获取用户信息
     GetUserInfo({ commit }) {
       return new Promise((resolve, reject) => {
-        userInfo().then(res => {
-          commit('SET_USER', res);
-          resolve(res);
-        }).catch(error => {
-          reject(error);
-        });
+        userInfo()
+          .then((res) => {
+            commit('SET_USER', res);
+            resolve(res);
+          })
+          .catch((error) => {
+            reject(error);
+          });
       });
     },
 
     // 修改用户信息
     UpdateUserInfo({ commit }, userInfo) {
       return new Promise((resolve, reject) => {
-        editUser(userInfo).then(res => {
-          commit('SET_USER', res);
-          resolve(res);
-        }).catch(error => {
-          reject(error);
-        });
+        editUser(userInfo)
+          .then((res) => {
+            commit('SET_USER', res);
+            resolve(res);
+          })
+          .catch((error) => {
+            reject(error);
+          });
       });
     },
 
     // 登出
     LogOut({ commit }) {
       return new Promise((resolve, reject) => {
-        logout().then(() => {
-          commit('SET_TOKEN', '');
-          commit('SET_USER', {});
-          commit('SET_PERMISSIONS', []);
-          removeToken();
-          resolve();
-        }).catch(error => {
-          reject(error);
-        });
+        logout()
+          .then(() => {
+            commit('SET_TOKEN', '');
+            commit('SET_USER', {});
+            commit('SET_PERMISSIONS', []);
+            removeToken();
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
       });
     },
   },
diff --git a/webapp/src/utils/VisualUtils/api.js b/webapp/src/utils/VisualUtils/api.js
index ae96750..dc7c515 100644
--- a/webapp/src/utils/VisualUtils/api.js
+++ b/webapp/src/utils/VisualUtils/api.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export default {
   category: {
diff --git a/webapp/src/utils/VisualUtils/constants.js b/webapp/src/utils/VisualUtils/constants.js
index 42bddd8..88eb28e 100644
--- a/webapp/src/utils/VisualUtils/constants.js
+++ b/webapp/src/utils/VisualUtils/constants.js
@@ -1,22 +1,22 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
-const HOSTNAME = `${window.location.origin  }/`;
+const HOSTNAME = `${window.location.origin}/`;
 // const IMGURl = HOSTNAME
-const IMGURl = `${process.env.VUE_APP_BASE_API  }/visual`;
+const IMGURl = `${process.env.VUE_APP_BASE_API}/visual`;
 const CATEGORY = [
   ['GRAPH', 'Graphs', 'GraphsPanel', '模型结构', 'icon-moxingjiegou_1'],
   ['SCALAR', 'Scalars', 'ScalarsPanel', '标量数据', 'icon-biaoliangshuju1'],
@@ -29,7 +29,29 @@ const CATEGORY = [
   ['EXCEPTION', 'Exception', 'ExceptionPanel', '异常检测', 'icon-yichang3'],
   ['CUSTOM', 'Customs', 'CustomsPanel', '用户定制', 'icon-yonghudingzhi_1'],
 ];
-const CATEGORYORDER = ['graph', 'scalar', 'media', 'statistic', 'embedding', 'feature', 'roc', 'hyperparm', 'exception', 'custom'];
-const RUNFILESHOWFlAG = { 'graph': 0, 'scalar': 1, 'media': 1, 'statistic': 1, 'embedding': 0, 'feature': 0, 'roc': 1, 'hyperparm': 0, 'exception': 1, 'custom': 2 };
+const CATEGORYORDER = [
+  'graph',
+  'scalar',
+  'media',
+  'statistic',
+  'embedding',
+  'feature',
+  'roc',
+  'hyperparm',
+  'exception',
+  'custom',
+];
+const RUNFILESHOWFlAG = {
+  graph: 0,
+  scalar: 1,
+  media: 1,
+  statistic: 1,
+  embedding: 0,
+  feature: 0,
+  roc: 1,
+  hyperparm: 0,
+  exception: 1,
+  custom: 2,
+};
 
 export default { HOSTNAME, CATEGORY, CATEGORYORDER, RUNFILESHOWFlAG, IMGURl };
diff --git a/webapp/src/utils/VisualUtils/download.js b/webapp/src/utils/VisualUtils/download.js
index cc8d7ee..de5ea03 100644
--- a/webapp/src/utils/VisualUtils/download.js
+++ b/webapp/src/utils/VisualUtils/download.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import FileSaver from 'file-saver';
 
@@ -30,9 +30,9 @@ const covertSVG2Image = (node, name, width, height, type = 'png') => {
    * @return: 'img'
    */
   const serializer = new XMLSerializer();
-  const source = `<?xml version="1.0" standalone="no"?>\r\n${  serializer.serializeToString(node)}`;
+  const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(node)}`;
   const image = new Image();
-  image.src = `data:image/svg+xml;charset=utf-8,${  encodeURIComponent(source)}`;
+  image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`;
   const canvas = document.createElement('canvas');
   canvas.width = width;
   canvas.height = height;
@@ -51,7 +51,7 @@ const covertSVG2Image = (node, name, width, height, type = 'png') => {
 const downloadJSON2CSV = (data, filename = 'test.csv') => {
   const parser = new Json2csvParser();
   const csvData = parser.parse(data);
-  const blob = new Blob([`\uFEFF${  csvData}`], { type: 'text/plain;charset=utf-8;' });
+  const blob = new Blob([`\uFEFF${csvData}`], { type: 'text/plain;charset=utf-8;' });
   FileSaver.saveAs(blob, filename);
 };
 
diff --git a/webapp/src/utils/VisualUtils/request.js b/webapp/src/utils/VisualUtils/request.js
index 2aa6807..1e8bd4d 100644
--- a/webapp/src/utils/VisualUtils/request.js
+++ b/webapp/src/utils/VisualUtils/request.js
@@ -1,26 +1,29 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import axios from 'axios';
 import Config from '@/settings';
 import { getToken } from '@/utils/auth';
 import store from '@/store/modules/Visual/layout';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+const url = require('url');
+
 const service = axios.create({
-  baseURL: `${process.env.VUE_APP_BASE_API  }/visual`,
+  baseURL: url.resolve(process.env.VUE_APP_VISUAL_API, '/visual'),
   timeout: Config.timeout, // 请求超时时间
   withCredentials: true,
 });
@@ -33,9 +36,9 @@ service.interceptors.request.use(
     }
     return config;
   },
-  (err)=> {
+  (err) => {
     return err;
-  },
+  }
 );
 
 // 响应拦截,暂时未用
@@ -45,7 +48,7 @@ service.interceptors.response.use(
   },
   (err) => {
     return Promise.reject(err);
-  },
+  }
 );
 
 const useGet = (url, params) => {
diff --git a/webapp/src/utils/auth.js b/webapp/src/utils/auth.js
index 88dcd36..2486cde 100644
--- a/webapp/src/utils/auth.js
+++ b/webapp/src/utils/auth.js
@@ -1,23 +1,23 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import Cookies from 'js-cookie';
 import Config from '@/settings';
 
-const {TokenKey} = Config;
+const { TokenKey } = Config;
 
 export function getToken() {
   return Cookies.get(TokenKey);
@@ -26,7 +26,8 @@ export function getToken() {
 export function setToken(token, rememberMe) {
   if (rememberMe) {
     return Cookies.set(TokenKey, token, { expires: Config.tokenCookieExpires });
-  } return Cookies.set(TokenKey, token);
+  }
+  return Cookies.set(TokenKey, token);
 }
 
 export function removeToken() {
diff --git a/webapp/src/utils/base.js b/webapp/src/utils/base.js
index d605d9d..bea52da 100644
--- a/webapp/src/utils/base.js
+++ b/webapp/src/utils/base.js
@@ -1,24 +1,37 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { format, parseISO, isDate } from 'date-fns';
-import { isEqual, isPlainObject, isNil, findIndex, findLastIndex, uniqBy, merge, keyBy, values } from 'lodash';
+import {
+  isEqual,
+  isPlainObject,
+  isNil,
+  findIndex,
+  findLastIndex,
+  uniqBy,
+  merge,
+  keyBy,
+  values,
+  minBy,
+  maxBy,
+} from 'lodash';
 import { nanoid } from 'nanoid';
 
 const chroma = require('chroma-js');
+const assert = require('assert');
 
 export const duplicate = (arr, callback) => {
   const index = findIndex(arr, callback);
@@ -71,20 +84,20 @@ export const add = (arr, ...newData) => {
 // 删除数组中指定索引的字段
 export const remove = (arr, i) => {
   if (i < 0) return arr;
-  return ([
-    ...arr.slice(0, i),
-    ...arr.slice(i + 1),
-  ]);
+  return [...arr.slice(0, i), ...arr.slice(i + 1)];
+};
+
+// remove 回调函数版本
+export const removeBy = (arr, callback) => {
+  assert(typeof callback === 'function', 'callback 只支持函数类型');
+  const index = arr.findIndex(callback);
+  return remove(arr, index);
 };
 
 // 替换数组中指定索引的项
 export const replace = (arr, i, ...newData) => {
   if (!Array.isArray(arr) || typeof i !== 'number') return arr;
-  return ([
-    ...arr.slice(0, i),
-    ...newData,
-    ...arr.slice(i + 1),
-  ]);
+  return [...arr.slice(0, i), ...newData, ...arr.slice(i + 1)];
 };
 
 // 合并两个具有同个属性的数组
@@ -93,20 +106,40 @@ export const mergeArrayByKey = (arr1, arr2, key) => {
   return values(merged);
 };
 
+// 将位置对象转为数组（供算法解析）
+export const pos2Array = (pos) => [pos.x, pos.y];
+// 将数组转为数组
+export const rawArr2Pos = (arr) => ({ x: arr[0], y: arr[1] });
+
+// polygonExtent
+export const getPolygonExtent = (points) => {
+  const { x: x0 } = minBy(points, 'x');
+  const { x: x1 } = maxBy(points, 'x');
+  const { y: y0 } = minBy(points, 'y');
+  const { y: y1 } = maxBy(points, 'y');
+  return {
+    x0,
+    x1,
+    y0,
+    y1,
+  };
+};
+
 // deprecated
 // 每n个取1个值,例：步长为5时,0到20取0,5,10,15,20。leading为true表示即使不足5个，仍取第一个值0
-export const everyNth = (arr, step, leading = false) => arr.filter((e, i) => {
-  if(leading === true) {
-    return i % step === 0;
-  };
-  return (i % step === step - 1);
-});
+export const everyNth = (arr, step, leading = false) =>
+  arr.filter((e, i) => {
+    if (leading === true) {
+      return i % step === 0;
+    }
+    return i % step === step - 1;
+  });
 
 export const everyStep = (arr, step) => {
   // 先根据步长生成一个近似于等差的数组arr2，arr2的值对应arr要取的点的index值
   const arr2 = [];
-  for(let i=0; i<arr.length; i+=step){
-     arr2.push(Math.floor(i));
+  for (let i = 0; i < arr.length; i += step) {
+    arr2.push(Math.floor(i));
   }
   return arr.filter((e, i) => {
     return arr2.includes(i);
@@ -172,11 +205,14 @@ export const AssertError = (message, code) => {
 };
 
 // 返回当前值
-export const identity = d => d;
+export const identity = (d) => d;
 
 // 数组间基于属性对比
 export const isEqualByProp = (arr1, arr2, prop) => {
-  return isEqual(arr1.map(d => d[prop]), arr2.map(d => d[prop]));
+  return isEqual(
+    arr1.map((d) => d[prop]),
+    arr2.map((d) => d[prop])
+  );
 };
 
 // 判断对象数组之间某些值是否一致
@@ -187,9 +223,9 @@ export const isEqualBy = (arr, key) => {
 
 // 根据背景色深浅来设置颜色
 export const colorByLuminance = (color) => {
-  if(isNil(color) || color === '') {
+  if (isNil(color) || color === '') {
     return '#333';
-  } 
+  }
   const colorMap = {
     dark: '#333',
     light: '#fff',
@@ -199,4 +235,15 @@ export const colorByLuminance = (color) => {
   return colorMap[theme];
 };
 
+// 判断是否为空值（lodash isEmpty 方法对解析 boolean 和 number 不合理）
+export const isEmptyValue = (value) => {
+  return (
+    value === undefined ||
+    value === null ||
+    Number.isNaN(value) ||
+    (typeof value === 'object' && Object.keys(value).length === 0) ||
+    (typeof value === 'string' && value.trim().length === 0)
+  );
+};
+
 export { chroma };
diff --git a/webapp/src/utils/constant.js b/webapp/src/utils/constant.js
index 9150002..fe6b9ca 100644
--- a/webapp/src/utils/constant.js
+++ b/webapp/src/utils/constant.js
@@ -1,20 +1,20 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
-const Constant = {
+export const Constant = {
   // map
   tableSortMap: {
     ascending: 'asc',
@@ -25,7 +25,7 @@ const Constant = {
     asc: 'ascending',
     desc: 'descending',
   },
-  
+
   // 表单标题映射
   FORM_TYPE_MAP: {
     add: '创建',
@@ -34,36 +34,62 @@ const Constant = {
   },
 };
 
-export const MODEL_RESOURCE = {
-  CUSTOM: {
-    label: '我的模型',
-    value: 0,
-  },
-  PRESET: {
-    label: '预训练模型',
-    value: 1,
-  },
+// 算法来源枚举值
+export const ALGORITHM_RESOURCE_ENUM = {
+  CUSTOM: 1, // 我的算法
+  PRESET: 2, // 预置算法
 };
 
+// 模型分类枚举值
+export const MODEL_RESOURCE_ENUM = {
+  CUSTOM: 0, // 我的模型
+  PRESET: 1, // 预训练模型
+  ATLAS: 2, // 炼知模型
+};
+
+// 模型分类名称
 export const MODEL_RESOURCE_MAP = {
-  0: '我的模型',
-  1: '预训练模型',
+  [MODEL_RESOURCE_ENUM.CUSTOM]: '我的模型',
+  [MODEL_RESOURCE_ENUM.PRESET]: '预训练模型',
+  [MODEL_RESOURCE_ENUM.ATLAS]: '炼知模型',
 };
 
-export const RESOURCES_POOL_TYPE = {
-  CPU: {
-    label: 'CPU',
-    value: 0,
-  },
-  GPU: {
-    label: 'GPU',
-    value: 1,
-  },
+// 炼知模型打包状态枚举
+export const ALTAS_MODEL_PACKAGE_ENUM = {
+  UNPACKAGED: 0,
+  PACKAGED: 1,
 };
 
+// 资源类型枚举
+export const RESOURCES_POOL_TYPE_ENUM = {
+  CPU: 0,
+  GPU: 1,
+};
+
+// 资源业务场景枚举
+export const RESOURCES_MODULE_ENUM = {
+  NOTEBOOK: 1,
+  TRAIN: 2,
+  SERVING: 3,
+};
+
+// 资源类型名称
 export const RESOURCES_POOL_TYPE_MAP = {
-  0: 'CPU',
-  1: 'GPU',
+  [RESOURCES_POOL_TYPE_ENUM.CPU]: 'CPU',
+  [RESOURCES_POOL_TYPE_ENUM.GPU]: 'GPU',
 };
 
-export { Constant };
+// 默认进度条颜色
+export const defaultProcessColors = [
+  { color: '#909399', percentage: 40 },
+  { color: '#e6a23c', percentage: 80 },
+  { color: '#67c23a', percentage: 100 },
+];
+
+// 系统管理员ID
+export const ADMIN_ROLE_ID = 1;
+
+// 时间常量
+export const ONE_MINUTE = 1000 * 60;
+
+export const ONE_HOUR = ONE_MINUTE * 60;
diff --git a/webapp/src/utils/download.js b/webapp/src/utils/download.js
index 67d8cd7..b34ec28 100644
--- a/webapp/src/utils/download.js
+++ b/webapp/src/utils/download.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import streamSaver from 'streamsaver';
 import { minioBaseUrl } from '@/utils/minIO';
@@ -21,12 +21,12 @@ import ZIP from './zip';
 const pMap = require('p-map');
 
 // 默认名字解析
-const defaultName = file => file.name;
+const defaultName = (file) => file.name;
 
 // 下载单一文件
 export const downloadFileAsStream = (url, fileName) => {
   const fileStream = streamSaver.createWriteStream(fileName || url.split('/').pop());
-  fetch(url).then(res => {
+  fetch(url).then((res) => {
     const readableStream = res.body;
 
     if (window.WritableStream && readableStream.pipeTo) {
@@ -35,22 +35,23 @@ export const downloadFileAsStream = (url, fileName) => {
     // 兼容 WritableStream
     const writer = fileStream.getWriter();
     const reader = res.body.getReader();
-    const pump = () => reader.read()
-      .then(result => result.done
-        ? writer.close()
-        : writer.write(result.value).then(pump));
+    const pump = () =>
+      reader
+        .read()
+        .then((result) => (result.done ? writer.close() : writer.write(result.value).then(pump)));
     return pump();
   });
 };
 
 // 下载 zip 包
+// eslint-disable-next-line
 export const downloadFilesAsZip = (files, zipName = 'demo.zip', options = {}) => {
   const fileName = options.fileName || defaultName;
   const { concurrency = 5 } = options;
   const fileStream = streamSaver.createWriteStream(zipName);
   const readableZipStream = new ZIP({
     async pull(ctrl) {
-      const mapper = async file => {
+      const mapper = async (file) => {
         return fetch(file.url).then(({ body }) => {
           ctrl.enqueue({
             name: typeof fileName === 'function' ? fileName(file) : fileName,
@@ -73,20 +74,20 @@ export const downloadFilesAsZip = (files, zipName = 'demo.zip', options = {}) =>
   // less optimized
   const writer = fileStream.getWriter();
   const reader = readableZipStream.getReader();
-  const pump = () => reader.read()
-    .then(res => res.done ? writer.close() : writer.write(res.value).then(pump));
+  const pump = () =>
+    reader.read().then((res) => (res.done ? writer.close() : writer.write(res.value).then(pump)));
 
   pump();
 };
 
 // 基于minIO objectPath 自动解析目录
-export const downloadZipFromObjectPath = async(objectPath, zipName = 'demo.zip', options = {}) => {
+export const downloadZipFromObjectPath = async (objectPath, zipName = 'demo.zip', options = {}) => {
   const result = await window.minioClient.listObjects(objectPath);
   let objects = result.slice();
   if (typeof options.filter === 'function') {
     objects = options.filter(result);
   }
-  const files = objects.map(d => ({
+  const files = objects.map((d) => ({
     url: `${minioBaseUrl}/${d.name}`,
     name: d.name,
   }));
@@ -95,7 +96,7 @@ export const downloadZipFromObjectPath = async(objectPath, zipName = 'demo.zip',
     if (path.charAt(path.length - 1) !== '/') {
       path += '/';
     }
-    options.fileName = file => file.name.replace(path, '');
+    options.fileName = (file) => file.name.replace(path, '');
   }
   if (files.length) {
     downloadFilesAsZip(files, zipName, options);
diff --git a/webapp/src/utils/event.js b/webapp/src/utils/event.js
index c78af44..7edb56d 100644
--- a/webapp/src/utils/event.js
+++ b/webapp/src/utils/event.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { zoomTransform } from 'd3-zoom';
 
@@ -25,10 +25,10 @@ export const getCursorPosition = (el, event, options = {}) => {
 };
 
 // 根据 d3-zoom 获取缩放后的相对位置
-export const getZoomPosition = (el, {x, y}) => {
+export const getZoomPosition = (el, { x, y }) => {
   const transform = zoomTransform(el);
   // const invertPosition = transform.invert(originPosition)
-  return { x: x / transform.k,  y: y / transform.k };
+  return { x: x / transform.k, y: y / transform.k };
   // return invertPosition
 };
 
@@ -36,16 +36,27 @@ export const getZoomPosition = (el, {x, y}) => {
 export const noop = () => {};
 
 // bounding
-export const getBounding = element => {
+export const getBounding = (element) => {
   if (element instanceof HTMLElement) {
     return element.getBoundingClientRect();
   }
   return {};
 };
 
+// 检测是否位于当前边界之内
+export const inBoundary = (event, target) => {
+  const rect = target.getBoundingClientRect();
+  return (
+    event.clientX >= rect.x &&
+    event.clientX <= rect.right &&
+    event.clientY >= rect.y &&
+    event.clientY <= rect.bottom
+  );
+};
+
 // 将框选结果转化为 bbox 配置
 export const generateBbox = (brush) => {
-  const { start = {}, end = {}} = brush;
+  const { start = {}, end = {} } = brush;
   const region = {
     x0: Math.min(start.x, end.x),
     x1: Math.max(start.x, end.x),
@@ -61,7 +72,7 @@ export const generateBbox = (brush) => {
 };
 
 // Bbox 转为 extent
-export const bbox2Extent = bbox => ({
+export const bbox2Extent = (bbox) => ({
   x0: bbox.x,
   y0: bbox.y,
   x1: bbox.x + bbox.width,
@@ -69,7 +80,7 @@ export const bbox2Extent = bbox => ({
 });
 
 // 将 extent 转为 bbox
-export const extent2Bbox = extent => ({
+export const extent2Bbox = (extent) => ({
   x: extent.x0,
   y: extent.y0,
   width: extent.x1 - extent.x0,
@@ -87,6 +98,15 @@ export const parseBbox = (bbox = []) => {
   };
 };
 
+// 解析多边形为 bbox
+export const parsePolygon2Bbox = (points = []) => {
+  if (points.length === 0) throw new Error('路径不存在');
+  return {
+    x: points[0].x,
+    y: points[0].y,
+  };
+};
+
 // 将 bbox 生成数据
 export const flatBbox = (bbox = {}) => {
   const { x, y, width, height } = bbox;
@@ -139,7 +159,21 @@ export const findAncestorSvg = (node, event) => {
 };
 
 export const raise = (arr, raiseIndex) => {
-  return ([...arr.slice(0, raiseIndex), ...arr.slice(raiseIndex + 1), arr[raiseIndex]]);
+  return [...arr.slice(0, raiseIndex), ...arr.slice(raiseIndex + 1), arr[raiseIndex]];
+};
+
+// 计算两点之间的距离
+export const calcDistance = (a, b) => {
+  const x = Math.abs(b.x - a.x);
+  const y = Math.abs(b.y - a.y);
+  return Math.sqrt(x * x + y * y);
+};
+
+export const midPoint = (a, b) => {
+  return {
+    x: (a.x + b.x) / 2,
+    y: (a.y + b.y) / 2,
+  };
 };
 
 export const promisifyFileReader = (file, encoding) => {
@@ -155,4 +189,3 @@ export const promisifyFileReader = (file, encoding) => {
     reader.readAsText(file, encoding);
   });
 };
-
diff --git a/webapp/src/utils/index.js b/webapp/src/utils/index.js
index 491eebf..0e86db5 100644
--- a/webapp/src/utils/index.js
+++ b/webapp/src/utils/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export * from './base';
 export * from './utils';
@@ -22,3 +22,4 @@ export * from './event';
 export * from './minIO';
 export * from './download';
 export * from './validate';
+export * from './operation';
diff --git a/webapp/src/utils/minIO.js b/webapp/src/utils/minIO.js
index a2a4c88..48eb8ec 100644
--- a/webapp/src/utils/minIO.js
+++ b/webapp/src/utils/minIO.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { getMinIOAuth } from '@/api/auth';
 import { decrypt } from '@/utils/rsaEncrypt';
@@ -20,12 +20,17 @@ import { decrypt } from '@/utils/rsaEncrypt';
 const Minio = require('minio');
 const toArray = require('stream-to-array');
 
-const { VUE_APP_MINIO_ENDPOINT, VUE_APP_MINIO_PORT, VUE_APP_MINIO_USESSL, VUE_APP_MINIO_BUCKETNAME } = process.env;
+const {
+  VUE_APP_MINIO_ENDPOINT,
+  VUE_APP_MINIO_PORT,
+  VUE_APP_MINIO_USESSL,
+  VUE_APP_MINIO_BUCKETNAME,
+} = process.env;
 
 // 创建 bucket
 const makeBucket = (client, bucketName) => {
   return new Promise((resolve, reject) => {
-    client.makeBucket(bucketName, err => {
+    client.makeBucket(bucketName, (err) => {
       if (err) {
         reject(err);
         return;
@@ -46,19 +51,18 @@ const minIOConfig = {
 };
 
 // 导出 bucketName
-export const {bucketName} = minIOConfig;
+export const { bucketName } = minIOConfig;
 
 // todo: 生产环境
 export const bucketHost = `${window.location.protocol}//${minIOConfig.config.endPoint}:${minIOConfig.config.port}`;
 
-export const minioBaseUrl = `${bucketHost  }/${  bucketName}`;
+export const minioBaseUrl = `${bucketHost}/${bucketName}`;
 
 // 上传文件
 class MinioClient {
   constructor() {
     this.minIOConfig = minIOConfig.config;
     this.bucketName = minIOConfig.bucketName;
-    this.init();
   }
 
   async init() {
@@ -69,6 +73,7 @@ class MinioClient {
     this.config = { ...this.minIOConfig, accessKey: rawAccessKey, secretKey: rawSecretKey };
     this.client = new Minio.Client(this.config);
     await this.makeBucket(this.bucketName);
+    return this;
   }
 
   async makeBucket(name) {
@@ -85,13 +90,37 @@ class MinioClient {
     return toArray(result);
   }
 
+  // eslint-disable-next-line
   async putObject(objectName, stream, ...rest) {
     try {
       const result = await this.client.putObject(this.bucketName, objectName, stream, ...rest);
       if (result) {
-        return { err: null, data: {
-          objectName, result,
-        }};
+        return {
+          err: null,
+          data: {
+            objectName,
+            result,
+          },
+        };
+      }
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  // eslint-disable-next-line
+  async removeObject(objectName) {
+    try {
+      const result = await this.client.removeObject(this.bucketName, `${objectName}`);
+      if (result) {
+        return {
+          err: null,
+          data: {
+            objectName,
+            result,
+          },
+        };
       }
     } catch (err) {
       console.error(err);
diff --git a/webapp/src/utils/operation.js b/webapp/src/utils/operation.js
new file mode 100644
index 0000000..e7b71ae
--- /dev/null
+++ b/webapp/src/utils/operation.js
@@ -0,0 +1,21 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import store from '@/store';
+
+export function hasPermission(permission) {
+  return store.getters.permissions.includes(permission);
+}
diff --git a/webapp/src/utils/request.js b/webapp/src/utils/request.js
index ad4006e..fd0face 100644
--- a/webapp/src/utils/request.js
+++ b/webapp/src/utils/request.js
@@ -1,36 +1,37 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import axios from 'axios';
 import qs from 'qs';
 
-import { getToken } from '@/utils/auth';
+import { getToken, removeToken } from '@/utils/auth';
 import Config from '@/settings';
 // eslint-disable-next-line import/no-cycle
 import store from '@/store/modules/Visual/layout';
 import { HttpError } from './base';
 
-function isWhiteList (url) {
+import mapper from '../lib/api-map';
+
+function isWhiteList(url) {
   return /(api\/histogram)|(api\/distribution)/.test(url);
-};
+}
 
 // 创建axios实例
 const service = axios.create({
   // baseURL 在request拦截器中指定
-  // baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
   timeout: Config.timeout, // 请求超时时间
   withCredentials: true,
   // 格式化 query 中数组格式
@@ -41,8 +42,12 @@ const service = axios.create({
 
 // request拦截器
 service.interceptors.request.use(
-  config => {
-    config.baseURL = config.baseURL || process.env.VUE_APP_BASE_API;
+  (config) => {
+    if (config.baseURL) {
+      // 已经指定BaseURL，不修改
+    } else {
+      config.baseURL = mapper(config.url);
+    }
 
     if (getToken()) {
       config.headers.Authorization = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
@@ -50,21 +55,26 @@ service.interceptors.request.use(
     config.headers['Content-Type'] = config.headers['Content-Type'] || 'application/json';
     return config;
   },
-  error => {
+  (error) => {
     // Do something with request error
     // console.log(error); // for debug
     Promise.reject(error);
-  },
+  }
 );
 
 // response 拦截器
 service.interceptors.response.use(
-  response => {
+  (response) => {
     const res = response.data;
     // 如果请求的返回类型是流，则直接返回 data
     if (response.config.responseType === 'blob') {
       return res;
     }
+    if (res.code === 403) {
+      removeToken();
+      window.location.reload();
+      return false;
+    }
     // if the custom code is not 200, it is judged as an error.
     if (res.code !== 200) {
       if (isWhiteList(response.config.url)) {
@@ -74,14 +84,14 @@ service.interceptors.response.use(
     }
     return res.data;
   },
-  error => {
+  (error) => {
     if (error.response) {
-      const {data} = error.response;
+      const { data } = error.response;
       // 目前后端返回会出现有 code 无 msg
       if (data && data.code) {
         return HttpError(data.msg || '请求异常', data.code);
       }
-      return HttpError(`请求异常：${  error.response.statusText}`);
+      return HttpError(`请求异常：${error.response.statusText}`);
     }
 
     if (error.request) {
@@ -89,7 +99,7 @@ service.interceptors.response.use(
     }
 
     return HttpError(error.message);
-  },
+  }
 );
 
 const useGet = (url, params = {}) => {
diff --git a/webapp/src/utils/rsaEncrypt.js b/webapp/src/utils/rsaEncrypt.js
index 0890194..02b8051 100644
--- a/webapp/src/utils/rsaEncrypt.js
+++ b/webapp/src/utils/rsaEncrypt.js
@@ -1,18 +1,18 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import JSEncrypt from 'jsencrypt/bin/jsencrypt';
 import { publicKey } from '@/settings';
diff --git a/webapp/src/utils/utils.js b/webapp/src/utils/utils.js
index a906dbd..775cee1 100644
--- a/webapp/src/utils/utils.js
+++ b/webapp/src/utils/utils.js
@@ -1,18 +1,18 @@
 /*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * Copyright 2019-2020 Zheng Jie
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 /**
  * utils, 通用方法
@@ -23,6 +23,7 @@ import { Message } from 'element-ui';
 import Config from '@/settings';
 
 import FileFilter from '@/components/UploadForm/FileFilter';
+import { isNil } from 'lodash';
 
 /**
  * Parse the time to string
@@ -38,17 +39,21 @@ export function parseTime(time, cFormat) {
   let date;
   if (typeof time === 'undefined' || time === null || time === 'null') {
     return '';
-  } if (typeof time === 'object') {
+  }
+  if (time === '-') {
+    return '-';
+  }
+  if (typeof time === 'object') {
     date = time;
   } else {
-    if ((typeof time === 'string')) {
-      if ((/^[0-9]+$/.test(time))) {
+    if (typeof time === 'string') {
+      if (/^[0-9]+$/.test(time)) {
         time = parseInt(time, 10);
       } else {
-        time = time.replace(/ /g, "T");
+        time = time.replace(/ /g, 'T');
       }
     }
-    if ((typeof time === 'number') && (time.toString().length === 10)) {
+    if (typeof time === 'number' && time.toString().length === 10) {
       time *= 1000;
     }
     date = new Date(time);
@@ -66,7 +71,9 @@ export function parseTime(time, cFormat) {
   const time_str = format.replace(/{(y|m|d|h|i|s|a|S)+}/g, (result, key) => {
     let value = formatObj[key];
     // Note: getDay() returns 0 on Sunday
-    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value]; }
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value];
+    }
     if (result.length > 0 && value < 10) {
       value = `0${value}`;
     }
@@ -86,7 +93,7 @@ export function byteLength(str) {
     const code = str.charCodeAt(i);
     if (code > 0x7f && code <= 0x7ff) s += 1;
     else if (code > 0x7ff && code <= 0xffff) s += 2;
-    if (code >= 0xDC00 && code <= 0xDFFF) i -= 1;
+    if (code >= 0xdc00 && code <= 0xdfff) i -= 1;
   }
   return s;
 }
@@ -101,13 +108,11 @@ export function param2Obj(url) {
     return {};
   }
   return JSON.parse(
-    `{"${
-    decodeURIComponent(search)
+    `{"${decodeURIComponent(search)
       .replace(/"/g, '\\"')
       .replace(/&/g, '","')
       .replace(/=/g, '":"')
-      .replace(/\+/g, ' ')
-    }"}`,
+      .replace(/\+/g, ' ')}"}`
   );
 }
 
@@ -118,7 +123,11 @@ export function param2Obj(url) {
  * @return {*}
  */
 export function debounce(func, wait, immediate) {
-  let timeout; let args; let context; let timestamp; let result;
+  let timeout;
+  let args;
+  let context;
+  let timestamp;
+  let result;
 
   const later = () => {
     // 据上一次触发时间间隔
@@ -138,7 +147,7 @@ export function debounce(func, wait, immediate) {
   };
 
   // eslint-disable-next-line func-names
-  return function (...args) {
+  return function(...args) {
     context = this;
     timestamp = +new Date();
     const callNow = immediate && !timeout;
@@ -177,7 +186,7 @@ export function scientificNotation(num, fix) {
   const absd = Math.abs(num);
   if (absd > 10000) {
     const numLen = absd.toString().length - 1;
-    num = `${num / Math.pow(10, numLen)}e+${numLen}`;
+    num = `${num / 10 ** numLen}e+${numLen}`;
   } else if (absd < 0.01 && absd !== 0) {
     const dString = absd.toString();
     let i = 3;
@@ -186,7 +195,7 @@ export function scientificNotation(num, fix) {
         break;
       }
     }
-    num = `${(num * Math.pow(10, i - 1)).toFixed(fix)}e-${i - 1}`;
+    num = `${(num * 10 ** i - 1).toFixed(fix)}e-${i - 1}`;
   } else {
     num = num.toFixed(fix);
   }
@@ -243,7 +252,7 @@ export function convertMapToList(map, key = 'key', value = 'value') {
   const list = [];
   map = map || {};
   const mapKeyList = Object.keys(map);
-  mapKeyList.forEach(mapKey => {
+  mapKeyList.forEach((mapKey) => {
     const obj = {};
     obj[key] = mapKey;
     obj[value] = map[mapKey];
@@ -260,20 +269,19 @@ export function stringIsValidPythonVariable(str) {
   return pattern.test(str);
 }
 
-
 const _toTree = (data) => {
   const result = [];
   if (!Array.isArray(data)) {
     return result;
   }
-  data.forEach(item => {
+  data.forEach((item) => {
     delete item.children;
   });
   const map = {};
-  data.forEach(item => {
+  data.forEach((item) => {
     map[item.id] = item;
   });
-  data.forEach(item => {
+  data.forEach((item) => {
     const parent = map[item.pid];
     if (parent) {
       (parent.children || (parent.children = [])).push(item);
@@ -286,7 +294,7 @@ const _toTree = (data) => {
 
 /**
  * minio数据转成树形结构
- * @param {string} filepath minio的路径 
+ * @param {string} filepath minio的路径
  * @returns {list} [treeList, expandedKeys] 树形结构，和默认展开的元素
  */
 export const getTreeListFromFilepath = async (filepath) => {
@@ -296,25 +304,25 @@ export const getTreeListFromFilepath = async (filepath) => {
   }
   // 1，获取minio的数据
   const tmp = await window.minioClient.listObjects(filepath);
-  if(!tmp || !tmp.length){
+  if (!tmp || !tmp.length) {
     return [[], []];
   }
   const minioList = [];
   for (const item of tmp) {
-    minioList.push(item.name.replace(filepath, ""));
+    minioList.push(item.name.replace(filepath, ''));
   }
   // 2 转成平级数据
   const dataList = [];
   const keyList = []; // 去重用
   for (const filename of minioList) {
-    const list = filename.split("/");
+    const list = filename.split('/');
     list.forEach((item, index) => {
       const p = {
         pid: index === 0 ? 9999 : `${index - 1}_${list[index - 1]}`,
         id: `${index}_${item}`,
         name: item,
-        originPath: filepath + list.slice(0,index+1).join('/'),
-        isFile: index === list.length-1,
+        originPath: filepath + list.slice(0, index + 1).join('/'),
+        isFile: index === list.length - 1,
       };
       const key = `${p.pid}_${p.id}`;
       if (keyList.indexOf(key) === -1) {
@@ -325,7 +333,7 @@ export const getTreeListFromFilepath = async (filepath) => {
   }
   // 2.1 最外层单独封装一层
   const tmp2 = filepath.split('/');
-  const wrapperNodeName = tmp2[tmp2.length-2];
+  const wrapperNodeName = tmp2[tmp2.length - 2];
   const wrapperNode = {
     pid: 0,
     id: 9999,
@@ -339,9 +347,9 @@ export const getTreeListFromFilepath = async (filepath) => {
   // 4 显示默认展开的层级，默认二级
   const expandedKeys = [];
   for (const item of treeList) {
-    expandedKeys.push(item.id);
-    for(const item2 of item.children){
-      expandedKeys.push(item2.id);
+    expandedKeys.push(item.originPath);
+    for (const item2 of item.children) {
+      expandedKeys.push(item2.originPath);
     }
   }
   // 返回数据
@@ -366,7 +374,9 @@ export function getQueueMessage() {
   let msgInstance = null;
 
   const callMsg = () => {
-    if (msgInstance || !msgQueue.length) { return; }
+    if (msgInstance || !msgQueue.length) {
+      return;
+    }
 
     const msgOption = msgQueue.shift();
     msgInstance = Message({
@@ -380,7 +390,7 @@ export function getQueueMessage() {
       },
     });
   };
-  return async msgOption => {
+  return async (msgOption) => {
     msgQueue.push(msgOption);
     callMsg();
   };
@@ -390,6 +400,20 @@ export function updateTitle(title) {
   document.title = title ? `${title} - ${Config.title}` : Config.title;
 }
 
+/**
+ * 从一个 Key-Object 的对象中，取 Object[field] 字段返回一个新的 Key-Object[field] 的对象
+ * @param {Object} originMap value 为 Object 的一个对象
+ * @param {String} field value 对象中的某一个 Key
+ * @returns {Object} 结构为 Key-Object[field] 的对象
+ */
+export function generateMap(originMap, field) {
+  const map = Object.create(null);
+  Object.keys(originMap).forEach((key) => {
+    map[key] = originMap[key][field];
+  });
+  return map;
+}
+
 // 筛选部分会导致 minio 上传错误的字符
 const invalidChars = ['#', '%', '^'];
 
@@ -402,4 +426,138 @@ const invalidFileNameCharJudge = (file) => {
   return false;
 };
 
-export const invalidFileNameChar = new FileFilter(invalidFileNameCharJudge, `文件名包含不合法字符: ${invalidChars.join('、')}`);
+export const invalidFileNameChar = new FileFilter(
+  invalidFileNameCharJudge,
+  `文件名包含不合法字符: ${invalidChars.join('、')}`
+);
+
+// CPU 使用量计算
+export function cpuPercentage(used, usedUnit, total, totalUnit) {
+  const _transition = (num, unit) => {
+    switch (unit) {
+      case '':
+        num *= 1e9;
+        break;
+      case 'm':
+        num *= 1e6;
+        break;
+      // no default
+    }
+    return num;
+  };
+  return Math.round((_transition(used, usedUnit) / _transition(total, totalUnit)) * 10000) / 100;
+}
+
+// 内存单位归一化，目前支持单位为 Ki/Mi/Gi
+export function memNormalize(num, fromUnit, toUnit = 'Gi') {
+  const memUnitList = ['Ki', 'Mi', 'Gi']; // 内存单位数组，按顺序排列
+
+  let fromIndex = memUnitList.indexOf(fromUnit);
+  const toIndex = memUnitList.indexOf(toUnit);
+
+  // 如果 fromUnit 或 toUnit 不在单位列表中，或者单位已经一致，则直接返回
+  if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
+    return num;
+  }
+
+  // fromUnit 比较大时
+  if (fromIndex > toIndex) {
+    while (fromIndex !== toIndex) {
+      num *= 1024;
+      fromIndex -= 1;
+    }
+    return num;
+  }
+  // fromUnit 比较小时
+  while (fromIndex !== toIndex) {
+    num /= 1024;
+    fromIndex += 1;
+  }
+  return num;
+}
+
+// 内存使用量计算
+export function memPercentage(used, usedUnit, total, totalUnit) {
+  const _transition = (num, unit) => {
+    switch (unit) {
+      case 'Gi':
+        num *= 2 ** 20;
+        break;
+      case 'Mi':
+        num *= 2 ** 10;
+        break;
+      // no default
+    }
+    return num;
+  };
+  return Math.round((_transition(used, usedUnit) / _transition(total, totalUnit)) * 10000) / 100;
+}
+
+export function toUnixTimestamp(time) {
+  return Math.round(time / 1000);
+}
+
+/**
+ * 返回一个函数，函数的入参为 null 或 undefined 或空字符串时，展示指定的空白内容
+ * @param {String} emptyText
+ * @returns {Function}
+ */
+export function getEmptyFormatter(emptyText = '--') {
+  return function emptyFormatter(value) {
+    if (isNil(value) || value === '') {
+      return emptyText;
+    }
+    return value;
+  };
+}
+
+// 文件大小格式化
+export function fileSizeFormatter(fileSize) {
+  // eslint-disable-next-line no-restricted-globals
+  if (isNaN(fileSize)) return '-';
+  if (fileSize === 0) return '0Bytes';
+  const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const index = Math.floor(Math.log(fileSize) / Math.log(1024));
+  const size = fileSize / 1024 ** index;
+  return size.toFixed(2) + unitArr[index];
+}
+
+/**
+ * 根据树结构获取叶节点列表
+ * @param {Array} nodes 父节点列表
+ * @param {Array} target 引用数组，用于存储叶节点
+ * @returns {Array} 返回 target 对象
+ */
+export function checkLeafNode(nodes, target) {
+  nodes.forEach((node) => {
+    if (node.children) {
+      checkLeafNode(node.children, target);
+    } else {
+      target.push(node);
+    }
+  });
+  return target;
+}
+
+// 用于防止回调函数未定义
+export const runFunc = (func, ...args) => {
+  if (typeof func === 'function') {
+    func(...args);
+  }
+};
+
+// 格式化时长
+export function durationTrans(time) {
+  let duration = '';
+  let h = parseInt(time / 3600, 10);
+  let m = parseInt((time % 3600) / 60, 10);
+  let s = parseInt((time % 3600) % 60, 10);
+  if (h > 0) {
+    h = h < 10 ? `0${h}` : h;
+    duration += `${h}:`;
+  }
+  m = m < 10 ? `0${m}` : m;
+  s = s < 10 ? `0${s}` : s;
+  duration += `${m}:${s}`;
+  return duration;
+}
diff --git a/webapp/src/utils/validate.js b/webapp/src/utils/validate.js
index dd80408..cebefdb 100644
--- a/webapp/src/utils/validate.js
+++ b/webapp/src/utils/validate.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 /**
  * validate，校验函数
@@ -21,29 +21,35 @@
 import { isPlainObject } from 'lodash';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { required } from 'vee-validate/dist/rules';
+import { isEmptyValue } from './base';
 import { stringIsValidPythonVariable } from './utils';
 
 // 全站名称统一为中文、英文、数字，下划线和中划线
-const isValidName = value => {
+const isValidName = (value) => {
   return /^[\u4E00-\u9FA5\w-]+$/.test(value) && value.length <= 50;
 };
 
-const isValidNameWithHyphen = value => {
+const isValidNameWithHyphen = (value) => {
   return /^[\u4E00-\u9FA5A-Za-z0-9_-]+$/.test(value);
 };
 
+const isValidAlphabetNumHyphenUnderline = (value) => {
+  return /^[A-Za-z0-9_-]+$/.test(value);
+};
+
 // 有效的病灶位置信息
-const isValidLesionSliceNumber = value => {
+const isValidLesionSliceNumber = (value) => {
   // 数字开头，后面接`,数字`结束，重复0或任意次
   return /^[1-9][0-9]*(,[0-9]+)*$/.test(value);
 };
 
 // 有效的病灶位置信息
-const isValidLesionId = value => {
+const isValidLesionId = (value) => {
   // 必须为数字
-  if(isNaN(value)) return false;
+  // eslint-disable-next-line
+  if (isNaN(value)) return false;
   // 必须不能有小数点
-  if(String(value).indexOf('.') > -1) return false;
+  if (String(value).indexOf('.') > -1) return false;
   // 数字长度限制
   return value < 1000000000 && value > 0;
 };
@@ -162,6 +168,12 @@ export function isValidText(name) {
   return reg.test(name);
 }
 
+// 图片文件格式校验
+export function isValidImg(name) {
+  const reg = /\.(jpg|png|bmp|jpeg)$/;
+  return reg.test(name);
+}
+
 /**
  * @param {string} str
  * @returns {Boolean}
@@ -218,6 +230,40 @@ export function validateNameWithHyphen(rule, value, callback) {
   }
 }
 
+/**
+ * 是否合法名称，包含大小写字母、数字、下划线、横杠
+ * @param rule
+ * @param value
+ * @param callback
+ */
+export function validateAlphabetNumHyphenUnderline(rule, value, callback) {
+  if (value === '' || value == null) {
+    callback();
+  } else if (!isValidAlphabetNumHyphenUnderline(value)) {
+    callback(new Error('仅支持字母、数字、英文横杠和下划线'));
+  } else {
+    callback();
+  }
+}
+
+/**
+ * 根据传入的正则规则和错误提示，返回 el-form 的规则校验方法
+ * @param {RegExp} re
+ * @param {String} errorMsg
+ * @returns
+ */
+export function getRegValidator(re, errorMsg = '不符合校验规则') {
+  return (rule, value, callback) => {
+    if (value === '' || value == null) {
+      callback();
+    } else if (!re.test(value)) {
+      callback(new Error(errorMsg));
+    } else {
+      callback();
+    }
+  };
+}
+
 /**
  * 是否合法账号名
  * @param rule
@@ -267,7 +313,7 @@ export function validateIP(rule, value, callback) {
     callback();
   } else {
     const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
-    if ((!reg.test(value)) && value !== '') {
+    if (!reg.test(value) && value !== '') {
       callback(new Error('请输入正确的IP地址'));
     } else {
       callback();
@@ -280,13 +326,16 @@ export function validateIdNo(rule, value, callback) {
   const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
   if (value === '' || value == null) {
     callback();
-  } else if ((!reg.test(value)) && value !== '') {
+  } else if (!reg.test(value) && value !== '') {
     callback(new Error('请输入正确的身份证号码'));
   } else {
     callback();
   }
 }
 
+// 移除 html tag
+export const stripeHtmlTag = (origin) => origin.replace(/(<([^>]+)>)/gi, '');
+
 /**
  * 是否合法 Python 命令
  * @param rule
@@ -305,7 +354,7 @@ export function validateRunCommand(rule, value, callback) {
   }
 }
 
-const isInputEmpty = value => {
+const isInputEmpty = (value) => {
   return value === '' || value === null;
 };
 
@@ -317,30 +366,43 @@ export function pythonKeyValidator(errorMsg) {
       callback();
     }
   };
-};
+}
 
 // 校验标签组基本方法
 export const validateLabelsUtil = (value) => {
-  if(!isPlainObject(value)) {
+  if (!isPlainObject(value)) {
     return '标签不能为空';
   }
-  if(!value.name) {
+  if (!value.name) {
     return '标签格式异常，请检查';
   }
-  if(!value.color) {
+  if (!value.color) {
     return '标签颜色不能为空';
   }
-  if(!/^#[0-9A-F]{6}$/i.test(value.color)) {
+  if (!/^#[0-9A-F]{6}$/i.test(value.color)) {
     return '标签颜色格式不对';
   }
-    return '';
+  return '';
 };
 
 export function validateLabel(rule, value, callback) {
   const validateResult = validateLabelsUtil(value);
-  if(validateResult !== '') {
+  if (validateResult !== '') {
     callback(new Error(validateResult));
     return;
   }
   callback();
 }
+
+export function validateJSON(rule, value, callback) {
+  if (isEmptyValue(value)) {
+    callback();
+    return;
+  }
+  try {
+    JSON.parse(value);
+  } catch (e) {
+    callback(new Error('请输入正确的 json 格式'));
+  }
+  callback();
+}
diff --git a/webapp/src/utils/zip.js b/webapp/src/utils/zip.js
index 0048f27..26f605f 100644
--- a/webapp/src/utils/zip.js
+++ b/webapp/src/utils/zip.js
@@ -1,26 +1,26 @@
 /*
-* The MIT License (MIT)
-*
-* Copyright (c) 2016 Jimmy Karl Roland Wärting
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy
-* of this software and associated documentation files (the "Software"), to deal
-* in the Software without restriction, including without limitation the rights
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-* copies of the Software, and to permit persons to whom the Software is
-* furnished to do so, subject to the following conditions:
-*
-* The above copyright notice and this permission notice shall be included in all
-* copies or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-* SOFTWARE.
-*/
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016 Jimmy Karl Roland Wärting
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
 
 /* eslint-disable */
 
diff --git a/webapp/src/views/algorithm/components/algorithmForm.vue b/webapp/src/views/algorithm/components/algorithmForm.vue
new file mode 100644
index 0000000..1576d93
--- /dev/null
+++ b/webapp/src/views/algorithm/components/algorithmForm.vue
@@ -0,0 +1,520 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+    <div v-if="isFork" class="tip fork-tip">
+      以下操作将按照预置算法的配置生成一份您的算法，进而可以做后续配置。
+    </div>
+    <el-form-item label="名称" prop="algorithmName">
+      <el-input
+        id="algorithmName"
+        v-model.trim="form.algorithmName"
+        placeholder
+        maxlength="32"
+        show-word-limit
+        style="width: 300px;"
+      />
+    </el-form-item>
+    <el-form-item label="描述" prop="description">
+      <el-input
+        id="description"
+        v-model="form.description"
+        type="textarea"
+        :rows="3"
+        placeholder
+        style="width: 600px;"
+        maxlength="255"
+        show-word-limit
+      />
+    </el-form-item>
+    <el-form-item v-if="isAdmin && !isFork && !isServing" label="算法来源" prop="algorithmSource">
+      <el-radio-group v-model="form.algorithmSource" @change="onAlgorithmSourceChange">
+        <el-radio :label="ALGORITHM_RESOURCE_ENUM.CUSTOM" border class="mr-0">我的算法</el-radio>
+        <el-radio :label="ALGORITHM_RESOURCE_ENUM.PRESET" border>预置算法</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item v-show="!isFork && !isServing" label="支持推理" prop="inference">
+      <el-switch id="inference" v-model="form.inference" @change="onInferenceChange" />
+    </el-form-item>
+    <el-form-item v-show="!form.inference" label="模型类别" prop="algorithmUsage">
+      <el-select
+        id="algorithmUsage"
+        v-model="form.algorithmUsage"
+        placeholder="请选择或输入模型类别"
+        filterable
+        clearable
+        allow-create
+        @change="onAlgorithmUsageChange"
+      >
+        <el-option
+          v-for="item in algorithmUsageList"
+          :key="item.id"
+          :label="item.auxInfo"
+          :value="item.auxInfo"
+        >
+          <span style="float: left;">{{ item.auxInfo }}</span>
+          <el-button
+            v-if="!item.isDefault"
+            class="select-del-btn"
+            type="text"
+            @click.stop="delAlgorithmUsage(item)"
+            ><i class="el-icon-close"
+          /></el-button>
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item v-show="formType !== 'fork'" ref="codeDirRef" label="上传代码包" prop="codeDir">
+      <upload-inline
+        ref="uploadRef"
+        action="fakeApi"
+        :accept="form.inference ? '.py' : '.zip'"
+        :acceptSize="algorithmConfig.uploadFileAcceptSize"
+        :acceptSizeFormat="uploadSizeFomatter"
+        list-type="text"
+        :show-file-count="false"
+        :params="uploadParams"
+        :auto-upload="true"
+        :filters="uploadFilters"
+        :limit="1"
+        :on-remove="onFileRemove"
+        @uploadStart="uploadStart"
+        @uploadSuccess="uploadSuccess"
+        @uploadError="uploadError"
+      />
+      <upload-progress
+        v-if="uploading"
+        :progress="progress"
+        :color="defaultProcessColors"
+        :status="status"
+        :size="size"
+        @onSetProgress="onSetProgress"
+      />
+    </el-form-item>
+    <template v-if="form.algorithmSource === ALGORITHM_RESOURCE_ENUM.PRESET && !form.inference">
+      <el-form-item ref="imageTag" label="镜像选择" prop="imageTag">
+        <el-select
+          id="imageName"
+          v-model="form.imageName"
+          placeholder="请选择镜像"
+          class="w-200"
+          clearable
+          filterable
+          @change="onImageNameChange"
+        >
+          <el-option v-for="item in imageNameList" :key="item" :label="item" :value="item" />
+        </el-select>
+        <el-select
+          id="imageTag"
+          v-model="form.imageTag"
+          placeholder="请选择镜像版本"
+          class="w-200"
+          clearable
+          filterable
+        >
+          <el-option
+            v-for="(item, index) in imageTagList"
+            :key="index"
+            :label="item.imageTag"
+            :value="item.imageTag"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item ref="runCommand" label="运行命令" prop="runCommand">
+        <el-input
+          id="runCommand"
+          v-model="form.runCommand"
+          placeholder="例如：python mnist.py"
+          style="max-width: 500px;"
+        />
+      </el-form-item>
+      <!--运行参数-->
+      <RunParamForm
+        ref="runParamCompRef"
+        :run-param-obj="form.runParams || {}"
+        prop="runParams"
+        param-label-width="120px"
+        class="w120"
+        @updateRunParams="updateRunParams"
+      />
+    </template>
+    <el-form-item v-show="!form.inference" label="文件输出" prop="isTrainOut">
+      <el-switch id="isTrainOut" v-model="form.isTrainOut" />
+    </el-form-item>
+    <el-form-item v-show="!form.inference" label="可视化日志" prop="isVisualizedLog">
+      <el-switch id="isVisualizedLog" v-model="form.isVisualizedLog" />
+    </el-form-item>
+    <div class="tip">
+      <ol v-show="!form.inference">
+        <li>请确保代码中包含“train_model_out”参数用于接收训练的模型输出路径</li>
+        <li>
+          如需断点续训或加载已有模型，请确保代码中包含“model_load_dir”参数用于接收训练模型路径
+        </li>
+        <li>如需文件输出，请确保代码中包含“train_out”参数用于接收文件输出路径</li>
+        <li>
+          如需训练过程可视化，请确保代码中包含“train_visualized_log”参数用于接收训练的可视化日志路径，目前仅支持
+          OneFlow 框架
+        </li>
+        <li>
+          如需使用分布式训练，请确保代码中包含“num_nodes”参数和“node_ips”参数用于接收分布式相关参数
+        </li>
+        <li>
+          如需使用 GPU
+          训练，请确保代码中包含“gpu_num_per_node”参数接收相关参数，后台将自动获取并填充
+        </li>
+      </ol>
+      <span v-show="form.inference">
+        推理脚本模板详见<el-link type="primary" target="_blank" :href="docUrl">文档</el-link>
+      </span>
+    </div>
+  </el-form>
+</template>
+
+<script>
+import { computed, reactive, ref, toRefs } from '@vue/composition-api';
+import { Message } from 'element-ui';
+
+import {
+  validateNameWithHyphen,
+  uploadSizeFomatter,
+  getUniqueId,
+  invalidFileNameChar,
+  defaultProcessColors,
+  ALGORITHM_RESOURCE_ENUM,
+} from '@/utils';
+import UploadInline from '@/components/UploadForm/inline';
+import UploadProgress from '@/components/UploadProgress';
+import RunParamForm from '@/components/Training/runParamForm';
+import { useMapGetters } from '@/hooks';
+import { algorithmConfig } from '@/config';
+import {
+  list as getAlgoUsages,
+  add as addAlgoUsage,
+  del as deleteAlgoUsage,
+} from '@/api/algorithm/algorithmUsage';
+import { getImageNameList, getImageTagList } from '@/api/trainingImage';
+import { IMAGE_PROJECT_TYPE } from '@/views/trainingJob/utils';
+
+const defaultForm = {
+  id: null,
+  algorithmName: null,
+  algorithmSource: ALGORITHM_RESOURCE_ENUM.CUSTOM,
+  algorithmUsage: null,
+  imageName: null, // 预置镜像名
+  imageTag: null, // 预置镜像版本
+  description: null,
+  codeDir: null,
+  runCommand: null,
+  runParams: {},
+  accuracy: null,
+  p4InferenceSpeed: null,
+  isTrainOut: true,
+  isTrainModelOut: true,
+  isVisualizedLog: true,
+  inference: false,
+  fork: false,
+};
+
+export default {
+  name: 'AlgorithmForm',
+  components: {
+    UploadInline,
+    UploadProgress,
+    RunParamForm,
+  },
+  props: {
+    formType: {
+      type: String,
+      default: 'add', // 创建-add / Fork-fork / Serving 上传推理脚本-serving
+    },
+  },
+  setup(props) {
+    // 状态
+    const state = reactive({
+      algorithmUsageList: [], // 算法用途列表
+      imageNameList: [], // 镜像名列表
+      imageTagList: [], // 镜像版本列表
+      uploading: false, // 上传算法 Loading
+      size: 0, // 文件大小
+      progress: 0, // 虚拟进度
+      uploadParams: {
+        objectPath: null, // 对象存储路径
+      },
+    });
+    // store
+    const { user, isAdmin } = useMapGetters(['user', 'isAdmin']);
+    // computed
+    const isFork = computed(() => props.formType === 'fork');
+    const isServing = computed(() => props.formType === 'serving');
+    const status = computed(() => (state.progress === 100 ? 'success' : null));
+    const docUrl = computed(() => {
+      return `${process.env.VUE_APP_DOCS_URL}module/cloud-serving/online-deployment/online-create`;
+    });
+
+    // 表单引用
+    const formRef = ref(null);
+    const uploadRef = ref(null);
+    const codeDirRef = ref(null);
+    const runParamCompRef = ref(null);
+    // 表单
+    const form = reactive({
+      ...defaultForm,
+      runParams: {},
+    });
+    const assignForm = (newForm = {}) => {
+      Object.assign(form, newForm);
+    };
+    let runParamObj = {};
+    // rules
+    const rules = {
+      algorithmName: [
+        {
+          required: true,
+          message: '请输入算法名称',
+          trigger: 'blur',
+        },
+        {
+          max: 32,
+          message: '长度不超过32个字符',
+          trigger: ['blur', 'change'],
+        },
+        {
+          validator: validateNameWithHyphen,
+          trigger: ['blur', 'change'],
+        },
+      ],
+      algorithmSource: [{ required: true, message: '请选择算法来源', trigger: 'change' }],
+      codeDir: [
+        {
+          required: true,
+          message: '请选择上传代码',
+          trigger: ['blur', 'manual'],
+        },
+      ],
+    };
+
+    // 表单列表数据
+    // 算法用途
+    const getAlgorithmUsages = () => {
+      getAlgoUsages({
+        isContainDefault: true,
+        current: 1,
+        size: 1000,
+      }).then((res) => {
+        state.algorithmUsageList = res.result;
+      });
+    };
+    const createAlgorithmUsage = async (auxInfo) => {
+      await addAlgoUsage({ auxInfo });
+      getAlgorithmUsages();
+    };
+    const delAlgorithmUsage = async (usage) => {
+      await deleteAlgoUsage({ ids: [usage.id] });
+      if (form.algorithmUsage === usage.auxInfo) {
+        form.algorithmUsage = null;
+      }
+      getAlgorithmUsages();
+    };
+    // 镜像选择
+    // 获取镜像版本列表
+    const getImageTags = async (imageName, keepValue = false) => {
+      state.imageTagList = await getImageTagList({
+        projectType: IMAGE_PROJECT_TYPE.TRAIN,
+        imageName,
+      });
+      if (keepValue && form.imageTag && !state.imageTagList.includes(form.imageTag)) {
+        Message.warning('原有镜像版本不存在，请重新选择');
+        form.imageTag = null;
+      }
+    };
+    // 获取镜像名列表
+    const getImageNames = async (keepValue = false) => {
+      state.imageNameList = await getImageNameList({ projectType: IMAGE_PROJECT_TYPE.TRAIN });
+      if (!keepValue || !form.imageName) {
+        form.imageTag = null;
+      } else if (!state.imageNameList.includes(form.imageName)) {
+        Message.warning('原有镜像不存在，请重新选择');
+        form.imageName = form.imageTag = null;
+      } else {
+        getImageTags(form.imageName, true);
+      }
+    };
+
+    // Handler
+    const onAlgorithmSourceChange = () => {
+      form.runCommand = null;
+      runParamObj = {};
+    };
+    const onInferenceChange = () => {
+      uploadRef.value.formRef.reset();
+      form.codeDir = null;
+    };
+    const onAlgorithmUsageChange = (value) => {
+      const usageRes = state.algorithmUsageList.find((usage) => usage.auxInfo === value);
+      if (value && !usageRes) {
+        createAlgorithmUsage(value);
+      }
+    };
+    const onImageNameChange = (imageName) => {
+      form.imageTag = null;
+      if (imageName) {
+        getImageTags(imageName);
+        return;
+      }
+      state.imageTagList = [];
+    };
+    const updateRunParams = (params) => {
+      runParamObj = params;
+    };
+    // 上传事件处理
+    const updateObjectPath = () => {
+      state.uploadParams.objectPath = `upload-temp/${user.id}/${getUniqueId()}`;
+    };
+    const onFileRemove = () => {
+      form.codeDir = null;
+      state.uploading = false;
+      codeDirRef.value.validate('manual');
+    };
+    const uploadStart = (files) => {
+      updateObjectPath();
+      [state.uploading, state.size, state.progress] = [true, files.size, 0];
+    };
+    const onSetProgress = (val) => {
+      state.progress += val;
+    };
+    const uploadSuccess = (res) => {
+      state.progress = 100;
+      setTimeout(() => {
+        state.uploading = false;
+      }, 1000);
+      if (state.uploading) {
+        form.codeDir = res[0].data.objectName;
+        codeDirRef.value.validate('manual');
+      }
+    };
+    const uploadError = () => {
+      Message.error('上传文件失败');
+      state.uploading = false;
+    };
+
+    // 入口方法
+    const initForm = (newForm = {}) => {
+      assignForm(newForm);
+      getAlgorithmUsages();
+      updateObjectPath();
+      // 只能 Fork 为我的算法，因此不需要获取镜像列表
+      if (!isFork.value) {
+        getImageNames(true);
+      }
+    };
+    // 重置表单
+    const resetForm = () => {
+      assignForm({
+        ...defaultForm,
+        runParams: {},
+      });
+      uploadRef.value.formRef.reset();
+    };
+    // 表单验证
+    const validate = (resolve, reject) => {
+      let valid = true;
+      formRef.value.validate((isValid) => {
+        valid = valid && isValid;
+      });
+      if (form.algorithmSource === ALGORITHM_RESOURCE_ENUM.PRESET && !form.inference) {
+        const runParamValid = runParamCompRef.value.validate();
+        if (!runParamValid) {
+          Message.warning('运行参数不合法');
+        } else {
+          form.runParams = { ...runParamObj };
+        }
+        valid = valid && runParamValid;
+      }
+      if (valid) {
+        if (typeof resolve === 'function') {
+          return resolve(form);
+        }
+        return true;
+      }
+      if (typeof reject === 'function') {
+        return reject(form);
+      }
+      return false;
+    };
+
+    return {
+      ALGORITHM_RESOURCE_ENUM,
+      algorithmConfig,
+      uploadSizeFomatter,
+      uploadFilters: [invalidFileNameChar],
+      defaultProcessColors,
+
+      ...toRefs(state),
+      isAdmin,
+      isFork,
+      isServing,
+      status,
+      docUrl,
+
+      formRef,
+      uploadRef,
+      codeDirRef,
+      runParamCompRef,
+      form,
+      rules,
+
+      delAlgorithmUsage,
+
+      onAlgorithmSourceChange,
+      onInferenceChange,
+      onAlgorithmUsageChange,
+      onImageNameChange,
+      updateRunParams,
+      onFileRemove,
+      uploadStart,
+      onSetProgress,
+      uploadSuccess,
+      uploadError,
+
+      initForm,
+      resetForm,
+      validate,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.tip {
+  padding: 12px 20px;
+  color: #f38900;
+  background: #ffe9cc;
+
+  ol {
+    padding-left: 20px;
+    margin: 14px 0;
+
+    li {
+      line-height: 24px;
+      list-style-type: decimal;
+    }
+  }
+}
+
+.fork-tip {
+  margin: -10px 0 10px;
+}
+</style>
diff --git a/webapp/src/views/algorithm/index.vue b/webapp/src/views/algorithm/index.vue
index 4fc153c..d7ab92c 100644
--- a/webapp/src/views/algorithm/index.vue
+++ b/webapp/src/views/algorithm/index.vue
@@ -1,387 +1,132 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
-    <!--工具栏-->
-    <div class="head-container">
-      <cdOperation :addProps="operationProps">
-        <span slot="right">
-          <el-input
-            id="algorithmName"
-            v-model="localQuery.algorithmName"
-            clearable
-            placeholder="请输入算法名称或 ID"
-            style="width: 200px;"
-            class="filter-item"
-            @keyup.enter.native="crud.toQuery"
-            @clear="crud.toQuery"
-          />
-          <el-input
-            id="algorithmUsage"
-            v-model="localQuery.algorithmUsage"
-            clearable
-            placeholder="请输入算法用途"
-            style="width: 200px;"
-            class="filter-item"
-            @keyup.enter.native="crud.toQuery"
-            @clear="crud.toQuery"
-          />
-          <rrOperation class="fr search-btns" @resetQuery="onResetQuery" />
-        </span>
-      </cdOperation>
-      <div>
-        <el-tabs v-model="active" class="eltabs-inlineblock" @tab-click="handleClick">
-          <el-tab-pane id="tab_0" label="我的算法" name="1" />
-          <el-tab-pane id="tab_1" label="预置算法" name="2" />
-        </el-tabs>
-      </div>
-    </div>
-    <!--表格渲染-->
-    <el-table
-      ref="table"
-      v-loading="crud.loading || disableEdit"
-      :data="crud.data"
-      highlight-current-row
-      @selection-change="crud.selectionChangeHandler"
-      @sort-change="crud.sortChange"
+    <ProTable
+      ref="proTable"
+      create-title="上传算法"
+      :create-disabled="isPreset && !isAdmin"
+      :columns="columns"
+      :form-items="queryFormItems"
+      :tabs="tabs"
+      :list-request="list"
+      :list-options="listOptions"
+      @add="doAdd"
+      @tab-change="handleTabClick"
       @row-click="goDetail"
-    >
-      <el-table-column v-if="isCustom" prop="id" label="ID" width="80" sortable="custom" fixed />
-      <el-table-column prop="algorithmName" label="名称" fixed />
-      <el-table-column prop="algorithmUsage" label="算法用途" min-width="100px">
-        <template slot-scope="scope">
-          {{ scope.row.algorithmUsage || '--' }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="description"
-        label="描述"
-        min-width="200px"
-        show-overflow-tooltip
-      />
-      <el-table-column
-        prop="createTime"
-        label="创建时间"
-        min-width="160px"
-      >
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="370px" fixed="right">
-        <template slot-scope="scope">
-          <el-button v-if="isCustom" :id="`goEdit_`+scope.$index" type="text" @click.stop="goEdit(scope.row)">在线编辑</el-button>
-          <el-button :id="`goTraining_`+scope.$index" type="text" @click.stop="goTraining(scope.row)">创建训练任务</el-button>
-          <el-button :id="`goDownload_`+scope.$index" type="text" @click.stop="goDownload(scope.row)">下载</el-button>
-          <el-button v-if="isPreset" :id="`doFork_`+scope.$index" type="text" @click.stop="doFork(scope.row)">fork</el-button>
-          <el-dropdown v-if="isCustom">
-            <el-button type="text" style="margin-left: 10px;" @click.stop>
-              更多<i class="el-icon-arrow-down el-icon--right" />
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item :id="`doFork_`+scope.$index" @click.native="doFork(scope.row)">
-                <el-button type="text">fork</el-button>
-              </el-dropdown-item>
-              <el-dropdown-item v-if="isCustom" :id="`doDelete_`+scope.$index" @click.native="doDelete(scope.row.id)">
-                <el-button type="text">删除</el-button>
-              </el-dropdown-item>
-            </el-dropdown-menu></el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页组件-->
-    <pagination />
+    />
     <!--表单组件-->
     <BaseModal
-      :before-close="crud.cancelCU"
-      :visible="crud.status.cu > 0"
+      :visible.sync="formVisible"
       :title="formType === 'add' ? '上传算法' : 'fork生成算法'"
-      :loading="crud.status.cu === 2"
-      :disabled="uploading"
+      :loading="formSubmitting"
       width="800px"
       @close="onDialogClose"
-      @cancel="crud.cancelCU"
-      @ok="crud.submitCU"
+      @cancel="formVisible = false"
+      @ok="onSubmitForm"
     >
-      <div v-if="formType === 'fork'">以下操作将按照预置算法的配置生成一份您的算法，进而可以做后续配置。</div>
-      <el-form
-        ref="form"
-        :model="form"
-        :rules="rules"
-        label-width="100px"
-      >
-        <el-form-item label="名称" prop="algorithmName">
-          <el-input
-            id="algorithmName"
-            v-model.trim="form.algorithmName"
-            placeholder
-            maxlength="32"
-            show-word-limit
-            style="width: 300px;"
-          />
-        </el-form-item>
-        <el-form-item label="描述" prop="description">
-          <el-input
-            id="description"
-            v-model="form.description"
-            type="textarea"
-            :rows="3"
-            placeholder
-            style="width: 600px;"
-            maxlength="255"
-            show-word-limit
-          />
-        </el-form-item>
-        <el-form-item label="算法用途" prop="algorithmUsage">
-          <el-select
-            id="algorithmUsage"
-            v-model="form.algorithmUsage"
-            placeholder="请选择或输入算法用途"
-            filterable
-            clearable
-            allow-create
-            @change="onAlgorithmUsageChange"
-          >
-            <el-option
-              v-for="item in algorithmUsageList"
-              :key="item.id"
-              :label="item.auxInfo"
-              :value="item.auxInfo"
-            >
-              <span style="float: left;">{{ item.auxInfo }}</span>
-              <el-button
-                v-if="!item.isDefault"
-                class="select-del-btn"
-                type="text"
-                @click.stop="delAlgorithmUsage(item)"
-              ><i class="el-icon-close" /></el-button>
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item v-show="formType !== 'fork'" ref="codeDir" label="上传代码包" prop="codeDir">
-          <div v-if="formType === 'fork' && form.codeDir">源代码包：
-            <el-button id="goDownload" type="text" @click="goDownload(form)">下载</el-button>
-          </div>
-          <upload-inline
-            v-if="crud.status.cu > 0"
-            ref="upload"
-            action="fakeApi"
-            accept=".zip"
-            :acceptSize="algorithmConfig.uploadFileAcceptSize"
-            :acceptSizeFormat="uploadSizeFomatter"
-            list-type="text"
-            :show-file-count="false"
-            :params="uploadParams"
-            :auto-upload="true"
-            :hash="false"
-            :filters="uploadFilters"
-            :limit="1"
-            :on-remove="onFileRemove"
-            @uploadStart="uploadStart"
-            @uploadSuccess="uploadSuccess"
-            @uploadError="uploadError"
-          />
-          <upload-progress
-            v-if="uploading" 
-            :progress="progress" 
-            :color="customColors" 
-            :status="status" 
-            :size="size" 
-            @onSetProgress="onSetProgress"
-          />    
-        </el-form-item>
-        <el-form-item label="训练输出" prop="isTrainOut" class="is-required">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="请确保代码中包含“train_out”参数用于接收训练的模型输出路径"
-            placement="right"
-          >
-            <i class="el-icon-warning-outline primary f18 vm" />
-          </el-tooltip>
-        </el-form-item>
-        <el-form-item label="断点续训">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="请确保代码中包含“model_load_dir”参数用于接收训练的断点路径"
-            placement="right"
-          >
-            <i class="el-icon-warning-outline primary f18 vm" />
-          </el-tooltip>
-        </el-form-item>
-        <el-form-item label="日志输出" prop="isTrainLog">
-          <el-checkbox id="isTrainLog" v-model="form.isTrainLog" />
-          <el-tooltip
-            v-show="form.isTrainLog"
-            class="item"
-            effect="dark"
-            content="请确保代码中包含“train_log”参数用于接收训练的日志输出路径"
-            placement="right"
-          >
-            <i class="el-icon-warning-outline primary f18 vm" />
-          </el-tooltip>
-        </el-form-item>
-        <el-form-item label="可视化日志" prop="isVisualizedLog">
-          <el-checkbox id="isVisualizedLog" v-model="form.isVisualizedLog" />
-          <el-tooltip
-            v-show="form.isVisualizedLog"
-            class="item"
-            effect="dark"
-            content="请确保代码中包含“train_visualized_log”参数用于接收训练的可视化日志路径，仅支持在训练时使用 oneflow 镜像"
-            placement="right"
-          >
-            <i class="el-icon-warning-outline primary f18 vm" />
-          </el-tooltip>
-        </el-form-item>
-      </el-form>
+      <AlgorithmForm ref="form" :form-type="formType" />
     </BaseModal>
     <!--右边侧边栏-->
-    <el-drawer
-      :visible.sync="drawer"
-      :with-header="false"
-      :direction="'rtl'"
-      size="36%"
-      :before-close="handleClose"
-    >
+    <el-drawer :visible.sync="drawer" :with-header="false" :direction="'rtl'" size="36%">
       <algorithm-detail :item="selectedItemObj" />
     </el-drawer>
   </div>
 </template>
 
 <script>
-import { downloadZipFromObjectPath, validateNameWithHyphen, getUniqueId, uploadSizeFomatter, invalidFileNameChar } from '@/utils';
-import CRUD, { presenter, header, form, crud } from '@crud/crud';
-import cdOperation from '@crud/CD.operation';
-import rrOperation from '@crud/RR.operation';
-import pagination from '@crud/Pagination';
-import crudAlgorithm, { del as deleteAlgorithm } from '@/api/algorithm/algorithm';
-import { list as getAlgorithmUsages, add as addAlgorithmUsage, del as deleteAlgorithmUsage } from '@/api/algorithm/algorithmUsage';
+import { mapGetters } from 'vuex';
+
+import { downloadZipFromObjectPath, ALGORITHM_RESOURCE_ENUM } from '@/utils';
+import { list, add, del as deleteAlgorithm } from '@/api/algorithm/algorithm';
+import { list as getAlgorithmUsages } from '@/api/algorithm/algorithmUsage';
 import { createNotebook, getNotebookAddress } from '@/api/development/notebook';
 import BaseModal from '@/components/BaseModal';
+import ProTable from '@/components/ProTable';
 import AlgorithmDetail from '@/components/Training/algorithmDetail';
-import UploadInline from '@/components/UploadForm/inline';
-import UploadProgress from '@/components/UploadProgress';
-import { algorithmConfig } from '@/config';
 
-const defaultForm = {
-  id: null,
-  algorithmName: null,
-  algorithmSource: null,
-  algorithmUsage: null,
-  description: null,
-  codeDir: null,
-  accuracy: null,
-  p4InferenceSpeed: null,
-  isTrainLog: true,
-  isTrainOut: true,
-  isVisualizedLog: true,
-  fork: false,
-};
+import { getColumns, getQueryFormItems } from './utils';
+import AlgorithmForm from './components/algorithmForm';
+
 export default {
   name: 'Algorithm',
   components: {
     BaseModal,
-    pagination,
-    cdOperation,
+    ProTable,
     AlgorithmDetail,
-    UploadInline,
-    rrOperation,
-    UploadProgress,
-  },
-  cruds() {
-    return CRUD({
-      title: '算法管理',
-      crudMethod: { ...crudAlgorithm },
-      optShow: {
-        del: false,
-      },
-      queryOnPresenterCreated: false, // created 时不请求数据
-      props: {
-        optText: {
-          add: '上传算法',
-        },
-        optTitle: {
-          add: '创建',
-        },
-      },
-    });
+    AlgorithmForm,
   },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
     return {
-      active: '1',
-      localQuery: {
-        algorithmName: null,
-      },
-      defaultQuery: {
-        algorithmName: null,
-      },
-      rules: {
-        algorithmName: [
-          {
-            required: true,
-            message: '请输入算法名称',
-            trigger: 'blur',
-          },
-          {
-            max: 32,
-            message: '长度不超过32个字符',
-            trigger: ['blur', 'change'],
-          },
-          {
-            validator: validateNameWithHyphen,
-            trigger: ['blur', 'change'],
-          },
-        ],
-        codeDir: [
-          {
-            required: true,
-            message: '请选择上传代码',
-            trigger: ['blur', 'manual'],
-          },
-        ],
-      },
+      ALGORITHM_RESOURCE_ENUM,
+      tabs: [
+        {
+          label: '我的算法',
+          name: String(ALGORITHM_RESOURCE_ENUM.CUSTOM),
+        },
+        {
+          label: '预置算法',
+          name: String(ALGORITHM_RESOURCE_ENUM.PRESET),
+        },
+      ],
+      active: String(ALGORITHM_RESOURCE_ENUM.CUSTOM),
+
+      // form
+      formVisible: false,
+      formSubmitting: false,
       algorithmUsageList: [],
       formType: '', // 'add' or 'fork'
-      // drawer var
+
+      // drawer
       selectedItemObj: null,
       drawer: false,
-      uploadParams: {
-        objectPath: null, // 对象存储路径
-      },
       disableEdit: false,
-      uploading: false,
-      progress: 0,
-      size: 0,
-      algorithmConfig,
-      customColors: [
-        {color: '#909399', percentage: 40},
-        {color: '#e6a23c', percentage: 80},
-        {color: '#67c23a', percentage: 100},
-      ],
-      uploadFilters: [invalidFileNameChar],
     };
   },
   computed: {
+    ...mapGetters(['user', 'isAdmin']),
+    columns() {
+      return getColumns({
+        doEdit: this.goEdit,
+        createTrain: this.goTraining,
+        doDownload: this.goDownload,
+        doFork: this.doFork,
+        doDelete: this.doDelete,
+        active: this.active,
+        allAlgorithmUsageList: this.allAlgorithmUsageList,
+        isAdmin: this.isAdmin,
+      });
+    },
+    queryFormItems() {
+      return getQueryFormItems({
+        active: this.active,
+      });
+    },
+    listOptions() {
+      return {
+        algorithmSource: Number(this.active),
+      };
+    },
     allAlgorithmUsageList() {
-      return [{ label: '全部', value: null }].concat(this.algorithmUsageList.map(item => {
-        return { label: item.auxInfo, value: item.auxInfo };
-      }));
+      return [{ label: '全部', value: null }].concat(
+        this.algorithmUsageList.map((item) => {
+          return { label: item.auxInfo, value: item.auxInfo };
+        })
+      );
     },
     operationProps() {
       return {
@@ -389,77 +134,42 @@ export default {
       };
     },
     isCustom() {
-      return this.active === '1';
+      return this.active === String(ALGORITHM_RESOURCE_ENUM.CUSTOM);
     },
     isPreset() {
-      return this.active === '2';
-    },
-    user() {
-      return this.$store.getters.user;
-    },
-    status() {
-      return this.progress === 100 ? 'success' : null;
+      return this.active === String(ALGORITHM_RESOURCE_ENUM.PRESET);
     },
   },
   mounted() {
     this.getAlgorithmUsages();
-    this.crud.query.algorithmSource = Number(this.active);
-    this.crud.refresh();
-    this.updateObjectPath();
+    if (this.$route.params.target === 'add') {
+      this.doAdd(this.$route.params.form);
+    }
   },
   beforeDestroy() {
     this.disableEdit = false;
+    this.notifyInstance && this.notifyInstance.close();
   },
   methods: {
+    list,
     // handle
-    handleClick() {
-      this.crud.query.algorithmSource = Number(this.active);
-      this.crud.refresh();
-    },
-    handleClose(done) {
-      done();
-    },
-    onResetQuery() {
-      this.localQuery = { ...this.defaultQuery};
+    handleTabClick(activeTab) {
+      this.active = activeTab;
+      this.$refs.proTable.query({ algorithmSource: Number(activeTab) });
     },
     onDialogClose() {
-      this.$refs.upload.formRef.reset();
-      this.uploading = false;
-    },
-    onAlgorithmUsageChange(value) {
-      const usageRes = this.algorithmUsageList.find(usage => usage.auxInfo === value);
-      if (value && !usageRes) {
-        this.createAlgorithmUsage(value);
-      }
-    },
-    onFileRemove() {
-      this.form.codeDir = null;
-      this.uploading = false;
-      this.$refs.codeDir.validate('manual');
-    },
-    uploadStart(files) {
-      this.updateObjectPath();
-      [ this.uploading, this.size, this.progress ] = [ true, files.size, 0 ];
-    },
-    onSetProgress(val) {
-      this.progress += val;
+      this.formSubmitting = false;
+      this.$refs.form.resetForm();
     },
-    uploadSuccess(res) {
-      this.progress = 100;
-      setTimeout(() => {
-        this.uploading = false;
-      }, 1000); 
-      if (this.uploading) {
-        this.form.codeDir = res[0].data.objectName;
-        this.$refs.codeDir.validate('manual');
-      }
-    },
-    uploadError() {
-      this.$message({
-        message: '上传文件失败',
-        type: 'error',
+    onSubmitForm() {
+      this.$refs.form.validate(async (form) => {
+        this.formSubmitting = true;
+        await add(form).finally(() => {
+          this.formSubmitting = false;
+        });
+        this.formVisible = false;
+        this.$refs.proTable.query();
       });
-      this.uploading = false;
     },
     // link
     goDetail(itemObj) {
@@ -477,15 +187,17 @@ export default {
             algorithmSource: Number(this.active),
             algorithmUsage: item.algorithmUsage,
             runParams: item.runParams,
-            imageNameProject: item.imageNameProject,
             imageName: item.imageName,
+            imageTag: item.imageTag,
             runCommand: item.runCommand,
           },
         },
       });
     },
     goDownload(algorithm) {
-      downloadZipFromObjectPath(algorithm.codeDir, `${algorithm.algorithmName}.zip`, { flat: true });
+      downloadZipFromObjectPath(algorithm.codeDir, `${algorithm.algorithmName}.zip`, {
+        flat: true,
+      });
       this.$message({
         message: '请查看下载文件',
         type: 'success',
@@ -496,6 +208,12 @@ export default {
         return;
       }
       this.disableEdit = true;
+      this.notifyInstance = this.$notify({
+        title: '正在启动 Notebook',
+        message: '正在启动 Notebook，请稍等',
+        iconClass: 'el-icon-loading',
+        duration: 0,
+      });
       const notebookInfo = await createNotebook(1, {
         sourceId: algorithm.id,
         sourceFilePath: algorithm.codeDir,
@@ -510,45 +228,55 @@ export default {
       }
     },
     // op
-    async doDelete(id) {
-      this.$confirm('此操作将永久删除该算法, 是否继续?', '请确认').then(async() => {
-        await deleteAlgorithm({ ids: [id] });
+    doAdd(form = {}) {
+      this.formType = 'add';
+      this.formVisible = true;
+      form.algorithmSource = Number(this.active);
+      this.$nextTick(() => {
+        this.$refs.form.initForm(form);
+      });
+    },
+    doDelete(row) {
+      this.$confirm('此操作将永久删除该算法, 是否继续?', '请确认').then(async () => {
+        await deleteAlgorithm({ ids: [row.id] });
         this.$message({
           message: '删除成功',
           type: 'success',
         });
-        await this.crud.refresh();
+        this.$refs.proTable.refresh();
       });
     },
     doFork(item) {
       this.formType = 'fork';
-      item.fork = true;
-      this.crud.toFork(item);
-    },
-    // hook
-    [CRUD.HOOK.beforeToAdd]() {
-      this.formType = 'add';
-    },
-    [CRUD.HOOK.beforeRefresh]() {
-      this.crud.query = { ...this.localQuery};
-      this.crud.query.algorithmSource = Number(this.active);
+      const form = {
+        ...item,
+        fork: true,
+        algorithmSource: ALGORITHM_RESOURCE_ENUM.CUSTOM, // Fork 只能成为我的算法
+      };
+      this.formVisible = true;
+      this.$nextTick(() => {
+        this.$refs.form.initForm(form);
+      });
     },
+
     getNotebookAddress(id, noteBookName) {
       if (!this.disableEdit) {
         return;
       }
-      getNotebookAddress(id).then(url => {
-        if (url) {
-          this.openNoteBook(url, noteBookName);
-        } else {
-          setTimeout(() => {
-            this.getNotebookAddress(id, noteBookName);
-          }, 1000);
-        }
-      }).catch(err => {
-        this.disableEdit = false;
-        throw new Error(err);
-      });
+      getNotebookAddress(id)
+        .then((url) => {
+          if (url) {
+            this.openNoteBook(url, noteBookName);
+          } else {
+            setTimeout(() => {
+              this.getNotebookAddress(id, noteBookName);
+            }, 1000);
+          }
+        })
+        .catch((err) => {
+          this.disableEdit = false;
+          throw new Error(err);
+        });
     },
     async getAlgorithmUsages() {
       const params = {
@@ -559,29 +287,17 @@ export default {
       const data = await getAlgorithmUsages(params);
       this.algorithmUsageList = data.result;
     },
-    async createAlgorithmUsage(auxInfo) {
-      await addAlgorithmUsage({ auxInfo });
-      this.getAlgorithmUsages();
-    },
-    async delAlgorithmUsage(usage) {
-      await deleteAlgorithmUsage({ ids: [usage.id] });
-      if (this.form.algorithmUsage === usage.auxInfo) {
-        this.form.algorithmUsage = null;
-      }
-      this.getAlgorithmUsages();
-    },
-    updateObjectPath() {
-      this.uploadParams.objectPath = `upload-temp/${this.user.id}/${getUniqueId()}`;
-    },
     openNoteBook(url, noteBookName) {
       window.open(url);
       this.$message.success('Notebook已启动.');
       this.disableEdit = false;
-      this.$router.push({ name: 'Notebook', params: {
-        noteBookName,
-      }});
+      this.$router.push({
+        name: 'Notebook',
+        params: {
+          noteBookName,
+        },
+      });
     },
-    uploadSizeFomatter,
   },
 };
 </script>
diff --git a/webapp/src/views/algorithm/utils.js b/webapp/src/views/algorithm/utils.js
new file mode 100644
index 0000000..363279a
--- /dev/null
+++ b/webapp/src/views/algorithm/utils.js
@@ -0,0 +1,143 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { getEmptyFormatter, ALGORITHM_RESOURCE_ENUM } from '@/utils';
+
+export function getColumns({
+  doEdit,
+  createTrain,
+  doDownload,
+  doFork,
+  doDelete,
+  active,
+  allAlgorithmUsageList,
+  isAdmin,
+}) {
+  const isPreset = active === String(ALGORITHM_RESOURCE_ENUM.PRESET);
+  return [
+    {
+      label: 'ID',
+      prop: 'id',
+      width: 80,
+      sortable: 'custom',
+      fixed: true,
+      hide: isPreset, // 预置算法隐藏 ID 列
+    },
+    {
+      label: '名称',
+      prop: 'algorithmName',
+      fixed: true,
+      minWidth: '160px',
+    },
+    {
+      label: '模型类别',
+      prop: 'algorithmUsage',
+      formatter: getEmptyFormatter(),
+      minWidth: '100px',
+      dropdownList: allAlgorithmUsageList,
+    },
+    {
+      label: '是否支持推理',
+      prop: 'inference',
+      formatter(value) {
+        return value ? '支持' : '不支持';
+      },
+      minWidth: '140px',
+      dropdownList: [
+        {
+          label: '全部',
+          value: null,
+        },
+        {
+          label: '支持',
+          value: true,
+        },
+        {
+          label: '不支持',
+          value: false,
+        },
+      ],
+    },
+    {
+      label: '描述',
+      prop: 'description',
+      minWidth: '200px',
+    },
+    {
+      label: '创建时间',
+      prop: 'createTime',
+      type: 'time',
+      minWidth: '160px',
+      sortable: 'custom',
+    },
+    {
+      label: '操作',
+      type: 'operation',
+      width: '370px',
+      fixed: 'right',
+      operations: [
+        {
+          label: '在线编辑',
+          func: doEdit,
+          hide: isPreset,
+          iconAfter: 'externallink',
+        },
+        {
+          label: '创建训练任务',
+          func: createTrain,
+        },
+        {
+          label: '下载',
+          func: doDownload,
+        },
+        {
+          label: 'Fork',
+          func: doFork,
+        },
+        {
+          label: '删除',
+          func: doDelete,
+          hide: isPreset && !isAdmin,
+        },
+      ],
+    },
+  ];
+}
+
+export function getQueryFormItems({ active }) {
+  return [
+    {
+      prop: 'algorithmName',
+      placeholder:
+        active === String(ALGORITHM_RESOURCE_ENUM.PRESET)
+          ? '请输入算法名称'
+          : '请输入算法名称或 ID',
+      class: 'w-200',
+      change: 'query',
+    },
+    {
+      type: 'button',
+      btnText: '重置',
+      func: 'resetQuery',
+    },
+    {
+      type: 'button',
+      btnText: '搜索',
+      btnType: 'primary',
+      func: 'query',
+    },
+  ];
+}
diff --git a/webapp/src/views/atlas/components/measureForm.vue b/webapp/src/views/atlas/components/measureForm.vue
new file mode 100644
index 0000000..9d255a1
--- /dev/null
+++ b/webapp/src/views/atlas/components/measureForm.vue
@@ -0,0 +1,251 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <el-form ref="form" :rules="rule" :model="form" label-width="100px">
+    <el-form-item label="度量名称" prop="name">
+      <el-input ref="nameInput" v-model.trim="form.name" maxlength="32" show-word-limit />
+    </el-form-item>
+    <el-form-item label="度量描述" prop="description">
+      <el-input
+        v-model="form.description"
+        type="textarea"
+        :rows="4"
+        maxlength="200"
+        show-word-limit
+      />
+    </el-form-item>
+    <el-form-item ref="modelUrls" label="炼知模型" prop="modelUrls">
+      <el-select
+        v-model="form.modelUrls"
+        multiple
+        clearable
+        placeholder="请选择炼知模型"
+        filterable
+        @change="validateField('modelUrls')"
+      >
+        <el-option
+          v-for="model in modelList"
+          :key="model.id"
+          :label="model.name"
+          :value="model.url"
+        />
+      </el-select>
+      <el-tooltip effect="dark" content="度量管理需要选择至少五个炼知模型" placement="top">
+        <i class="el-icon-warning-outline primary f18 v-text-top" />
+      </el-tooltip>
+    </el-form-item>
+    <el-form-item ref="datasetUrl" label="炼知数据集" prop="datasetUrl">
+      <el-select
+        v-model="form.datasetId"
+        placeholder="请选择数据集"
+        filterable
+        @change="onDatasetChange"
+      >
+        <el-option
+          v-for="dataset in datasetList"
+          :key="dataset.id"
+          :label="dataset.name"
+          :value="dataset.id"
+        />
+      </el-select>
+      <el-select
+        v-model="form.datasetUrl"
+        placeholder="请选择数据集版本"
+        filterable
+        @change="validateField('datasetUrl')"
+      >
+        <el-option
+          v-for="version in datasetVersionList"
+          :key="version.versionUrl"
+          :label="version.versionName"
+          :value="version.versionUrl"
+        />
+      </el-select>
+      <el-tooltip
+        effect="dark"
+        content="度量管理仅支持使用 RGB 格式的数据集，建议数据集图片数量不超过 50 张"
+        placement="top"
+      >
+        <i class="el-icon-warning-outline primary f18 v-text-top" />
+      </el-tooltip>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { isNil } from 'lodash';
+
+import { getModelByResource } from '@/api/model/model';
+
+import { getPublishedDatasets, getDatasetVersions } from '@/api/preparation/dataset';
+import { validateNameWithHyphen, MODEL_RESOURCE_ENUM, ALTAS_MODEL_PACKAGE_ENUM } from '@/utils';
+
+const defaultForm = {
+  id: null,
+  name: '',
+  description: '',
+  modelUrls: [], // 炼知模型地址
+  datasetId: null,
+  datasetUrl: null, // 数据集地址，暂不支持多选，为 String 类型
+};
+
+export default {
+  name: 'MeasureForm',
+  data() {
+    const modelUrlsValidator = (rule, value, callback) => {
+      if (!Array.isArray(value)) {
+        callback(new Error('值不是数组，请确认后重试'));
+        return;
+      }
+      if (value.length < 5) {
+        callback(new Error('所选模型的数量不能少于五个'));
+        return;
+      }
+      callback();
+    };
+    return {
+      modelList: [],
+      datasetList: [],
+      selectedDataset: null,
+      datasetVersionList: [],
+
+      rule: {
+        name: [
+          {
+            required: true,
+            message: '请输入度量名称',
+            trigger: ['blur', 'change'],
+          },
+          {
+            max: 32,
+            message: '长度在 32 个字符以内',
+            trigger: ['blur', 'change'],
+          },
+          {
+            validator: validateNameWithHyphen,
+            trigger: ['blur', 'change'],
+          },
+        ],
+        modelUrls: [
+          {
+            required: true,
+            message: '请选择炼知模型',
+            trigger: 'manual',
+          },
+          {
+            validator: modelUrlsValidator,
+            trigger: 'manual',
+          },
+        ],
+        datasetUrl: [
+          {
+            required: true,
+            message: '请选择数据集',
+            trigger: 'manual',
+          },
+        ],
+      },
+      form: { ...defaultForm },
+    };
+  },
+  methods: {
+    async getAtlasModels(matchData) {
+      this.modelList = await getModelByResource(
+        MODEL_RESOURCE_ENUM.ATLAS,
+        ALTAS_MODEL_PACKAGE_ENUM.PACKAGED
+      );
+
+      if (matchData && this.form.modelUrls.length) {
+        const originLen = this.form.modelUrls.length;
+
+        const modelUrlList = this.modelList.map((model) => model.url);
+        this.form.modelUrls = this.form.modelUrls.filter((url) => modelUrlList.includes(url));
+        if (originLen !== this.form.modelUrls.length) {
+          this.$message.warning('部分模型不存在，请检查');
+        }
+      }
+    },
+    async getDatasets(matchData) {
+      this.datasetList = (await getPublishedDatasets({ size: 1000 })).result;
+
+      if (matchData && this.form.datasetId) {
+        if (!this.datasetList.find((dataset) => dataset.id === this.form.datasetId)) {
+          this.form.datasetId = this.form.datasetUrl = null;
+          this.$message.warning('原有数据集不存在，请重新选择');
+          return;
+        }
+        this.getDatasetVersions(this.form.datasetId, matchData);
+      }
+    },
+    async getDatasetVersions(id, matchData) {
+      this.datasetVersionList = await getDatasetVersions(id);
+
+      if (
+        matchData &&
+        this.form.datasetUrl &&
+        !this.datasetVersionList.find((dataset) => dataset.versionUrl === this.form.datasetUrl)
+      ) {
+        this.form.datasetUrl = null;
+        this.$message.warning('原有数据集版本不存在，请重新选择');
+      }
+    },
+    onDatasetChange(id) {
+      this.form.datasetUrl = null;
+      this.getDatasetVersions(id);
+    },
+
+    initForm(form = {}) {
+      // 根据表单的字段，将初始表单的对应字段赋值到表单上，若字段不存在则使用默认值
+      Object.keys(this.form).forEach((key) => {
+        !isNil(form[key]) && (this.form[key] = form[key]);
+      });
+
+      this.getAtlasModels(true);
+      this.getDatasets(true);
+
+      // 渲染完成后清空表单验证，避免初始值导致表单错误提示
+      this.$nextTick(() => {
+        this.clearValidate();
+      });
+    },
+    resetForm() {
+      this.form = { ...defaultForm };
+      this.$nextTick(() => {
+        this.clearValidate();
+      });
+    },
+    validate(resolve, reject) {
+      let valid = true;
+      this.$refs.form.validate((isValid) => {
+        valid = valid && isValid;
+      });
+
+      if (valid) {
+        resolve && resolve(this.form);
+      } else {
+        reject && reject(this.form);
+      }
+    },
+    validateField(field) {
+      this.$refs[field].validate('manual');
+    },
+    clearValidate() {
+      this.$refs.form.clearValidate();
+    },
+  },
+};
+</script>
diff --git a/webapp/src/views/atlas/graphList.vue b/webapp/src/views/atlas/graphList.vue
index 33e5e30..8f1454d 100644
--- a/webapp/src/views/atlas/graphList.vue
+++ b/webapp/src/views/atlas/graphList.vue
@@ -17,71 +17,40 @@
 <template>
   <div id="graph-list-container" class="app-container">
     <div>
-      <el-select
-        v-model="selectedMeasure"
-        class="w-200"
-        @change="onMeasureChange"
-      >
-        <el-option
-          v-for="item in measureNames"
-          :key="item"
-          :value="item"
-          :label="item"
-        >{{item}}</el-option>
+      <el-select v-model="selectedMeasure" class="w-200" filterable @change="onMeasureChange">
+        <el-option v-for="item in measureNames" :key="item" :value="item" :label="item">{{
+          item
+        }}</el-option>
       </el-select>
-      <el-input
-        v-model="keyWords"
-        class="w-200"
-        type="text"
-        placeholder="搜索"
-      />
+      <el-input v-model="keyWords" class="w-200" type="text" placeholder="搜索" />
     </div>
-    
+
     <el-divider />
 
-    <div
-      v-if="Object.keys(graphs).length > 0"
-      class="node-card-container"
-    >
-      <el-card
-        v-for="(item, index) in filteredNodes"
-        :key="index"
-        class="node-card"
-      >
+    <div v-if="Object.keys(graphs).length > 0" class="node-card-container">
+      <el-card v-for="(item, index) in filteredNodes" :key="index" class="node-card">
         <template #header>
           <b>{{ item.tags.name }}</b>
         </template>
-        <el-popover
-          trigger="hover"
-          :placement="index % 2 === 0 ? 'left' : 'right'"
-        >
+        <el-popover trigger="hover" :placement="index % 2 === 0 ? 'left' : 'right'">
           <div slot="reference">
             <p v-if="item.tags.readme">{{ item.tags.readme }}</p>
             <div class="tag-container">
-              <span
-                v-for="attr in getAttr(item.tags)"
-                :key="index + attr"
-              >
+              <span v-for="attr in getAttr(item.tags)" :key="index + attr">
                 <el-tag
                   v-if="attr === 'task' || attr === 'dataset' || attr === 'num_params'"
                   class="node-tag"
-                >{{ attr }}: {{ item.tags[attr] }}</el-tag>
+                  >{{ attr }}: {{ item.tags[attr] }}</el-tag
+                >
               </span>
             </div>
           </div>
-          <div
-            v-for="attr in getAttr(item.tags)"
-            :key="item + attr"
-          >
-            <b v-if="attr!='readme'">{{ attr }}: {{ item.tags[attr] }}</b>
+          <div v-for="attr in getAttr(item.tags)" :key="item + attr">
+            <b v-if="attr != 'readme'">{{ attr }}: {{ item.tags[attr] }}</b>
           </div>
           <div>
             <b>URL: </b>
-            <el-link
-              target="_blank"
-              :href="item.tags.url"
-              type="primary"
-            >homepage</el-link>
+            <el-link target="_blank" :href="item.tags.url" type="primary">homepage</el-link>
           </div>
         </el-popover>
       </el-card>
@@ -91,6 +60,7 @@
 
 <script>
 import { list as getMeasureNames, getGraphs } from '@/api/atlas';
+import { MEASURE_STATUS_ENUM } from './util';
 
 export default {
   name: 'GraphList',
@@ -107,7 +77,9 @@ export default {
       if (!this.keyWords) {
         return this.graphs.nodes;
       }
-      return this.graphs.nodes.filter(node => node.tags.name.includes(this.keyWords.trim().toLowerCase()));
+      return this.graphs.nodes.filter((node) =>
+        node.tags.name.includes(this.keyWords.trim().toLowerCase())
+      );
     },
   },
   async created() {
@@ -115,11 +87,12 @@ export default {
   },
   methods: {
     async getMeasureNames() {
-      const params = { 
+      const params = {
+        measureStatus: MEASURE_STATUS_ENUM.SUCCESS,
         current: 1,
         size: 1000,
       };
-      this.measureNames = (await getMeasureNames(params)).result.map(measure => measure.name);
+      this.measureNames = (await getMeasureNames(params)).result.map((measure) => measure.name);
       [this.selectedMeasure] = this.measureNames;
       this.selectedMeasure && this.getGraphs(this.selectedMeasure);
     },
@@ -128,7 +101,7 @@ export default {
     },
     getAttr(item) {
       // Compute the search criteria
-      return Object.keys(item).filter(k => k !== 'id' && k !== 'url');
+      return Object.keys(item).filter((k) => k !== 'id' && k !== 'url');
     },
     onMeasureChange(measure) {
       this.getGraphs(measure);
diff --git a/webapp/src/views/atlas/graphVisual.vue b/webapp/src/views/atlas/graphVisual.vue
index 3c32966..8550aef 100644
--- a/webapp/src/views/atlas/graphVisual.vue
+++ b/webapp/src/views/atlas/graphVisual.vue
@@ -21,17 +21,10 @@
         <strong class="name"></strong>
       </div>
     </div>
-    <el-select
-      id="measure-selector"
-      v-model="selectedMeasure"
-      @change="onMeasureChange"
-    >
-      <el-option
-        v-for="item in measureNames"
-        :key="item"
-        :value="item"
-        :label="item"
-      >{{item}}</el-option>
+    <el-select id="measure-selector" v-model="selectedMeasure" filterable @change="onMeasureChange">
+      <el-option v-for="item in measureNames" :key="item" :value="item" :label="item">{{
+        item
+      }}</el-option>
     </el-select>
   </div>
 </template>
@@ -41,7 +34,7 @@ import * as d3 from 'd3';
 
 import { list as getMeasureNames, getGraphs } from '@/api/atlas';
 
-import { ERROR_MSG } from './util';
+import { ERROR_MSG, MEASURE_STATUS_ENUM } from './util';
 
 export default {
   name: 'GraphVisual',
@@ -68,11 +61,12 @@ export default {
   },
   methods: {
     async getMeasureNames(defaultMeasureName) {
-      const params = { 
+      const params = {
+        measureStatus: MEASURE_STATUS_ENUM.SUCCESS,
         current: 1,
         size: 1000,
       };
-      this.measureNames = (await getMeasureNames(params)).result.map(measure => measure.name);
+      this.measureNames = (await getMeasureNames(params)).result.map((measure) => measure.name);
       if (defaultMeasureName && this.measureNames.includes(defaultMeasureName)) {
         this.selectedMeasure = defaultMeasureName;
       } else {
@@ -81,7 +75,7 @@ export default {
       if (this.selectedMeasure) {
         this.getGraphs(this.selectedMeasure);
       } else {
-        this.graphs = [];
+        this.graphs = {};
       }
     },
     async getGraphs(measureName) {
@@ -95,9 +89,11 @@ export default {
     // 定义一个边排序的函数 输入一个边信息对象的集合，输出经过topk排序之后的边信息对象集合。
     parseGraph(graph) {
       // 图结构检测
-      if (!this.validGraph(graph)) { return undefined; }
+      if (!this.validGraph(graph)) {
+        return undefined;
+      }
       // 整理边信息，根据 d3 弹簧力的要求整理为带有 source 和 target 属性的对象；distance 用于表示距离
-      graph.edges = graph.edges.map(e => {
+      graph.edges = graph.edges.map((e) => {
         return {
           source: graph.nodes[e[0]],
           target: graph.nodes[e[1]],
@@ -107,7 +103,10 @@ export default {
       return graph;
     },
     validGraph(graph) {
-      const error = msg => {
+      // 如果没有选中的度量图，则不报错直接返回
+      if (!this.selectedMeasure) return false;
+
+      const error = (msg) => {
         this.$message.error(msg);
         return false;
       };
@@ -127,11 +126,14 @@ export default {
     },
     updateSVG(graph) {
       const graph_data = this.parseGraph(graph);
-      if (!graph_data) { return; }
+      if (!graph_data) {
+        return;
+      }
 
       // 清空重构 svg
       const graphDiv = document.getElementById('graph-div');
-      const svg = d3.select(graphDiv)
+      const svg = d3
+        .select(graphDiv)
         .append('svg')
         .attr('id', 'graphSvg');
 
@@ -141,27 +143,26 @@ export default {
       function updateSvgSize() {
         width = graphDiv.clientWidth;
         height = graphDiv.clientHeight;
-        svg
-          .attr('width', width)
-          .attr('height', height);
+        svg.attr('width', width).attr('height', height);
       }
       updateSvgSize();
-      
-      d3.select(window)
-        .on('resize.updatesvg', updateSvgSize);
+
+      d3.select(window).on('resize.updatesvg', updateSvgSize);
 
       // 最外层增加缩放
       const g = svg.append('g');
       svg.call(
-        d3.zoom()
-        .scaleExtent([.1, 4])
-        .on('zoom', () => {
-          g.attr('transform', d3.event.transform);
-        }),
+        d3
+          .zoom()
+          .scaleExtent([0.1, 4])
+          .on('zoom', () => {
+            g.attr('transform', d3.event.transform);
+          })
       );
 
       // 创建空力导向图
-      this.forceSimulation = d3.forceSimulation()
+      this.forceSimulation = d3
+        .forceSimulation()
         // 创建空的链接力
         .force('link', d3.forceLink())
         // 使用默认设置创建多体力，将强度设为 -200，负值使节点相互排斥
@@ -170,58 +171,60 @@ export default {
         .force('center', d3.forceCenter(width / 2, height / 2 - 50));
 
       // 将图的节点添加到力导向图中，同时监听 tick 事件
-      this.forceSimulation
-        .nodes(graph_data.nodes)
-        .on('tick', this.onTick);
-      
+      this.forceSimulation.nodes(graph_data.nodes).on('tick', this.onTick);
+
       this.forceSimulation
         // 获取链接力
         .force('link')
         // 增加边
         .links(graph_data.edges)
         // 每一边的长度，边的长度与距离相关
-        .distance(d => height / 4 * d.distance + 20);
+        .distance((d) => (height / 4) * d.distance + 20);
 
       // 绘制边，给边赋值
-      this.links = g.append('g')
+      this.links = g
+        .append('g')
         .selectAll('line')
         .data(graph_data.edges)
         .enter()
         .append('line')
         .attr('stroke', () => '#12558444')
         .attr('stroke-width', 2)
-        .on('mouseover', d => this.onMouseOver(d, 'link'))
+        .on('mouseover', (d) => this.onMouseOver(d, 'link'))
         .on('mouseout', this.onMouseOut);
-      
+
       // 创建节点容器
       this.nodeGs = g
         .selectAll('.circleText')
         .data(graph_data.nodes)
         .enter()
         .append('g')
-        .attr('transform', d => `translate(${d.x},${d.y})`)
+        .attr('transform', (d) => `translate(${d.x},${d.y})`)
         .call(
-          d3.drag()
-          .on('start', this.onDragStart)
-          .on('drag', this.onDrag)
-          .on('end', this.onDragEnd),
+          d3
+            .drag()
+            .on('start', this.onDragStart)
+            .on('drag', this.onDrag)
+            .on('end', this.onDragEnd)
         );
-      
+
       // 为节点画圆
       this.nodes = this.nodeGs
         .append('circle')
-        .attr('r', d => d.tags.num_params / 10000000 + 10)
+        .attr('r', (d) => d.tags.num_params / 10000000 + 10)
         .attr('fill', () => '#4188B3cc')
-        .on('mouseover', d => this.onMouseOver(d, 'node'))
+        .on('mouseover', (d) => this.onMouseOver(d, 'node'))
         .on('mouseout', this.onMouseOut)
         .on('click', this.onNodeClick);
 
       // 为节点增加文本
-      this.nodeGs.append('text')
+      this.nodeGs
+        .append('text')
         .attr('x', 0)
         .attr('y', -10)
         .attr('dy', 0)
-        .text(d => d.tags.name).attr('font-size', d => d.tags.num_params / 10000000 + 10)
+        .text((d) => d.tags.name)
+        .attr('font-size', (d) => d.tags.num_params / 10000000 + 10)
         .style('font-family', 'Arial')
         .style('pointer-events', 'none') // to prevent mouseover/drag capture
         .style('opacity', '60%');
@@ -234,15 +237,16 @@ export default {
     },
     onTick() {
       this.links
-        .attr('x1', d => d.source.x)
-        .attr('y1', d => d.source.y)
-        .attr('x2', d => d.target.x)
-        .attr('y2', d => d.target.y);
-      this.nodeGs.attr('transform', d => `translate(${d.x},${d.y})`);
+        .attr('x1', (d) => d.source.x)
+        .attr('y1', (d) => d.source.y)
+        .attr('x2', (d) => d.target.x)
+        .attr('y2', (d) => d.target.y);
+      this.nodeGs.attr('transform', (d) => `translate(${d.x},${d.y})`);
     },
     // 处理点击节点事件
     onNodeClick(snode, index, list) {
-      d3.select(list[index]).transition()
+      d3.select(list[index])
+        .transition()
         .duration(750)
         .style('fill', () => {
           // 默认值为 false
@@ -250,11 +254,12 @@ export default {
             snode.highlighted = false;
           }
           // 遍历边列表，处理与节点链接的边
-          this.links.style('stroke', l => {
+          this.links.style('stroke', (l) => {
             if (l.highlighted === undefined) {
               l.highlighted = 0;
             }
-            if (l.source.index === snode.index || l.target.index === snode.index) { // 当与连接点连接时变粗
+            if (l.source.index === snode.index || l.target.index === snode.index) {
+              // 当与连接点连接时变粗
               // 通过对链接计数来判断是否与被点击节点连接
               l.highlighted += snode.highlighted === false ? 1 : -1;
             }
@@ -314,11 +319,14 @@ export default {
     },
     onContextMenu() {
       d3.event.preventDefault();
-      this.nodes.transition().duration(750).style('fill', node => {
-        node.highlighted = false;
-        return '#4188B3cc';
-      });
-      this.links.style('stroke', link => {
+      this.nodes
+        .transition()
+        .duration(750)
+        .style('fill', (node) => {
+          node.highlighted = false;
+          return '#4188B3cc';
+        });
+      this.links.style('stroke', (link) => {
         link.highlighted = 0;
         return '#12558444';
       });
@@ -392,4 +400,4 @@ svg {
   width: 100%;
   height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/atlas/measure.vue b/webapp/src/views/atlas/measure.vue
index 92c6d17..b353216 100644
--- a/webapp/src/views/atlas/measure.vue
+++ b/webapp/src/views/atlas/measure.vue
@@ -1,31 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div id="measure-container" class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <cdOperation
-        linkType="custom"
-        @to-add="toAdd"
-      >
-        <span
-          slot="right"
-          class="flex flex-end flex-wrap"
-        >
+      <cdOperation linkType="custom" @to-add="toAdd">
+        <span slot="right" class="flex flex-end flex-wrap">
           <el-input
             v-model="localQuery.nameOrId"
             clearable
@@ -39,64 +33,63 @@
       </cdOperation>
     </div>
     <!--表格渲染-->
-    <el-table
-      ref="table"
-      :data="crud.data"
-      highlight-current-row
-      @sort-change="crud.sortChange"
-    >
-      <el-table-column
-        prop="id"
-        label="ID"
-        sortable="custom"
-        width="80px"
-        fixed
-      />
-      <el-table-column
-        prop="name"
-        label="度量名称"
-        min-width="120px"
-        show-overflow-tooltip
-        fixed
-      />
+    <el-table ref="table" :data="crud.data" highlight-current-row @sort-change="crud.sortChange">
+      <el-table-column prop="id" label="ID" sortable="custom" width="80px" fixed />
+      <el-table-column prop="name" label="度量名称" min-width="120px" show-overflow-tooltip fixed />
       <el-table-column
         prop="description"
         label="度量描述"
         min-width="180px"
         show-overflow-tooltip
       />
-      <el-table-column
-        prop="createTime"
-        label="创建时间"
-        sortable="custom"
-        min-width="160px"
-      >
+      <el-table-column prop="measureStatus" label="状态" min-width="120px">
+        <template #header>
+          <dropdown-header
+            title="状态"
+            :list="measureStatusList"
+            :filtered="Boolean(localQuery.measureStatus)"
+            @command="(cmd) => filter('measureStatus', cmd)"
+          />
+        </template>
+        <template slot-scope="scope">
+          <el-tag :type="statusTagMap[scope.row.measureStatus]" effect="plain">{{
+            statusNameMap[scope.row.measureStatus] || '--'
+          }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" sortable="custom" min-width="160px">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        label="操作"
-        min-width="200"
-        fixed="right"
-      >
+      <el-table-column label="操作" min-width="200" fixed="right">
         <template slot-scope="scope">
           <el-button
+            v-if="hasPermission('atlas:measure:edit')"
             type="text"
+            :disabled="isMeasureMaking(scope.row.measureStatus)"
             @click.stop="doEdit(scope.row)"
-          >编辑</el-button>
+            >编辑</el-button
+          >
           <el-button
             type="text"
+            :disabled="!isMeasureSuccess(scope.row.measureStatus)"
             @click.stop="doDownload(scope.row)"
-          >下载</el-button>
+            >下载</el-button
+          >
           <el-button
             type="text"
+            :disabled="!isMeasureSuccess(scope.row.measureStatus)"
             @click.stop="goVisial(scope.row.name)"
-          >可视化</el-button>
+            >可视化</el-button
+          >
           <el-button
+            v-if="hasPermission('atlas:measure:delete')"
             type="text"
+            :disabled="isMeasureMaking(scope.row.measureStatus)"
             @click.stop="doDelete(scope.row.id)"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -105,78 +98,37 @@
     <!-- 表单 -->
     <BaseModal
       :title="formTitle"
-      :visible="formVisible"
+      :visible.sync="formVisible"
       :loading="formLoading"
       okText="提交"
-      @open="onFormOpen"
       @ok="onFormSubmit"
       @cancel="formVisible = false"
       @close="onFormClose"
     >
-      <el-form
-        ref="form"
-        :rules="formRule"
-        :model="form"
-        label-width="100px"
-      >
-        <el-form-item label="度量名称" prop="name">
-          <el-input
-            ref="nameInput"
-            v-model.trim="form.name"
-            maxlength="32"
-            show-word-limit
-          />
-        </el-form-item>
-        <el-form-item label="度量描述" prop="description">
-          <el-input
-            v-model="form.description"
-            type="textarea"
-            :rows="4"
-            maxlength="200"
-            show-word-limit
-          />
-        </el-form-item>
-        <el-form-item ref="url" label="度量图文件" prop="url">
-          <upload-inline
-            ref="upload"
-            action="fakeApi"
-            accept=".json"
-            :acceptSize="atlasConfig.uploadFileAcceptSize"
-            :acceptSizeFormat="uploadSizeFomatter"
-            list-type="text"
-            :show-file-count="false"
-            :params="uploadParams"
-            :auto-upload="true"
-            :filters="uploadFilters"
-            :hash="false"
-            :limit="1"
-            :on-remove="onFileRemove"
-            @uploadStart="onUploadStart"
-            @uploadSuccess="onUploadSuccess"
-            @uploadError="onUploadError"
-          />
-        </el-form-item>
-      </el-form>
+      <MeasureForm ref="measureForm" />
     </BaseModal>
   </div>
 </template>
 
 <script>
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { debounce } from 'throttle-debounce';
+
 import { list, add, edit, del } from '@/api/atlas';
 import CRUD, { presenter, header, crud } from '@crud/crud';
 import rrOperation from '@crud/RR.operation';
 import cdOperation from '@crud/CD.operation';
 import pagination from '@crud/Pagination';
 import BaseModal from '@/components/BaseModal';
-import UploadInline from '@/components/UploadForm/inline';
-import { getUniqueId, uploadSizeFomatter, validateNameWithHyphen, Constant, downloadFileAsStream, minioBaseUrl, invalidFileNameChar } from '@/utils';
-import { atlasConfig } from '@/config';
+import DropdownHeader from '@/components/DropdownHeader';
+import { Constant, downloadFileAsStream, minioBaseUrl, generateMap, hasPermission } from '@/utils';
+
+import MeasureForm from './components/measureForm';
+import { MEASURE_STATUS_ENUM, MEASURE_STATUS_MAP } from './util';
 
-const defaultForm = {
-  id: null,
-  name: '',
-  description: '',
-  url: undefined,
+const defaultQuery = {
+  nameOrId: null,
+  measureStatus: null,
 };
 
 export default {
@@ -185,14 +137,16 @@ export default {
     pagination,
     rrOperation,
     cdOperation,
+    DropdownHeader,
     BaseModal,
-    UploadInline,
+    MeasureForm,
   },
   cruds() {
     return CRUD({
       title: 'Measure',
       crudMethod: { list },
       optShow: {
+        add: hasPermission('atlas:measure:create'),
         del: false,
       },
       props: {
@@ -206,100 +160,63 @@ export default {
   mixins: [presenter(), header(), crud()],
   data() {
     return {
-      localQuery: {
-        nameOrId: null,
-      },
+      localQuery: { ...defaultQuery },
       // 表单数据
       formType: 'add',
-      formVisible: false,
-      formLoading: false,
-      formRule: {
-        name: [
-          {
-            required: true,
-            message: '请输入度量名称',
-            trigger: ['blur', 'change'],
-          },
-          {
-            max: 32,
-            message: '长度在 32 个字符以内',
-            trigger: ['blur', 'change'],
-          },
-          {
-            validator: validateNameWithHyphen,
-            trigger: ['blur', 'change'],
-          },
-        ],
-        url: [
-          {
-            required: true,
-            message: '请上传度量图文件',
-            trigger: 'manual',
-          },
-        ],
-      },
-      form: { ...defaultForm },
-      uploadParams: {
-        objectPath: null,
-      },
-      uploading: false,
-      uploadFilters: [invalidFileNameChar],
+      formVisible: false, // 表单可见状态
+      formLoading: false, // 表单提交状态
 
-      atlasConfig,
+      keepPoll: true, // 中间状态轮询标识
     };
   },
   computed: {
+    statusNameMap() {
+      return generateMap(MEASURE_STATUS_MAP, 'name');
+    },
+    statusTagMap() {
+      return generateMap(MEASURE_STATUS_MAP, 'tagMap');
+    },
+    measureStatusList() {
+      const list = [{ label: '全部', value: null }];
+      Object.keys(this.statusNameMap).forEach((status) => {
+        list.push({ label: this.statusNameMap[status], value: status });
+      });
+      return list;
+    },
     formTitle() {
       return `${Constant.FORM_TYPE_MAP[this.formType]}度量`;
     },
-    user() {
-      return this.$store.getters.user;
-    },
+  },
+  created() {
+    this.refetch = debounce(1000, this.crud.refresh);
+  },
+  beforeDestroy() {
+    this.keepPoll = false;
   },
   methods: {
+    hasPermission,
+
     toAdd() {
       this.formType = 'add';
       this.formVisible = true;
+      this.$nextTick(() => this.$refs.measureForm.initForm());
     },
     onResetQuery() {
-      this.localQuery = { ...this.defaultQuery};
-    },
-    onFormOpen() {
-      this.updateObjectPath();
+      this.localQuery = { ...defaultQuery };
     },
     onFormSubmit() {
-      this.$refs.form.validate(async valid => {
-        if (valid) {
-          this.formLoading = true;
-          const func = this.formType === 'add' ? add : edit;
-          await func(this.form).finally(() => { this.formLoading = false; });
-          this.formVisible = false;
-          this.crud.refresh();
-        }
+      this.$refs.measureForm.validate(async (form) => {
+        this.formLoading = true;
+        const func = this.formType === 'add' ? add : edit;
+        await func(form).finally(() => {
+          this.formLoading = false;
+        });
+        this.formVisible = false;
+        this.crud.refresh();
       });
     },
     onFormClose() {
-      this.formVisible = false;
-      setTimeout(() => {
-        this.form = { ...defaultForm };
-        this.$refs.upload.formRef.reset();
-        this.$nextTick(() => { this.$refs.form.clearValidate(); });
-      }, 100); // 延迟清空表单，避免用户在弹窗被关闭时看到清空表单导致的表单验证
-    },
-    onFileRemove() {
-      this.$refs.url.validate('manual');
-    },
-    onUploadStart() {
-      this.uploading = true;
-    },
-    onUploadSuccess(res) {
-      this.uploading = false;
-      this.form.url = res[0].data.objectName;
-      this.$refs.url.validate('manual');
-    },
-    onUploadError() {
-      this.uploading = false;
-      this.$refs.url.validate('manual');
+      this.$refs.measureForm.resetForm();
     },
 
     goVisial(measureName) {
@@ -309,10 +226,9 @@ export default {
       });
     },
     doEdit(measure) {
-      Reflect.ownKeys(this.form)
-        .forEach(key => { this.form[key] = measure[key]; });
       this.formType = 'edit';
       this.formVisible = true;
+      this.$nextTick(() => this.$refs.measureForm.initForm(measure));
     },
     doDownload(measure) {
       const { name, url } = measure;
@@ -325,15 +241,28 @@ export default {
       });
     },
 
-    updateObjectPath() {
-      this.uploadParams.objectPath = `upload-temp/${this.user.id}/${getUniqueId()}`;
-    },
-
-    uploadSizeFomatter,
-
     [CRUD.HOOK.beforeRefresh]() {
       this.crud.query = { ...this.localQuery };
     },
+    [CRUD.HOOK.afterRefresh]() {
+      if (
+        this.keepPoll &&
+        this.crud.data.some((measure) => this.isMeasureMaking(measure.measureStatus))
+      ) {
+        this.refetch();
+      }
+    },
+
+    filter(column, value) {
+      this.localQuery[column] = value;
+      this.crud.toQuery();
+    },
+    isMeasureMaking(measureStatus) {
+      return measureStatus === MEASURE_STATUS_ENUM.MAKING;
+    },
+    isMeasureSuccess(measureStatus) {
+      return measureStatus === MEASURE_STATUS_ENUM.SUCCESS;
+    },
   },
 };
 </script>
diff --git a/webapp/src/views/atlas/util.js b/webapp/src/views/atlas/util.js
index 7bee32b..3e8dc2a 100644
--- a/webapp/src/views/atlas/util.js
+++ b/webapp/src/views/atlas/util.js
@@ -1,18 +1,31 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+// 度量管理状态枚举
+export const MEASURE_STATUS_ENUM = {
+  MAKING: 0, // 生成中
+  SUCCESS: 1, // 生成成功
+  FAIL: 2, // 生成失败
+};
+
+export const MEASURE_STATUS_MAP = {
+  [MEASURE_STATUS_ENUM.MAKING]: { name: '生成中', tagMap: '' },
+  [MEASURE_STATUS_ENUM.SUCCESS]: { name: '生成成功', tagMap: 'success' },
+  [MEASURE_STATUS_ENUM.FAIL]: { name: '生成失败', tagMap: 'danger' },
+};
 
 export const ERROR_MSG = {
   NO_NODES: '度量图中不存在节点信息，请检查后重试',
diff --git a/webapp/src/views/cloudServing/batch.vue b/webapp/src/views/cloudServing/batch.vue
index 5de0564..62a9b54 100644
--- a/webapp/src/views/cloudServing/batch.vue
+++ b/webapp/src/views/cloudServing/batch.vue
@@ -1,37 +1,28 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div id="cloud-serving-container" class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <cdOperation
-        linkType="custom"
-        @to-add="onToAdd"
-      >
-        <span
-          v-show="crud.loading"
-          slot="left"
-        >
+      <cdOperation linkType="custom" @to-add="onToAdd">
+        <span v-show="crud.loading" slot="left">
           <i class="el-icon-loading" />
         </span>
-        <span
-          slot="right"
-          class="flex flex-end flex-wrap"
-        >
+        <span slot="right" class="flex flex-end flex-wrap">
           <el-input
             v-model="localQuery.name"
             clearable
@@ -52,22 +43,12 @@
       highlight-current-row
       @sort-change="crud.sortChange"
     >
-      <el-table-column
-        prop="id"
-        label="ID"
-        sortable="custom"
-        width="80px"
-        fixed
-      />
-      <el-table-column
-        prop="name"
-        label="服务名称"
-        min-width="120px"
-        show-overflow-tooltip
-        fixed
-      >
+      <el-table-column prop="id" label="ID" sortable="custom" width="80px" fixed />
+      <el-table-column prop="name" label="服务名称" min-width="120px" show-overflow-tooltip fixed>
         <template slot-scope="scope">
-          <el-link class="name-col" @click="goDetail(scope.row.id)">{{ scope.row.name }}</el-link>
+          <el-link class="name-col" type="primary" @click="goDetail(scope.row.id)">{{
+            scope.row.name
+          }}</el-link>
         </template>
       </el-table-column>
       <el-table-column
@@ -76,31 +57,26 @@
         min-width="180px"
         show-overflow-tooltip
       />
-      <el-table-column
-        prop="status"
-        label="状态"
-        min-width="120px"
-      >
+      <el-table-column prop="status" label="状态" min-width="120px">
         <template #header>
           <dropdown-header
             title="状态"
             :list="serviceStatusList"
             :filtered="Boolean(localQuery.status)"
-            @command="cmd => filter('status', cmd)"
+            @command="(cmd) => filter('status', cmd)"
           />
         </template>
         <template slot-scope="scope">
-          <el-tag
-            :type="statusTagMap[scope.row.status]"
-            effect="plain"
-          >{{ statusNameMap[scope.row.status] || '--' }}</el-tag>
+          <el-tag :type="statusTagMap[scope.row.status]" effect="plain">{{
+            statusNameMap[scope.row.status] || '--'
+          }}</el-tag>
+          <msg-popover
+            :status-detail="scope.row.statusDetail"
+            :show="showMessage(scope.row.status)"
+          />
         </template>
       </el-table-column>
-      <el-table-column
-        prop="progress"
-        label="进度"
-        min-width="160px"
-      >
+      <el-table-column prop="progress" label="进度" min-width="160px">
         <template slot-scope="scope">
           <el-progress
             class="progress"
@@ -109,64 +85,51 @@
           />
         </template>
       </el-table-column>
-      <el-table-column
-        prop="startTime"
-        label="任务开始时间"
-        sortable="custom"
-        min-width="160px"
-      >
+      <el-table-column prop="startTime" label="任务开始时间" sortable="custom" min-width="160px">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.startTime) || '--' }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="endTime"
-        label="任务结束时间"
-        sortable="custom"
-        min-width="160px"
-      >
+      <el-table-column prop="endTime" label="任务结束时间" sortable="custom" min-width="160px">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.endTime) || '--' }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        label="操作"
-        width="250px"
-        fixed="right"
-      >
+      <el-table-column label="操作" width="250px" fixed="right">
         <template slot-scope="scope">
           <el-button
             v-if="!canFork(scope.row.status)"
             type="text"
             :disabled="!canEdit(scope.row.status)"
             @click.stop="doEdit(scope.row.id)"
-          >编辑</el-button>
-          <el-button
-            v-else
-            type="text"
-            @click.stop="doFork(scope.row.id)"
-          >Fork</el-button>
+            >编辑</el-button
+          >
+          <el-button v-else type="text" @click.stop="doFork(scope.row.id)">Fork</el-button>
           <el-button
             v-if="canStart(scope.row.status)"
             type="text"
-            @click.stop="doStart(scope.row)"
-          >重新推理</el-button>
+            @click.stop="doStartDebounce(scope.row)"
+            >重新推理</el-button
+          >
           <el-button
             v-else
             type="text"
             :disabled="!canStop(scope.row.status)"
-            @click.stop="doStop(scope.row)"
-          >停止推理</el-button>
+            @click.stop="doStopDebounce(scope.row)"
+            >停止推理</el-button
+          >
           <el-button
             type="text"
             :disabled="!canDelete(scope.row.status)"
             @click.stop="doDelete(scope.row.id)"
-          >删除</el-button>
+            >删除</el-button
+          >
           <el-button
             type="text"
             :disabled="!canDownload(scope.row.status)"
-            @click.stop="doDownload(scope.row)"
-          >结果下载</el-button>
+            @click.stop="doDownloadDebounce(scope.row)"
+            >结果下载</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -180,14 +143,26 @@
 import { debounce } from 'throttle-debounce';
 import { mapActions } from 'vuex';
 
-import { list, start, stop, del as deleteServing, getServiceProgress } from '@/api/cloudServing/batch';
+import {
+  list,
+  start,
+  stop,
+  del as deleteServing,
+  getServiceProgress,
+} from '@/api/cloudServing/batch';
 import CRUD, { presenter, header, crud } from '@crud/crud';
 import DropdownHeader from '@/components/DropdownHeader';
+import MsgPopover from '@/components/MsgPopover';
 import cdOperation from '@crud/CD.operation';
 import rrOperation from '@crud/RR.operation';
 import pagination from '@crud/Pagination';
-import { downloadZipFromObjectPath, Constant } from '@/utils';
-import { SERVING_STATUS_ENUM, BATCH_SERVING_STATUS_MAP, generateMap, batchServingProgressColor, getPollId } from './util';
+import { downloadZipFromObjectPath, Constant, generateMap } from '@/utils';
+import {
+  SERVING_STATUS_ENUM,
+  BATCH_SERVING_STATUS_MAP,
+  batchServingProgressColor,
+  getPollId,
+} from './util';
 
 // 搜索用字段
 const defaultQuery = {
@@ -199,6 +174,7 @@ export default {
   name: 'BatchServing',
   components: {
     DropdownHeader,
+    MsgPopover,
     pagination,
     rrOperation,
     cdOperation,
@@ -239,7 +215,7 @@ export default {
 
     serviceStatusList() {
       const list = [{ label: '全部', value: null }];
-      Object.keys(this.statusNameMap).forEach(status => {
+      Object.keys(this.statusNameMap).forEach((status) => {
         list.push({ label: this.statusNameMap[status], value: status });
       });
       return list;
@@ -252,11 +228,11 @@ export default {
     },
   },
   beforeRouteEnter(to, from, next) {
-    const goFirstPage = vm => {
+    const goFirstPage = (vm) => {
       vm.pageEnter(false);
     };
 
-    const goPreviousPage = vm => {
+    const goPreviousPage = (vm) => {
       vm.pageEnter(true);
     };
 
@@ -291,7 +267,9 @@ export default {
     next(goPreviousPage);
   },
   mounted() {
-    this.refetch = debounce(1000, this.getServices);
+    this.doStartDebounce = debounce(1000, this.doStart);
+    this.doStopDebounce = debounce(1000, this.doStop);
+    this.doDownloadDebounce = debounce(1000, this.doDownload);
   },
   beforeDestroy() {
     this.pollMap = Object.create(null);
@@ -319,9 +297,11 @@ export default {
     },
     async getServiceProgress(id, option = {}) {
       const service = await getServiceProgress(id);
-      const originService = this.crud.data.find(service => service.id === id);
+      const originService = this.crud.data.find((service) => service.id === id);
       // 如果当前页已经不存在这条记录，则不继续轮询
-      if (!originService) { return; }
+      if (!originService) {
+        return;
+      }
       const { status, progress, startTime, endTime, outputPath } = service;
       const { pollId } = option;
       // 更新数据
@@ -329,7 +309,7 @@ export default {
       if (this.needPoll(status) && pollId && this.pollMap[id] === pollId) {
         setTimeout(() => {
           this.getServiceProgress(id, option);
-        }, 1000);
+        }, 5000);
       }
     },
     // Handlers
@@ -408,15 +388,14 @@ export default {
       }
     },
     doDelete(id) {
-      this.$confirm('此操作将删除该服务, 是否继续?', '请确认')
-        .then(async () => {
-          await deleteServing(id);
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-          });
-          this.crud.refresh();
+      this.$confirm('此操作将删除该服务, 是否继续?', '请确认').then(async () => {
+        await deleteServing(id);
+        this.$message({
+          message: '删除成功',
+          type: 'success',
         });
+        this.crud.refresh();
+      });
     },
     doDownload(service) {
       if (!service.outputPath) {
@@ -426,10 +405,10 @@ export default {
       downloadZipFromObjectPath(service.outputPath, `${service.name}-result.zip`, { flat: true });
       this.$message.success('请查看下载文件');
     },
-    
+
     // Crud Hooks
     [CRUD.HOOK.beforeRefresh]() {
-      this.crud.query = { ...this.localQuery};
+      this.crud.query = { ...this.localQuery };
     },
     [CRUD.HOOK.afterRefresh]() {
       this.updatePage(this.crud.page.current);
@@ -437,8 +416,8 @@ export default {
         sort: this.crud.sort,
         order: this.crud.order,
       });
-      const unfinishedList = this.crud.data.filter(service => this.needPoll(service.status));
-      unfinishedList.forEach(service => {
+      const unfinishedList = this.crud.data.filter((service) => this.needPoll(service.status));
+      unfinishedList.forEach((service) => {
         this.poll(service.id);
       });
     },
@@ -449,39 +428,39 @@ export default {
       this.crud.toQuery();
     },
     canEdit(status) {
-      return [
-          SERVING_STATUS_ENUM.EXCEPTION,
-          SERVING_STATUS_ENUM.STOP,
-        ].indexOf(status) !== -1;
+      return [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.STOP].indexOf(status) !== -1;
     },
     canFork(status) {
       return SERVING_STATUS_ENUM.COMPLETED === status;
     },
     canStart(status) {
-      return [
-          SERVING_STATUS_ENUM.EXCEPTION,
-          SERVING_STATUS_ENUM.STOP,
-        ].indexOf(status) !== -1;
+      return [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.STOP].indexOf(status) !== -1;
     },
     canStop(status) {
-      return [
-          SERVING_STATUS_ENUM.IN_DEPLOYMENT,
-          SERVING_STATUS_ENUM.WORKING,
-        ].indexOf(status) !== -1;
+      return (
+        [SERVING_STATUS_ENUM.IN_DEPLOYMENT, SERVING_STATUS_ENUM.WORKING].indexOf(status) !== -1
+      );
     },
     canDelete(status) {
-      return [
+      return (
+        [
           SERVING_STATUS_ENUM.EXCEPTION,
           SERVING_STATUS_ENUM.STOP,
           SERVING_STATUS_ENUM.COMPLETED,
           SERVING_STATUS_ENUM.UNKNOWN,
-        ].indexOf(status) !== -1;
+        ].indexOf(status) !== -1
+      );
     },
     canDownload(status) {
       return SERVING_STATUS_ENUM.COMPLETED === status;
     },
     needPoll(status) {
-      return [SERVING_STATUS_ENUM.WORKING, SERVING_STATUS_ENUM.IN_DEPLOYMENT].indexOf(status) !== -1;
+      return (
+        [SERVING_STATUS_ENUM.WORKING, SERVING_STATUS_ENUM.IN_DEPLOYMENT].indexOf(status) !== -1
+      );
+    },
+    showMessage(status) {
+      return [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.IN_DEPLOYMENT].includes(status);
     },
     poll(id) {
       this.pollMap[id] = getPollId();
diff --git a/webapp/src/views/cloudServing/batchDetail.vue b/webapp/src/views/cloudServing/batchDetail.vue
index 5c4eb33..bb18616 100644
--- a/webapp/src/views/cloudServing/batchDetail.vue
+++ b/webapp/src/views/cloudServing/batchDetail.vue
@@ -1,58 +1,43 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div id="serving-detail-container" class="app-container">
     <header class="flex flex-between flex-vertical-align">
       <p>您的位置：云端 Serving / {{ item.name }}</p>
       <span class="btn-group">
-        <el-button
-          v-if="!canFork"
-          type="primary"
-          :disabled="!canEdit"
-          @click="doEdit"
-        >编辑</el-button>
-        <el-button
-          v-else
-          type="primary"
-          @click="doFork"
-        >Fork</el-button>
-        <el-button
-          v-if="canStart"
-          type="primary"
-          :loading="startLoading"
-          @click="doStart"
-        >重新推理</el-button>
+        <el-button v-if="!canFork" type="primary" :disabled="!canEdit" @click="doEdit"
+          >编辑</el-button
+        >
+        <el-button v-else type="primary" @click="doFork">Fork</el-button>
+        <el-button v-if="canStart" type="primary" :loading="startLoading" @click="doStartDebounce"
+          >重新推理</el-button
+        >
         <el-button
           v-else
           type="primary"
           :disabled="!canStop"
           :loading="stopLoading"
-          @click="doStop"
-        >停止推理</el-button>
-        <el-button
-          type="primary"
-          :disabled="!canDelete"
-          :loading="deleteLoading"
-          @click="doDelete"
-        >删除</el-button>
-        <el-button
-          type="primary"
-          @click="doRefresh"
-        >刷新</el-button>
+          @click="doStopDebounce"
+          >停止推理</el-button
+        >
+        <el-button type="primary" :disabled="!canDelete" :loading="deleteLoading" @click="doDelete"
+          >删除</el-button
+        >
+        <el-button type="primary" @click="doRefreshDebounce">刷新</el-button>
       </span>
     </header>
     <el-divider class="mt-10" />
@@ -65,7 +50,18 @@
           </div>
           <div class="detail-row">
             <span class="detail-label">状态</span>
-            <span class="detail-value">{{ statusNameMap[item.status] }}</span>
+            <span class="detail-value">
+              {{ statusNameMap[item.status] }}
+              <msg-popover :status-detail="item.statusDetail" :show="showMessage" />
+            </span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">镜像信息</span>
+            <span class="detail-value">{{ item.imageName }}:{{ item.imageTag }}</span>
+          </div>
+          <div v-if="item.useScript" class="detail-row">
+            <span class="detail-label">推理脚本</span>
+            <span class="detail-value">{{ item.algorithmName }}</span>
           </div>
           <div class="detail-row">
             <span class="detail-label">节点类型</span>
@@ -76,7 +72,7 @@
             <span class="detail-value">{{ item.resourcesPoolSpecs }}</span>
           </div>
           <div class="detail-row">
-            <span class="detail-label">节点数</span>
+            <span class="detail-label">节点数量</span>
             <span class="detail-value">{{ item.resourcesPoolNode }}</span>
           </div>
           <div class="detail-row">
@@ -88,10 +84,7 @@
           <div class="detail-row">
             <span class="detail-label">进度</span>
             <span class="detail-value">
-              <el-progress
-                :percentage="+item.progress || 0"
-                :color="batchServingProgressColor"
-              />
+              <el-progress :percentage="+item.progress || 0" :color="batchServingProgressColor" />
             </span>
           </div>
           <div class="detail-row">
@@ -108,24 +101,23 @@
           </div>
           <div class="detail-row">
             <span class="detail-label">输入数据目录</span>
-            <span class="detail-value">{{ item.inputPath}}</span>
+            <span class="detail-value">{{ item.inputPath }}</span>
+          </div>
+          <div v-if="showDeployParams" class="detail-row">
+            <span class="detail-label">部署参数</span>
+            <span class="detail-value">{{ parseObj(item.deployParams) }}</span>
           </div>
           <div class="detail-row">
             <div class="detail-label my-auto">结果下载</div>
             <span class="detail-value">
-              <el-button
-                :disabled="!canDownload"
-                @click="doDownload"
-              >下载</el-button>
+              <el-button :disabled="!canDownload" @click="doDownloadDebounce">下载</el-button>
             </span>
           </div>
         </el-col>
       </el-row>
     </div>
     <el-divider />
-    <el-tabs
-      v-model="activeDetailTabName"
-    >
+    <el-tabs v-model="activeDetailTabName">
       <el-tab-pane label="日志" name="log" />
     </el-tabs>
     <keep-alive>
@@ -146,14 +138,26 @@
 import { debounce } from 'throttle-debounce';
 
 import { start, stop, del as deleteServing, detail } from '@/api/cloudServing/batch';
-import { parseTime, downloadZipFromObjectPath, RESOURCES_POOL_TYPE_MAP } from '@/utils';
-import { SERVING_STATUS_ENUM, BATCH_SERVING_STATUS_MAP, generateMap, batchServingProgressColor } from './util';
+import MsgPopover from '@/components/MsgPopover';
+import {
+  generateMap,
+  parseTime,
+  downloadZipFromObjectPath,
+  RESOURCES_POOL_TYPE_MAP,
+} from '@/utils';
+import {
+  SERVING_STATUS_ENUM,
+  BATCH_SERVING_STATUS_MAP,
+  batchServingProgressColor,
+  parseObj,
+} from './util';
 import ServingLog from './components/servingLog';
 
 export default {
   name: 'BatchServingDetail',
   components: {
     ServingLog,
+    MsgPopover,
   },
   dicts: ['frame_type'],
   data() {
@@ -164,9 +168,9 @@ export default {
       item: {},
       startLoading: false,
       stopLoading: false,
-      deleteLoading:  false,
+      deleteLoading: false,
       activeDetailTabName: 'log',
-      
+
       keepPoll: true,
       refreshMap: {
         log: false,
@@ -188,34 +192,43 @@ export default {
       }
       return name;
     },
+    showDeployParams() {
+      if (!this.item || !this.item.deployParams) return false;
+      return (
+        Object.keys(this.item.deployParams).filter(
+          (key) => this.item.deployParams[key] !== null && this.item.deployParams[key] !== ''
+        ).length > 0
+      );
+    },
     canEdit() {
-      return [
-          SERVING_STATUS_ENUM.EXCEPTION,
-          SERVING_STATUS_ENUM.STOP,
-        ].indexOf(this.item.status) !== -1;
+      return (
+        [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.STOP].indexOf(this.item.status) !== -1
+      );
     },
     canFork() {
       return SERVING_STATUS_ENUM.COMPLETED === this.item.status;
     },
     canStart() {
-      return [
-          SERVING_STATUS_ENUM.EXCEPTION,
-          SERVING_STATUS_ENUM.STOP,
-        ].indexOf(this.item.status) !== -1;
+      return (
+        [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.STOP].indexOf(this.item.status) !== -1
+      );
     },
     canStop() {
-      return [
-          SERVING_STATUS_ENUM.IN_DEPLOYMENT,
-          SERVING_STATUS_ENUM.WORKING,
-        ].indexOf(this.item.status) !== -1;
+      return (
+        [SERVING_STATUS_ENUM.IN_DEPLOYMENT, SERVING_STATUS_ENUM.WORKING].indexOf(
+          this.item.status
+        ) !== -1
+      );
     },
     canDelete() {
-      return [
+      return (
+        [
           SERVING_STATUS_ENUM.EXCEPTION,
           SERVING_STATUS_ENUM.STOP,
           SERVING_STATUS_ENUM.COMPLETED,
           SERVING_STATUS_ENUM.UNKNOWN,
-        ].indexOf(this.item.status) !== -1;
+        ].indexOf(this.item.status) !== -1
+      );
     },
     canDownload() {
       return SERVING_STATUS_ENUM.COMPLETED === this.item.status;
@@ -226,6 +239,11 @@ export default {
     statusNameMap() {
       return generateMap(BATCH_SERVING_STATUS_MAP, 'name');
     },
+    showMessage() {
+      return [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.IN_DEPLOYMENT].includes(
+        this.item.status
+      );
+    },
   },
   beforeRouteEnter(to, from, next) {
     if (!to.query.id) {
@@ -237,19 +255,31 @@ export default {
   created() {
     this.serviceId = Number(this.$route.query.id);
     this.refetch = debounce(1000, this.getServingDetail);
+    this.doStartDebounce = debounce(1000, this.doStart);
+    this.doStopDebounce = debounce(1000, this.doStop);
+    this.doRefreshDebounce = debounce(1000, this.doRefresh);
+    this.doDownloadDebounce = debounce(1000, this.doDownload);
     this.getServingDetail(this.serviceId);
-    this.$on('dictReady', () => { this.dictReady = true; });
+    this.$on('dictReady', () => {
+      this.dictReady = true;
+    });
   },
   beforeDestroy() {
     this.keepPoll = false;
   },
   methods: {
+    parseObj,
     async getServingDetail(id) {
       this.item = await detail(id);
-      if (this.keepPoll && [SERVING_STATUS_ENUM.IN_DEPLOYMENT, SERVING_STATUS_ENUM.WORKING].indexOf(this.item.status) !== -1) {
+      if (
+        this.keepPoll &&
+        [SERVING_STATUS_ENUM.IN_DEPLOYMENT, SERVING_STATUS_ENUM.WORKING].indexOf(
+          this.item.status
+        ) !== -1
+      ) {
         setTimeout(() => {
           this.refetch(id);
-        }, 1000);
+        }, 5000);
       }
     },
 
@@ -270,7 +300,9 @@ export default {
     },
     async doStart() {
       this.startLoading = true;
-      await start(this.serviceId).finally(() => { this.startLoading = false; });
+      await start(this.serviceId).finally(() => {
+        this.startLoading = false;
+      });
       this.$message({
         message: '启动成功',
         type: 'success',
@@ -279,7 +311,9 @@ export default {
     },
     async doStop() {
       this.stopLoading = true;
-      await stop(this.serviceId).finally(() => { this.stopLoading = false; });
+      await stop(this.serviceId).finally(() => {
+        this.stopLoading = false;
+      });
       this.$message({
         message: '停止成功',
         type: 'success',
@@ -287,16 +321,17 @@ export default {
       this.doRefresh();
     },
     doDelete() {
-      this.$confirm('此操作将删除该服务, 是否继续?', '请确认')
-        .then(async () => {
-          this.deleteLoading = true;
-          await deleteServing(this.serviceId).finally(() => { this.deleteLoading = false; });
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-          });
-          this.$router.push({ name: 'BatchServing' });
+      this.$confirm('此操作将删除该服务, 是否继续?', '请确认').then(async () => {
+        this.deleteLoading = true;
+        await deleteServing(this.serviceId).finally(() => {
+          this.deleteLoading = false;
         });
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+        });
+        this.$router.push({ name: 'BatchServing' });
+      });
     },
     doRefresh() {
       this.getServingDetail(this.serviceId);
@@ -312,7 +347,9 @@ export default {
         this.$message.error('输出路径不存在');
         return;
       }
-      downloadZipFromObjectPath(this.item.outputPath, `${this.item.name}-result.zip`, { flat: true });
+      downloadZipFromObjectPath(this.item.outputPath, `${this.item.name}-result.zip`, {
+        flat: true,
+      });
       this.$message.success('请查看下载文件');
     },
   },
diff --git a/webapp/src/views/cloudServing/components/forms/batchServingForm.vue b/webapp/src/views/cloudServing/components/forms/batchServingForm.vue
index 1483909..aea2bc9 100644
--- a/webapp/src/views/cloudServing/components/forms/batchServingForm.vue
+++ b/webapp/src/views/cloudServing/components/forms/batchServingForm.vue
@@ -1,44 +1,32 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <el-form
-    ref="form"
-    :model="form"
-    :rules="rules"
-    label-width="120px"
-    class="model-config-wrapper"
-  >
+  <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="model-config-wrapper">
     <BatchUploadDialog
       ref="imgUploadDialog"
       action="fackApi"
       :params="uploadParams"
       :limit="5000"
-      :hash="false"
       :filters="uploadFilters"
       @upload-success="onUploadSuccess"
       @close="onUploadClose"
     />
     <el-form-item label="服务名称" prop="name">
-      <el-input
-        ref="nameInput"
-        v-model.trim="form.name"
-        maxlength="32"
-        show-word-limit
-      />
+      <el-input ref="nameInput" v-model.trim="form.name" maxlength="32" show-word-limit />
     </el-form-item>
     <el-form-item label="服务描述" prop="description">
       <el-input
@@ -50,36 +38,14 @@
       />
     </el-form-item>
     <el-divider />
-    <el-form-item
-      label="模型类型"
-      prop="modelResource"
-    >
-      <el-radio-group
-        v-model="form.modelResource"
-        @change="onModelResourceChange"
-      >
-        <el-radio
-          border
-          :label="0"
-          class="mr-0 w-150"
-        >我的模型</el-radio>
-        <el-radio
-          border
-          :label="1"
-          class="w-150"
-        >预训练模型</el-radio>
+    <el-form-item label="模型类型" prop="modelResource">
+      <el-radio-group v-model="form.modelResource" @change="onModelResourceChange">
+        <el-radio border :label="0" class="mr-0 w-150">我的模型</el-radio>
+        <el-radio border :label="1" class="w-150">预训练模型</el-radio>
       </el-radio-group>
     </el-form-item>
-    <el-form-item
-      ref="modelAddress"
-      prop="modelAddress"
-      label="模型"
-    >
-      <el-select
-        v-model="form.modelId"
-        placeholder="请选择模型"
-        @change="onModelChange"
-      >
+    <el-form-item ref="modelBranchId" prop="modelBranchId" label="模型">
+      <el-select v-model="form.modelId" placeholder="请选择模型" filterable @change="onModelChange">
         <el-option
           v-for="model in modelList"
           :key="model.id"
@@ -89,15 +55,76 @@
       </el-select>
       <el-select
         v-if="!isPresetModel"
-        v-model="form.modelAddress"
+        v-model="form.modelBranchId"
         placeholder="请选择模型版本"
+        filterable
         @change="onModelVersionChange"
       >
         <el-option
           v-for="version in modelVersionList"
           :key="version.id"
-          :value="version.modelAddress"
-          :label="version.versionNum"
+          :value="version.id"
+          :label="version.version"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="自定义推理脚本">
+      <el-switch v-model="form.useScript" @change="onUseScriptChange" />
+    </el-form-item>
+    <el-form-item
+      v-if="form.useScript"
+      prop="algorithmId"
+      class="form-item-follower"
+      :error="scriptErrMsg"
+    >
+      <div class="tip px-20">
+        开启该选项将会使用自定义推理脚本进行推理
+      </div>
+      <el-select
+        v-model="form.algorithmId"
+        class="w-200 mt-10"
+        placeholder="请选择自定义推理脚本"
+        filterable
+      >
+        <el-option
+          v-for="script of algorithmList"
+          :key="script.id"
+          :value="script.id"
+          :label="script.algorithmName"
+        />
+      </el-select>
+      <span class="ml-10">
+        推理脚本未上传？点击
+        <el-link type="primary" class="lh-20" @click="goCreateAlgorithm">
+          这里
+        </el-link>
+        上传推理脚本
+      </span>
+    </el-form-item>
+    <el-form-item ref="imageTag" label="镜像选择" prop="imageTag">
+      <el-select
+        v-model="form.imageName"
+        placeholder="请选择镜像"
+        clearable
+        class="w-200"
+        filterable
+        @change="onImageNameChange"
+      >
+        <el-option v-for="item in imageNameList" :key="item" :label="item" :value="item" />
+      </el-select>
+      <el-select
+        v-model="form.imageTag"
+        placeholder="请选择镜像版本"
+        clearable
+        class="w-200"
+        filterable
+        @change="validateField('imageTag')"
+      >
+        <el-option
+          v-for="(item, index) in imageTagList"
+          :key="index"
+          :label="item.imageTag"
+          :value="item.imageTag"
         />
       </el-select>
     </el-form-item>
@@ -108,50 +135,43 @@
       :error="inputPathErrorMsg"
     >
       <el-button @click="onUploadDialogClick">上传图片</el-button>
+      <i v-if="!isAdd || uploaded" class="el-icon-circle-check success f18 vm" />
       <el-tooltip
-        v-if="isFork"
+        v-if="!isAdd"
         class="item"
         effect="dark"
-        content="Fork 服务时，无需重新上传图片"
+        content="编辑服务和 Fork 服务时，无需重新上传图片"
         placement="right"
       >
         <i class="el-icon-warning-outline primary f18 vm" />
       </el-tooltip>
     </el-form-item>
+    <!--运行参数-->
+    <RunParamForm
+      ref="deployParamForm"
+      :run-param-obj="form.deployParams || {}"
+      prop="runParams"
+      param-label-width="120px"
+      class="w120"
+      @updateRunParams="updateDeployParams"
+    />
     <el-form-item label="节点类型" prop="resourcesPoolType">
-      <el-radio-group
-        v-model="form.resourcesPoolType"
-        @change="onNodeTypeChange"
-      >
-        <el-radio
-          border
-          :label="0"
-          class="mr-0 w-150"
-        >CPU</el-radio>
-        <el-radio
-          border
-          :label="1"
-          class="w-150"
-        >GPU</el-radio>
+      <el-radio-group v-model="form.resourcesPoolType" @change="onNodeTypeChange">
+        <el-radio border :label="0" class="mr-0 w-150">CPU</el-radio>
+        <el-radio border :label="1" class="w-150">GPU</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item label="节点规格" prop="resourcesPoolSpecs">
-      <el-select
-        v-model="form.resourcesPoolSpecs"
-        placeholder="请选择节点规格"
-      >
+      <el-select v-model="form.resourcesPoolSpecs" placeholder="请选择节点规格" filterable>
         <el-option
           v-for="specs in specsList"
           :key="specs.id"
-          :label="specs.label"
-          :value="specs.label"
+          :label="specs.specsName"
+          :value="specs.specsName"
         />
       </el-select>
     </el-form-item>
-    <el-form-item
-      prop="resourcesPoolNode"
-      label="计算节点个数"
-    >
+    <el-form-item prop="resourcesPoolNode" label="节点数量">
       <el-input-number
         v-model="form.resourcesPoolNode"
         :min="1"
@@ -160,32 +180,35 @@
         step-strictly
       />
     </el-form-item>
-    <el-form-item
-      v-for="param in deployParamList"
-      :key="param.label"
-      :label="param.label"
-      :prop="param.label"
+    <BaseModal
+      :visible.sync="algorithmFormVisible"
+      title="上传自定义推理脚本"
+      :loading="algorithmFormSubmitting"
+      width="800px"
+      @close="onDialogClose"
+      @cancel="algorithmFormVisible = false"
+      @ok="onSubmitForm"
     >
-      <el-input
-        v-model="form.deployParams[param.label]"
-        class="w-200"
-      />
-      <el-tooltip
-        effect="dark"
-        :content="param.description"
-        placement="right"
-      >
-        <i class="el-icon-warning-outline primary f18 vm" />
-      </el-tooltip>
-    </el-form-item>
+      <AlgorithmForm ref="algorithmForm" form-type="serving" />
+    </BaseModal>
   </el-form>
 </template>
 
 <script>
-import { getUniqueId, invalidFileNameChar } from '@/utils';
-import { getModelByResource } from '@/api/model/model';
+import { mapGetters } from 'vuex';
+
+import { getUniqueId, invalidFileNameChar, RESOURCES_MODULE_ENUM } from '@/utils';
+import { getServingModel } from '@/api/model/model';
 import { list as getModelVersions } from '@/api/model/modelVersion';
+import { getImageNameList, getImageTagList } from '@/api/trainingImage';
+import { getInferenceAlgorithm, add as addAlgorithm } from '@/api/algorithm/algorithm';
+import { list as getSpecsNames } from '@/api/system/resources';
 import { validateNameWithHyphen } from '@/utils/validate';
+import { IMAGE_PROJECT_TYPE } from '@/views/trainingJob/utils';
+
+import RunParamForm from '@/components/Training/runParamForm';
+import BaseModal from '@/components/BaseModal';
+import AlgorithmForm from '@/views/algorithm/components/algorithmForm';
 
 import BatchUploadDialog from './batchUploadDialog';
 
@@ -195,29 +218,41 @@ const defaultForm = {
   description: null,
   modelResource: 0, // 模型类型
   modelId: null,
-  modelAddress: null,
+  modelBranchId: null,
+  imageName: null, // 镜像名称
+  imageTag: null, // 镜像版本
   inputPath: null, // 图片目录
   resourcesPoolType: 0, // 节点类型
   resourcesPoolSpecs: null, // 节点规格
   resourcesPoolNode: 1, // 节点数
   deployParams: {}, // 部署动态参数
+  useScript: false, // 是否使用自定义推理脚本
+  algorithmId: null, // 脚本 ID
 };
 
 export default {
   name: 'BatchServingForm',
-  dicts: ['cpu_specs', 'gpu_specs', 'frame_type', 'deploy_params'],
-  components: { BatchUploadDialog },
+  dicts: ['frame_type'],
+  components: {
+    RunParamForm,
+    BatchUploadDialog,
+    BaseModal,
+    AlgorithmForm,
+  },
   data() {
     return {
       formType: 'add',
       modelList: [],
       modelVersionList: [],
-      
+      algorithmList: [], // 自定义推理脚本列表
+      imageNameList: [], // 镜像名列表
+      imageTagList: [], // 镜像版本列表
+      specsList: [],
+
       uploadVisiable: false,
       uploaded: false,
       inputPathValid: true,
-
-      dictOrFormReady: false,
+      scriptValid: true, // 使用推理脚本校验
 
       form: { ...defaultForm },
 
@@ -238,31 +273,59 @@ export default {
             trigger: ['blur', 'change'],
           },
         ],
-        modelAddress: [{
-          required: true,
-          message: '请选择模型及版本',
-          trigger: 'manual',
-        }],
-        modelResource: [{
-          required: true,
-          message: '请选择模型类型',
-          trigger: 'change',
-        }],
-        resourcesPoolType: [{
-          required: true,
-          message: '请选择节点类型',
-          trigger: 'change',
-        }],
-        resourcesPoolSpecs: [{
-          required: true,
-          message: '请选择节点规格',
-          trigger: 'change',
-        }],
+        modelBranchId: [
+          {
+            required: true,
+            trigger: 'manual',
+            validator: (rule, value, callback) => {
+              if (this.isPresetModel && !this.form.modelId) {
+                callback(new Error('请选择模型'));
+              }
+              if (!this.isPresetModel && !this.form.modelBranchId) {
+                callback(new Error('请选择模型及版本'));
+              }
+              callback();
+            },
+          },
+        ],
+        modelResource: [
+          {
+            required: true,
+            message: '请选择模型类型',
+            trigger: 'change',
+          },
+        ],
+        resourcesPoolType: [
+          {
+            required: true,
+            message: '请选择节点类型',
+            trigger: 'change',
+          },
+        ],
+        resourcesPoolSpecs: [
+          {
+            required: true,
+            message: '请选择节点规格',
+            trigger: 'change',
+          },
+        ],
+        imageTag: [
+          {
+            required: true,
+            message: '请选择镜像',
+            trigger: 'manual',
+          },
+        ],
       },
-      uploadFilters: [invalidFileNameChar],
+      uploadFilters: [invalidFileNameChar], // 上传推理脚本及上传图片共用
+
+      // 创建算法表单
+      algorithmFormVisible: false,
+      algorithmFormSubmitting: false,
     };
   },
   computed: {
+    ...mapGetters(['user']),
     isAdd() {
       return this.formType === 'add';
     },
@@ -272,57 +335,32 @@ export default {
     isPresetModel() {
       return this.form.modelResource === 1;
     },
-    specsList() {
-      switch (this.form.resourcesPoolType) {
-        case 0:
-          return this.dict.cpu_specs;
-        case 1:
-          return this.dict.gpu_specs;
-        default:
-          return [];
-      }
-    },
     inputPathErrorMsg() {
       return this.inputPathValid ? null : '请先上传图片';
     },
+    scriptErrMsg() {
+      return this.scriptValid ? '' : '请选择自定义推理脚本';
+    },
+    // 批量上传图片的路径
     uploadParams() {
       return {
         objectPath: this.form.inputPath,
       };
     },
-    deployParamList() {
-      const { deploy_params } = this.dict;
-      if (!deploy_params) return [];
-      return deploy_params.map(param => {
-        const { label, value } = param;
-        return { label, description: value };
-      });
-    },
-    user() {
-      return this.$store.getters.user;
-    },
-  },
-  created() {
-    this.$on('dictReady', () => {
-      if (!this.form.resourcesPoolSpecs) {
-        this.onNodeTypeChange();
-      }
-      this.setDeployParams();
-    });
   },
   methods: {
     // Getters
     async getModels(modelResource, keepValue = false) {
-      this.modelList = await getModelByResource(modelResource);
+      this.modelList = await getServingModel(modelResource);
 
       // 修改时需要保留原服务的模型
       if (!keepValue || !this.form.modelId) {
-        this.form.modelAddress = null;
+        this.form.modelBranchId = null;
       } else {
-        const model = this.modelList.find(model => model.id === this.form.modelId);
+        const model = this.modelList.find((model) => model.id === this.form.modelId);
         if (!model) {
-          this.$message.warning('原有模型不存在，请重新选择');
-          this.form.modelId = this.form.modelAddress = null;
+          this.$message.warning('原有模型不存在或不支持部署，请重新选择');
+          this.form.modelId = this.form.modelBranchId = null;
           return;
         }
         if (modelResource === 0) {
@@ -331,38 +369,44 @@ export default {
       }
     },
     async getModelVersions(parentId, keepValue = false) {
-      const data = await getModelVersions({ parentId, current: 1, size: 500});
+      const data = await getModelVersions({ parentId, current: 1, size: 500 });
       this.modelVersionList = data.result;
 
       // 修改时需要保留原服务的模型版本
-      if (keepValue && this.form.modelAddress) {
-        const version = this.modelVersionList.find(version => version.modelAddress === this.form.modelAddress);
+      if (keepValue && this.form.modelBranchId) {
+        const version = this.modelVersionList.find(
+          (version) => version.id === this.form.modelBranchId
+        );
         if (!version) {
-          this.form.modelAddress = null;
+          this.form.modelBranchId = null;
           this.$message.warning('原有模型版本不存在，请重新选择');
         }
       }
     },
 
+    clearValidateField(fieldName) {
+      this.$refs[fieldName].clearValidate();
+    },
+    validateField(fieldName, trigger = 'manual') {
+      this.$refs[fieldName].validate(trigger);
+    },
     // Handlers
     onModelResourceChange(modelResource) {
-      this.form.modelId = this.form.modelAddress = null;
+      this.form.modelId = this.form.modelBranchId = null;
       this.getModels(modelResource);
+      this.clearValidateField('modelBranchId');
     },
     onModelChange(modelId) {
       this.form.modelId = modelId;
       if (this.isPresetModel) {
-        const model = this.modelList.find(model => model.id === modelId);
-        this.form.modelAddress = model.url;
-        this.$refs.modelAddress.validate('manual');
+        this.validateField('modelBranchId');
       } else {
         this.getModelVersions(modelId);
-        this.form.modelAddress = null;
+        this.form.modelBranchId = null;
       }
     },
-    onModelVersionChange(modelAddress) {
-      this.form.modelAddress = modelAddress;
-      this.$refs.modelAddress.validate('manual');
+    onModelVersionChange() {
+      this.validateField('modelBranchId');
     },
     onUploadSuccess() {
       this.uploaded = true;
@@ -371,15 +415,12 @@ export default {
     onUploadClose() {
       this.inputPathValid = !this.isAdd || this.uploaded;
     },
-    onNodeTypeChange() {
-      if (this.specsList.length) {
-        // 默认选择第一个节点
-        this.form.resourcesPoolSpecs = this.specsList[0].label;
-      }
+    async onNodeTypeChange() {
+      this.getSpecList();
     },
     async validate(resolve, reject) {
       let valid = true;
-      const validCallback = isValid => {
+      const validCallback = (isValid) => {
         valid = valid && isValid;
       };
       // el-form 表单校验
@@ -388,12 +429,24 @@ export default {
       // 创建批量服务时，必须要求先上传图片
       this.inputPathValid = !this.isAdd || this.uploaded;
       valid = valid && this.inputPathValid;
+      valid = this.validateScript() && valid;
       if (valid) {
         // 提交表单时，在表单中增加 节点规格 的 JSON 配置
-        const selectedSpecs = this.specsList.find(specs => specs.label === this.form.resourcesPoolSpecs);
+        const selectedSpecs = this.specsList.find(
+          (specs) => specs.specsName === this.form.resourcesPoolSpecs
+        );
         if (selectedSpecs) {
-          this.form.poolSpecsInfo = selectedSpecs.value;
+          const { cpuNum, gpuNum, memNum, workspaceRequest } = selectedSpecs;
+          const specsJson = {
+            cpuNum: cpuNum * 1000,
+            gpuNum,
+            memNum,
+            workspaceRequest: `${workspaceRequest}M`,
+          };
+          this.form.poolSpecsInfo = JSON.stringify(specsJson);
         }
+        // deployParams 赋值
+        this.form.deployParams = { ...this.deployParams };
         resolve && resolve(this.form);
       } else {
         reject && reject();
@@ -407,19 +460,26 @@ export default {
       this.formType = formType;
 
       // 根据表单的字段，将初始表单的对应字段赋值到表单上，若字段不存在则使用默认值
-      Object.keys(this.form).forEach(key => { form[key] && (this.form[key] = form[key]); });
+      Object.keys(this.form).forEach((key) => {
+        form[key] && (this.form[key] = form[key]);
+      });
       // deployParam 变量单独赋值，如果初始表单不包含这个字段，则赋值空对象，避免对象引用问题
       this.form.deployParams = form.deployParams || Object.create(null);
-      this.setDeployParams();
 
       // 如果是 fork 表单则 name 增加后缀
       formType === 'fork' && (this.form.name += '-Fork');
+
+      // 获取模型列表和镜像列表
       this.getModels(this.form.modelResource, true);
+      this.getImageNames(true);
+      this.getAlgorithms(true);
+      this.getSpecList(true);
+
       // 如果 inputPath 不存在，则更新 inputPath
       if (!this.form.inputPath) {
         this.updateObjectPath();
       }
-      
+
       // 渲染完成后清空表单验证，避免初始值导致表单错误提示
       this.$nextTick(() => {
         this.$refs.form.clearValidate();
@@ -433,20 +493,6 @@ export default {
         this.clearValidate();
       });
     },
-    setDeployParams() {
-      // 在 dictReady 和 initForm 两个地方调用，第二次调用时数据准备完毕，可以开始处理 deployParams
-      if (!this.dictOrFormReady) {
-        this.dictOrFormReady = true;
-        return;
-      }
-      const deployParam = Object.create(null);
-      // 根据 deployParamList 中的参数列表，取得对应字段的值或初始值
-      // 用于避免修改、Fork 服务时，详情返回的对象字段与最新的字典接口字段不一致，以字段字段为准
-      this.deployParamList.forEach(param => {
-        deployParam[param.label] = this.form.deployParams[param.label] || null;
-      });
-      this.form.deployParams = deployParam;
-    },
     clearValidate(...args) {
       return this.$refs.form.clearValidate.apply(this, args);
     },
@@ -456,6 +502,138 @@ export default {
     onUploadDialogClick() {
       this.$refs.imgUploadDialog.show();
     },
+
+    // 自定义推理脚本
+    // 获取自定义推理脚本列表
+    getAlgorithms(keepValue = false) {
+      getInferenceAlgorithm().then((res) => {
+        this.algorithmList = res;
+
+        if (keepValue && this.form.algorithmId) {
+          if (!this.algorithmList.some((algorithm) => algorithm.id === this.form.algorithmId)) {
+            this.$message.warning('原有算法不存在，请重新选择');
+            this.form.algorithmId = null;
+          }
+        }
+      });
+    },
+    onUseScriptChange(useScript) {
+      this.form.algorithmId = null;
+      !useScript && this.validateScript();
+    },
+    goCreateAlgorithm() {
+      this.algorithmFormVisible = true;
+      this.$nextTick(() => {
+        this.$refs.algorithmForm.initForm({
+          inference: true,
+        });
+      });
+    },
+    validateScript() {
+      if (!this.form.useScript) {
+        this.scriptValid = true;
+      } else {
+        this.scriptValid = this.form.algorithmId !== null;
+      }
+      return this.scriptValid;
+    },
+
+    // 镜像选择
+    async getImageNames(keepValue = false) {
+      this.imageNameList = await getImageNameList({ projectType: IMAGE_PROJECT_TYPE.TRAIN });
+      if (!keepValue || !this.form.imageName) {
+        this.form.imageTag = null;
+      } else if (!this.imageNameList.includes(this.form.imageName)) {
+        this.$message.warning('原有镜像不存在，请重新选择');
+        this.form.imageName = this.form.imageTag = null;
+      } else {
+        this.getImageTags(this.form.imageName, true);
+      }
+    },
+    // 获取镜像版本列表
+    async getImageTags(imageName, keepValue = false) {
+      this.imageTagList = await getImageTagList({
+        projectType: IMAGE_PROJECT_TYPE.TRAIN,
+        imageName,
+      });
+      if (keepValue && this.form.imageTag) {
+        if (!this.imageTagList.some((image) => image.imageTag === this.form.imageTag)) {
+          this.$message.warning('原有镜像版本不存在，请重新选择');
+          this.form.imageTag = null;
+        }
+      }
+    },
+    onImageNameChange(imageName) {
+      this.form.imageTag = null;
+      if (imageName) {
+        this.getImageTags(imageName);
+        return;
+      }
+      this.imageTagList = [];
+    },
+
+    // 自定义运行参数
+    updateDeployParams(params) {
+      this.deployParams = params;
+    },
+
+    // 上传自定义推理脚本
+    onDialogClose() {
+      setTimeout(() => {
+        this.$refs.algorithmForm.resetForm();
+      }, 700);
+    },
+    onSubmitForm() {
+      this.$refs.algorithmForm.validate(async (form) => {
+        this.algorithmFormSubmitting = true;
+        [this.form.algorithmId] = await addAlgorithm(form).finally(() => {
+          this.algorithmFormSubmitting = false;
+        });
+        this.algorithmFormVisible = false;
+        this.getAlgorithms(true);
+      });
+    },
+
+    // 获取节点规格列表
+    async getSpecList(keepValue = false) {
+      this.specsList = (
+        await getSpecsNames({
+          module: RESOURCES_MODULE_ENUM.SERVING,
+          resourcesPoolType: this.form.resourcesPoolType,
+          current: 1,
+          size: 500,
+        })
+      ).result;
+      if (!keepValue || !this.form.resourcesPoolSpecs) {
+        if (this.specsList.length) {
+          // 默认选择第一个节点
+          this.form.resourcesPoolSpecs = this.specsList[0].specsName;
+        }
+      } else if (
+        !this.specsList.find((specs) => specs.specsName === this.form.resourcesPoolSpecs)
+      ) {
+        this.$message.warning('原有资源规格不存在，请重新选择');
+        if (this.specsList.length) {
+          // 默认选择第一个节点
+          this.form.resourcesPoolSpecs = this.specsList[0].specsName;
+        }
+      }
+    },
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.more-params-container {
+  padding-top: 14px;
+}
+
+.form-item-follower {
+  margin-top: -22px;
+}
+
+.tip {
+  color: #f38900;
+  background: #ffe9cc;
+}
+</style>
diff --git a/webapp/src/views/cloudServing/components/forms/batchUploadDialog.vue b/webapp/src/views/cloudServing/components/forms/batchUploadDialog.vue
index b839b65..ed5c8b7 100644
--- a/webapp/src/views/cloudServing/components/forms/batchUploadDialog.vue
+++ b/webapp/src/views/cloudServing/components/forms/batchUploadDialog.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseModal
@@ -46,11 +46,9 @@
     <template #footer>
       <div>
         <el-button @click="onClickCancel">取消</el-button>
-        <el-button
-          type='primary'
-          :loading="uploading"
-          @click="onClickConfirm"
-        >{{ confirmText }}</el-button>
+        <el-button type="primary" :loading="uploading" @click="onClickConfirm">{{
+          confirmText
+        }}</el-button>
       </div>
     </template>
   </BaseModal>
@@ -90,7 +88,7 @@ export default {
     const onBeforeRemove = (file, fileList) => {
       return fileList.includes(file);
     };
-    
+
     // footer
     const onClickCancel = () => {
       state.visible = false;
@@ -107,10 +105,13 @@ export default {
         ctx.emit('upload-success');
         return;
       }
-      if (state.errFileList.length && state.errFileList.length + uploadedFiles === state.fileList.length) {
+      if (
+        state.errFileList.length &&
+        state.errFileList.length + uploadedFiles === state.fileList.length
+      ) {
         // 当有错误文件且文件总数匹配时
         state.uploadStatus = 'exception';
-        Message.error(`文件 ${state.errFileList.map(file => file.name).join('、')} 上传错误`);
+        Message.error(`文件 ${state.errFileList.map((file) => file.name).join('、')} 上传错误`);
         state.uploading = false;
       }
     };
@@ -120,17 +121,24 @@ export default {
         case 0:
           uploadedFiles = 0;
           state.errFileList = [];
-          upload.value.uploadSubmit((resolved, total) => {
-            if (localUploadId !== uploadId) { return; }
-            uploadedFiles = resolved;
-            const percent = toFixed(resolved / total);
-            state.uploadPercent = percent > 100 ? 100 : percent;
-            afterUpload();
-          }, (file) => {
-            if (localUploadId !== uploadId) { return; }
-            state.errFileList.push(file);
-            afterUpload();
-          });
+          upload.value.uploadSubmit(
+            (resolved, fileList) => {
+              if (localUploadId !== uploadId) {
+                return;
+              }
+              uploadedFiles = resolved;
+              const percent = toFixed(resolved / fileList.length);
+              state.uploadPercent = percent > 100 ? 100 : percent;
+              afterUpload();
+            },
+            (file) => {
+              if (localUploadId !== uploadId) {
+                return;
+              }
+              state.errFileList.push(file);
+              afterUpload();
+            }
+          );
           state.activeStep = 1;
           state.uploading = true;
           break;
diff --git a/webapp/src/views/cloudServing/components/forms/servingForm.vue b/webapp/src/views/cloudServing/components/forms/servingForm.vue
index c903d24..524844d 100644
--- a/webapp/src/views/cloudServing/components/forms/servingForm.vue
+++ b/webapp/src/views/cloudServing/components/forms/servingForm.vue
@@ -1,49 +1,28 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <el-form
-    ref="form"
-    :model="form"
-    :rules="rules"
-    label-width="120px"
-  >
+  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
     <el-form-item label="服务名称" prop="name">
-      <el-input
-        ref="nameInput"
-        v-model.trim="form.name"
-        maxlength="32"
-        show-word-limit
-      />
+      <el-input ref="nameInput" v-model.trim="form.name" maxlength="32" show-word-limit />
     </el-form-item>
     <el-form-item label="服务类型" prop="type">
-      <el-radio-group
-        v-model="form.type"
-        @change="onTypeChange"
-      >
-        <el-radio
-          border
-          :label="0"
-          class="mr-0 w-150"
-        >HTTP 模式</el-radio>
-        <el-radio
-          border
-          :label="1"
-          class="w-150"
-        >GRPC 模式</el-radio>
+      <el-radio-group v-model="form.type" @change="onTypeChange">
+        <el-radio border :label="0" class="mr-0 w-150">HTTP 模式</el-radio>
+        <el-radio border :label="1" class="w-150">GRPC 模式</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item label="服务描述" prop="description">
@@ -56,26 +35,22 @@
       />
     </el-form-item>
     <el-divider />
-    <el-card
-      v-for="(config, index) in modelConfigList"
-      :key="config.id"
-      class="mb-10 ml-120"
-    >
+    <el-card v-for="(config, index) in modelConfigList" :key="config.id" class="mb-10 ml-120">
       <ServingModelConfig
         ref="modelConfig"
         label-width="120px"
         :deletable="modelConfigList.length >= 2"
         :config="config"
         :model-disabled="index !== 0"
-        :model-address-map="modelAddressMap"
+        :model-address-map="modelBranchIdMap"
         :release-rate-disabled="modelConfigList.length === 1"
         :release-rate-sum-valid="releaseRateSumValid"
         :node-count-valid="nodeCountValid"
         @model-resource-change="onModelResourceChange"
         @model-change="onModelChange"
-        @model-version-change="version => onModelVersionChange(config.id, version)"
-        @release-rate-change="rate => onModelReleaseRateChange(rate, index)"
-        @change="config => onModelConfigChange(config, index)"
+        @model-version-change="(version) => onModelVersionChange(config.id, version)"
+        @release-rate-change="(rate) => onModelReleaseRateChange(rate, index)"
+        @change="(config) => onModelConfigChange(config, index)"
         @delete="onModelConfigDelete"
       />
     </el-card>
@@ -84,7 +59,8 @@
       :disabled="disableAddModelConfig"
       class="ml-120"
       @click="addModelConfig"
-    >添加模型版本进行灰度发布</el-button>
+      >添加模型版本进行灰度发布</el-button
+    >
   </el-form>
 </template>
 
@@ -107,12 +83,16 @@ const defaultForm = {
 const defaultModelConfig = {
   modelResource: 0, // 模型类型
   modelId: null,
-  modelAddress: null,
+  modelBranchId: null,
+  imageName: null, // 镜像名称
+  imageTag: null, // 镜像版本
   resourcesPoolType: 0, // 节点类型
   resourcesPoolSpecs: null, // 节点规格
   resourcesPoolNode: 1, // 节点数
   releaseRate: 100, // 灰度发布分流
-  deployParams: '{}', // 部署动态参数 JSON 字符串
+  deployParams: {}, // 部署参数
+  useScript: false, // 是否上传脚本
+  algorithmId: null, // 脚本 ID
 };
 
 let configId = 1; // 用于给 modelConfig 唯一的 id
@@ -123,7 +103,7 @@ export default {
   data() {
     return {
       modelConfigList: [], // 本地维护模型配置列表
-      modelAddressMap: {}, // 用于维护所选模型的模型地址
+      modelBranchIdMap: {}, // 用于维护所选模型的模型版本 ID
       isPresetModel: false, // 预置模型不允许灰度发布
 
       releaseRateSumValid: true,
@@ -160,7 +140,11 @@ export default {
   },
   computed: {
     disableAddModelConfig() {
-      return this.form.type === ONLINE_SERVING_TYPE.GRPC || this.modelConfigList.length >= 2 || this.isPresetModel;
+      return (
+        this.form.type === ONLINE_SERVING_TYPE.GRPC ||
+        this.modelConfigList.length >= 2 ||
+        this.isPresetModel
+      );
     },
   },
   methods: {
@@ -168,14 +152,16 @@ export default {
     onTypeChange(type) {
       // GRPC 模式不支持灰度发布
       if (type === ONLINE_SERVING_TYPE.GRPC && this.modelConfigList.length > 1) {
-        this.modelAddressMap = { [this.modelConfigList[0].id]: this.modelConfigList[0].modelAddress };
+        this.modelBranchIdMap = {
+          [this.modelConfigList[0].id]: this.modelConfigList[0].modelBranchId,
+        };
         this.modelConfigList.splice(1, this.modelConfigList.length - 1);
         this.modelConfigList.length && this.$refs.modelConfig[0].updateReleaseRate(100);
       }
     },
     onModelResourceChange(modelResource) {
       // 预置模型不支持灰度发布
-      this.modelAddressMap = {};
+      this.modelBranchIdMap = {};
       this.isPresetModel = modelResource === 1;
       this.modelConfigList.splice(1, this.modelConfigList.length - 1);
       this.modelConfigList.length && this.$refs.modelConfig[0].updateReleaseRate(100);
@@ -186,9 +172,11 @@ export default {
       for (let i = 1; i < this.modelConfigList.length; i += 1) {
         this.$refs.modelConfig[i].updateModel(modelId);
       }
+      // 需要清空 modelBranchIdMap
+      this.modelBranchIdMap = {};
     },
-    onModelVersionChange(configId, modelAddress) {
-      this.updateModelAddressMap(configId, modelAddress);
+    onModelVersionChange(configId, modelBranchId) {
+      this.updateModelAddressMap(configId, modelBranchId);
     },
     onModelReleaseRateChange(rate, i) {
       this.modelConfigList[i].releaseRate = rate;
@@ -206,10 +194,10 @@ export default {
       this.validateNodeCount();
     },
     onModelConfigDelete(configId) {
-      const index = this.modelConfigList.findIndex(config => config.id === configId);
+      const index = this.modelConfigList.findIndex((config) => config.id === configId);
       if (index !== -1) {
         this.modelConfigList.splice(index, 1);
-        Reflect.deleteProperty(this.modelAddressMap, configId);
+        Reflect.deleteProperty(this.modelBranchIdMap, configId);
       }
       this.$nextTick(() => {
         if (this.modelConfigList.length === 1) {
@@ -225,11 +213,13 @@ export default {
     initForm(originForm) {
       // 获取初始表单对象或空对象作为初始表单
       const form = originForm || Object.create(null);
-      
+
       // 根据表单的字段，将初始表单的对应字段赋值到表单上，若字段不存在则使用默认值
-      Object.keys(this.form).forEach(key => { form[key] && (this.form[key] = form[key]); });
+      Object.keys(this.form).forEach((key) => {
+        form[key] && (this.form[key] = form[key]);
+      });
       // modelConfigList 需要赋值新的数组，避免数组对象的引用问题
-      this.modelConfigList = [ ...this.form.modelConfigList ] || [];
+      this.modelConfigList = [...this.form.modelConfigList] || [];
       // 如果模型配置列表为空，则添加一个默认模型配置
       if (!this.modelConfigList.length) {
         this.modelConfigList.push({ ...defaultModelConfig });
@@ -238,8 +228,8 @@ export default {
       // 判断是否使用预训练模型
       this.isPresetModel = this.modelConfigList[0].modelResource === 1;
       // 如果模型配置缺少字段，则使用对应字段的默认值
-      this.modelConfigList.forEach(config => {
-        Object.keys(defaultModelConfig).forEach(key => {
+      this.modelConfigList.forEach((config) => {
+        Object.keys(defaultModelConfig).forEach((key) => {
           if (config[key] === undefined) {
             config[key] = defaultModelConfig[key];
           }
@@ -247,10 +237,10 @@ export default {
         // 为模型配置列表增加唯一 ID
         // eslint-disable-next-line no-plusplus
         config.id = configId++;
-        // 初始化 modelAddressMap
-        this.modelAddressMap[config.id] = config.modelAddress || undefined;
+        // 初始化 modelBranchIdMap
+        this.modelBranchIdMap[config.id] = config.modelBranchId || undefined;
       });
-      
+
       // 渲染完成后清空表单验证，避免初始值导致表单错误提示
       this.$nextTick(() => {
         this.clearValidate();
@@ -258,7 +248,7 @@ export default {
     },
     resetForm() {
       this.form = { ...defaultForm, modelConfigList: [] };
-      this.modelAddressMap = {};
+      this.modelBranchIdMap = {};
       this.$nextTick(() => {
         this.clearValidate();
       });
@@ -267,13 +257,13 @@ export default {
     validate(resolve, reject) {
       let valid = true;
       // 对基础表单进行验证
-      this.$refs.form.validate(isValid => {
+      this.$refs.form.validate((isValid) => {
         if (!isValid) {
           valid = false;
         }
       });
       // 对每个模型配置表单进行表单验证
-      this.$refs.modelConfig.forEach(config => {
+      this.$refs.modelConfig.forEach((config) => {
         config.validate(null, () => {
           valid = false;
         });
@@ -295,7 +285,7 @@ export default {
       // eslint-disable-next-line no-plusplus
       const newConfig = { ...defaultModelConfig, id: configId++ };
       let rateRemain = 100;
-      this.modelConfigList.forEach(config => {
+      this.modelConfigList.forEach((config) => {
         rateRemain -= config.releaseRate;
       });
       newConfig.releaseRate = rateRemain >= 0 ? rateRemain : 0;
@@ -306,19 +296,22 @@ export default {
     },
     validateReleaseRate() {
       let rateTotal = 0;
-      this.modelConfigList.forEach(config => {
+      this.modelConfigList.forEach((config) => {
         rateTotal += config.releaseRate;
       });
       this.releaseRateSumValid = rateTotal === 100;
     },
     validateNodeCount() {
-      const nodeCountSum = this.modelConfigList.reduce((sum, config) => sum + config.resourcesPoolNode, 0);
+      const nodeCountSum = this.modelConfigList.reduce(
+        (sum, config) => sum + config.resourcesPoolNode,
+        0
+      );
       this.nodeCountValid = nodeCountSum <= servingConfig.onlineServingNodeSumMax;
     },
-    updateModelAddressMap(configId, modelAddress) {
-      this.modelAddressMap = {
-        ...this.modelAddressMap,
-        [configId]: modelAddress,
+    updateModelAddressMap(configId, modelBranchId) {
+      this.modelBranchIdMap = {
+        ...this.modelBranchIdMap,
+        [configId]: modelBranchId,
       };
     },
   },
diff --git a/webapp/src/views/cloudServing/components/forms/servingModelConfig.vue b/webapp/src/views/cloudServing/components/forms/servingModelConfig.vue
index 32bdc06..f8fe3ee 100644
--- a/webapp/src/views/cloudServing/components/forms/servingModelConfig.vue
+++ b/webapp/src/views/cloudServing/components/forms/servingModelConfig.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-form
@@ -24,32 +24,13 @@
   >
     <el-row>
       <div class="model-config-column">
-        <el-form-item
-          v-if="!modelDisabled"
-          label="模型类型"
-          prop="modelResource"
-        >
-          <el-radio-group
-            v-model="form.modelResource"
-            @change="onModelResourceChange"
-          >
-            <el-radio
-              border
-              :label="0"
-              class="mr-0 w-150"
-            >我的模型</el-radio>
-            <el-radio
-              border
-              :label="1"
-              class="w-150"
-            >预训练模型</el-radio>
+        <el-form-item v-if="!modelDisabled" label="模型类型" prop="modelResource">
+          <el-radio-group v-model="form.modelResource" @change="onModelResourceChange">
+            <el-radio border :label="0" class="mr-0 w-150">我的模型</el-radio>
+            <el-radio border :label="1" class="w-150">预训练模型</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item
-          ref="modelAddress"
-          prop="modelAddress"
-          label="模型"
-        >
+        <el-form-item ref="modelBranchId" prop="modelBranchId" label="模型">
           <el-select
             v-model="form.modelId"
             class="w-200"
@@ -67,25 +48,55 @@
           </el-select>
           <el-select
             v-if="!isPresetModel"
-            v-model="form.modelAddress"
+            v-model="form.modelBranchId"
             class="w-200"
             placeholder="请选择模型版本"
+            filterable
             @change="onModelVersionChange"
           >
             <el-option
               v-for="version in modelVersionList"
               :key="version.id"
-              :value="version.modelAddress"
-              :label="version.versionNum"
-              :disabled="modelAddressList.indexOf(version.modelAddress) !== -1"
+              :value="version.id"
+              :label="version.version"
+              :disabled="modelBranchIdList.indexOf(version.id) !== -1"
             />
           </el-select>
         </el-form-item>
+        <el-form-item label="自定义推理脚本">
+          <el-switch v-model="form.useScript" @change="onUseScriptChange" />
+        </el-form-item>
         <el-form-item
-          prop="releaseRate"
-          label="灰度发布分流(%)"
-          :error="releaseRateErrMsg"
+          v-if="form.useScript"
+          prop="algorithmId"
+          class="form-item-follower"
+          :error="scriptErrMsg"
         >
+          <div class="tip px-20">
+            开启该选项将会使用自定义推理脚本进行推理
+          </div>
+          <el-select
+            v-model="form.algorithmId"
+            class="w-200 mt-10"
+            placeholder="请选择自定义推理脚本"
+            filterable
+          >
+            <el-option
+              v-for="script of algorithmList"
+              :key="script.id"
+              :value="script.id"
+              :label="script.algorithmName"
+            />
+          </el-select>
+          <span class="ml-10">
+            推理脚本未上传？点击
+            <el-link type="primary" class="lh-20" @click="goCreateAlgorithm">
+              这里
+            </el-link>
+            上传推理脚本
+          </span>
+        </el-form-item>
+        <el-form-item prop="releaseRate" label="灰度发布分流(%)" :error="releaseRateErrMsg">
           <el-input-number
             v-model="form.releaseRate"
             :min="0"
@@ -96,41 +107,48 @@
             @change="onReleaseRateChange"
           />
         </el-form-item>
-        <el-form-item
-          v-for="param in deployParamList"
-          :key="param.label"
-          :label="param.label"
-          :prop="param.label"
-        >
-          <el-input
-            v-model="deployParams[param.label]"
+        <!--运行参数-->
+        <RunParamForm
+          ref="deployParamForm"
+          :run-param-obj="form.deployParams || {}"
+          prop="runParams"
+          param-label-width="120px"
+          class="w120"
+          @updateRunParams="updateDeployParams"
+        />
+      </div>
+      <div class="model-config-column">
+        <el-form-item ref="imageTag" label="镜像选择" prop="imageTag">
+          <el-select
+            v-model="form.imageName"
+            placeholder="请选择镜像"
+            clearable
             class="w-200"
-          />
-          <el-tooltip
-            effect="dark"
-            :content="param.description"
-            placement="right"
+            filterable
+            @change="onImageNameChange"
           >
-            <i class="el-icon-warning-outline primary f18 vm" />
-          </el-tooltip>
+            <el-option v-for="item in imageNameList" :key="item" :label="item" :value="item" />
+          </el-select>
+          <el-select
+            v-model="form.imageTag"
+            placeholder="请选择镜像版本"
+            clearable
+            class="w-200"
+            filterable
+            @change="validateField('imageTag')"
+          >
+            <el-option
+              v-for="(item, index) in imageTagList"
+              :key="index"
+              :label="item.imageTag"
+              :value="item.imageTag"
+            />
+          </el-select>
         </el-form-item>
-      </div>
-      <div class="model-config-column">
         <el-form-item label="节点类型" prop="resourcesPoolType">
-          <el-radio-group
-            v-model="form.resourcesPoolType"
-            @change="onResourcesPoolTypeChange"
-          >
-            <el-radio
-              border
-              :label="0"
-              class="mr-0 w-150"
-            >CPU</el-radio>
-            <el-radio
-              border
-              :label="1"
-              class="w-150"
-            >GPU</el-radio>
+          <el-radio-group v-model="form.resourcesPoolType" @change="onResourcesPoolTypeChange">
+            <el-radio border :label="0" class="mr-0 w-150">CPU</el-radio>
+            <el-radio border :label="1" class="w-150">GPU</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="节点规格" prop="resourcesPoolSpecs">
@@ -138,20 +156,17 @@
             v-model="form.resourcesPoolSpecs"
             placeholder="请选择节点规格"
             class="w-200"
+            filterable
           >
             <el-option
               v-for="specs in specsList"
               :key="specs.id"
-              :label="specs.label"
-              :value="specs.label"
+              :label="specs.specsName"
+              :value="specs.specsName"
             />
           </el-select>
         </el-form-item>
-        <el-form-item
-          prop="resourcesPoolNode"
-          label="节点数"
-          :error="poolNodeErrMsg"
-        >
+        <el-form-item prop="resourcesPoolNode" label="节点数量" :error="poolNodeErrMsg">
           <el-input-number
             v-model="form.resourcesPoolNode"
             :min="1"
@@ -168,20 +183,42 @@
       class="el-icon-delete config-delete cp"
       @click="$emit('delete', config.id)"
     />
+    <BaseModal
+      :visible.sync="algorithmFormVisible"
+      title="上传自定义推理脚本"
+      :loading="algorithmFormSubmitting"
+      width="800px"
+      @close="onDialogClose"
+      @cancel="algorithmFormVisible = false"
+      @ok="onSubmitForm"
+    >
+      <AlgorithmForm ref="algorithmForm" form-type="serving" />
+    </BaseModal>
   </el-form>
 </template>
 
 <script>
-import { getModelByResource } from '@/api/model/model';
+import { getServingModel } from '@/api/model/model';
 import { list as getModelVersions } from '@/api/model/modelVersion';
-
+import { getImageNameList, getImageTagList } from '@/api/trainingImage';
+import { getInferenceAlgorithm, add as addAlgorithm } from '@/api/algorithm/algorithm';
+import { list as getSpecsNames } from '@/api/system/resources';
 import { servingConfig } from '@/config';
+import { RESOURCES_MODULE_ENUM } from '@/utils';
+import { IMAGE_PROJECT_TYPE } from '@/views/trainingJob/utils';
 
-const SERVING_ADDERSS_REG = /^\/serving\//;
+import RunParamForm from '@/components/Training/runParamForm';
+import BaseModal from '@/components/BaseModal';
+import AlgorithmForm from '@/views/algorithm/components/algorithmForm';
 
 export default {
   name: 'ServingModelConfig',
-  dicts: ['cpu_specs', 'gpu_specs', 'frame_type', 'deploy_params'],
+  components: {
+    RunParamForm,
+    BaseModal,
+    AlgorithmForm,
+  },
+  dicts: ['frame_type'],
   props: {
     config: {
       type: Object,
@@ -199,7 +236,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    modelAddressMap: {
+    modelBranchIdMap: {
       type: Object,
       default: () => ({}),
     },
@@ -220,60 +257,84 @@ export default {
     return {
       modelList: [],
       modelVersionList: [],
-      modelAddressList: [], // 记录其他模型版本选择的模型地址
-
-      dictOrFormReady: false,
+      modelBranchIdList: [], // 记录其他模型版本选择的模型版本 ID
+      algorithmList: [], // 自定义推理脚本列表
+      imageNameList: [], // 镜像名列表
+      imageTagList: [], // 镜像版本列表
+      specsList: [],
+      scriptValid: true, // 使用推理脚本校验
 
       form: {
         modelResource: 0, // 模型类型
         modelId: null,
-        modelAddress: null,
+        modelBranchId: null,
+        imageName: null, // 镜像名称
+        imageTag: null, // 镜像版本
         resourcesPoolType: 0, // 节点类型
         resourcesPoolSpecs: null, // 节点规格
         resourcesPoolNode: 1, // 节点数
         releaseRate: 100, // 灰度发布分流
-        deployParams: '{}', // 部署动态参数 JSON 字符串
+        deployParams: {}, // 部署动态参数对象
+        useScript: false, // 是否使用自定义推理脚本
+        algorithmId: null, // 脚本 ID
       },
-      deployParams: {}, // 本地维护动态参数对象
+      deployParams: {}, // 本地维护动态参数对象 TODO: 待删除相关代码
 
       rules: {
-        modelAddress: [{
-          required: true,
-          message: '请选择模型及版本',
-          trigger: 'manual',
-        }],
-        modelResource: [{
-          required: true,
-          message: '请选择模型类型',
-          trigger: 'change',
-        }],
-        resourcesPoolType: [{
-          required: true,
-          message: '请选择节点类型',
-          trigger: 'change',
-        }],
-        resourcesPoolSpecs: [{
-          required: true,
-          message: '请选择节点规格',
-          trigger: 'change',
-        }],
+        modelBranchId: [
+          {
+            required: true,
+            trigger: 'manual',
+            validator: (rule, value, callback) => {
+              if (this.isPresetModel && !this.form.modelId) {
+                callback(new Error('请选择模型'));
+              }
+              if (!this.isPresetModel && !this.form.modelBranchId) {
+                callback(new Error('请选择模型及版本'));
+              }
+              callback();
+            },
+          },
+        ],
+        modelResource: [
+          {
+            required: true,
+            message: '请选择模型类型',
+            trigger: 'change',
+          },
+        ],
+        resourcesPoolType: [
+          {
+            required: true,
+            message: '请选择节点类型',
+            trigger: 'change',
+          },
+        ],
+        resourcesPoolSpecs: [
+          {
+            required: true,
+            message: '请选择节点规格',
+            trigger: 'change',
+          },
+        ],
+        imageTag: [
+          {
+            required: true,
+            message: '请选择镜像',
+            trigger: 'manual',
+          },
+        ],
       },
+
+      // 创建算法表单
+      algorithmFormVisible: false,
+      algorithmFormSubmitting: false,
     };
   },
   computed: {
     isPresetModel() {
       return this.form.modelResource === 1;
     },
-    specsList() {
-      switch (this.form.resourcesPoolType) {
-        case 0:
-          return this.dict.cpu_specs;
-        case 1:
-          return this.dict.gpu_specs;
-        default:
-          return [];
-      }
-    },
     releaseRateZeroValid() {
       return this.form.releaseRate !== 0;
     },
@@ -287,27 +348,21 @@ export default {
       return null;
     },
     poolNodeErrMsg() {
-      return this.nodeCountValid ? '' : `模型节点总数不能超过${servingConfig.onlineServingNodeSumMax}个`;
-    },
-    deployParamList() {
-      const { deploy_params } = this.dict;
-      if (!deploy_params) return [];
-      return deploy_params.map(param => {
-        const { label, value } = param;
-        return { label, description: value };
-      });
+      return this.nodeCountValid
+        ? ''
+        : `模型节点总数不能超过${servingConfig.onlineServingNodeSumMax}个`;
     },
-    user() {
-      return this.$store.getters.user;
+    scriptErrMsg() {
+      return this.scriptValid ? '' : '请选择自定义推理脚本';
     },
   },
   watch: {
-    modelAddressMap: {
+    modelBranchIdMap: {
       handler(map) {
-        this.modelAddressList = [];
+        this.modelBranchIdList = [];
         for (const key of Object.keys(map)) {
           if (key !== this.form.id) {
-            this.modelAddressList.push(map[key]);
+            this.modelBranchIdList.push(map[key]);
           }
         }
       },
@@ -318,28 +373,26 @@ export default {
   created() {
     // 只在组件被创建时，将 config 同步到内部 form 上
     Object.assign(this.form, this.config);
-    this.$on('dictReady', () => {
-      if (!this.form.resourcesPoolSpecs) {
-        this.onResourcesPoolTypeChange();
-      }
-      this.setDeployParams();
-    });
-    this.setDeployParams();
+
+    // 获取模型列表和镜像列表
     this.getModels(this.form.modelResource, true);
+    this.getImageNames(true);
+    this.getAlgorithms(true);
+    this.getSpecList(true);
   },
   methods: {
     // Getters
     async getModels(modelResource, keepValue = false) {
-      this.modelList = await getModelByResource(modelResource);
+      this.modelList = await getServingModel(modelResource);
 
       // 修改时需要保留原服务的模型
       if (!keepValue || !this.form.modelId) {
-        this.form.modelAddress = null;
+        this.form.modelBranchId = null;
       } else {
-        const model = this.modelList.find(model => model.id === this.form.modelId);
+        const model = this.modelList.find((model) => model.id === this.form.modelId);
         if (!model) {
-          this.$message.warning('原有模型不存在，请重新选择');
-          this.form.modelId = this.form.modelAddress = null;
+          this.$message.warning('原有模型不存在或不支持部署，请重新选择');
+          this.form.modelId = this.form.modelBranchId = null;
           return;
         }
         if (modelResource === 0) {
@@ -348,58 +401,53 @@ export default {
       }
     },
     async getModelVersions(parentId, keepValue = false) {
-      const data = await getModelVersions({ parentId, current: 1, size: 500});
+      const data = await getModelVersions({ parentId, current: 1, size: 500 });
       this.modelVersionList = data.result;
 
       // 修改时需要保留原服务的模型版本
-      if (keepValue && this.form.modelAddress) {
-        const version = this.modelVersionList.find(version => version.modelAddress === this.form.modelAddress);
+      if (keepValue && this.form.modelBranchId) {
+        const version = this.modelVersionList.find(
+          (version) => version.id === this.form.modelBranchId
+        );
         if (!version) {
-          if (this.form.modelAddress.match(SERVING_ADDERSS_REG)) {
-            this.$message.warning('原模型为回滚备份模型，请选择模型');
-          } else {
-            this.$message.warning('原有模型版本不存在，请重新选择');
-          }
-          this.form.modelAddress = null;
+          this.$message.warning('原有模型版本不存在，请重新选择');
+          this.form.modelBranchId = null;
         }
       }
     },
-    getSpecs() {
-      if (!this.form.resourcesPoolSpecs && this.specsList.length) {
-        this.form.resourcesPoolSpecs = this.specsList[0].id;
-      }
-    },
 
+    clearValidateField(fieldName) {
+      this.$refs[fieldName].clearValidate();
+    },
+    validateField(fieldName, trigger = 'manual') {
+      this.$refs[fieldName].validate(trigger);
+    },
     // Handlers
     onModelResourceChange(modelResource) {
-      this.form.modelId = this.form.modelAddress = null;
+      this.form.modelId = this.form.modelBranchId = null;
       this.getModels(modelResource);
       this.$emit('model-resource-change', modelResource);
+      this.clearValidateField('modelBranchId');
     },
     onModelChange(modelId, emitEvent = true) {
       this.form.modelId = modelId;
-      if (this.isPresetModel) {
-        const model = this.modelList.find(model => model.id === modelId);
-        this.form.modelAddress = model.url;
-      } else {
+      if (!this.isPresetModel) {
         this.getModelVersions(modelId);
-        this.form.modelAddress = null;
+        this.form.modelBranchId = null;
+      } else {
+        this.validateField('modelBranchId');
       }
       // 对于模型的更改需要即时同步到外部，用于添加模型版本
       this.$emit('change', this.form);
       emitEvent && this.$emit('model-change', modelId);
     },
-    onModelVersionChange(modelAddress) {
-      this.form.modelAddress = modelAddress;
-      this.$refs.modelAddress.validate('manual');
+    onModelVersionChange(modelBranchId) {
+      this.validateField('modelBranchId');
       // 对于模型版本的更改需要即时同步到外部，用于禁用模型版本选项
-      this.$emit('model-version-change', modelAddress);
+      this.$emit('model-version-change', modelBranchId);
     },
     onResourcesPoolTypeChange() {
-      if (this.specsList.length) {
-        // 默认选择第一个节点
-        this.form.resourcesPoolSpecs = this.specsList[0].label;
-      }
+      this.getSpecList();
     },
     onPoolNodeChange() {
       this.$emit('change', this.form);
@@ -416,36 +464,34 @@ export default {
       this.form.releaseRate = rate;
       this.$emit('change', this.form);
     },
-    setDeployParams() {
-      // 在 dictReady 和 initForm 两个地方调用，第二次调用时数据准备完毕，可以开始处理 deployParams
-      if (!this.dictOrFormReady) {
-        this.dictOrFormReady = true;
-        return;
-      }
-      const deployParams = JSON.parse(this.form.deployParams);
-      this.deployParams = Object.create(null);
-      this.deployParamList.forEach(param => {
-        this.$set(this.deployParams, param.label, deployParams[param.label] || null);
-      });
-    },
     // 外部调用进行表单验证
     validate(resolve, reject) {
       // 表单验证时将 deployParams 更新到 form 上
-      this.form.deployParams = JSON.stringify(this.deployParams);
+      this.form.deployParams = { ...this.deployParams };
       // 在表单验证时向外传递数据
       this.$emit('change', this.form);
       let valid = true;
-      const validCallback = isValid => {
+      const validCallback = (isValid) => {
         valid = valid && isValid;
       };
       // el-form 表单校验
       this.$refs.form.validate(validCallback);
+      valid = this.validateScript() && valid;
       valid = valid && this.releaseRateZeroValid && this.releaseRateSumValid;
       if (valid) {
         // 提交表单时，在表单中增加 节点规格 的 JSON 配置
-        const selectedSpecs = this.specsList.find(specs => specs.label === this.form.resourcesPoolSpecs);
+        const selectedSpecs = this.specsList.find(
+          (specs) => specs.specsName === this.form.resourcesPoolSpecs
+        );
         if (selectedSpecs) {
-          this.form.poolSpecsInfo = selectedSpecs.value;
+          const { cpuNum, gpuNum, memNum, workspaceRequest } = selectedSpecs;
+          const specsJson = {
+            cpuNum: cpuNum * 1000,
+            gpuNum,
+            memNum,
+            workspaceRequest: `${workspaceRequest}M`,
+          };
+          this.form.poolSpecsInfo = JSON.stringify(specsJson);
         }
         resolve && resolve(this.form);
       } else {
@@ -455,6 +501,124 @@ export default {
     clearValidate(...args) {
       return this.$refs.form.clearValidate.apply(this, args);
     },
+
+    // 自定义推理脚本
+    // 获取自定义推理脚本列表
+    getAlgorithms(keepValue = false) {
+      getInferenceAlgorithm().then((res) => {
+        this.algorithmList = res;
+
+        if (keepValue && this.form.algorithmId) {
+          if (!this.algorithmList.some((algorithm) => algorithm.id === this.form.algorithmId)) {
+            this.$message.warning('原有算法不存在，请重新选择');
+            this.form.algorithmId = null;
+          }
+        }
+      });
+    },
+    onUseScriptChange(useScript) {
+      this.form.algorithmId = null;
+      !useScript && this.validateScript();
+    },
+    goCreateAlgorithm() {
+      this.algorithmFormVisible = true;
+      this.$nextTick(() => {
+        this.$refs.algorithmForm.initForm({
+          inference: true,
+        });
+      });
+    },
+    validateScript() {
+      if (!this.form.useScript) {
+        this.scriptValid = true;
+      } else {
+        this.scriptValid = this.form.algorithmId !== null;
+      }
+      return this.scriptValid;
+    },
+
+    // 镜像选择
+    // 获取镜像名称列表
+    async getImageNames(keepValue = false) {
+      this.imageNameList = await getImageNameList({ projectType: IMAGE_PROJECT_TYPE.TRAIN });
+      if (!keepValue || !this.form.imageName) {
+        this.form.imageTag = null;
+      } else if (!this.imageNameList.includes(this.form.imageName)) {
+        this.$message.warning('原有镜像不存在，请重新选择');
+        this.form.imageName = this.form.imageTag = null;
+      } else {
+        this.getImageTags(this.form.imageName, true);
+      }
+    },
+    // 获取镜像版本列表
+    async getImageTags(imageName, keepValue = false) {
+      this.imageTagList = await getImageTagList({
+        projectType: IMAGE_PROJECT_TYPE.TRAIN,
+        imageName,
+      });
+      if (keepValue && this.form.imageTag) {
+        if (!this.imageTagList.some((image) => image.imageTag === this.form.imageTag)) {
+          this.$message.warning('原有镜像版本不存在，请重新选择');
+          this.form.imageTag = null;
+        }
+      }
+    },
+    onImageNameChange(imageName) {
+      this.form.imageTag = null;
+      if (imageName) {
+        this.getImageTags(imageName);
+        return;
+      }
+      this.imageTagList = [];
+    },
+
+    // 自定义运行参数
+    updateDeployParams(params) {
+      this.deployParams = params;
+    },
+
+    // 上传自定义推理脚本
+    onDialogClose() {
+      setTimeout(() => {
+        this.$refs.algorithmForm.resetForm();
+      }, 700);
+    },
+    onSubmitForm() {
+      this.$refs.algorithmForm.validate(async (form) => {
+        this.algorithmFormSubmitting = true;
+        [this.form.algorithmId] = await addAlgorithm(form).finally(() => {
+          this.algorithmFormSubmitting = false;
+        });
+        this.algorithmFormVisible = false;
+        this.getAlgorithms(true);
+      });
+    },
+
+    // 获取节点规格列表
+    async getSpecList(keepValue = false) {
+      this.specsList = (
+        await getSpecsNames({
+          module: RESOURCES_MODULE_ENUM.SERVING,
+          resourcesPoolType: this.form.resourcesPoolType,
+          current: 1,
+          size: 500,
+        })
+      ).result;
+      if (!keepValue || !this.form.resourcesPoolSpecs) {
+        if (this.specsList.length) {
+          // 默认选择第一个节点
+          this.form.resourcesPoolSpecs = this.specsList[0].specsName;
+        }
+      } else if (
+        !this.specsList.find((specs) => specs.specsName === this.form.resourcesPoolSpecs)
+      ) {
+        this.$message.warning('原有资源规格不存在，请重新选择');
+        if (this.specsList.length) {
+          // 默认选择第一个节点
+          this.form.resourcesPoolSpecs = this.specsList[0].specsName;
+        }
+      }
+    },
   },
 };
 </script>
@@ -478,4 +642,13 @@ export default {
     width: 50%;
   }
 }
+
+.form-item-follower {
+  margin-top: -22px;
+}
+
+.tip {
+  color: #f38900;
+  background: #ffe9cc;
+}
 </style>
diff --git a/webapp/src/views/cloudServing/components/keyValueTable/index.vue b/webapp/src/views/cloudServing/components/keyValueTable/index.vue
index 60b6c94..e43a63d 100644
--- a/webapp/src/views/cloudServing/components/keyValueTable/index.vue
+++ b/webapp/src/views/cloudServing/components/keyValueTable/index.vue
@@ -1,35 +1,23 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <el-table
-    :data="data"
-    border
-    v-bind="$attrs"
-  >
-    <el-table-column
-      :prop="keyProp"
-      :label="keyLabel"
-      :width="keyWidth"
-    />
-    <el-table-column
-      :prop="valueProp"
-      :label="valueLabel"
-      :width="valueWidth"
-    />
+  <el-table :data="data" border v-bind="$attrs">
+    <el-table-column :prop="keyProp" :label="keyLabel" :width="keyWidth" />
+    <el-table-column :prop="valueProp" :label="valueLabel" :width="valueWidth" />
   </el-table>
 </template>
 
diff --git a/webapp/src/views/cloudServing/components/modelDetail/index.vue b/webapp/src/views/cloudServing/components/modelDetail/index.vue
index 90fe5dc..55afbf8 100644
--- a/webapp/src/views/cloudServing/components/modelDetail/index.vue
+++ b/webapp/src/views/cloudServing/components/modelDetail/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="model-detail-container">
@@ -33,6 +33,7 @@
 <script>
 import { MODEL_RESOURCE_MAP, RESOURCES_POOL_TYPE_MAP } from '@/utils';
 
+import { parseObj } from '../../util';
 import KeyValueTable from '../keyValueTable';
 
 // 用于标识展示字段的 Map
@@ -41,6 +42,8 @@ const PARAM_KEY_MAP = new Map([
   ['modelVersion', '模型版本'],
   ['modelResource', '模型类型'],
   ['frameType', '模型框架'],
+  ['imageName', '镜像信息'],
+  ['algorithmName', '推理脚本'],
   ['releaseRate', '灰度分流发布率'],
   ['readyReplicas', '运行节点数'],
   ['resourcesPoolType', '节点类型'],
@@ -70,11 +73,10 @@ export default {
         return [];
       }
       const result = [];
-      const map = PARAM_KEY_MAP;
-      Array.from(map.keys()).forEach(key => {
+      Array.from(PARAM_KEY_MAP.keys()).forEach((key) => {
         if (this.hasValue(key, this.model[key])) {
           result.push({
-            label: map.get(key),
+            label: PARAM_KEY_MAP.get(key),
             value: this.getValue(key, this.model[key]),
           });
         }
@@ -83,18 +85,23 @@ export default {
     },
   },
   created() {
-    this.$on('dictReady', () => { this.dictReady = true; });
+    this.$on('dictReady', () => {
+      this.dictReady = true;
+    });
   },
   methods: {
     hasValue(key, value) {
-      if (value === null || value === undefined) { return false; }
+      if (value === null || value === undefined) {
+        return false;
+      }
 
       // 对于有特殊判断规则的字段单独判断
       switch (key) {
         case 'deployParams': {
-          const paramObj = JSON.parse(value);
           // 如果所有字段都为 null 则不展示
-          return Object.keys(paramObj).filter(key => paramObj[key] !== null).length > 0;
+          return (
+            Object.keys(value).filter((key) => value[key] !== null && value[key] !== '').length > 0
+          );
         }
         default:
           return true;
@@ -108,13 +115,10 @@ export default {
           return this.dict.label.frame_type[value];
         case 'resourcesPoolType':
           return RESOURCES_POOL_TYPE_MAP[value];
-        case 'deployParams': {
-          const paramObj = JSON.parse(value);
-          return Object.keys(paramObj)
-            .filter(key => paramObj[key] !== null && paramObj[key] !== '')
-            .map(key => `${key}: ${paramObj[key]}`)
-            .join('\n');
-        }
+        case 'deployParams':
+          return parseObj(value, '\n');
+        case 'imageName':
+          return `${this.model.imageName}:${this.model.imageTag}`;
         default:
           if (typeof value === 'object') {
             return JSON.stringify(value);
diff --git a/webapp/src/views/cloudServing/components/servingCallGuide/index.vue b/webapp/src/views/cloudServing/components/servingCallGuide/index.vue
index 835d848..f17e73b 100644
--- a/webapp/src/views/cloudServing/components/servingCallGuide/index.vue
+++ b/webapp/src/views/cloudServing/components/servingCallGuide/index.vue
@@ -1,39 +1,27 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div id="serving-call-guide-wrapper">
-    <el-form
-      label-width="100px"
-      label-position="left"
-    >
-      <el-form-item
-        label="接口地址："
-      >
-        <el-input
-          id="apiAddress"
-          v-model="apiAddress"
-          class="api-input"
-          readonly
-        />
-        <el-button
-          id="copy-btn"
-          data-clipboard-target="#apiAddress"
-          @click="onCopy"
-        >Copy</el-button>
+    <el-form label-width="100px" label-position="left">
+      <el-form-item label="接口地址：">
+        <el-input id="apiAddress" v-model="apiAddress" class="api-input" readonly />
+        <el-button id="copy-btn" data-clipboard-target="#apiAddress" @click="onCopy"
+          >Copy</el-button
+        >
       </el-form-item>
     </el-form>
     <p>参数配置</p>
@@ -50,7 +38,14 @@
 </template>
 
 <script>
-import { ref, computed, toRefs, onMounted, onBeforeUnmount, onActivated } from '@vue/composition-api';
+import {
+  ref,
+  computed,
+  toRefs,
+  onMounted,
+  onBeforeUnmount,
+  onActivated,
+} from '@vue/composition-api';
 import Clipboard from 'clipboard';
 import { Message } from 'element-ui';
 
@@ -74,9 +69,9 @@ export default {
   setup(props, ctx) {
     // clipboard
     const clipboard = ref(null);
-    const initClipboard  = () => {
+    const initClipboard = () => {
       clipboard.value = new Clipboard('#copy-btn');
-      clipboard.value.on('success', e => {
+      clipboard.value.on('success', (e) => {
         e.clearSelection();
       });
     };
@@ -96,7 +91,7 @@ export default {
       const { other: otherObj } = predictParam.value;
       const other = [];
       if (otherObj) {
-        Object.keys(otherObj).forEach(key => {
+        Object.keys(otherObj).forEach((key) => {
           other.push({
             name: key,
             data: map2Array(otherObj[key]),
diff --git a/webapp/src/views/cloudServing/components/servingCallGuide/servingApiInfo.vue b/webapp/src/views/cloudServing/components/servingCallGuide/servingApiInfo.vue
index 47b1527..05cb878 100644
--- a/webapp/src/views/cloudServing/components/servingCallGuide/servingApiInfo.vue
+++ b/webapp/src/views/cloudServing/components/servingCallGuide/servingApiInfo.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="api-info-wrapper">
@@ -22,10 +22,7 @@
     <KeyValueTable :data="api.output" />
     <div v-if="api.other.length">
       <label class="api-info-label">其他参数</label>
-      <div
-        v-for="param in api.other"
-        :key="param.name"
-      >
+      <div v-for="param in api.other" :key="param.name">
         <p class="my-10">{{ param.name }}</p>
         <KeyValueTable :data="param.data" />
       </div>
diff --git a/webapp/src/views/cloudServing/components/servingDeploymentRecord/index.vue b/webapp/src/views/cloudServing/components/servingDeploymentRecord/index.vue
index fcccc7c..fd21c43 100644
--- a/webapp/src/views/cloudServing/components/servingDeploymentRecord/index.vue
+++ b/webapp/src/views/cloudServing/components/servingDeploymentRecord/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="serving-deploy-wrapper">
@@ -22,55 +22,27 @@
       shadow="always"
       class="mb-10"
     >
-      <el-table
-        ref="table"
-        :data="rollbackInfo.data"
-      >
-        <el-table-column
-          prop="createTime"
-          label="部署时间"
-          fixed
-        >
+      <el-table ref="table" :data="rollbackInfo.data">
+        <el-table-column prop="createTime" label="部署时间" fixed>
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.createTime) }}</span>
           </template>
         </el-table-column>
-        <el-table-column
-          prop="modelName"
-          label="模型名称"
-          fixed
-        >
+        <el-table-column prop="modelName" label="模型名称" fixed>
           <template slot-scope="scope">
-            {{scope.row.modelName || '--'}}
+            {{ scope.row.modelName || '--' }}
           </template>
         </el-table-column>
-        <el-table-column
-          prop="frameType"
-          label="模型框架"
-          fixed
-        >
+        <el-table-column prop="frameType" label="模型框架" fixed>
           <template slot-scope="scope">
-            {{dict.label.frame_type[scope.row.frameType]}}
+            {{ dict.label.frame_type[scope.row.frameType] }}
           </template>
         </el-table-column>
-        <el-table-column
-          prop="releaseRate"
-          label="灰度分流发布率"
-          min-width="120px"
-          fixed
-        />
-        <el-table-column
-          prop="resourcesPoolSpecs"
-          label="节点规格"
-          min-width="120px"
-          fixed
-        />
-        <el-table-column
-          prop="resourcesPoolType"
-          label="节点类型"
-        >
+        <el-table-column prop="releaseRate" label="灰度分流发布率" min-width="120px" fixed />
+        <el-table-column prop="resourcesPoolSpecs" label="节点规格" min-width="120px" fixed />
+        <el-table-column prop="resourcesPoolType" label="节点类型">
           <template slot-scope="scope">
-            {{scope.row.resourcesPoolType === 0 ? 'CPU' : 'GPU'}}
+            {{ scope.row.resourcesPoolType === 0 ? 'CPU' : 'GPU' }}
           </template>
         </el-table-column>
       </el-table>
@@ -105,7 +77,7 @@ import { parseTime } from '@/utils/index';
 export default {
   name: 'ServingDeploymentRecord',
   dicts: ['frame_type'],
-  props:{
+  props: {
     serviceId: {
       type: Number,
       required: true,
@@ -123,7 +95,7 @@ export default {
       default: false,
     },
   },
-  data(){
+  data() {
     return {
       originData: {},
     };
@@ -135,7 +107,7 @@ export default {
       Object.keys(this.originData)
         .sort()
         .reverse()
-        .forEach(key => {
+        .forEach((key) => {
           rollbackList.push({
             key,
             data: this.originData[key],
@@ -145,7 +117,9 @@ export default {
     },
   },
   mounted() {
-    if (this.refresh) { return; } // 处理 进入页面之前进行刷新操作后请求两次的问题
+    if (this.refresh) {
+      return;
+    } // 处理 进入页面之前进行刷新操作后请求两次的问题
     this.getOriginData();
   },
   activated() {
@@ -161,7 +135,7 @@ export default {
       rollbackDetailClone.modelConfigList = this.originData[key];
 
       this.$confirm('是否要回滚该记录？', '请确认').then(() => {
-        rollbackServing(rollbackDetailClone).then(() =>{
+        rollbackServing(rollbackDetailClone).then(() => {
           this.$message.success('回滚成功');
           this.$router.push({ name: 'CloudServing' });
         });
diff --git a/webapp/src/views/cloudServing/components/servingLog/index.vue b/webapp/src/views/cloudServing/components/servingLog/index.vue
index 3db1139..1eae484 100644
--- a/webapp/src/views/cloudServing/components/servingLog/index.vue
+++ b/webapp/src/views/cloudServing/components/servingLog/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div id="serving-log-wrapper">
@@ -62,11 +62,7 @@
         <el-button @click="doRefresh">搜索</el-button>
       </span>
     </header>
-    <el-tabs
-      v-model="activeLogTimeTag"
-      class="log-time-tags my-10"
-      @tab-click="onLogTimeTabClick"
-    >
+    <el-tabs v-model="activeLogTimeTag" class="log-time-tags my-10" @tab-click="onLogTimeTabClick">
       <el-tab-pane
         v-for="time in timeOptions"
         :key="time.value"
@@ -75,10 +71,7 @@
       />
     </el-tabs>
     <el-collapse-transition>
-      <div
-        v-if="activeLogTimeTag === 'any'"
-        class="date-picker-wrapper"
-      >
+      <div v-if="activeLogTimeTag === 'any'" class="date-picker-wrapper">
         <label class="el-form-item__label">日志搜索区间</label>
         <el-date-picker
           v-model="logTimeRange"
@@ -102,7 +95,15 @@
 </template>
 
 <script>
-import { computed, watch, ref, reactive, toRefs, onActivated, onMounted } from '@vue/composition-api';
+import {
+  computed,
+  watch,
+  ref,
+  reactive,
+  toRefs,
+  onActivated,
+  onMounted,
+} from '@vue/composition-api';
 import { Message } from 'element-ui';
 
 import datePickerMixin from '@/mixins/datePickerMixin';
@@ -126,7 +127,7 @@ export default {
     },
     modelList: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     serviceId: {
       type: Number,
@@ -162,19 +163,24 @@ export default {
       logTimeRange: [],
       logKeyword: null,
       activeLogTimeTag: 'any',
-      timeOptions: [{
-        title: '自定义时间段',
-        value: 'any',
-      }, {
-        title: '最近5分钟',
-        value: '5',
-      }, {
-        title: '最近30分钟',
-        value: '30',
-      }, {
-        title: '最近1小时',
-        value: '60',
-      }],
+      timeOptions: [
+        {
+          title: '自定义时间段',
+          value: 'any',
+        },
+        {
+          title: '最近5分钟',
+          value: '5',
+        },
+        {
+          title: '最近30分钟',
+          value: '30',
+        },
+        {
+          title: '最近1小时',
+          value: '60',
+        },
+      ],
     });
     const resetLogger = () => {
       if (state.selectedPod) {
@@ -184,24 +190,26 @@ export default {
       }
     };
     const logOptions = computed(() => {
-      return { 
+      return {
         podName: state.selectedPod?.podName,
-        beginTimeMillis: loggerState.logTimeRange?.length ? loggerState.logTimeRange[0].getTime() : undefined,
-        endTimeMillis: loggerState.logTimeRange?.length ? loggerState.logTimeRange[1].getTime() : undefined,
+        namespace: state.selectedPod?.namespace,
+        beginTimeMillis: loggerState.logTimeRange?.length
+          ? loggerState.logTimeRange[0].getTime()
+          : undefined,
+        endTimeMillis: loggerState.logTimeRange?.length
+          ? loggerState.logTimeRange[1].getTime()
+          : undefined,
         logKeyword: loggerState.logKeyword || undefined,
       };
     });
     const onLogTimeTabClick = () => {
       const minutes = Number.parseInt(loggerState.activeLogTimeTag, 10);
       // 如果解析为 NaN，说明选择了自定义时间段，将 logTimeRange 设为空数组
-      if (isNaN(minutes)) {
+      if (Number.isNaN(minutes)) {
         loggerState.logTimeRange = [];
       } else {
         const now = new Date();
-        loggerState.logTimeRange = [
-          new Date(now - 1000 * 60 * minutes),
-          now,
-        ];
+        loggerState.logTimeRange = [new Date(now - 1000 * 60 * minutes), now];
       }
       resetLogger();
     };
@@ -242,13 +250,16 @@ export default {
       resetLogger();
     };
 
-    watch(() => props.status, async (next, previous) => {
-      // 如果状态从 部署中 变为其他状态时，重新请求 pod 列表
-      if (previous === SERVING_STATUS_ENUM.IN_DEPLOYMENT) {
-        await getPodList();
-        onLogTimeTabClick();
+    watch(
+      () => props.status,
+      async (next, previous) => {
+        // 如果状态从 部署中 变为其他状态时，重新请求 pod 列表
+        if (previous === SERVING_STATUS_ENUM.IN_DEPLOYMENT) {
+          await getPodList();
+          onLogTimeTabClick();
+        }
       }
-    });
+    );
 
     // Model
     const onModelChange = async () => {
@@ -279,7 +290,9 @@ export default {
         }
         [state.selectedModel] = props.modelList;
       }
-      if (props.refresh) { return; } // 处理 进入页面之前进行刷新操作后请求两次的问题
+      if (props.refresh) {
+        return;
+      } // 处理 进入页面之前进行刷新操作后请求两次的问题
       await getPodList();
       onLogTimeTabClick();
     });
diff --git a/webapp/src/views/cloudServing/components/servingMonitor/index.vue b/webapp/src/views/cloudServing/components/servingMonitor/index.vue
index 039c3e6..6d4fb9b 100644
--- a/webapp/src/views/cloudServing/components/servingMonitor/index.vue
+++ b/webapp/src/views/cloudServing/components/servingMonitor/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div id="serving-monitor-wrapper">
@@ -22,8 +22,26 @@
       :key="pod.id"
       :pod="pod"
       class="mb-10"
+      @show-monitor="showMonitor"
     />
     <p v-if="!podList.length" class="serving-text">暂无节点数据</p>
+    <el-dialog
+      :visible.sync="metricsVisible"
+      width="80%"
+      title="监控信息"
+      append-to-body
+      top="5vh"
+      custom-class="metrics-dialog"
+      :close-on-click-modal="false"
+      @opened="onMetricsDialogOpened"
+      @close="onMetricsDialogClose"
+    >
+      <PodMonitor
+        ref="podMonitor"
+        :namespace="metricsInfo.namespace"
+        :pod-name="metricsInfo.podName"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -31,13 +49,14 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { debounce } from 'throttle-debounce';
 
+import PodMonitor from '@/components/PodMonitor';
 import { getMetrics } from '@/api/cloudServing';
 
 import ServingMonitorCard from './servingMonitorCard';
 
 export default {
   name: 'ServingMonitor',
-  components: { ServingMonitorCard },
+  components: { ServingMonitorCard, PodMonitor },
   props: {
     refresh: {
       type: Boolean,
@@ -45,7 +64,7 @@ export default {
     },
     modelList: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     serviceId: {
       type: Number,
@@ -57,17 +76,20 @@ export default {
       monitorList: [],
       keepPull: true,
       podId: 0,
+
+      metricsVisible: false,
+      metricsInfo: {},
     };
   },
   computed: {
     podList() {
       const podList = [];
-      this.monitorList.forEach(modelConfig => {
+      this.monitorList.forEach((modelConfig) => {
         let modelConfigName = modelConfig.modelName;
         if (modelConfig.modelVersion) {
           modelConfigName += `-${modelConfig.modelVersion}`;
         }
-        modelConfig.podList.forEach(pod => {
+        modelConfig.podList.forEach((pod) => {
           // eslint-disable-next-line no-plusplus
           pod.id = this.podId++;
           pod.fullDisplayName = `${modelConfigName}: ${pod.displayName || pod.podName}`;
@@ -89,7 +111,9 @@ export default {
   },
   mounted() {
     this.refetch = debounce(3000, this.getMetrics);
-    if (this.refresh) { return; } // 处理 进入页面之前进行刷新操作后请求两次的问题
+    if (this.refresh) {
+      return;
+    } // 处理 进入页面之前进行刷新操作后请求两次的问题
     this.getMetrics();
   },
   methods: {
@@ -100,6 +124,16 @@ export default {
     reset() {
       this.$emit('reseted');
     },
+    showMonitor(metricsInfo) {
+      Object.assign(this.metricsInfo, metricsInfo);
+      this.metricsVisible = true;
+    },
+    onMetricsDialogOpened() {
+      this.$refs.podMonitor.init();
+    },
+    onMetricsDialogClose() {
+      this.$refs.podMonitor.stop();
+    },
   },
 };
 </script>
@@ -110,4 +144,4 @@ export default {
   color: #909399;
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/cloudServing/components/servingMonitor/servingMonitorCard.vue b/webapp/src/views/cloudServing/components/servingMonitor/servingMonitorCard.vue
index cbb3b9b..2bb2039 100644
--- a/webapp/src/views/cloudServing/components/servingMonitor/servingMonitorCard.vue
+++ b/webapp/src/views/cloudServing/components/servingMonitor/servingMonitorCard.vue
@@ -1,36 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-card class="serving-monitor-card">
     <div class="name">{{ pod.fullDisplayName }}</div>
-    <el-tooltip
-      content="点击查看监控信息详情"
-      placement="top"
-      :disabled="!pod.grafanaUrl"
-    >
-      <div
-        class="info-wrapper"
-        :class="{cp: pod.grafanaUrl}"
-        @click="onMonitorClick"
-      >
-        <div
-          v-if="modelUsages.length"
-          class="monitor-units-container"
-        >
+    <el-tooltip content="点击查看监控信息详情" placement="top" :disabled="!pod.grafanaUrl">
+      <div class="info-wrapper cp" @click="onMonitorClick">
+        <div v-if="modelUsages.length" class="monitor-units-container">
           <ServingMonitorUsageUnit
             v-for="item of modelUsages"
             :key="item.title"
@@ -49,7 +38,10 @@
 </template>
 
 <script>
-import { cpuFormatter, cpuPercentage, memFormatter, memPercentage } from '@/views/cloudServing/util';
+import { computed, toRefs } from '@vue/composition-api';
+
+import { cpuPercentage, memPercentage } from '@/utils';
+import { cpuFormatter, memFormatter } from '@/views/cloudServing/util';
 
 import ServingMonitorUsageUnit from './servingMonitorUsageUnit';
 
@@ -62,10 +54,14 @@ export default {
       required: true,
     },
   },
-  computed: {
-    modelUsages() {
+  setup(props, ctx) {
+    const { pod } = toRefs(props);
+    const { podName, namespace } = props.pod;
+
+    // 数据
+    const modelUsages = computed(() => {
       const list = [];
-      const { 
+      const {
         cpuUsageAmount,
         cpuUsageFormat,
         cpuRequestAmount,
@@ -76,24 +72,37 @@ export default {
         memoryRequestFormat,
         gpuUsed,
         gpuUsagePersent,
-      } = this.pod;
+      } = pod.value;
 
       list.push({
         title: 'CPU',
         used: cpuFormatter(cpuUsageAmount, cpuUsageFormat),
         total: cpuFormatter(cpuRequestAmount, cpuRequestFormat),
-        percentage: cpuPercentage(cpuUsageAmount, cpuUsageFormat, cpuRequestAmount, cpuRequestFormat),
+        percentage: cpuPercentage(
+          cpuUsageAmount,
+          cpuUsageFormat,
+          cpuRequestAmount,
+          cpuRequestFormat
+        ),
       });
-      
+
       list.push({
         title: '内存',
         used: memFormatter(memoryUsageAmount, memoryUsageFormat),
         total: memFormatter(memoryRequestAmount, memoryRequestFormat),
-        percentage: memPercentage(memoryUsageAmount, memoryUsageFormat, memoryRequestAmount, memoryRequestFormat),
+        percentage: memPercentage(
+          memoryUsageAmount,
+          memoryUsageFormat,
+          memoryRequestAmount,
+          memoryRequestFormat
+        ),
       });
 
       if (gpuUsed > 0) {
-        const gpuPercentageTotal = gpuUsagePersent.reduce((total, gpu) => total + Number(gpu.usage), 0);
+        const gpuPercentageTotal = gpuUsagePersent.reduce(
+          (total, gpu) => total + Number(gpu.usage),
+          0
+        );
         list.push({
           title: 'GPU',
           otherMsgs: [`GPU 卡数：${gpuUsed}`],
@@ -101,15 +110,17 @@ export default {
         });
       }
       return list;
-    },
-  },
-  methods: {
-    onMonitorClick() {
-      if (this.pod.grafanaUrl) {
-        const newPage = window.open();
-        newPage.location = this.pod.grafanaUrl;
-      }
-    },
+    });
+
+    const onMonitorClick = () => {
+      ctx.emit('show-monitor', { podName, namespace });
+    };
+
+    return {
+      modelUsages,
+
+      onMonitorClick,
+    };
   },
 };
 </script>
diff --git a/webapp/src/views/cloudServing/components/servingMonitor/servingMonitorUsageUnit.vue b/webapp/src/views/cloudServing/components/servingMonitor/servingMonitorUsageUnit.vue
index f19a7e3..61576d9 100644
--- a/webapp/src/views/cloudServing/components/servingMonitor/servingMonitorUsageUnit.vue
+++ b/webapp/src/views/cloudServing/components/servingMonitor/servingMonitorUsageUnit.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="usage-wrapper">
@@ -52,7 +52,7 @@ export default {
     },
     otherMsgs: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     color: {
       // el-progress 组件的 color 属性
diff --git a/webapp/src/views/cloudServing/components/servingPredict/index.vue b/webapp/src/views/cloudServing/components/servingPredict/index.vue
index 7d64bf0..cfc603a 100644
--- a/webapp/src/views/cloudServing/components/servingPredict/index.vue
+++ b/webapp/src/views/cloudServing/components/servingPredict/index.vue
@@ -1,30 +1,26 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div id="serving-predict-wrapper">
     <el-form>
-      <el-form-item
-        label="请求路径："
-      >
+      <el-form-item label="请求路径：">
         {{ requestUrl }}
       </el-form-item>
-      <el-form-item
-        label="选择预测文件"
-      >
+      <el-form-item label="选择预测文件">
         <el-upload
           ref="upload"
           :disabled="!requestUrl || disabled"
@@ -37,20 +33,9 @@
           :name="uploadName"
           class="serving-predict-upload"
         >
-          <el-button
-            slot="trigger"
-            :disabled="disabled"
-          >上传</el-button>
-          <el-button
-            :disabled="disabled"
-            @click="toPredict"
-          >预测</el-button>
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="仅支持预测 JPG、JPEG、PNG、BMP 格式的文件，且单次预测选择的文件大小总计不超过 100MB"
-            placement="right"
-          >
+          <el-button slot="trigger" :disabled="disabled">上传</el-button>
+          <el-button :disabled="disabled" @click="toPredict">预测</el-button>
+          <el-tooltip class="item" effect="dark" :content="predictContent" placement="right">
             <i class="el-icon-warning-outline primary f18 vm" />
           </el-tooltip>
           <i v-if="predicting" class="el-icon-loading" />
@@ -58,16 +43,14 @@
       </el-form-item>
       <el-form-item label="预测结果：" />
     </el-form>
-    <el-card
-      class="result-display-area"
-      shadow="never"
-    >{{ result }}</el-card>
+    <el-card class="result-display-area" shadow="never">{{ result }}</el-card>
   </div>
 </template>
 
 <script>
 import { predict } from '@/api/cloudServing';
 import { ONLINE_SERVING_TYPE, upload } from '@/views/cloudServing/util';
+import { servingConfig } from '@/config';
 
 export default {
   name: 'ServingPredict',
@@ -90,7 +73,7 @@ export default {
     },
     uploadName: {
       type: String,
-      default: 'image_files',
+      default: 'files',
     },
   },
   data() {
@@ -107,6 +90,9 @@ export default {
     isGrpc() {
       return this.type === ONLINE_SERVING_TYPE.GRPC;
     },
+    predictContent() {
+      return `仅支持预测 JPG、JPEG、PNG、BMP 格式的文件，且单次预测选择的文件大小总计不超过 ${servingConfig.onlinePredictFileSizeSum}MB`;
+    },
   },
   activated() {
     if (this.refresh) {
@@ -122,20 +108,27 @@ export default {
         this.$message.warning('请先选择文件');
         return;
       }
+      const totalSize = this.fileList.reduce((total, file) => total + file.size, 0) / 1024 / 1024;
+      if (totalSize > servingConfig.onlinePredictFileSizeSum) {
+        this.$message.warning(`当前上传文件大小总和为 ${totalSize.toFixed(2)}MB，超过限制大小`);
+        return;
+      }
 
       this.predicting = true;
       if (this.isGrpc) {
         const formData = new FormData();
-        this.fileList.forEach(file => formData.append('files', file.raw, file.raw.name));
-        predict(formData, { id: this.predictParam.id, url: this.requestUrl }).then(res => {
-          this.onUploadSuccess(res);
-        }).catch(err => {
-          this.onUploadError(err);
-        });
+        this.fileList.forEach((file) => formData.append('files', file.raw, file.raw.name));
+        predict(formData, { id: this.predictParam.id, url: this.requestUrl })
+          .then((res) => {
+            this.onUploadSuccess(res);
+          })
+          .catch((err) => {
+            this.onUploadError(err);
+          });
       } else {
         upload({
           requestUrl: this.requestUrl,
-          fileList: this.fileList.map(file => file.raw),
+          fileList: this.fileList.map((file) => file.raw),
           uploadName: this.uploadName,
           onUploadError: this.onUploadError,
           onUploadSuccess: this.onUploadSuccess,
diff --git a/webapp/src/views/cloudServing/detail.vue b/webapp/src/views/cloudServing/detail.vue
index e8a4408..f762719 100644
--- a/webapp/src/views/cloudServing/detail.vue
+++ b/webapp/src/views/cloudServing/detail.vue
@@ -1,52 +1,40 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div id="serving-detail-container" class="app-container">
     <header class="flex flex-between flex-vertical-align">
       <p>您的位置：云端 Serving / {{ item.name }}</p>
       <span class="btn-group">
-        <el-button
-          type="primary"
-          :disabled="!isStoped"
-          @click="doEdit"
-        >编辑</el-button>
-        <el-button
-          v-if="isStoped"
-          type="primary"
-          :loading="startLoading"
-          @click="doStart"
-        >启动</el-button>
+        <el-button type="primary" :disabled="!isStoped" @click="doEdit">编辑</el-button>
+        <el-button v-if="isStoped" type="primary" :loading="startLoading" @click="doStartDebounce"
+          >启动</el-button
+        >
         <el-button
           v-else
           type="primary"
           :disabled="!stopable"
           :loading="stopLoading"
-          @click="doStop"
-        >停止</el-button>
-        <el-button
-          type="primary"
-          :disabled="!isStoped"
-          :loading="deleteLoading"
-          @click="doDelete"
-        >删除</el-button>
-        <el-button
-          type="primary"
-          @click="doRefresh"
-        >刷新</el-button>
+          @click="doStopDebounce"
+          >停止</el-button
+        >
+        <el-button type="primary" :disabled="!isStoped" :loading="deleteLoading" @click="doDelete"
+          >删除</el-button
+        >
+        <el-button type="primary" @click="doRefreshDebounce">刷新</el-button>
       </span>
     </header>
     <el-divider class="mt-10" />
@@ -61,7 +49,10 @@
       </div>
       <div>
         <span class="detail-label">状态</span>
-        <span class="detail-value">{{ statusNameMap[item.status] }}</span>
+        <span class="detail-value">
+          {{ statusNameMap[item.status] }}
+          <msg-popover :status-detail="item.statusDetail" :show="showMessage" />
+        </span>
       </div>
       <div>
         <span class="detail-label">运行节点数/总节点数</span>
@@ -85,18 +76,17 @@
             trigger="hover"
             class="model-config-popover"
           >
-            <ModelDetail
-              :model="model"
-            />
-            <el-button slot="reference">{{ model.modelName || `模型${model.id}` }}{{ model.modelVersion ? `-${model.modelVersion}` : '' }}</el-button>
+            <ModelDetail :model="model" />
+            <el-button slot="reference"
+              >{{ model.modelName || `模型${model.id}`
+              }}{{ model.modelVersion ? `-${model.modelVersion}` : '' }}</el-button
+            >
           </el-popover>
         </span>
       </div>
     </div>
     <el-divider />
-    <el-tabs
-      v-model="activeDetailTabName"
-    >
+    <el-tabs v-model="activeDetailTabName">
       <el-tab-pane label="调用指南" name="guide" />
       <el-tab-pane label="预测" name="predict" />
       <el-tab-pane label="监控信息" name="monitor" />
@@ -153,8 +143,22 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { debounce } from 'throttle-debounce';
 
-import { start, stop, del as deleteServing, detail as getServingDetail, getPredictParam } from '@/api/cloudServing';
-import { SERVING_STATUS_ENUM, ONLINE_SERVING_STATUS_MAP, ONLINE_SERVING_TYPE, generateMap, serviceTypeMap, numFormatter } from './util';
+import {
+  start,
+  stop,
+  del as deleteServing,
+  detail as getServingDetail,
+  getPredictParam,
+} from '@/api/cloudServing';
+import MsgPopover from '@/components/MsgPopover';
+import { generateMap } from '@/utils';
+import {
+  SERVING_STATUS_ENUM,
+  ONLINE_SERVING_STATUS_MAP,
+  ONLINE_SERVING_TYPE,
+  serviceTypeMap,
+  numFormatter,
+} from './util';
 import ModelDetail from './components/modelDetail';
 import ServingCallGuide from './components/servingCallGuide';
 import ServingPredict from './components/servingPredict';
@@ -171,6 +175,7 @@ export default {
     ServingMonitor,
     ServingLog,
     ServingDeploymentRecord,
+    MsgPopover,
   },
   data() {
     return {
@@ -222,7 +227,7 @@ export default {
     },
     modelList() {
       const list = [];
-      this.item.modelConfigList.forEach(config => {
+      this.item.modelConfigList.forEach((config) => {
         list.push({
           id: config.id,
           label: `${config.modelName}${config.modelVersion ? `-${config.modelVersion}` : ''}`,
@@ -231,13 +236,24 @@ export default {
       return list;
     },
     isStoped() {
-      return [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.STOP].indexOf(this.item.status) !== -1;
+      return (
+        [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.STOP].indexOf(this.item.status) !== -1
+      );
     },
     isRunning() {
       return SERVING_STATUS_ENUM.WORKING === this.item.status;
     },
     stopable() {
-      return [SERVING_STATUS_ENUM.WORKING, SERVING_STATUS_ENUM.IN_DEPLOYMENT].indexOf(this.item.status) !== -1;
+      return (
+        [SERVING_STATUS_ENUM.WORKING, SERVING_STATUS_ENUM.IN_DEPLOYMENT].indexOf(
+          this.item.status
+        ) !== -1
+      );
+    },
+    showMessage() {
+      return [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.IN_DEPLOYMENT].includes(
+        this.item.status
+      );
     },
     statusNameMap() {
       return generateMap(ONLINE_SERVING_STATUS_MAP, 'name');
@@ -253,6 +269,9 @@ export default {
   async created() {
     this.serviceId = Number(this.$route.query.id);
     this.refetch = debounce(1000, this.getServingDetail);
+    this.doStartDebounce = debounce(1000, this.doStart);
+    this.doStopDebounce = debounce(1000, this.doStop);
+    this.doRefreshDebounce = debounce(1000, this.doRefresh);
     await this.getServingDetail(this.serviceId);
     const { target } = this.$route.params;
     if (target) {
@@ -266,8 +285,13 @@ export default {
     // Getters
     async getServingDetail(id) {
       this.item = await getServingDetail(id);
-      this.predictParam = { ...await getPredictParam(id), id };
-      if (this.keepPoll && [SERVING_STATUS_ENUM.IN_DEPLOYMENT, SERVING_STATUS_ENUM.WORKING].indexOf(this.item.status) !== -1) {
+      this.predictParam = { ...(await getPredictParam(id)), id };
+      if (
+        this.keepPoll &&
+        [SERVING_STATUS_ENUM.IN_DEPLOYMENT, SERVING_STATUS_ENUM.WORKING].indexOf(
+          this.item.status
+        ) !== -1
+      ) {
         setTimeout(() => {
           this.refetch(id);
         }, 1000);
@@ -284,7 +308,9 @@ export default {
     },
     async doStart() {
       this.startLoading = true;
-      await start(this.serviceId).finally(() => { this.startLoading = false; });
+      await start(this.serviceId).finally(() => {
+        this.startLoading = false;
+      });
       this.$message({
         message: '启动成功',
         type: 'success',
@@ -293,7 +319,9 @@ export default {
     },
     async doStop() {
       this.stopLoading = true;
-      await stop(this.serviceId).finally(() => { this.stopLoading = false; });
+      await stop(this.serviceId).finally(() => {
+        this.stopLoading = false;
+      });
       this.$message({
         message: '停止成功',
         type: 'success',
@@ -301,16 +329,17 @@ export default {
       this.doRefresh();
     },
     doDelete() {
-      this.$confirm('此操作将删除该服务, 是否继续?', '请确认')
-        .then(async () => {
-          this.deleteLoading = true;
-          await deleteServing(this.serviceId).finally(() => { this.deleteLoading = false; });
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-          });
-          this.$router.push({ name: 'CloudServing' });
+      this.$confirm('此操作将删除该服务, 是否继续?', '请确认').then(async () => {
+        this.deleteLoading = true;
+        await deleteServing(this.serviceId).finally(() => {
+          this.deleteLoading = false;
+        });
+        this.$message({
+          message: '删除成功',
+          type: 'success',
         });
+        this.$router.push({ name: 'CloudServing' });
+      });
     },
     doRefresh() {
       this.getServingDetail(this.serviceId);
diff --git a/webapp/src/views/cloudServing/formPage.vue b/webapp/src/views/cloudServing/formPage.vue
index d68fcb8..f33d648 100644
--- a/webapp/src/views/cloudServing/formPage.vue
+++ b/webapp/src/views/cloudServing/formPage.vue
@@ -1,51 +1,47 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div id="form-page-wrapper" class="app-container">
-    <ServingForm
-      v-if="pageType === 'onlineServing'"
-      ref="form"
-      label-width="120px"
-    />
-    <BatchServingForm
-      v-if="pageType === 'batchServing'"
-      ref="form"
-      label-width="120px"
-    />
+    <ServingForm v-if="pageType === 'onlineServing'" ref="form" label-width="120px" />
+    <BatchServingForm v-if="pageType === 'batchServing'" ref="form" label-width="120px" />
     <div id="btns-wrapper">
-      <el-button
-        type="primary"
-        :loading="submitting"
-        @click="submit"
-      >提交</el-button>
+      <el-button type="primary" :loading="submitting" @click="submit">提交</el-button>
     </div>
   </div>
 </template>
 
 <script>
-import { add as onlineAdd, edit as onlineEdit, detail as getOnlineServingDetail } from '@/api/cloudServing';
-import { add as batchAdd, edit as batchEdit, detail as getBatchServingDetail } from '@/api/cloudServing/batch';
+import {
+  add as onlineAdd,
+  edit as onlineEdit,
+  detail as getOnlineServingDetail,
+} from '@/api/cloudServing';
+import {
+  add as batchAdd,
+  edit as batchEdit,
+  detail as getBatchServingDetail,
+} from '@/api/cloudServing/batch';
 import { Constant, updateTitle } from '@/utils';
 import ServingForm from './components/forms/servingForm';
 import BatchServingForm from './components/forms/batchServingForm';
 
 const FORM_MAP = {
   onlineServing: {
-    title:'在线',
+    title: '在线',
     listPageName: 'CloudServing',
     submitFunc: {
       add: onlineAdd,
@@ -53,7 +49,7 @@ const FORM_MAP = {
     },
   },
   batchServing: {
-    title:'批量',
+    title: '批量',
     listPageName: 'BatchServing',
     submitFunc: {
       add: batchAdd,
@@ -79,7 +75,8 @@ export default {
   beforeRouteEnter(to, from, next) {
     const { type } = to.query;
     const { id, formType } = to.params;
-    const pageType = ['onlineServing', 'batchServing'].indexOf(type) !== -1 ? type : 'onlineServing';
+    const pageType =
+      ['onlineServing', 'batchServing'].indexOf(type) !== -1 ? type : 'onlineServing';
     const pageFormType = id ? formType || 'edit' : 'add'; // add / edit / fork
     const pageTypeName = FORM_MAP[pageType]?.title;
     const newTitle = `${Constant.FORM_TYPE_MAP[pageFormType]}${pageTypeName}服务`;
@@ -105,9 +102,11 @@ export default {
       default:
         if (this.$route.params.from === 'model') {
           // 从模型管理进入部署流程
-          const { modelId, modelAddress, modelResource } = this.$route.params;
+          const { modelId, modelBranchId, modelAddress, modelResource } = this.$route.params;
           this.$nextTick(() => {
-            this.$refs.form.initForm(this.getInitForm(modelId, modelAddress, modelResource));
+            this.$refs.form.initForm(
+              this.getInitForm({ modelId, modelBranchId, modelAddress, modelResource })
+            );
           });
         } else {
           this.$nextTick(() => {
@@ -127,20 +126,24 @@ export default {
           return getBatchServingDetail(id);
       }
     },
-    getInitForm(modelId, modelAddress, modelResource) {
+    getInitForm({ modelId, modelBranchId, modelAddress, modelResource }) {
       switch (this.pageType) {
         case 'onlineServing':
           return {
-            modelConfigList: [{
-              modelId,
-              modelAddress,
-              modelResource,
-            }],
+            modelConfigList: [
+              {
+                modelId,
+                modelBranchId,
+                modelAddress,
+                modelResource,
+              },
+            ],
           };
         case 'batchServing':
         default:
           return {
             modelId,
+            modelBranchId,
             modelAddress,
             modelResource,
           };
@@ -148,22 +151,28 @@ export default {
     },
     submit() {
       // 如果表单已经在提交了，就不做处理
-      if (this.submitting) { return; }
+      if (this.submitting) {
+        return;
+      }
       // 对基础表单进行验证
-      this.$refs.form.validate(form => {
+      this.$refs.form.validate((form) => {
         const func = FORM_MAP[this.pageType]?.submitFunc[this.formType];
         if (func) {
           this.submitting = true;
-          func(form).then(() => {
-            this.$router.push({
-              name: FORM_MAP[this.pageType].listPageName,
-              // 回到列表页时，带入表单页信息
-              params: {
-                pageType: this.pageType,
-                formType: this.formType,
-              },
+          func(form)
+            .then(() => {
+              this.$router.push({
+                name: FORM_MAP[this.pageType].listPageName,
+                // 回到列表页时，带入表单页信息
+                params: {
+                  pageType: this.pageType,
+                  formType: this.formType,
+                },
+              });
+            })
+            .finally(() => {
+              this.submitting = false;
             });
-          }).finally(() => { this.submitting = false; });
         }
       });
     },
diff --git a/webapp/src/views/cloudServing/index.vue b/webapp/src/views/cloudServing/index.vue
index 6bc2889..0567b18 100644
--- a/webapp/src/views/cloudServing/index.vue
+++ b/webapp/src/views/cloudServing/index.vue
@@ -1,37 +1,28 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div id="cloud-serving-container" class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <cdOperation
-        linkType="custom"
-        @to-add="onToAdd"
-      >
-        <span
-          v-show="crud.loading"
-          slot="left"
-        >
+      <cdOperation linkType="custom" @to-add="onToAdd">
+        <span v-show="crud.loading" slot="left">
           <i class="el-icon-loading" />
         </span>
-        <span
-          slot="right"
-          class="flex flex-end flex-wrap"
-        >
+        <span slot="right" class="flex flex-end flex-wrap">
           <el-input
             v-model="localQuery.name"
             clearable
@@ -52,22 +43,12 @@
       highlight-current-row
       @sort-change="crud.sortChange"
     >
-      <el-table-column
-        prop="id"
-        label="ID"
-        sortable="custom"
-        width="80px"
-        fixed
-      />
-      <el-table-column
-        prop="name"
-        label="服务名称"
-        min-width="120px"
-        show-overflow-tooltip
-        fixed
-      >
+      <el-table-column prop="id" label="ID" sortable="custom" width="80px" fixed />
+      <el-table-column prop="name" label="服务名称" min-width="120px" show-overflow-tooltip fixed>
         <template slot-scope="scope">
-          <el-link class="name-col" @click="goDetail(scope.row.id)">{{ scope.row.name }}</el-link>
+          <el-link class="name-col" type="primary" @click="goDetail(scope.row.id)">{{
+            scope.row.name
+          }}</el-link>
         </template>
       </el-table-column>
       <el-table-column
@@ -76,102 +57,82 @@
         min-width="180px"
         show-overflow-tooltip
       />
-      <el-table-column
-        prop="status"
-        label="状态"
-        min-width="120px"
-      >
+      <el-table-column prop="status" label="状态" min-width="120px">
         <template #header>
           <dropdown-header
             title="状态"
             :list="serviceStatusList"
             :filtered="Boolean(localQuery.status)"
-            @command="cmd => filter('status', cmd)"
+            @command="(cmd) => filter('status', cmd)"
           />
         </template>
         <template slot-scope="scope">
-          <el-tag
-            :type="statusTagMap[scope.row.status]"
-            effect="plain"
-          >{{ statusNameMap[scope.row.status] || '--' }}</el-tag>
+          <el-tag :type="statusTagMap[scope.row.status]" effect="plain">{{
+            statusNameMap[scope.row.status] || '--'
+          }}</el-tag>
+          <msg-popover
+            :status-detail="scope.row.statusDetail"
+            :show="showMessage(scope.row.status)"
+          />
         </template>
       </el-table-column>
-      <el-table-column
-        prop="progress"
-        label="运行节点数/总节点数"
-        width="180px"
-        align="center"
-      >
+      <el-table-column prop="progress" label="运行节点数/总节点数" width="180px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.runningNode || 0 }}/{{ scope.row.totalNode || 0 }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="progress"
-        label="调用失败次数/总次数"
-        width="180px"
-        align="center"
-      >
+      <el-table-column prop="progress" label="调用失败次数/总次数" width="180px" align="center">
         <template slot-scope="scope">
           <span>{{ getCallCount(scope.row) }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="type"
-        label="服务类型"
-        min-width="100px"
-      >
+      <el-table-column prop="type" label="服务类型" min-width="100px">
         <template #header>
           <dropdown-header
             title="服务类型"
             :list="servingTypeList"
             :filtered="Boolean(localQuery.type)"
-            @command="cmd => filter('type', cmd)"
+            @command="(cmd) => filter('type', cmd)"
           />
         </template>
         <template slot-scope="scope">
           <span>{{ serviceTypeMap[scope.row.type] }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="createTime"
-        label="创建时间"
-        sortable="custom"
-        min-width="160px"
-      >
+      <el-table-column prop="createTime" label="创建时间" sortable="custom" min-width="160px">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        label="操作"
-        width="250px"
-        fixed="right"
-      >
+      <el-table-column label="操作" width="250px" fixed="right">
         <template slot-scope="scope">
           <el-button
             type="text"
             :disabled="!canEdit(scope.row.status)"
             @click.stop="doEdit(scope.row.id)"
-          >编辑</el-button>
+            >编辑</el-button
+          >
           <el-button
             v-if="canStart(scope.row.status)"
             type="text"
-            @click.stop="doStart(scope.row)"
-          >启动</el-button>
+            @click.stop="doStartDebounce(scope.row)"
+            >启动</el-button
+          >
           <el-button
             v-else
             type="text"
             :disabled="!canStop(scope.row.status)"
-            @click.stop="doStop(scope.row.id)"
-          >停止</el-button>
+            @click.stop="doStopDebounce(scope.row.id)"
+            >停止</el-button
+          >
           <el-button
             type="text"
             :disabled="!canDelete(scope.row.status)"
             @click.native="doDelete(scope.row.id)"
-          >删除</el-button>
+            >删除</el-button
+          >
           <el-dropdown>
-            <el-button type="text" style="margin-left: 10px;" @click.stop="()=>{}">
+            <el-button type="text" style="margin-left: 10px;" @click.stop="() => {}">
               更多<i class="el-icon-arrow-down el-icon--right" />
             </el-button>
             <el-dropdown-menu slot="dropdown">
@@ -179,19 +140,13 @@
                 :disabled="!canPredict(scope.row.status)"
                 @click.native="doPredict(scope.row.id)"
               >
-                <el-button
-                  :disabled="!canPredict(scope.row.status)"
-                  type="text"
-                >预测</el-button>
+                <el-button :disabled="!canPredict(scope.row.status)" type="text">预测</el-button>
               </el-dropdown-item>
               <el-dropdown-item
                 :disabled="!canEdit(scope.row.status)"
                 @click.native="doRollback(scope.row.id)"
               >
-                <el-button
-                  :disabled="!canEdit(scope.row.status)"
-                  type="text"
-                >回滚</el-button>
+                <el-button :disabled="!canEdit(scope.row.status)" type="text">回滚</el-button>
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
@@ -211,13 +166,20 @@ import { mapActions } from 'vuex';
 import { list, start, stop, del as deleteServing } from '@/api/cloudServing';
 import CRUD, { presenter, header, crud } from '@crud/crud';
 import DropdownHeader from '@/components/DropdownHeader';
+import MsgPopover from '@/components/MsgPopover';
 import cdOperation from '@crud/CD.operation';
 import rrOperation from '@crud/RR.operation';
 import pagination from '@crud/Pagination';
 
-import { Constant } from '@/utils';
+import { Constant, generateMap } from '@/utils';
 
-import { SERVING_STATUS_ENUM, ONLINE_SERVING_STATUS_MAP, ONLINE_SERVING_TYPE, generateMap, serviceTypeMap, numFormatter } from './util';
+import {
+  SERVING_STATUS_ENUM,
+  ONLINE_SERVING_STATUS_MAP,
+  ONLINE_SERVING_TYPE,
+  serviceTypeMap,
+  numFormatter,
+} from './util';
 
 // 搜索用字段
 const defaultQuery = {
@@ -230,6 +192,7 @@ export default {
   name: 'CloudServing',
   components: {
     DropdownHeader,
+    MsgPopover,
     pagination,
     rrOperation,
     cdOperation,
@@ -269,7 +232,7 @@ export default {
     },
     serviceStatusList() {
       const list = [{ label: '全部', value: null }];
-      Object.keys(this.statusNameMap).forEach(status => {
+      Object.keys(this.statusNameMap).forEach((status) => {
         list.push({ label: this.statusNameMap[status], value: status });
       });
       return list;
@@ -289,11 +252,11 @@ export default {
     },
   },
   beforeRouteEnter(to, from, next) {
-    const goFirstPage = vm => {
+    const goFirstPage = (vm) => {
       vm.pageEnter(false);
     };
 
-    const goPreviousPage = vm => {
+    const goPreviousPage = (vm) => {
       vm.pageEnter(true);
     };
 
@@ -329,6 +292,8 @@ export default {
   },
   mounted() {
     this.refetch = debounce(1000, this.getServices);
+    this.doStartDebounce = debounce(1000, this.doStart);
+    this.doStopDebounce = debounce(1000, this.doStop);
   },
   beforeDestroy() {
     this.keepPoll = false;
@@ -424,15 +389,14 @@ export default {
       }
     },
     doDelete(id) {
-      this.$confirm('此操作将删除该服务, 是否继续?', '请确认')
-        .then(async () => {
-          await deleteServing(id);
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-          });
-          this.getServices();
+      this.$confirm('此操作将删除该服务, 是否继续?', '请确认').then(async () => {
+        await deleteServing(id);
+        this.$message({
+          message: '删除成功',
+          type: 'success',
         });
+        this.getServices();
+      });
     },
     doRollback(id) {
       this.$router.push({
@@ -443,10 +407,10 @@ export default {
         },
       });
     },
-    
+
     // Crud Hooks
     [CRUD.HOOK.beforeRefresh]() {
-      this.crud.query = { ...this.localQuery};
+      this.crud.query = { ...this.localQuery };
     },
     [CRUD.HOOK.afterRefresh]() {
       this.updatePage(this.crud.page.current);
@@ -454,13 +418,13 @@ export default {
         sort: this.crud.sort,
         order: this.crud.order,
       });
-      if (this.keepPoll && this.crud.data.some(service => this.needPoll(service.status))) {
+      if (this.keepPoll && this.crud.data.some((service) => this.needPoll(service.status))) {
         setTimeout(() => {
           this.refetch();
         }, 1000);
       }
     },
-    
+
     // Other methods
     numFormatter,
     getCallCount(service) {
@@ -474,34 +438,29 @@ export default {
       this.crud.toQuery();
     },
     needPoll(status) {
-      return [SERVING_STATUS_ENUM.WORKING, SERVING_STATUS_ENUM.IN_DEPLOYMENT].indexOf(status) !== -1;
+      return (
+        [SERVING_STATUS_ENUM.WORKING, SERVING_STATUS_ENUM.IN_DEPLOYMENT].indexOf(status) !== -1
+      );
     },
     canEdit(status) {
-      return [
-          SERVING_STATUS_ENUM.EXCEPTION,
-          SERVING_STATUS_ENUM.STOP,
-        ].indexOf(status) !== -1;
+      return [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.STOP].indexOf(status) !== -1;
     },
     canPredict(status) {
       return SERVING_STATUS_ENUM.WORKING === status;
     },
     canStart(status) {
-      return [
-          SERVING_STATUS_ENUM.EXCEPTION,
-          SERVING_STATUS_ENUM.STOP,
-        ].indexOf(status) !== -1;
+      return [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.STOP].indexOf(status) !== -1;
     },
     canStop(status) {
-      return [
-          SERVING_STATUS_ENUM.IN_DEPLOYMENT,
-          SERVING_STATUS_ENUM.WORKING,
-        ].indexOf(status) !== -1;
+      return (
+        [SERVING_STATUS_ENUM.IN_DEPLOYMENT, SERVING_STATUS_ENUM.WORKING].indexOf(status) !== -1
+      );
     },
     canDelete(status) {
-      return [
-          SERVING_STATUS_ENUM.EXCEPTION,
-          SERVING_STATUS_ENUM.STOP,
-        ].indexOf(status) !== -1;
+      return [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.STOP].indexOf(status) !== -1;
+    },
+    showMessage(status) {
+      return [SERVING_STATUS_ENUM.EXCEPTION, SERVING_STATUS_ENUM.IN_DEPLOYMENT].includes(status);
     },
   },
 };
diff --git a/webapp/src/views/cloudServing/util.js b/webapp/src/views/cloudServing/util.js
index 61f02b9..452c188 100644
--- a/webapp/src/views/cloudServing/util.js
+++ b/webapp/src/views/cloudServing/util.js
@@ -1,18 +1,20 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { memNormalize } from '@/utils';
 
 export const SERVING_STATUS_ENUM = {
   EXCEPTION: '0',
@@ -39,14 +41,6 @@ export const BATCH_SERVING_STATUS_MAP = {
   [SERVING_STATUS_ENUM.UNKNOWN]: { name: '未知', tagMap: 'info' },
 };
 
-export function generateMap(originMap, field) {
-  const map = {};
-  Object.keys(originMap).forEach(key => {
-    map[key] = originMap[key][field];
-  });
-  return map;
-}
-
 export const ONLINE_SERVING_TYPE = {
   HTTP: 0,
   GRPC: 1,
@@ -95,12 +89,13 @@ export function upload(options) {
   if (xhr.upload && options.onUploadProgress) {
     xhr.upload.onprogress = function progress(e) {
       if (e.total > 0) {
-        e.percent = e.loaded / e.total * 100;
+        e.percent = (e.loaded / e.total) * 100;
       }
       options.onUploadProgress(e);
     };
   }
 
+  // eslint-disable-next-line consistent-return
   xhr.onreadystatechange = () => {
     if (xhr.readyState === 4) {
       const response = getResponseBody(xhr);
@@ -133,54 +128,26 @@ export function cpuFormatter(num, unit) {
   return num + unit;
 }
 
-export function cpuPercentage(used, usedUnit, total, totalUnit) {
-  const _transition = (num, unit) => {
-    switch (unit) {
-      case '':
-        num *= 1e9;
-        break;
-      case 'm':
-        num *= 1e6;
-        break;
-      // no default
-    }
-    return num;
-  };
-  return Math.round(_transition(used, usedUnit) / _transition(total, totalUnit) * 10000) / 100;
-}
-
 export function memFormatter(num, unit) {
-  if (unit === 'Ki' && num > 1024) {
-    unit = 'Mi';
-    num /= 1024;
-  }
-  if (unit === 'Mi' && num > 1024) {
-    unit = 'Gi';
-    num /= 1024;
-  }
-  return Math.round(num * 10) / 10 + unit;
+  return `${Math.round(memNormalize(num, unit) * 10) / 10} Gi`;
 }
 
-export function memPercentage(used, usedUnit, total, totalUnit) {
-  const _transition = (num, unit) => {
-    switch (unit) {
-      case 'Gi':
-        num *= 2 ** 20;
-        break;
-      case 'Mi':
-        num *= 2 ** 10;
-        break;
-      // no default
-    }
-    return num;
-  };
-  return Math.round(_transition(used, usedUnit) / _transition(total, totalUnit) * 10000) / 100;
-}
-
-export const batchServingProgressColor = [
-  { color: '#67c23a', percentage: 100 },
-];
+export const batchServingProgressColor = [{ color: '#67c23a', percentage: 100 }];
 
 export function getPollId() {
   return new Date().getTime();
-};
+}
+
+/**
+ * 将对象解析为字符串后返回
+ * @param {Object} target 被解析的对象
+ * @param {String} separator 连接键值对的分隔符
+ * @returns 解析后的字符串
+ */
+export function parseObj(target, separator = '; ') {
+  if (!(target instanceof Object)) return '';
+  return Object.keys(target)
+    .filter((key) => target[key] !== null || target[key] !== '')
+    .map((key) => `${key}: ${target[key]}`)
+    .join(separator);
+}
diff --git a/webapp/src/views/dashboard/components/CardPanel.vue b/webapp/src/views/dashboard/components/CardPanel.vue
index a660f1e..c1a350d 100644
--- a/webapp/src/views/dashboard/components/CardPanel.vue
+++ b/webapp/src/views/dashboard/components/CardPanel.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="card-panel">
@@ -25,7 +25,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'CardPanel',
   props: {
@@ -53,7 +52,7 @@ export default {
   &-icon {
     width: 32px;
     height: 32px;
-    margin-left: 40px;
+    margin-left: 10%;
   }
 
   &-text {
@@ -65,6 +64,7 @@ export default {
       height: 20px;
       font-size: 14px;
       line-height: 20px;
+      white-space: nowrap;
     }
 
     &-value {
diff --git a/webapp/src/views/dashboard/components/Welcome.vue b/webapp/src/views/dashboard/components/Welcome.vue
index 5f61e8c..3b3a2b0 100644
--- a/webapp/src/views/dashboard/components/Welcome.vue
+++ b/webapp/src/views/dashboard/components/Welcome.vue
@@ -1,51 +1,63 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-card class="welcome" shadow="never">
     <div class="welcome-title">欢迎体验天枢一站式 AI 模型开发平台</div>
-    <div class="welcome-desc">天枢一站式 AI 模型开发平台（简称：一站式开发平台）面向 AI 模型生产的生命周期，提供了包括数据处理(数据集管理、智能标注和数据增强)、模型开发、模型训练和模型管理等功能，方便用户一站式构建 AI 算法。</div>
+    <div class="welcome-desc">
+      天枢一站式 AI 模型开发平台（简称：一站式开发平台）面向 AI
+      模型生产的生命周期，提供了包括数据处理(数据集管理、智能标注和数据增强)、算法开发、模型训练和模型管理等功能，方便用户一站式构建
+      AI 算法。
+    </div>
     <div class="welcome-title">产品优势</div>
     <el-row class="card-row">
       <el-col :xs="12" :sm="12" :lg="6" class="card-col">
         <div class="card-panel">
-          <img class="card-panel-img" src="@/assets/images/dashboard/advantage-1.png" alt="">
+          <img class="card-panel-img" src="@/assets/images/dashboard/advantage-1.png" alt="" />
           <div class="card-panel-title">一站式开发</div>
-          <div class="card-panel-desc">为用户提供一站式深度学习开发功能，通过智能数据处理、便利的模型开发和模型训练，打通深度学习全链路。</div>
+          <div class="card-panel-desc">
+            为用户提供一站式深度学习开发功能，通过智能数据处理、便利的算法开发和模型训练，打通深度学习全链路。
+          </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-col">
         <div class="card-panel">
-          <img class="card-panel-img" src="@/assets/images/dashboard/advantage-2.png" alt="">
+          <img class="card-panel-img" src="@/assets/images/dashboard/advantage-2.png" alt="" />
           <div class="card-panel-title">集成先进算法</div>
-          <div class="card-panel-desc">除了囊括常规AI算法外，一站式开发平台还集成了多领域的独家算法，提供业界领先性能。</div>
+          <div class="card-panel-desc">
+            除了囊括常规AI算法外，一站式开发平台还集成了多领域的独家算法，提供业界领先性能。
+          </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-col">
         <div class="card-panel">
-          <img class="card-panel-img" src="@/assets/images/dashboard/advantage-3.png" alt="">
+          <img class="card-panel-img" src="@/assets/images/dashboard/advantage-3.png" alt="" />
           <div class="card-panel-title">灵活易用</div>
-          <div class="card-panel-desc">除了一站式深度学习开发平台，亦提供可视化和动静结合编码方式，调试灵活，小白亦可快速上手。</div>
+          <div class="card-panel-desc">
+            除了一站式深度学习开发平台，亦提供可视化和动静结合编码方式，调试灵活，小白亦可快速上手。
+          </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-col">
         <div class="card-panel">
-          <img class="card-panel-img" src="@/assets/images/dashboard/advantage-4.png" alt="">
+          <img class="card-panel-img" src="@/assets/images/dashboard/advantage-4.png" alt="" />
           <div class="card-panel-title">性能优越</div>
-          <div class="card-panel-desc">集成自主研发的分布式训练平台，提供高性能的分布式计算体验，节省训练成本和训练时间。</div>
+          <div class="card-panel-desc">
+            集成自主研发的分布式训练平台，提供高性能的分布式计算体验，节省训练成本和训练时间。
+          </div>
         </div>
       </el-col>
     </el-row>
@@ -53,7 +65,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'Welcome',
 };
diff --git a/webapp/src/views/dashboard/dashboard.vue b/webapp/src/views/dashboard/dashboard.vue
index a971838..98175a1 100644
--- a/webapp/src/views/dashboard/dashboard.vue
+++ b/webapp/src/views/dashboard/dashboard.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="dashboard-container">
@@ -22,7 +22,9 @@
       <el-card class="section-card" shadow="hover">
         <div class="card-head">
           <div class="card-head-title">数据集</div>
-          <el-button class="card-head-button" type="primary" @click="goTo('/data/datasets')">进入项目</el-button>
+          <el-button class="card-head-button" type="primary" @click="goTo('/data/datasets')"
+            >进入项目</el-button
+          >
         </div>
         <el-row>
           <el-col :xs="12" :sm="12" :lg="6">
@@ -35,11 +37,13 @@
       </el-card>
     </template>
     <template v-if="show.development">
-      <div class="section-title">模型开发</div>
+      <div class="section-title">算法开发</div>
       <el-card class="section-card" shadow="hover">
         <div class="card-head">
           <div class="card-head-title">编码式建模</div>
-          <el-button class="card-head-button" type="primary" @click="goTo('/development/notebook')">进入项目</el-button>
+          <el-button class="card-head-button" type="primary" @click="goTo('/development/notebook')"
+            >进入项目</el-button
+          >
         </div>
         <el-row>
           <el-col :xs="12" :sm="12" :lg="6">
@@ -59,7 +63,9 @@
       <el-card class="section-card" shadow="hover">
         <div class="card-head">
           <div class="card-head-title">任务详情</div>
-          <el-button class="card-head-button" type="primary" @click="goTo('/training/job')">进入项目</el-button>
+          <el-button class="card-head-button" type="primary" @click="goTo('/training/job')"
+            >进入项目</el-button
+          >
         </div>
         <el-row>
           <el-col :xs="12" :sm="12" :lg="6">
@@ -105,9 +111,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters([
-      'permissions',
-    ]),
+    ...mapGetters(['permissions']),
   },
   mounted() {
     if (this.permissions.includes('data')) {
@@ -128,23 +132,23 @@ export default {
   },
   methods: {
     getDatasetsCount() {
-      queryDatasetsCount().then(res => {
+      queryDatasetsCount().then((res) => {
         this.publicCount = res.publicCount;
         this.privateCount = res.privateCount;
       });
     },
     getNotebookCount() {
-      myNotebookCount().then(res => {
+      myNotebookCount().then((res) => {
         this.notebookCount = res;
       });
     },
     getAlgorithmCount() {
-      myAlgorithmCount().then(res => {
+      myAlgorithmCount().then((res) => {
         this.algorithmCount = res.count;
       });
     },
     getTrainJobCount() {
-      myTrainJobCount().then(res => {
+      myTrainJobCount().then((res) => {
         this.runJobCount = res.runJobCount;
         this.finishJobCount = res.finishJobCount;
       });
diff --git a/webapp/src/views/dataset/annotate/index.vue b/webapp/src/views/dataset/annotate/index.vue
index 8c52807..44537d8 100644
--- a/webapp/src/views/dataset/annotate/index.vue
+++ b/webapp/src/views/dataset/annotate/index.vue
@@ -1,22 +1,23 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="annotate-container">
     <ThumbContainer
+      ref="thumbRef"
       :state="state"
       :currentImg="currentImg"
       :updateList="updateList"
@@ -28,15 +29,17 @@
     <WorkSpaceContainer
       ref="workspaceRef"
       :isTrack="isTrack"
+      :isSegmentation="isSegmentation"
       :state="state"
       :currentImg="currentImg"
-      :drawBboxEnd="drawBboxEnd"
+      :drawShapeEnd="drawShapeEnd"
       :createLabel="createLabel"
       :queryLabels="queryLabels"
       :updateState="updateState"
       :getLabelName="getLabelName"
       :deleteAnnotation="deleteAnnotation"
       :handleConfirm="handleConfirm"
+      :annotationType="annotationType"
       @selection="handleSelection"
       @brushStart="handleBrushStart"
       @save="handleSave"
@@ -46,6 +49,7 @@
     />
     <SettingContainer
       :isTrack="isTrack"
+      :isSegmentation="isSegmentation"
       :createLabel="createLabel"
       :queryLabels="queryLabels"
       :state="state"
@@ -53,6 +57,7 @@
       :getColorLabel="getColorLabel"
       :deleteAnnotation="deleteAnnotation"
       :findRowIndex="findRowIndex"
+      :annotationType="annotationType"
     />
   </div>
 </template>
@@ -63,10 +68,36 @@ import { Message, MessageBox } from 'element-ui';
 
 import { isEmpty, isFunction, omit, isNil } from 'lodash';
 
-import { detail, detectFileList, queryFileOffset, queryDataEnhanceList, getEnhanceFileList, queryLabels as queryLabelApi, createLabel as createLabelApi } from '@/api/preparation/dataset';
+import {
+  detail,
+  detectFileList,
+  queryFileOffset,
+  queryDataEnhanceList,
+  getEnhanceFileList,
+  queryLabels as queryLabelApi,
+  createLabel as createLabelApi,
+} from '@/api/preparation/dataset';
 import request from '@/utils/request';
-import { generateUuid, generateBbox, bbox2Extent, extent2Bbox, endsWith, replace, remove, AssertError } from '@/utils';
-import { parseAnnotation, labelsSymbol, enhanceSymbol, stringifyAnnotations, annotationMap, transformFiles, withExtent } from '../util';
+import { API_MODULE_NAME } from '@/config';
+import {
+  generateUuid,
+  generateBbox,
+  bbox2Extent,
+  extent2Bbox,
+  endsWith,
+  replace,
+  remove,
+  AssertError,
+  noop,
+} from '@/utils';
+import {
+  parseAnnotation,
+  labelsSymbol,
+  enhanceSymbol,
+  stringifyAnnotations,
+  transformFiles,
+  annotationBy,
+} from '../util';
 
 import ThumbContainer from './thumbContainer';
 import WorkSpaceContainer from './workSpaceContainer';
@@ -77,6 +108,8 @@ export const limit = 20;
 // eslint-disable-next-line import/no-extraneous-dependencies
 const path = require('path');
 
+const annotationByCode = annotationBy('code');
+
 export default {
   name: 'Annotate',
   components: {
@@ -86,20 +119,25 @@ export default {
   },
   setup(props, ctx) {
     const { $route, $router } = ctx.root;
-    const { params = {}} = $route;
+    const { params = {} } = $route;
+    const thumbRef = ref(null);
     const workspaceRef = ref(null);
 
     // 加载下一页，避免重复加载
     const loadNextPageFlag = ref(false);
 
-    // 标注类型
+    // 标注类型: 目标跟踪
     const isTrack = $route.name.startsWith('TrackDataset');
-    // const isAnnotation = meta.type === 'annotate'
+    // 标注类型: 语义分割
+    const isSegmentation = $route.name.startsWith('SegmentationDataset');
+    // 目标检测
+    const isDetection = $route.name.startsWith('AnnotateDataset');
     const state = reactive({
       error: null, // 错误信息
       files: [], // 当前数据集图片集合
       addFiles: [], // 新增图片集合
-      fileFilterType: 0, // 文件筛选状态
+      fileFilterType: [''], // 文件筛选状态
+      filterLabelId: [], // 文件加标签筛选条件
       total: 0, // 图片总数
       offset: 0, // 当前图片所处的偏移
       hasMore: true, // 是否有更多列表
@@ -124,6 +162,9 @@ export default {
       datasetInfo: {},
       hasEnhanceRecord: false, // 是否有增强记录
       history: [], // 保存新建的记录
+      shapes: [], // 图片分割记录
+      annotateStatus: [''], // 详情页的筛选状态
+      filterUnfinished: false,
     });
 
     // 注入全局 labels
@@ -132,8 +173,13 @@ export default {
     provide(labelsSymbol, toRefs(state).labels);
     provide(enhanceSymbol, toRefs(state).enhanceList);
 
+    // 标注类型
+    const annotationType = isSegmentation ? 'shapes' : 'annotations';
+    // 形状
+    const shapeField = isSegmentation ? 'points' : 'bbox';
+
     // 根据文件 id 获取offset
-    const getFileOffset = async(fileId, query = {}) => {
+    const getFileOffset = async (fileId, query = {}) => {
       let offset;
       try {
         offset = await queryFileOffset(params.datasetId, fileId, query);
@@ -147,7 +193,7 @@ export default {
     };
 
     // 获取数据集图片集合
-    const queryFiles = async(requestParams = {}) => {
+    const queryFiles = async (requestParams = {}) => {
       let offset = 0;
       if (!isNil(requestParams.offset)) {
         offset = requestParams.offset;
@@ -158,9 +204,8 @@ export default {
         offset = await getFileOffset(params.fileId, query);
       }
       // 请求图片集合参数
-      const filesParams = {limit, offset, ...requestParams};
+      const filesParams = { limit, offset, ...requestParams };
       const rawFiles = await detectFileList(params.datasetId, filesParams);
-      // const rawFiles = await request(`api/data/datasets/${params.datasetId}/files/detection`, { params: filesParams })
       // 首次加载挂载 offset, hack 添加 offset
       if (isEmpty(requestParams)) {
         rawFiles.__offset__ = offset;
@@ -169,37 +214,44 @@ export default {
     };
 
     // 查询标签
-    const queryLabels = async(requestParams = {}) => {
+    const queryLabels = async (requestParams = {}) => {
       const labels = await queryLabelApi(params.datasetId, requestParams);
       return labels || [];
     };
 
     // 新建标签
-    const createLabel = async(labelParams = {}) => {
+    const createLabel = async (labelParams = {}) => {
       const result = await createLabelApi(params.datasetId, labelParams);
       return result;
     };
 
     // 根据异步结果更新状态
-    const updateState = (params) => {
+    const updateState = (params, callback = noop) => {
       // 区分函数式更新和对象更新
-      if(typeof params === 'function') {
+      if (typeof params === 'function') {
         const next = params(state);
         Object.assign(state, next);
+        callback(state);
         return;
       }
       // 普通更新
       Object.assign(state, params);
+      callback(state);
+    };
+
+    // 选择当前合适的标注结果
+    const selectAnnotation = () => {
+      return isSegmentation ? state.shapes : state.annotations;
     };
 
     // 根据 labelId 获取标签颜色
-    const getColorLabel = labelId => {
-      return (state.labels.find(label => label.id === labelId) || {}).color || '#000';
+    const getColorLabel = (labelId) => {
+      return (state.labels.find((label) => label.id === labelId) || {}).color || '#000';
     };
 
     // 根据 labelId 获取标签名称
-    const getLabelName = labelId => {
-      return (state.labels.find(label => label.id === labelId) || {}).name || '';
+    const getLabelName = (labelId) => {
+      return (state.labels.find((label) => label.id === labelId) || {}).name || '';
     };
 
     // 选择标签，更新标注
@@ -214,16 +266,23 @@ export default {
         },
       };
 
-      const curAnnotationIndex = state.annotations.findIndex(d => d.id === curAnnotation.id);
+      const curAnnotationIndex = state[annotationType].findIndex((d) => d.id === curAnnotation.id);
       if (curAnnotationIndex !== -1) {
-        const updateAnnotations = replace(state.annotations, curAnnotationIndex, withLabelAnnotation);
-        updateState({ annotations: updateAnnotations, lastSelectedLabel: selectedLabel.value });
+        const updateAnnotations = replace(
+          state[annotationType],
+          curAnnotationIndex,
+          withLabelAnnotation
+        );
+        updateState({
+          [annotationType]: updateAnnotations,
+          lastSelectedLabel: selectedLabel.value,
+        });
       }
     };
 
     // 翻页
     const queryNextPage = (requestParams = {}) => {
-      return queryFiles(requestParams).then(res => {
+      return queryFiles(requestParams).then((res) => {
         const { result = [] } = res;
         const addFiles = transformFiles(result);
         const nextState = {
@@ -232,7 +291,7 @@ export default {
           hasMore: result.length === limit,
         };
         updateState(nextState);
-        return ({ ...nextState, raw: result });
+        return { ...nextState, raw: result };
       });
     };
 
@@ -272,9 +331,13 @@ export default {
       // 仍然有下页
       if (index + 2 >= fileList.value.length && state.hasMore) {
         // 避免重复加载
-        if(loadNextPageFlag.value === false) {
+        if (loadNextPageFlag.value === false) {
           loadNextPageFlag.value = true;
-          queryNextPage({ offset: state.offset, type: state.fileFilterType }).then(() => {
+          queryNextPage({
+            offset: state.offset,
+            type: state.fileFilterType,
+            labelId: state.filterLabelId,
+          }).then(() => {
             loadNextPageFlag.value = false;
           });
         }
@@ -287,13 +350,15 @@ export default {
         MessageBox.confirm('你还没有保存, 是否确认离开?', '提示', {
           type: 'warning',
           closeOnClickModal: false,
-        }).then(() => {
-          // 确保图片
-          item?.id && changeCurrentImg(item);
-          isFunction(callback) && callback(item);
-        }).catch(err => {
-          console.error(err);
-        });
+        })
+          .then(() => {
+            // 确保图片
+            item?.id && changeCurrentImg(item);
+            isFunction(callback) && callback(item);
+          })
+          .catch((err) => {
+            console.error(err);
+          });
         return '你还没有保存, 是否确认离开';
       }
       // 确保图片
@@ -303,21 +368,24 @@ export default {
     };
 
     // 请求指定图片信息
-    const queryFile = async(id) => {
-      const file = await request(`api/data/datasets/files/${params.datasetId}/${id}/info`) || {};
+    const queryFile = async (id) => {
+      const file =
+        (await request(`/${API_MODULE_NAME.DATA}/datasets/files/${params.datasetId}/${id}/info`)) ||
+        {};
       return file;
     };
 
     // 当不存在 fileId 时, 获取数据集下面的第一个图片
-    const queryFirstImg = async() => {
-      const file = await request(`api/data/datasets/${params.datasetId}/files/first`) || {};
+    const queryFirstImg = async () => {
+      const file =
+        (await request(`/${API_MODULE_NAME.DATA}/datasets/${params.datasetId}/files/first`)) || {};
       return file;
     };
 
     // 更新缩略图列表
-    const updateList = async(requestParams) => {
+    const updateList = async (requestParams) => {
       const rawFile = await queryFiles(requestParams);
-      const { result: files, page = {}} = rawFile;
+      const { result: files, page = {} } = rawFile;
       const nextFiles = transformFiles(files);
       const currentImgId = nextFiles.length ? nextFiles[0].id : undefined;
 
@@ -328,7 +396,7 @@ export default {
         total: page.total,
         currentImgId,
         timestamp: Date.now(), // 强制更新
-        hasMore: nextFiles.length >= limit ,
+        hasMore: nextFiles.length >= limit,
         offset: nextFiles.length,
       };
       // 更新图片集合
@@ -336,25 +404,38 @@ export default {
     };
 
     // 保存标注
-    const saveAnnotation = async(data) => {
-      await request.post(`api/data/datasets/files/${params.datasetId}/${state.currentImgId}/annotations`, data).then(() => {
-        // 清空历史记录
-        Object.assign(state, { history: [] });
-        Message.success({ message: '保存成功', duration: 800 });
-      });
+    const saveAnnotation = async (data) => {
+      await request
+        .post(
+          `/${API_MODULE_NAME.DATA}/datasets/files/${params.datasetId}/${state.currentImgId}/annotations`,
+          data
+        )
+        .then(() => {
+          // 清空历史记录
+          Object.assign(state, { history: [] });
+          Message.success({ message: '保存成功', duration: 800 });
+        });
     };
 
     // 人工确认标注
-    const confirmAnnotation = async(data) => {
-      await request.post(`api/data/datasets/files/${params.datasetId}/${state.currentImgId}/annotations/finish`, data).then(() => {
-        // 清空历史记录
-        Object.assign(state, { history: [] });
-        // todo: 更新列表
-        // updateList({
-        //   type: Number(state.fileFilterType),
-        //   offset: 0,
-        // });
-      });
+    const confirmAnnotation = async (data) => {
+      await request
+        .post(
+          `/${API_MODULE_NAME.DATA}/datasets/files/${params.datasetId}/${state.currentImgId}/annotations/finish`,
+          data
+        )
+        .then(() => {
+          // 清空历史记录
+          Object.assign(state, { history: [] });
+          // TODO: 只针对无标注文件更新
+          if (state.filterUnfinished) {
+            updateList({
+              type: state.fileFilterType,
+              labelId: state.filterLabelId,
+              offset: 0,
+            });
+          }
+        });
     };
 
     // 选择框
@@ -370,10 +451,46 @@ export default {
       });
     };
 
-    // 将绝对路径映射为相对图片路径
-    const mapBrushToBbox = annotation => {
-      const { bbox } = annotation.data;
+    const mapPolygon = (annotation) => {
+      const { points } = annotation.data;
+      const { dimension } = workspaceRef.value;
+      let temp_points = [];
 
+      if (dimension.scale < 1) {
+        const padding = {
+          width: dimension.svg.width - dimension.img.width * dimension.scale,
+          height: dimension.svg.height - dimension.img.height * dimension.scale,
+        };
+        temp_points = points.map((point) => ({
+          ...point,
+          x: point.x - padding.width / 2,
+          y: point.y - padding.height / 2,
+        }));
+      } else {
+        temp_points = points.slice(0);
+      }
+
+      const _points = temp_points.map((d) => {
+        const __point = {};
+        for (const k in d) {
+          // 根据图片缩放比例进行调整
+          __point[k] = d[k] / (dimension.scale || 1);
+        }
+        return __point;
+      });
+      const updatedAnnotation = {
+        ...annotation,
+        data: {
+          ...annotation.data,
+          points: _points,
+        },
+      };
+      return updatedAnnotation;
+    };
+
+    // TODO: 将绝对路径映射为相对图片路径
+    const mapBrushToBbox = (annotation) => {
+      const { bbox } = annotation.data;
       const { dimension } = workspaceRef.value;
       // 临时变量
       let temp_bbox = {};
@@ -407,95 +524,117 @@ export default {
           extent: bbox2Extent(_bbox),
         },
       };
-
       return updatedAnnotation;
     };
 
     // 保存的时候生成新的位置信息
     const rescale = (annotation) => {
-      const { extent } = annotation.data;
-
+      const { extent, points } = annotation.data;
+      const shapeInfo = isSegmentation ? points : extent2Bbox(extent);
       const updatedAnnotation = {
         ...annotation,
         data: {
           ...annotation.data,
-          bbox: extent2Bbox(extent),
+          [shapeField]: shapeInfo,
         },
       };
       // _type 仅供绘画使用
       return omit(updatedAnnotation, ['__type']);
     };
 
-    // 手动画框结束
-    const drawBboxEnd = (brush) => {
-      const bbox = generateBbox(brush);
+    // 改造标注数据
+    const transformShape = (raw) => {
+      return isSegmentation ? mapPolygon(raw) : mapBrushToBbox(raw);
+    };
+
+    // TODO: 手动画框结束
+    const drawShapeEnd = (shape) => {
+      const shapeInfo = isSegmentation ? { points: shape.points } : { bbox: generateBbox(shape) };
       // 记录上一次选中的 selectLabel
-      const otherProps = state.lastSelectedLabel ? {
-        categoryId: state.lastSelectedLabel,
-        color: getColorLabel(state.lastSelectedLabel),
-      } : {};
+      const otherProps = state.lastSelectedLabel
+        ? {
+            categoryId: state.lastSelectedLabel,
+            color: getColorLabel(state.lastSelectedLabel),
+          }
+        : {};
       const rawAnnotation = {
         id: generateUuid(),
+        shapeType: isSegmentation ? 'polygon' : 'rect',
         __type: 0, // 标识为新创建的标注
         data: {
-          bbox,
           score: 1,
+          ...shapeInfo,
           ...otherProps,
         },
       };
 
       // todo: 转换成标准地址（extent/bbox）
-      const annotation = mapBrushToBbox(rawAnnotation);
+      const annotation = transformShape(rawAnnotation);
       // 更新框选位置坐标
-      const newAnnotation = (state.annotations || []).concat(annotation);
+      const newAnnotation = (state[annotationType] || []).concat(annotation);
       Object.assign(state, {
-        annotations: newAnnotation,
+        [annotationType]: newAnnotation,
         history: state.history.concat(annotation),
         currentAnnotationId: annotation.id,
       });
     };
 
-    // 校验 annotion
-    const checkAnnotationValid = ({ data }) => {
-      if (!data.bbox || !data.categoryId) {
+    const validateField = ({ data }) => {
+      if (!data[shapeField] || !data.categoryId) {
         return false;
       }
       return true;
     };
 
+    // 校验 annotion
+    const checkAnnotationValid = () => {
+      // 如果是分割，需要做校验
+      if (isSegmentation) {
+        const validateStatus = workspaceRef.value.segmentationRef.validate();
+        if (!validateStatus) {
+          return '当前标注未完成，不可保存';
+        }
+      }
+      const unValid = state[annotationType].find((d) => !validateField(d));
+      if (unValid) {
+        return '标注格式异常，请检查字段';
+      }
+      return '';
+    };
+
     // 保存标注
     const handleSave = () => {
-      const isValid = state.annotations.every(checkAnnotationValid);
-      if (!isValid) {
-        return Message.warning('标注格式异常，请确认所有字段都已输入');
+      const msg = checkAnnotationValid();
+      if (msg) {
+        return Message.warning(msg || '标注格式异常');
       }
       saveAnnotation({
         id: state.currentImgId,
         // 保存的时候忽略掉__type, 仅供内部使用
-        annotation: stringifyAnnotations(state.annotations.map(rescale)),
+        annotation: stringifyAnnotations(state[annotationType].map(rescale)),
       });
       return null;
     };
 
     // 人工确认
     const handleConfirm = () => {
-      const isValid = state.annotations.every(checkAnnotationValid);
-      if (!isValid) {
-        return Promise.reject(new Error('标注格式异常，请确认所有字段都已输入'));
+      const msg = checkAnnotationValid();
+      if (msg) {
+        return Promise.reject(new Error(msg || '标注格式异常'));
       }
       return confirmAnnotation({
-        annotation: stringifyAnnotations(state.annotations.map(rescale)),
+        annotation: stringifyAnnotations(state[annotationType].map(rescale)),
       });
     };
 
     // 根据 files 获取第一个文件的信息
-    const getFirstChild = (files = []) => files.length ? files[0] : {};
+    const getFirstChild = (files = []) => (files.length ? files[0] : {});
 
     // 获取选中文件详情
-    const getActiveImg = (files, id) => files.find(d => d.id === id) || {};
+    const getActiveImg = (files, id) => files.find((d) => d.id === id) || {};
 
     // 跳转文件详情页
-    const gotoFileDetail = fileId => {
+    const gotoFileDetail = (fileId) => {
       let nextPath = '';
       const endStrReg = /(\/file\/)(\d+)$/;
       // 如果已存在 fileId
@@ -512,15 +651,20 @@ export default {
     };
 
     // 获取当前 row 索引
-    const findRowIndex = (rowId) => (state.annotations || []).findIndex(d => d.id === rowId);
+    const findRowIndex = (rowId) => {
+      const annotations = selectAnnotation();
+      return (annotations || []).findIndex((d) => d.id === rowId);
+    };
 
     // 删除标注确认
     const deleteAnnotation = (rowId) => {
+      // 当前的标注类型
+      const curAnnotation = selectAnnotation();
       const removedIndex = findRowIndex(rowId);
       if (removedIndex > -1) {
-        const removedlist = remove(state.annotations, removedIndex);
+        const removedlist = remove(curAnnotation, removedIndex);
         updateState({
-          annotations: removedlist,
+          [annotationType]: removedlist,
           currentAnnotationId: '',
         });
       }
@@ -530,11 +674,10 @@ export default {
       Object.assign(state, {
         error: new Error(msg),
       });
-      // throw new Error(msg)
     };
 
     // 更新图片信息
-    const updateImageInfo = async(fileId, labels) => {
+    const updateImageInfo = async (fileId, labels) => {
       if (!fileId) reportError('文件不存在');
       const file = await queryFile(fileId);
       // 如果图片不存在
@@ -546,7 +689,7 @@ export default {
       return { file, annotations };
     };
 
-    onMounted(async() => {
+    onMounted(async () => {
       // 判断当前数据集不存在
       let datasetInfo = {};
       try {
@@ -558,8 +701,9 @@ export default {
         });
         return;
       }
+      const activeComponent = annotationByCode(datasetInfo.annotateType, 'component');
       // 校验数据集标注状态
-      if (!$route.name.startsWith(annotationMap[datasetInfo.annotateType].component)) {
+      if (!$route.name.startsWith(activeComponent)) {
         $router.push({ path: '/data/datasets' });
         throw new Error('不支持该标注类型');
       }
@@ -575,7 +719,6 @@ export default {
       if (!params.fileId) {
         const firstImgId = await queryFirstImg();
         if (typeof firstImgId === 'number') {
-          gotoFileDetail(firstImgId);
           Object.assign(state, {
             currentImgId: firstImgId,
           });
@@ -600,7 +743,7 @@ export default {
       // 获取数据增强类型
       const enhanceListResult = await queryDataEnhanceList();
       const { dictDetails = [] } = enhanceListResult || {};
-      const enhanceList = dictDetails.map(d => ({
+      const enhanceList = dictDetails.map((d) => ({
         label: d.label,
         value: Number(d.value),
       }));
@@ -613,7 +756,7 @@ export default {
       }
 
       let { result: files } = rawFile.value;
-      const { __offset__, page = {}} = rawFile.value;
+      const { __offset__, page = {} } = rawFile.value;
 
       // 同步当前文件的偏移
       state.offset = __offset__;
@@ -655,7 +798,7 @@ export default {
         currentImgId: file.id,
         fileInfo: file,
         rawAnnotations: annotations,
-        annotations: withExtent(annotations),
+        [annotationType]: annotations,
         hasEnhanceRecord: !isNil(firstEnhanceList),
       });
     });
@@ -667,43 +810,45 @@ export default {
     //   return '你还没有保存, 是否确认离开'
     // })
 
-    watch(() => [state.currentImgId, state.timestamp], async() => {
-      const imgId = state.currentImgId;
-      updateState({
-        rawAnnotations: [],
-        annotations: [],
-        fileInfo: null,
-      });
-      // 图片可能为空
-      if (imgId) {
+    watch(
+      () => [state.currentImgId, state.timestamp],
+      async () => {
+        const imgId = state.currentImgId;
         updateState({
-          error: null,
-          fileId: imgId,
-        });
-        const { annotations, file } = await updateImageInfo(imgId, state.labels);
-        // 跳转详情
-        gotoFileDetail(imgId);
-        // 清理数据
-        updateState({
-          rawAnnotations: annotations,
-          annotations: withExtent(annotations),
-          fileInfo: file,
+          rawAnnotations: [],
+          annotations: [],
+          fileInfo: null,
         });
+        // 图片可能为空
+        if (imgId) {
+          updateState({
+            error: null,
+            fileId: imgId,
+          });
+          const { annotations, file } = await updateImageInfo(imgId, state.labels);
+          // 跳转详情
+          gotoFileDetail(imgId);
+          // 清理数据
+          updateState({
+            rawAnnotations: annotations,
+            [annotationType]: annotations,
+            fileInfo: file,
+          });
+        }
       }
-    }, {
-      lazy: true,
-    });
+    );
 
     // 当前文件对象
     const currentImg = computed(() => getActiveImg(state.files, state.currentImgId));
 
     return {
       state: toRefs(state),
+      thumbRef,
       workspaceRef,
       currentImg,
       handleSelection,
       handleBrushStart,
-      drawBboxEnd,
+      drawShapeEnd,
       handleSave,
       handleConfirm,
       gotoFileDetail,
@@ -724,6 +869,9 @@ export default {
       findRowIndex,
       getLabelName,
       isTrack,
+      isSegmentation,
+      isDetection,
+      annotationType,
     };
   },
 };
@@ -744,3 +892,19 @@ export default {
   width: 20%;
 }
 </style>
+
+<style lang="scss">
+.annotate-search-box {
+  padding-right: 20px;
+  padding-left: 20px;
+
+  .el-form-item {
+    width: 520px;
+    margin-bottom: 10px;
+
+    .el-select {
+      width: 80%;
+    }
+  }
+}
+</style>
diff --git a/webapp/src/views/dataset/annotate/settingContainer/annotations.vue b/webapp/src/views/dataset/annotate/settingContainer/annotations.vue
index cfa5d1c..a6068bf 100644
--- a/webapp/src/views/dataset/annotate/settingContainer/annotations.vue
+++ b/webapp/src/views/dataset/annotate/settingContainer/annotations.vue
@@ -1,49 +1,60 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="annotation-table mb-10">
     <el-form-item label="全部标注" style="margin-bottom: 0;" />
-    <el-table :data="notions" fit style="width: 100%;" max-height="240" :row-class-name="rowClass" @row-click="handleRowClick">
+    <el-table
+      :data="notions"
+      fit
+      style="width: 100%;"
+      max-height="240"
+      :row-class-name="rowClass"
+      @row-click="handleRowClick"
+    >
       <el-table-column label="标注 Id" :min-width="100">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.name }}</span>
-          <Edit :row="row" title="修改标注 Id" valueBy="name" rules="required" label="标注 Id " @handleOk="handleEdit" />
+          <Edit
+            :row="row"
+            title="修改标注 Id"
+            valueBy="name"
+            rules="required"
+            label="标注 Id "
+            @handleOk="handleEdit"
+          />
         </template>
       </el-table-column>
       <el-table-column label="标签类型">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.labelName }}</span>
           <EditLabel :row="row" :labels="labels" :handleEditLabel="handleEditLabel(row)" />
         </template>
       </el-table-column>
-      <el-table-column label="置信分" :width="72">
-        <template slot-scope="{row}">
+      <el-table-column v-if="showScore" label="置信分" :width="72">
+        <template slot-scope="{ row }">
           <el-tooltip effect="dark" :content="String(row.data.rawScore)" placement="top">
-            <span>{{ row.data._score || "--" }}</span>
+            <span>{{ row.data._score || '--' }}</span>
           </el-tooltip>
         </template>
       </el-table-column>
       <el-table-column label="操作" :width="48">
-        <template slot-scope="{row}">
-          <el-popconfirm
-            title="确定删除这个标注吗？"
-            @onConfirm="() => onConfirm(row)"
-          >
-            <span slot="reference"><i class="el-icon-delete cp" /></span>
+        <template slot-scope="{ row }">
+          <el-popconfirm title="确定删除这个标注吗？" @onConfirm="() => onConfirm(row)">
+            <span slot="reference"><i class="el-icon-delete cp"/></span>
           </el-popconfirm>
         </template>
       </el-table-column>
@@ -68,8 +79,9 @@ export default {
   props: {
     annotations: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
+    annotationType: String,
     updateState: Function,
     getColorLabel: Function,
     deleteAnnotation: Function,
@@ -77,11 +89,18 @@ export default {
     currentAnnotationId: String,
     labels: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
   },
   setup(props) {
-    const { annotations: rawAnnotations, updateState, getColorLabel, findRowIndex, deleteAnnotation } = props;
+    const {
+      annotations: rawAnnotations,
+      updateState,
+      getColorLabel,
+      findRowIndex,
+      deleteAnnotation,
+      annotationType,
+    } = props;
     let labelMap = {};
 
     const state = reactive({
@@ -90,11 +109,15 @@ export default {
     });
 
     // 将 labels 转化为 map
-    const rLabels = computed(() => props.labels.reduce((acc, cur) => {
-      return Object.assign(acc, {
-        [cur.id]: cur.name,
-      });
-    }, {}));
+    const rLabels = computed(() =>
+      props.labels.reduce((acc, cur) => {
+        return Object.assign(acc, {
+          [cur.id]: cur.name,
+        });
+      }, {})
+    );
+
+    const showScore = computed(() => annotationType !== 'shapes');
 
     const validTrackId = (trackId) => {
       if (isNil(trackId) || trackId === -1) return false;
@@ -107,7 +130,9 @@ export default {
       const labelName = rLabels.value[categoryId];
       const labelNameTxt = labelName ? `${labelName}_` : '';
       // 更新索引
-      const labelIndex = !isNil(labelMap[categoryId]) ? (labelMap[categoryId]+=1) : (labelMap[categoryId] = 0);
+      const labelIndex = !isNil(labelMap[categoryId])
+        ? (labelMap[categoryId] += 1)
+        : (labelMap[categoryId] = 0);
 
       const newIndex = leadingZero(labelIndex + 1);
       // 新创建的注释 item，执行顺序
@@ -157,7 +182,7 @@ export default {
         const nextItem = { ...curItem, name };
         const updateList = replace(props.annotations, updateIndex, nextItem);
         updateState({
-          annotations: updateList,
+          [annotationType]: updateList,
         });
       }
     };
@@ -177,29 +202,30 @@ export default {
         };
         const updateList = replace(props.annotations, updateIndex, nextItem);
         updateState({
-          annotations: updateList,
+          [annotationType]: updateList,
         });
       }
     };
 
     const notions = computed({
-      get: () => state.annotations.map(d => withEdit(d, false)),
+      get: () => state.annotations.map((d) => withEdit(d, false)),
     });
 
-    const rowClass = ({row}) => {
+    const rowClass = ({ row }) => {
       return row.id === props.currentAnnotationId ? 'activeRow' : '';
     };
 
     // 外部更新后同步为 state
-    watch(() => props.annotations, (next) => {
-      // 重置 labelMap
-      labelMap = {};
-      Object.assign(state, {
-        annotations: next,
-      });
-    }, {
-      lazy: true,
-    });
+    watch(
+      () => props.annotations,
+      (next) => {
+        // 重置 labelMap
+        labelMap = {};
+        Object.assign(state, {
+          annotations: next,
+        });
+      }
+    );
 
     return {
       state,
@@ -210,12 +236,13 @@ export default {
       handleEdit,
       handleEditLabel,
       rowClass,
+      showScore,
     };
   },
 };
 </script>
 <style lang="scss">
-@import "~@/assets/styles/variables.scss";
+@import '~@/assets/styles/variables.scss';
 
 .annotation-table {
   .activeRow {
diff --git a/webapp/src/views/dataset/annotate/settingContainer/editLabel.vue b/webapp/src/views/dataset/annotate/settingContainer/editLabel.vue
index c2f2ae2..431a692 100644
--- a/webapp/src/views/dataset/annotate/settingContainer/editLabel.vue
+++ b/webapp/src/views/dataset/annotate/settingContainer/editLabel.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-popover
@@ -20,15 +20,10 @@
     placement="bottom"
     width="200"
     trigger="click"
-    title="修改标签类型"
+    title="修改标签名称"
   >
     <el-select v-model="state.value" placeholder="请选择" @change="handleEditLabel">
-      <el-option
-        v-for="item in labels"
-        :key="item.id"
-        :label="item.name"
-        :value="item.id"
-      />
+      <el-option v-for="item in labels" :key="item.id" :label="item.name" :value="item.id" />
     </el-select>
     <i slot="reference" class="el-icon-edit primary cp dib ml-10" />
   </el-popover>
@@ -45,7 +40,7 @@ export default {
     },
     labels: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     handleEditLabel: Function,
   },
@@ -56,11 +51,14 @@ export default {
       value: row.data.categoryId,
     });
 
-    watch(() => props.row, (next) => {
-      Object.assign(state, {
-        value: next?.data?.categoryId,
-      });
-    });
+    watch(
+      () => props.row,
+      (next) => {
+        Object.assign(state, {
+          value: next?.data?.categoryId,
+        });
+      }
+    );
 
     return {
       state,
diff --git a/webapp/src/views/dataset/annotate/settingContainer/enhance.vue b/webapp/src/views/dataset/annotate/settingContainer/enhance.vue
index 259060e..fb8060b 100644
--- a/webapp/src/views/dataset/annotate/settingContainer/enhance.vue
+++ b/webapp/src/views/dataset/annotate/settingContainer/enhance.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="enhance-section" style="margin-bottom: 20px;">
@@ -34,14 +34,14 @@
     <el-link v-if="state.isOrigin" type="primary" :underline="false" @click="showCompare">
       增强文件对比
     </el-link>
-    <div v-if="!state.isOrigin && !state.isEnhanced" type="primary" class="f14 g6 flex flex-vertical-align">
+    <div
+      v-if="!state.isOrigin && !state.isEnhanced"
+      type="primary"
+      class="f14 g6 flex flex-vertical-align"
+    >
       <span class="vm">暂无数据增强信息</span>
     </div>
-    <el-tag
-      v-if="state.isEnhanced"
-      disable-transitions
-      :type="state.enhanceTag.tag"
-    >
+    <el-tag v-if="state.isEnhanced" disable-transitions :type="state.enhanceTag.tag">
       {{ state.enhanceTag.label }}
     </el-tag>
     <BaseModal
@@ -59,10 +59,7 @@
       <el-carousel arrow="always" :autoplay="false" indicator-position="none" height="360px">
         <el-carousel-item v-for="file in fullFileList" :key="file.id">
           <div class="figure-wrapper carousel-figure-item">
-            <div
-              class="carousel-figure-bg"
-              :style="buildBackground(file)"
-            />
+            <div class="carousel-figure-bg" :style="buildBackground(file)" />
             <div class="figure-desc">{{ file.enhance_name }}</div>
           </div>
         </el-carousel-item>
@@ -75,10 +72,12 @@
 import { isNil } from 'lodash';
 import { computed, inject, reactive, watch } from '@vue/composition-api';
 import BaseModal from '@/components/BaseModal';
-import { dataEnhanceMap, enhanceSymbol, transformFiles } from '@/views/dataset/util';
+import { dataEnhanceMap, enhanceSymbol, transformFiles, annotationBy } from '@/views/dataset/util';
 import { getEnhanceFileList } from '@/api/preparation/dataset';
 import EnhanceTip from './enhanceTip';
 
+const annotationByCode = annotationBy('code');
+
 export default {
   name: 'EnhanceList',
   components: {
@@ -93,6 +92,7 @@ export default {
     },
     fileId: Number,
     datasetId: Number,
+    annotateType: Number,
   },
   setup(props) {
     const state = reactive({
@@ -106,13 +106,14 @@ export default {
     // 当前所有标签信息
     const enhanceLabels = inject(enhanceSymbol);
 
+    const urlPrefix = annotationByCode(props.annotateType, 'urlPrefix');
     const parentImgUrl = computed(() => {
-      return `/data/datasets/annotate/${props.datasetId}/file/${props.fileInfo?.pid}`;
+      return `/data/datasets/${urlPrefix}/${props.datasetId}/file/${props.fileInfo?.pid}`;
     });
 
     // 根据文件 enhaneType 找到对应的增强标签
-    const findEnhanceMatch = item => {
-      return enhanceLabels.value.find(d => d.value === item.enhanceType) || {};
+    const findEnhanceMatch = (item) => {
+      return enhanceLabels.value.find((d) => d.value === item.enhanceType) || {};
     };
 
     const fullFileList = computed(() => {
@@ -123,7 +124,7 @@ export default {
       // 如果不存在原始文件
       if (isNil(props.fileInfo)) return null;
       const rawFiles = [props.fileInfo].concat(state.enhanceFileList);
-      return transformFiles(rawFiles, d => {
+      return transformFiles(rawFiles, (d) => {
         return {
           enhance_name: d.pid === 0 ? '原始图片' : findEnhanceMatch(d).label,
         };
@@ -145,40 +146,52 @@ export default {
       }
     };
 
-    const buildBackground = file => ({
+    const buildBackground = (file) => ({
       backgroundImage: `url("${file.url}")`,
     });
 
-    watch(() => props.fileId, async(next) => {
-      if (next) {
-        const enhanceFileList = await getEnhanceFileList(props.datasetId,next);
-        const isOrigin = !!enhanceFileList.length; // 被增强
-        Object.assign(state, {
-          isOrigin,
-          enhanceFileList: isOrigin ? enhanceFileList : null, // 增强后的文件
-        });
+    watch(
+      () => props.fileId,
+      async (next) => {
+        if (next) {
+          const enhanceFileList = await getEnhanceFileList(props.datasetId, next);
+          const isOrigin = !!enhanceFileList.length; // 被增强
+          Object.assign(state, {
+            isOrigin,
+            enhanceFileList: isOrigin ? enhanceFileList : null, // 增强后的文件
+          });
+        }
+      },
+      {
+        immediate: true,
       }
-    });
+    );
 
-    watch(() => props.fileInfo, async(next) => {
-      if (next) {
-        // 增强后的文件类型
-        const result = {
-          isEnhanced: next.pid > 0,
-        };
-        // 计算增强后文件的标签
-        if (!isNil(next.enhanceType)) {
-          const match = findEnhanceMatch(next);
-          const enhanceTag = {
-            label: match.label,
-            value: match.value,
-            tag: dataEnhanceMap[match.value],
+    watch(
+      () => props.fileInfo,
+      async (next) => {
+        if (next) {
+          // 增强后的文件类型
+          const result = {
+            isEnhanced: next.pid > 0,
           };
-          result.enhanceTag = enhanceTag;
+          // 计算增强后文件的标签
+          if (!isNil(next.enhanceType)) {
+            const match = findEnhanceMatch(next);
+            const enhanceTag = {
+              label: match.label,
+              value: match.value,
+              tag: dataEnhanceMap[match.value],
+            };
+            result.enhanceTag = enhanceTag;
+          }
+          Object.assign(state, result);
         }
-        Object.assign(state, result);
+      },
+      {
+        immediate: true,
       }
-    });
+    );
 
     return {
       state,
@@ -192,8 +205,8 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "~@/assets/styles/mixin.scss";
-@import "~@/assets/styles/variables.scss";
+@import '~@/assets/styles/mixin.scss';
+@import '~@/assets/styles/variables.scss';
 
 .enhance-section {
   .el-form-item .el-form-item__label {
diff --git a/webapp/src/views/dataset/annotate/settingContainer/enhanceTip.vue b/webapp/src/views/dataset/annotate/settingContainer/enhanceTip.vue
index a1466de..c2347f3 100644
--- a/webapp/src/views/dataset/annotate/settingContainer/enhanceTip.vue
+++ b/webapp/src/views/dataset/annotate/settingContainer/enhanceTip.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template functional>
   <div class="el-form-item__label no-float tl">
@@ -34,7 +34,7 @@ export default {
   name: 'EnhanceTip',
 };
 </script>
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .label-title {
   margin-bottom: 8px;
 }
@@ -45,4 +45,3 @@ export default {
   line-height: 1.5;
 }
 </style>
-
diff --git a/webapp/src/views/dataset/annotate/settingContainer/footer.vue b/webapp/src/views/dataset/annotate/settingContainer/footer.vue
index 45547cb..4e73504 100644
--- a/webapp/src/views/dataset/annotate/settingContainer/footer.vue
+++ b/webapp/src/views/dataset/annotate/settingContainer/footer.vue
@@ -1,25 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="setting-container-footer">
     <el-form-item label="标注类型标签">
       <el-switch :value="showTag" @change="toggleShowTag" />
     </el-form-item>
-    <el-form-item label="智能评分">
+    <el-form-item v-if="!isSegmentation" label="智能评分">
       <el-switch :value="showScore" @change="toggleShowScore" />
     </el-form-item>
     <el-form-item v-if="isTrack" label="标注 Id">
@@ -40,6 +40,7 @@ export default {
     toggleShowScore: Function,
     toggleShowId: Function,
     isTrack: Boolean,
+    isSegmentation: Boolean,
   },
 };
 </script>
diff --git a/webapp/src/views/dataset/annotate/settingContainer/index.vue b/webapp/src/views/dataset/annotate/settingContainer/index.vue
index 8bad7b9..cc1184d 100644
--- a/webapp/src/views/dataset/annotate/settingContainer/index.vue
+++ b/webapp/src/views/dataset/annotate/settingContainer/index.vue
@@ -1,23 +1,33 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="workspace-settings">
     <el-form label-position="top" @submit.native.prevent>
-      <el-form-item v-if="state.datasetInfo.value.labelGroupId" label="标签组" style="margin-bottom: 0;">
+      <el-form-item label="数据集名称" style="margin-bottom: 0;">
+        <div style="margin-top: -10px;">{{ state.datasetInfo.value.name }}</div>
+      </el-form-item>
+      <el-form-item label="标注类型" style="margin-bottom: 0;">
+        <div style="margin-top: -10px;">{{ annotationTypeName }}</div>
+      </el-form-item>
+      <el-form-item
+        v-if="state.datasetInfo.value.labelGroupId"
+        label="标签组"
+        style="margin-bottom: 0;"
+      >
         <div style="margin-top: -10px;">
           <span class="vm">{{ state.datasetInfo.value.labelGroupName }} &nbsp;</span>
           <el-link
@@ -32,22 +42,24 @@
         </div>
       </el-form-item>
       <SelectLabel
-        v-if="!isPresetLabel"
+        v-if="showAddLabel"
         :dataSource="api.systemLabels"
-        :handleLabelChange="handleLabelChange"
-        @postLabel="postLabel"
+        :handleLabelSelect="handleLabelSelect"
+        :handleLabelCreate="handleLabelCreate"
       />
-      <LabelList 
+      <LabelList
         :labels="labels"
         :editLabel="edit"
-        :annotations="state.annotations.value"
+        :annotations="annotations"
+        :annotationType="annotationType"
         :currentAnnotationId="api.currentAnnotationId"
         :updateState="updateState"
         :getColorLabel="getColorLabel"
         :findRowIndex="findRowIndex"
       />
       <Annotations
-        :annotations="state.annotations.value"
+        :annotations="annotations"
+        :annotationType="annotationType"
         :currentAnnotationId="state.currentAnnotationId.value"
         :labels="labels"
         :updateState="updateState"
@@ -60,6 +72,7 @@
         :fileInfo="state.fileInfo.value"
         :fileId="state.fileId.value"
         :datasetId="state.datasetId.value"
+        :annotateType="state.datasetInfo.value.annotateType"
       />
       <Footer
         :isTrack="isTrack"
@@ -70,6 +83,7 @@
         :toggleShowTag="toggleShowTag"
         :showId="state.showId.value"
         :toggleShowId="toggleShowId"
+        :isSegmentation="isSegmentation"
       />
     </el-form>
   </div>
@@ -78,11 +92,14 @@
 <script>
 import { Message } from 'element-ui';
 import { inject, watch, reactive, onMounted, computed } from '@vue/composition-api';
-import { isNil } from 'lodash';
 
 import { getAutoLabels, editLabel } from '@/api/preparation/datalabel';
-import { labelsSymbol } from '@/views/dataset/util';
-import { labelGroupTypeCodeMap } from '@/views/labelGroup/util';
+import {
+  labelsSymbol,
+  labelGroupTypeMap,
+  annotationBy,
+  isPresetDataset,
+} from '@/views/dataset/util';
 
 import SelectLabel from './selectLabel';
 import LabelList from './labelList';
@@ -90,6 +107,8 @@ import Annotations from './annotations';
 import Enhance from './enhance';
 import Footer from './footer';
 
+const annotationByCode = annotationBy('code');
+
 export default {
   name: 'SettingContainer',
   components: {
@@ -108,18 +127,28 @@ export default {
     deleteAnnotation: Function,
     state: Object,
     isTrack: Boolean,
+    isSegmentation: Boolean,
+    annotationType: String,
   },
   setup(props) {
-    const { createLabel, updateState, queryLabels } = props;
+    const { createLabel, updateState, queryLabels, annotationType } = props;
     const api = reactive({
+      selectedLabel: undefined,
       newLabel: undefined,
-      currentAnnotationId: undefined,
+      newLabelColor: undefined,
+      currentAnnotationId: props.state.currentAnnotationId || undefined,
     });
     // 当前所有标签信息
     const labels = inject(labelsSymbol);
 
+    const annotations = computed(() => props.state[annotationType].value);
+
+    const annotationTypeName = computed(() =>
+      annotationByCode(props.state.datasetInfo.value.annotateType, 'name')
+    );
+
     // 更新标签
-    const refreshLabel = async() => {
+    const refreshLabel = async () => {
       const nextLabels = await queryLabels();
       // 更新全局 provide
       updateState({
@@ -132,19 +161,38 @@ export default {
       return editLabel(labelId, data).then(refreshLabel);
     };
 
-    const addLabel = (label) => {
-      api.newLabel = label;
+    // 选择系统预置标签
+    const handleLabelSelect = (value) => {
+      api.selectedLabel = api.systemLabels.find((d) => d.value === value)?.label;
+      if (api.selectedLabel) {
+        if (labels.value.findIndex((d) => d.name === api.selectedLabel) > -1) {
+          Message.warning(`当前数据集已存在标签[${api.selectedLabel}]`);
+          api.selectedLabel = undefined;
+          return;
+        }
+        createLabel({ name: api.selectedLabel }).then(() => {
+          Message.success(`标签[${api.selectedLabel}]创建成功`);
+          api.selectedLabel = undefined;
+          refreshLabel();
+        });
+      } else {
+        Message.warning('请选择标签');
+      }
     };
 
-    const postLabel = () => {
+    // 新建自定义标签
+    const handleLabelCreate = (id, form) => {
+      api.newLabel = form.name;
+      api.newLabelColor = form.color;
       if (api.newLabel) {
-        if (labels.value.findIndex(d => d.name === api.newLabel) > -1) {
-          Message.warning('当前标签已存在');
+        if (labels.value.findIndex((d) => d.name === api.newLabel) > -1) {
+          Message.warning(`当前数据集已存在标签[${api.newLabel}]`);
           return;
         }
-        createLabel({ name: api.newLabel }).then(() => {
+        createLabel({ name: api.newLabel, color: api.newLabelColor }).then(() => {
           Message.success(`标签[${api.newLabel}]创建成功`);
           api.newLabel = undefined;
+          api.newLabelColor = undefined;
           refreshLabel();
         });
       } else {
@@ -152,24 +200,8 @@ export default {
       }
     };
 
-    const handleLabelChange = (value, callback) => {
-      // 新建标签
-      if (!isNil(value)) {
-        // 如果不是系统标签，才会选择新建
-        if (api.systemLabels.findIndex(d => d.value === value) === -1) {
-          addLabel(value);
-          // 新建标签直接触发创建
-          postLabel();
-          typeof callback === 'function' && callback();
-        } else {
-          const systemLabel = api.systemLabels.find(d => d.value === value) || {};
-          systemLabel.label && addLabel(systemLabel.label);
-        }
-      }
-    };
-
     const getSystemLabel = () => {
-      getAutoLabels(labelGroupTypeCodeMap.VISUAL).then(res => {
+      getAutoLabels(labelGroupTypeMap.VISUAL.value).then((res) => {
         const labelsObj = res.map((item) => ({
           value: item.id,
           label: item.name,
@@ -210,14 +242,15 @@ export default {
       updateState(newState);
     };
 
-    // labelGroupType 标签组类型：0: private 私有标签组,  1:public 公开标签组
-    const isPresetLabel = computed(() => props.state.labelGroupType === 1);
+    // 预置数据集不支持新建标签
+    const showAddLabel = computed(() => !isPresetDataset(props.state.datasetInfo.value.type));
 
-    watch(() => props.state, (next) => {
-      if ('currentAnnotationId' in next) {
-        api.currentAnnotationId = next.currentAnnotationId || [];
+    watch(
+      () => props.state.currentAnnotationId,
+      (next) => {
+        api.currentAnnotationId = next || undefined;
       }
-    });
+    );
 
     onMounted(() => {
       getSystemLabel();
@@ -229,50 +262,51 @@ export default {
       toggleShowTag,
       toggleShowId,
       labels,
-      postLabel,
-      addLabel,
       edit,
-      handleLabelChange,
-      isPresetLabel,
+      handleLabelSelect,
+      handleLabelCreate,
+      showAddLabel,
+      annotations,
+      annotationTypeName,
     };
   },
 };
 </script>
 <style lang="scss">
-  .workspace-settings {
-    padding: 28px 28px 0;
-    overflow-y: auto;
-    background-color: rgb(242, 242, 242);
+.workspace-settings {
+  padding: 28px 28px 0;
+  overflow-y: auto;
+  background-color: rgb(242, 242, 242);
 
-    .tips-wrapper {
-      div {
-        width: 50%;
-      }
+  .tips-wrapper {
+    div {
+      width: 50%;
     }
+  }
 
-    .setting-container-footer {
-      margin-top: 10px;
+  .setting-container-footer {
+    margin-top: 10px;
 
-      .el-form-item {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 0;
+    .el-form-item {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 0;
 
-        &::before,
-        &::after {
-          content: none;
-        }
+      &::before,
+      &::after {
+        content: none;
       }
     }
+  }
 
-    .el-icon-edit {
-      margin-left: 4px;
-    }
+  .el-icon-edit {
+    margin-left: 4px;
   }
+}
 
-  @media (max-width: 1440px) {
-    .workspace-settings {
-      padding: 10px 15px 0;
-    }
+@media (max-width: 1440px) {
+  .workspace-settings {
+    padding: 10px 15px 0;
   }
+}
 </style>
diff --git a/webapp/src/views/dataset/annotate/settingContainer/label.vue b/webapp/src/views/dataset/annotate/settingContainer/label.vue
index 9e6245c..b172b9f 100644
--- a/webapp/src/views/dataset/annotate/settingContainer/label.vue
+++ b/webapp/src/views/dataset/annotate/settingContainer/label.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <ValidationObserver ref="observerRef">
@@ -21,7 +21,11 @@
         <LabelTip />
       </slot>
       <ValidationProvider v-slot="{ errors }" rules="required|validName" name="标签">
-        <el-input v-model.trim="label" placeholder="输入标签按 Enter 确认" @keyup.enter.native="handleInput" />
+        <el-input
+          v-model.trim="label"
+          placeholder="输入标签按 Enter 确认"
+          @keyup.enter.native="handleInput"
+        />
         <p class="error-message">{{ errors[0] }}</p>
       </ValidationProvider>
       <div class="tr" style="margin-top: 6px;">
@@ -50,7 +54,7 @@ export default {
       observerRef.value.reset();
     };
     const handleInput = () => {
-      observerRef.value.validate().then(success => {
+      observerRef.value.validate().then((success) => {
         if (!success) {
           return;
         }
diff --git a/webapp/src/views/dataset/annotate/settingContainer/labelList/edit.vue b/webapp/src/views/dataset/annotate/settingContainer/labelList/edit.vue
index 014b2d3..208cabb 100644
--- a/webapp/src/views/dataset/annotate/settingContainer/labelList/edit.vue
+++ b/webapp/src/views/dataset/annotate/settingContainer/labelList/edit.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-popover
@@ -23,13 +23,15 @@
     title="编辑标签"
     @show="onShow"
   >
-    <el-form ref="formRef" :model="state.form" :rules="rules" label-width="60px" style="margin-top: 20px;">
+    <el-form
+      ref="formRef"
+      :model="state.form"
+      :rules="rules"
+      label-width="60px"
+      style="margin-top: 20px;"
+    >
       <el-form-item label="名称" prop="name">
-        <el-input
-          ref="inputRef"
-          v-model="state.form.name"
-          placeholder="修改标签名称"
-        />
+        <el-input ref="inputRef" v-model="state.form.name" placeholder="修改标签名称" />
       </el-form-item>
       <el-form-item label="颜色" prop="color">
         <el-color-picker v-model="state.form.color" />
@@ -39,12 +41,7 @@
         <el-button type="primary" @click="handleOk">确定</el-button>
       </div>
     </el-form>
-    <i
-      slot="reference"
-      class="el-icon-edit"
-      style="margin-left: 4px;"
-      :style="getStyle(item)"
-    />
+    <i slot="reference" class="el-icon-edit" style="margin-left: 4px;" :style="getStyle(item)" />
   </el-popover>
 </template>
 <script>
@@ -94,7 +91,7 @@ export default {
 
     // 编辑标注名称
     const handleOk = () => {
-      formRef.value.validate().then(valid => {
+      formRef.value.validate().then((valid) => {
         if (!valid) {
           return;
         }
@@ -111,14 +108,17 @@ export default {
       });
     };
 
-    watch(() => props.item, (next) => {
-      if (next) {
-        state.form = {
-          name: next.name || '',
-          color: next.color || '#2e4fde',
-        };
+    watch(
+      () => props.item,
+      (next) => {
+        if (next) {
+          state.form = {
+            name: next.name || '',
+            color: next.color || '#2e4fde',
+          };
+        }
       }
-    });
+    );
 
     return {
       props,
diff --git a/webapp/src/views/dataset/annotate/settingContainer/labelList/index.vue b/webapp/src/views/dataset/annotate/settingContainer/labelList/index.vue
index 5c48779..8e8d541 100644
--- a/webapp/src/views/dataset/annotate/settingContainer/labelList/index.vue
+++ b/webapp/src/views/dataset/annotate/settingContainer/labelList/index.vue
@@ -1,34 +1,38 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div v-if="labels.length" class="mb-10">
     <div class="flex flex-between flex-wrap flex-vertical-align">
-      <el-form-item v-show="showLabel" :label="labelsTitle" style=" max-width: 39.9%; padding: 0; margin-bottom: 0;" />
+      <el-form-item
+        v-show="showLabel"
+        :label="labelsTitle"
+        style=" max-width: 39.9%; padding: 0; margin-bottom: 0;"
+      />
       <SearchLabel ref="searchRef" style="padding-bottom: 10px;" @change="handleSearch" />
     </div>
-    <div style="max-height: 200px; padding: 0 2.5px; overflow: auto;">
+    <div style="max-height: 200px; padding: 0 2.5px; overflow: auto;" class="label-list">
       <el-row :gutter="5" style="clear: both;">
         <el-col v-for="item in state.labelData" :key="item.id" :span="8">
           <el-tag
-            class="tag-item" 
-            :title="item.name" 
-            :color="item.color" 
-            :style="getStyle(item)" 
-            @click="event => handleEditAnnotation(item, event)"
+            class="tag-item"
+            :title="item.name"
+            :color="item.color"
+            :style="getStyle(item)"
+            @click="(event) => handleEditAnnotation(item, event)"
           >
             {{ item.name }}
             <Edit
@@ -60,7 +64,7 @@ export default {
   props: {
     labels: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     currentAnnotationId: {
       type: String,
@@ -68,14 +72,21 @@ export default {
     },
     editLabel: Function,
     annotations: Array,
+    annotationType: String,
     updateState: Function,
     getColorLabel: Function,
     findRowIndex: Function,
   },
   setup(props) {
-    const { annotations: rawAnnotations ,updateState, getColorLabel, findRowIndex, editLabel } = props;
+    const {
+      annotations: rawAnnotations,
+      updateState,
+      getColorLabel,
+      findRowIndex,
+      editLabel,
+      annotationType,
+    } = props;
     const searchRef = ref(null);
-
     const state = reactive({
       annotations: rawAnnotations,
       labelData: props.labels,
@@ -91,7 +102,7 @@ export default {
     // 查询分类标签
     const handleSearch = (label) => {
       if (label) {
-        state.labelData = props.labels.filter(d => d.name.includes(label));
+        state.labelData = props.labels.filter((d) => d.name.includes(label));
       } else {
         state.labelData = props.labels;
       }
@@ -122,7 +133,7 @@ export default {
         };
         const updateList = replace(props.annotations, updateIndex, nextItem);
         updateState({
-          annotations: updateList,
+          [annotationType]: updateList,
         });
       }
     };
@@ -131,13 +142,19 @@ export default {
       editLabel(item.id, field);
     };
 
-    watch(() => props.labels, (next) => {
-      state.labelData = next;
-    });
+    watch(
+      () => props.labels,
+      (next) => {
+        state.labelData = next;
+      }
+    );
 
-    watch(() => props.currentAnnotationId, (next) => {
-      state.currentAnnotationId = next;
-    });
+    watch(
+      () => props.currentAnnotationId,
+      (next) => {
+        state.currentAnnotationId = next;
+      }
+    );
 
     return {
       state,
@@ -153,8 +170,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-  .el-icon-edit {
-    padding: 0 4px;
-    margin-left: 4px;
-  }
+.el-icon-edit {
+  padding: 0 4px;
+  margin-left: 4px;
+}
 </style>
diff --git a/webapp/src/views/dataset/annotate/settingContainer/labelTip.vue b/webapp/src/views/dataset/annotate/settingContainer/labelTip.vue
index 99ff3a7..cbca6c5 100644
--- a/webapp/src/views/dataset/annotate/settingContainer/labelTip.vue
+++ b/webapp/src/views/dataset/annotate/settingContainer/labelTip.vue
@@ -1,28 +1,28 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template functional>
   <div class="el-form-item__label no-float tl">
-    <label>新建标签</label>
+    <label>选择系统预置标签</label>
     <el-tooltip effect="dark" placement="top">
       <div slot="content">
         <div class="label-tooltip">
           <div class="flex tips-wrapper f12">
-            <div>可以选择已有系统标签，</div>
-            <div>或者输入标签名称确定新建即可</div>
+            <div>可以选择系统预置标签，</div>
+            <div>或者点击下方新建标签</div>
           </div>
         </div>
       </div>
@@ -35,7 +35,7 @@ export default {
   name: 'LabelTip',
 };
 </script>
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .label-title {
   margin-bottom: 8px;
 }
@@ -46,4 +46,3 @@ export default {
   line-height: 1.5;
 }
 </style>
-
diff --git a/webapp/src/views/dataset/annotate/settingContainer/selectLabel.vue b/webapp/src/views/dataset/annotate/settingContainer/selectLabel.vue
index 91f15c9..aefe602 100644
--- a/webapp/src/views/dataset/annotate/settingContainer/selectLabel.vue
+++ b/webapp/src/views/dataset/annotate/settingContainer/selectLabel.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-form-item>
@@ -21,26 +21,27 @@
     </slot>
     <div class="flex flex-between">
       <InfoSelect
-        v-model="state.label"
         :innerRef="innerRef"
-        style="width: 68%;"
-        placeholder="选择已有标签或新建标签"
+        style="width: 80%;"
+        placeholder="选择系统预置标签"
         :dataSource="dataSource"
         value-key="value"
         default-first-option
         filterable
-        allow-create
-        @change="handleChange"
+        @change="handleLabelSelect"
       />
-      <el-button size="mini" type="primary" @click="postLabel">确定</el-button>
     </div>
+    <LabelEditor title="新建标签" @handleOk="handleLabelCreate">
+      <span slot="trigger" class="cp vm primary f14">新建标签</span>
+    </LabelEditor>
   </el-form-item>
 </template>
 
 <script>
-import { reactive, ref } from '@vue/composition-api';
+import { ref } from '@vue/composition-api';
 
 import InfoSelect from '@/components/InfoSelect';
+import LabelEditor from '@/views/dataset/components/labelEditor';
 import LabelTip from './labelTip';
 
 export default {
@@ -48,37 +49,20 @@ export default {
   components: {
     LabelTip,
     InfoSelect,
+    LabelEditor,
   },
   props: {
     dataSource: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
-    handleLabelChange: Function,
+    handleLabelSelect: Function,
+    handleLabelCreate: Function,
   },
-  setup(props, ctx) {
-    const { handleLabelChange } = props;
+  setup() {
     const selectRef = ref(null);
 
-    const state = reactive({
-      label: undefined,
-    });
-
-    const postLabel = () => {
-      ctx.emit('postLabel');
-      state.label = undefined;
-    };
-
-    const handleChange = (params) => {
-      handleLabelChange(params, () => {
-        state.label = undefined;
-      });
-    };
-
     return {
-      state,
-      postLabel,
-      handleChange,
       innerRef: () => selectRef,
     };
   },
diff --git a/webapp/src/views/dataset/annotate/thumbContainer/index.vue b/webapp/src/views/dataset/annotate/thumbContainer/index.vue
index 0e9eecd..8eefb43 100644
--- a/webapp/src/views/dataset/annotate/thumbContainer/index.vue
+++ b/webapp/src/views/dataset/annotate/thumbContainer/index.vue
@@ -1,25 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="thumb-wrapper">
     <div>
       <el-button
         v-if="state.datasetInfo.value.dataType === 0"
-        class="mb-20"
+        style="margin-bottom: 8px;"
         type="primary"
         icon="el-icon-plus"
         round
@@ -28,24 +28,29 @@
         添加图片
       </el-button>
     </div>
-    <div class="file-infobar flex">
-      <el-dropdown trigger="click" @command="handleDropdown">
-        <span class="el-dropdown-link primary" :title="activeAnnotationName">
-          {{ activeAnnotationName }}<i class="el-icon-arrow-down el-icon--right" />
-        </span>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item
-            v-for="item in dropdownList"
-            :key="item.command"
-            :command="item.command"
-          >
-            {{ item.label }}
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+    <div class="file-infobar flex flex-wrap">
+      <SearchBox
+        ref="searchBoxRef"
+        :formItems="thumbState.formItems"
+        :handleFilter="handleFilter"
+        :initialValue="initialValue"
+        :popperAttrs="popperAttrs"
+        klass="annotate-search-box"
+      >
+        <el-button slot="trigger" type="text" class="mx-10" style="margin-top: -4px;"
+          >筛选<i class="el-icon-arrow-down el-icon--right"
+        /></el-button>
+      </SearchBox>
       <div>
-        {{ state.total.value }}&nbsp;<span class="f14">张</span>
+        <span class="f14">共&nbsp;{{ state.total.value }}&nbsp;张</span>
       </div>
+      <el-checkbox
+        v-model="thumbState.filterUnfinished"
+        class="pl-16 primary normal"
+        @change="handleStatusChange"
+      >
+        只看无标注文件
+      </el-checkbox>
     </div>
     <List
       ref="listRef"
@@ -57,6 +62,7 @@
       :total="state.total.value"
       :offset="state.offset.value"
       :type="thumbState.type"
+      :labelId="thumbState.labelId"
       :history="state.history.value"
       v-on="$listeners"
     />
@@ -71,7 +77,8 @@
           :max="state.total.value"
           @keyup.native.enter="handleKeyup"
         />
-        张</span>
+        张
+      </span>
       <el-tooltip content="跳转位置为图片在数据集列表中的位置" placement="top">
         <i class="el-icon-question" />
       </el-tooltip>
@@ -80,6 +87,7 @@
       ref="uploaderRef"
       action="fakeApi"
       title="导入图片"
+      :hash="true"
       :visible="thumbState.showDialog"
       :transformFile="withDimensionFile"
       :toggleVisible="handleClose"
@@ -91,12 +99,13 @@
 </template>
 
 <script>
-import { reactive, computed, ref, watch } from '@vue/composition-api';
+import { reactive, ref, watch } from '@vue/composition-api';
 import { Message } from 'element-ui';
-import { pick } from 'lodash';
+import { isEqual } from 'lodash';
 
 import UploadForm from '@/components/UploadForm';
-import { fileTypeEnum, fileCodeMap, getImgFromMinIO, withDimensionFile } from '@/views/dataset/util';
+import SearchBox from '@/components/SearchBox';
+import { getFileFromMinIO, withDimensionFile, fileCodeMap } from '@/views/dataset/util';
 import { submit } from '@/api/preparation/datafile';
 import { detectFileList, queryFileOffset } from '@/api/preparation/dataset';
 import List from './list';
@@ -106,6 +115,7 @@ export default {
   components: {
     List,
     UploadForm,
+    SearchBox,
   },
   inheritAttrs: false,
   props: {
@@ -119,45 +129,75 @@ export default {
 
     const uploaderRef = ref(null);
     const listRef = ref(null);
-
+    const searchBoxRef = ref(null);
     const { updateList, state, updateState, isTrack } = props;
     const { datasetId } = state;
+    const detectOptions = [
+      { label: '不限', value: '' },
+      { label: '未标注', value: 101 },
+      { label: '手动标注中', value: 102 },
+      { label: '自动标注完成', value: 103 },
+      { label: '手动标注完成', value: 104 },
+      { label: '未识别', value: 105 },
+    ];
+    const trackOptions = detectOptions.concat({ label: '目标跟踪完成', value: 201 });
+    const rawFormItems = [
+      {
+        label: '标注状态:',
+        prop: 'annotateStatus',
+        type: 'checkboxGroup',
+        options: isTrack ? trackOptions : detectOptions,
+      },
+      {
+        label: '标签:',
+        prop: 'labelId',
+        type: 'select',
+        attrs: {
+          multiple: true,
+          clearable: true,
+          filterable: true,
+        },
+        options: [],
+      },
+    ];
+
+    const popperAttrs = {
+      placement: 'bottom-start',
+    };
+
     const thumbState = reactive({
-      type: props.state.fileFilterType.value, // 文件筛选状态
+      type: props.state.fileFilterType.value, // 文件状态筛选条件
+      labelId: props.state.filterLabelId, // 文件标签筛选条件
       showDialog: false,
       gotoNumber: 1,
+      formItems: rawFormItems,
+      filterUnfinished: props.state.filterUnfinished,
     });
 
-    // 名称
-    const activeAnnotationName = computed(() => {
-      const selectedType = thumbState.type;
-      return fileTypeEnum[selectedType].abbr;
-    });
-    // 下拉列表
-    const dropdownList = computed(() => {
-      let filter = [];
-      if (isTrack) {
-        // 目标跟踪：全部 未标注 未识别 手动标注中 手动标注完成 自动标注完成 目标跟踪完成
-        filter = pick(fileTypeEnum, [fileCodeMap.ALL, fileCodeMap.UNANNOTATED, fileCodeMap.UNRECOGNIZED, fileCodeMap.MANUAL_ANNOTATING, fileCodeMap.MANUAL_ANNOTATED, fileCodeMap.AUTO_ANNOTATED, fileCodeMap.TRACK_SUCCEED]);
-      } else {
-        // 目标检测：全部 未标注 未识别 手动标注中 自动标注完成 手动标注完成
-        filter = pick(fileTypeEnum, [fileCodeMap.ALL, fileCodeMap.UNANNOTATED, fileCodeMap.UNRECOGNIZED, fileCodeMap.MANUAL_ANNOTATING, fileCodeMap.AUTO_ANNOTATED, fileCodeMap.MANUAL_ANNOTATED]);
-      }
-      const statusList = Object.keys(filter).map(k => ({
-        command: k,
-        label: fileTypeEnum[k].label,
-      }));
-      return statusList;
-    });
+    // 重置后的选项值
+    const initialValue = {
+      annotateStatus: [''],
+      labelId: [],
+    };
 
-    const handleDropdown = (command) => {
+    const handleFilter = (form) => {
+      // 筛选框和快速查看无标注的状态同步
+      thumbState.filterUnfinished = isEqual(
+        form.annotateStatus.sort(),
+        [fileCodeMap.UNANNOTATED, fileCodeMap.UNRECOGNIZED].sort()
+      );
       Object.assign(thumbState, {
-        type: command,
+        type: form.annotateStatus,
+        labelId: form.labelId,
         gotoNumber: 1,
       });
-      updateState({ annotations: [], fileFilterType: command });
+      updateState({
+        annotations: [],
+        fileFilterType: form.annotateStatus,
+        filterLabelId: form.labelId,
+      });
       // 重新请求文件
-      updateList({ type: command, offset: 0 });
+      updateList({ type: form.annotateStatus, labelId: form.labelId, offset: 0 });
       // 获取滚动列表容器
       const listWrapper = listRef.value.$refs?.listWrapper;
       listWrapper.scrollTo({
@@ -165,12 +205,23 @@ export default {
       });
     };
 
+    // 快速查看无标注
+    const handleStatusChange = (val) => {
+      searchBoxRef.value.changeOption(
+        'annotateStatus',
+        val ? [fileCodeMap.UNANNOTATED, fileCodeMap.UNRECOGNIZED] : ['']
+      );
+      searchBoxRef.value.handleOk();
+      // 更新是否查看无标注文件
+      updateState({ filterUnfinished: val });
+    };
+
     const handleClose = () => {
       thumbState.showDialog = false;
     };
 
-    const uploadSuccess = async(res) => {
-      const files = getImgFromMinIO(res);
+    const uploadSuccess = async (res) => {
+      const files = getFileFromMinIO(res);
       // 提交业务上传
       submit(datasetId.value, files).then(() => {
         Message.success('上传成功');
@@ -180,7 +231,7 @@ export default {
 
     const uploadError = (err) => {
       Message.error('上传失败', err);
-      console.error(err);
+      console.error(err.message || err);
     };
 
     const handleUpload = () => {
@@ -192,8 +243,8 @@ export default {
       objectPath: `dataset/${datasetId.value}/origin`, // 对象存储路径
     };
 
-    const handleKeyup = async({ target, keyCode }) => {
-      let {value} = target;
+    const handleKeyup = async ({ target, keyCode }) => {
+      let { value } = target;
       if (keyCode === 13) {
         if (parseInt(target.value, 10) < parseInt(target.min, 10)) {
           thumbState.gotoNumber = target.min;
@@ -220,39 +271,72 @@ export default {
       }
     };
 
-    watch(() => state.currentImgId.value, async(next) => {
-      // 根据筛选类型来过滤
-      const query = {
-        type: thumbState.type,
-      };
-      if (!next) return;
-      const currentImgIndex = await queryFileOffset(datasetId.value, next, query);
-      thumbState.gotoNumber = currentImgIndex + 1;
-    }, {
-      lazy: false,
-    });
+    watch(
+      () => state.labels.value,
+      (next) => {
+        // 用于筛选功能
+        const labelOptionsIndex = thumbState.formItems.findIndex((d) => d.prop === 'labelId');
+        thumbState.formItems[labelOptionsIndex].options = next.map((item) => {
+          return {
+            label: item.name,
+            value: item.id,
+          };
+        });
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    watch(
+      () => state.currentImgId.value,
+      async (next) => {
+        // 根据筛选类型来过滤
+        const query = {
+          type: thumbState.type,
+          labelId: thumbState.labelId,
+        };
+        if (!next) return;
+        const currentImgIndex = await queryFileOffset(datasetId.value, next, query);
+        thumbState.gotoNumber = currentImgIndex + 1;
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    watch(
+      () => state.filterUnfinished.value,
+      (next) => {
+        Object.assign(thumbState, {
+          filterUnfinished: next,
+        });
+      }
+    );
 
     return {
       listRef,
+      searchBoxRef,
       thumbState,
       withDimensionFile,
       uploadParams,
-      dropdownList,
       handleUpload,
       handleClose,
       uploadSuccess,
       uploadError,
-      activeAnnotationName,
-      handleDropdown,
       uploaderRef,
       handleKeyup,
+      initialValue,
+      handleFilter,
+      popperAttrs,
+      handleStatusChange,
     };
   },
 };
 </script>
 <style lang="scss">
-@import "~@/assets/styles/variables.scss";
-@import "~@/assets/styles/mixin.scss";
+@import '~@/assets/styles/variables.scss';
+@import '~@/assets/styles/mixin.scss';
 
 .thumb-wrapper {
   position: relative;
@@ -260,7 +344,7 @@ export default {
   display: flex;
   flex-direction: column;
   width: 160px;
-  padding-top: 20px;
+  padding-top: 8px;
   text-align: center;
   background: #fff;
   box-shadow: 2px 0 6px 0 rgba(0, 0, 0, 0.15);
diff --git a/webapp/src/views/dataset/annotate/thumbContainer/list.vue b/webapp/src/views/dataset/annotate/thumbContainer/list.vue
index 664e6dd..1418af2 100644
--- a/webapp/src/views/dataset/annotate/thumbContainer/list.vue
+++ b/webapp/src/views/dataset/annotate/thumbContainer/list.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div ref="listWrapper" class="infinite-list-wrapper" style="overflow: auto;">
@@ -51,7 +51,12 @@ export default {
       default: () => [],
     },
     type: {
-      type: [String, Number],
+      type: Array,
+      default: () => [],
+    },
+    labelId: {
+      type: Array,
+      default: () => [],
     },
     addList: {
       type: Array,
@@ -80,20 +85,21 @@ export default {
       loading: false,
     });
 
-    watch(() => props.addList, (next) => {
-      // 更新全局 offset
-      updateState({
-        offset: props.offset + Math.min(limit, next.length),
-        hasMore: next.length >= limit,
-      });
-    }, {
-      lazy: true,
-    });
+    watch(
+      () => props.addList,
+      (next) => {
+        // 更新全局 offset
+        updateState({
+          offset: props.offset + Math.min(limit, next.length),
+          hasMore: next.length >= limit,
+        });
+      }
+    );
 
     // 计算值
     const disabled = computed(() => state.loading || !props.hasMore);
 
-    const handleClick = item => {
+    const handleClick = (item) => {
       if (item.id === props.currentImg.id) return;
       // 触发 changeImg
       ctx.emit('changeImg', item);
@@ -105,7 +111,8 @@ export default {
       });
       queryNextPage({
         offset: props.offset,
-        type: Number(props.type),
+        type: props.type,
+        labelId: props.labelId,
       }).then(() => {
         Object.assign(state, {
           loading: false,
@@ -123,10 +130,10 @@ export default {
   },
 };
 </script>
-<style scoped lang='scss'>
-  .infinite-list-wrapper {
-    ul {
-      margin-bottom: 28px;
-    }
+<style scoped lang="scss">
+.infinite-list-wrapper {
+  ul {
+    margin-bottom: 28px;
   }
+}
 </style>
diff --git a/webapp/src/views/dataset/annotate/thumbContainer/listItem.js b/webapp/src/views/dataset/annotate/thumbContainer/listItem.js
index 0bc99b5..ad1c145 100644
--- a/webapp/src/views/dataset/annotate/thumbContainer/listItem.js
+++ b/webapp/src/views/dataset/annotate/thumbContainer/listItem.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import cx from 'classnames';
 
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/annotationId.js b/webapp/src/views/dataset/annotate/workSpaceContainer/annotationId.js
index d3b6c87..04b2cc3 100644
--- a/webapp/src/views/dataset/annotate/workSpaceContainer/annotationId.js
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/annotationId.js
@@ -1,23 +1,23 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { isNil } from 'lodash';
 import { addSuffix, chroma, colorByLuminance } from '@/utils';
 
-import { defaultColor } from './bbox';
+import { defaultColor } from '@/views/dataset/util';
 
 const validTrackId = (trackId) => {
   if (isNil(trackId) || trackId === -1) return false;
@@ -43,18 +43,13 @@ export default {
   },
   render(h, context) {
     const { props } = context;
-    const {
-      annotate = {},
-      offset,
-      brush,
-      transformer,
-    } = props;
+    const { annotate = {}, offset, brush, transformer } = props;
 
     const { data = {}, id } = annotate;
     const { bbox, color = defaultColor } = data;
 
     // 当前在拖拽中不展示
-    if(props.currentAnnotationId === id && brush.isBrushing) return null;
+    if (props.currentAnnotationId === id && brush.isBrushing) return null;
 
     if (isNil(bbox)) return null;
     const pos = offset(props.annotate);
@@ -67,11 +62,13 @@ export default {
     };
 
     // 匹配当前标注
-    if(annotate.id === transformer.id) {
+    if (annotate.id === transformer.id) {
       style.transform = `translate(${transformer.dx}px, ${transformer.dy}px)`;
     }
-    
-    const tagColor = chroma(color).alpha(0.8).toString();
+
+    const tagColor = chroma(color)
+      .alpha(0.8)
+      .toString();
 
     const trackId = (() => {
       if (annotate.name) return annotate.name;
@@ -83,8 +80,10 @@ export default {
 
     if (!trackId) return null;
     return (
-      <div class='annotation-label image-tag' style={style}>
-        <el-tag color={tagColor} style={{ color: 'inherit', border: 'none' }}>{trackId}</el-tag>
+      <div class="annotation-label image-tag" style={style}>
+        <el-tag color={tagColor} style={{ color: 'inherit', border: 'none' }}>
+          {trackId}
+        </el-tag>
       </div>
     );
   },
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/bbox.js b/webapp/src/views/dataset/annotate/workSpaceContainer/bbox.js
index ddd1a74..2c9c7c9 100644
--- a/webapp/src/views/dataset/annotate/workSpaceContainer/bbox.js
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/bbox.js
@@ -1,25 +1,24 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import cx from 'classnames';
 import { isNil } from 'lodash';
 import { chroma } from '@/utils';
 
-export const defaultColor = 'rgba(102, 181, 245, 1)';
-const defaultFill = 'rgba(102, 181, 245, 0.1)';
+import { defaultColor, defaultFill } from '@/views/dataset/util';
 
 export default {
   name: 'Bbox',
@@ -69,14 +68,16 @@ export default {
 
     let transform = null;
     // 匹配当前标注
-    if(annotate.id === transformer.id) {
+    if (annotate.id === transformer.id) {
       transform = `translate(${transformer.dx}, ${transformer.dy})`;
     }
 
     return (
-      <g class={cx('bbox-group', {
-        active: isActive,
-      })}>
+      <g
+        class={cx('bbox-group', {
+          active: isActive,
+        })}
+      >
         <rect
           fill={fill}
           stroke={color || defaultColor}
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/bboxWrapper.js b/webapp/src/views/dataset/annotate/workSpaceContainer/bboxWrapper.js
index 13ebfed..6dd7702 100644
--- a/webapp/src/views/dataset/annotate/workSpaceContainer/bboxWrapper.js
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/bboxWrapper.js
@@ -1,24 +1,24 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import Vue from 'vue';
 import { isEmpty } from 'lodash';
-import { createElement, reactive, watch } from '@vue/composition-api';
+import { h, reactive, watch } from '@vue/composition-api';
 
-import { mergeProps } from '@/utils';
+import { mergeProps, inBoundary } from '@/utils';
 import Drag from '@/components/Drag';
 import { BrushHandle, BrushCorner } from '@/components/svg';
 import Bbox from './bbox';
@@ -59,11 +59,12 @@ export default {
     },
   },
   components: {
+    h,
     Drag,
     Bbox,
   },
   setup(props) {
-    const { 
+    const {
       offset,
       scale,
       onDragStart,
@@ -78,7 +79,7 @@ export default {
 
     function getExtent() {
       const { data = {} } = props.annotate;
-      const { extent } = data;
+      const { extent = {} } = data;
       return {
         extent,
         start: {
@@ -103,7 +104,7 @@ export default {
       const newState = updater(state);
       Vue.nextTick(() => {
         Object.assign(state, newState);
-        if(typeof callback === 'function') {
+        if (typeof callback === 'function') {
           callback(state);
         }
       });
@@ -111,26 +112,25 @@ export default {
 
     // handler 拖拽事件
     const updateBrushHandler = (updater) => {
-      updateBrush(updater, state => {
-        if(typeof onBrushHandleChange === 'function') {
+      updateBrush(updater, (state) => {
+        if (typeof onBrushHandleChange === 'function') {
           onBrushHandleChange(state, props.annotate);
         }
-      }); 
+      });
     };
 
     // handler 拖拽结束
     const updateBrushHandlerEnd = (updater) => {
-      updateBrush(updater, state => {
-        if(typeof onBrushHandleEnd === 'function') {
+      updateBrush(updater, (state) => {
+        if (typeof onBrushHandleEnd === 'function') {
           onBrushHandleEnd(state, props.annotate);
         }
-      }); 
+      });
     };
 
-
     const handles = () => {
       const { handleSize } = props;
-      const {x, y, width, height} = offset(props.annotate);
+      const { x, y, width, height } = offset(props.annotate);
       const handleOffset = handleSize / 2;
 
       return {
@@ -163,7 +163,7 @@ export default {
 
     const corners = () => {
       const { handleSize } = props;
-      const {x, y, width, height} = offset(props.annotate);
+      const { x, y, width, height } = offset(props.annotate);
       const handleOffset = handleSize / 2;
 
       return {
@@ -190,19 +190,18 @@ export default {
       setCurAnnotation(props.annotate);
     };
 
-    const selectionDragStart = drag => {
+    const selectionDragStart = (drag) => {
       const start = {
         x: drag.x + drag.dx,
         y: drag.y + drag.dy,
       };
       const end = { ...start };
-
       const transformState = {
         start,
         end,
       };
 
-       // 回调
+      // 回调
       if (typeof onDragStart === 'function') {
         onDragStart(transformState, props.annotate);
       }
@@ -210,82 +209,88 @@ export default {
 
     const selectionDragMove = (drag) => {
       const { zoom } = getZoom();
-      updateBrush(prevBrush => {
-        const { x: x0, y: y0 } = prevBrush.start;
-        const { x: x1, y: y1 } = prevBrush.end;
-        // 位置比较计算
-        const _scale = zoom * scale;
-        const validDx =
-          drag.dx > 0
-            ? Math.min(drag.dx / _scale, prevBrush.bounds.x1 - x1)
-            : Math.max(drag.dx / _scale, prevBrush.bounds.x0 - x0);
-
-        const validDy =
-          drag.dy > 0
-            ? Math.min(drag.dy / _scale, prevBrush.bounds.y1 - y1)
-            : Math.max(drag.dy / _scale, prevBrush.bounds.y0 - y0);
-
-        return {
-          ...prevBrush,
-          isBrushing: true,
-          extent: {
-            ...prevBrush.extent,
-            x0: x0 + validDx,
-            x1: x1 + validDx,
-            y0: y0 + validDy,
-            y1: y1 + validDy,
-          },
-          drag: {
-            ...drag,
-            validDx,
-            validDy,
-          },
-        };
-      }, (nextState) => {
-        if (typeof onDragMove === 'function') {
-          onDragMove(nextState, props.annotate);
+      updateBrush(
+        (prevBrush) => {
+          const { x: x0, y: y0 } = prevBrush.start;
+          const { x: x1, y: y1 } = prevBrush.end;
+          // 位置比较计算
+          const _scale = zoom * scale;
+          const validDx =
+            drag.dx > 0
+              ? Math.min(drag.dx / _scale, prevBrush.bounds.x1 - x1)
+              : Math.max(drag.dx / _scale, prevBrush.bounds.x0 - x0);
+
+          const validDy =
+            drag.dy > 0
+              ? Math.min(drag.dy / _scale, prevBrush.bounds.y1 - y1)
+              : Math.max(drag.dy / _scale, prevBrush.bounds.y0 - y0);
+          return {
+            ...prevBrush,
+            isBrushing: true,
+            extent: {
+              ...prevBrush.extent,
+              x0: x0 + validDx,
+              x1: x1 + validDx,
+              y0: y0 + validDy,
+              y1: y1 + validDy,
+            },
+            drag: {
+              ...drag,
+              validDx,
+              validDy,
+            },
+          };
+        },
+        (nextState) => {
+          if (typeof onDragMove === 'function') {
+            onDragMove(nextState, props.annotate);
+          }
         }
-      });
+      );
     };
 
     const selectionDragEnd = (state, event, options = {}) => {
       const { prevState } = options;
       // fix 双击触发移动选框
-      if(!prevState.isMoving) return;
-      updateBrush(prevBrush => {
-        const nextBrush = {
-          ...prevBrush,
-          isBrushing: false,
-          start: {
-            ...prevBrush.start,
-            x: Math.min(prevBrush.extent.x0, prevBrush.extent.x1),
-            y: Math.min(prevBrush.extent.y0, prevBrush.extent.y1),
-          },
-          end: {
-            ...prevBrush.end,
-            x: Math.max(prevBrush.extent.x0, prevBrush.extent.x1),
-            y: Math.max(prevBrush.extent.y0, prevBrush.extent.y1),
-          },
-        };
-
-        return nextBrush;
-      }, (nextState) => {
-        // 回调
-        if (typeof onDragEnd === 'function') {
-          onDragEnd(nextState, props.annotate);
+      if (!prevState.isMoving) return;
+      updateBrush(
+        (prevBrush) => {
+          const nextBrush = {
+            ...prevBrush,
+            isBrushing: false,
+            start: {
+              ...prevBrush.start,
+              x: Math.min(prevBrush.extent.x0, prevBrush.extent.x1),
+              y: Math.min(prevBrush.extent.y0, prevBrush.extent.y1),
+            },
+            end: {
+              ...prevBrush.end,
+              x: Math.max(prevBrush.extent.x0, prevBrush.extent.x1),
+              y: Math.max(prevBrush.extent.y0, prevBrush.extent.y1),
+            },
+          };
+
+          return nextBrush;
+        },
+        (nextState) => {
+          // 回调
+          if (typeof onDragEnd === 'function') {
+            onDragEnd(nextState, props.annotate);
+          }
         }
-      });
+      );
     };
 
-    watch(() => props.bounds, (next) => {
-      if(!isEmpty(next)) {
-        Object.assign(state, {
-          bounds: { x0: 0, x1: bounds.width, y0: 0, y1: bounds.height },
-        });
+    watch(
+      () => props.bounds,
+      (next) => {
+        if (!isEmpty(next)) {
+          Object.assign(state, {
+            bounds: { x0: 0, x1: bounds.width, y0: 0, y1: bounds.height },
+          });
+        }
       }
-    }, {
-      lazy: true,
-    });
+    );
 
     return {
       state,
@@ -302,14 +307,7 @@ export default {
     };
   },
   render(h) {
-    const {
-      annotate = {},
-      scale,
-      brush,
-      handleSize,
-      transformer,
-      currentAnnotationId,
-    } = this;
+    const { annotate = {}, scale, brush, handleSize, transformer, currentAnnotationId } = this;
     const handles = this.handles();
     const corners = this.corners();
 
@@ -338,93 +336,85 @@ export default {
 
     return (
       <Drag {...dragProps} key={annotate.id}>
-        {
-          (draw) => {
-            const style = {
-              pointerEvents: brush.isBrushing || this.state.activeHandle ? 'none' : 'all',
-            };
-            const _props = mergeProps(bboxProps, {
-              props: { ...draw, brush: this.state },
-              style,
-            });
-
-            const Handles = Object.keys(handles).map((handleKey) => {
-              const handle = handles[handleKey];
-              return (
-                <BrushHandle
-                  key={`handle-${handleKey}`}
-                  type={handleKey}
-                  handle={handle}
-                  scale={scale}
-                  stageWidth={this.svg.width}
-                  stageHeight={this.svg.height}
-                  handleBrushStart={this.brushHandlerStart}
-                  updateBrush={this.updateBrushHandler}
-                  updateBrushEnd={this.updateBrushHandlerEnd}
-                  getZoom={this.getZoom}
-                />
-              );
-            });
-
-            const Corners = Object.keys(corners).map((cornerKey) => {
-              const corner = corners[cornerKey];
+        {(draw) => {
+          const style = {
+            pointerEvents: brush.isBrushing || this.state.activeHandle ? 'none' : 'all',
+          };
+          const _props = mergeProps(bboxProps, {
+            props: { ...draw, brush: this.state },
+            style,
+          });
+
+          const Handles = Object.keys(handles).map((handleKey) => {
+            const handle = handles[handleKey];
+            return (
+              <BrushHandle
+                key={`handle-${handleKey}`}
+                type={handleKey}
+                handle={handle}
+                scale={scale}
+                stageWidth={this.svg.width}
+                stageHeight={this.svg.height}
+                handleBrushStart={this.brushHandlerStart}
+                updateBrush={this.updateBrushHandler}
+                updateBrushEnd={this.updateBrushHandlerEnd}
+                getZoom={this.getZoom}
+              />
+            );
+          });
 
-              return (
-                <BrushCorner
-                  annotate={annotate}
-                  transformer={transformer}
-                  currentAnnotationId={currentAnnotationId}
-                  key={`corner-${cornerKey}`}
-                  type={cornerKey}
-                  x={corner.x}
-                  y={corner.y}
-                  width={handleSize}
-                  height={handleSize}
-                  scale={scale}
-                  stageWidth={this.svg.width}
-                  stageHeight={this.svg.height}
-                  handleBrushStart={this.brushHandlerStart}
-                  updateBrush={this.updateBrushHandler}
-                  updateBrushEnd={this.updateBrushHandlerEnd}
-                  getZoom={this.getZoom}
-                />
-              );
-            });
+          const Corners = Object.keys(corners).map((cornerKey) => {
+            const corner = corners[cornerKey];
 
             return (
-               <g>
-                {draw.state.isDragging && (
-                  <rect
-                    width={this.svg.width}
-                    height={this.svg.height}
-                    fill="transparent"
-                    onMouseup={draw.dragEnd}
-                    onMousemove={draw.dragMove}
-                    onMouseleave={(event) => {
-                      // hack: 获取画布背景的位置
-                      const rect = event.target.getBoundingClientRect();
-                      // 超出边界判断
-                      if(event.clientX <= rect.x || event.clientX >= rect.right || event.clientY <= rect.y || event.clientY >= rect.bottom) {
-                        draw.dragEnd();
-                      } 
-                    }}
-                    style={{
-                      cursor: 'move',
-                    }}
-                  />
-                )}
-                {createElement(Bbox, _props)}
-                <g
-                  class='bbox-handles-group'
-                >{Handles}</g>
-                <g
-                  class='bbox-corners-group'
-                >{Corners}</g>
-              </g>
+              <BrushCorner
+                annotate={annotate}
+                transformer={transformer}
+                currentAnnotationId={currentAnnotationId}
+                key={`corner-${cornerKey}`}
+                type={cornerKey}
+                x={corner.x}
+                y={corner.y}
+                width={handleSize}
+                height={handleSize}
+                scale={scale}
+                stageWidth={this.svg.width}
+                stageHeight={this.svg.height}
+                handleBrushStart={this.brushHandlerStart}
+                updateBrush={this.updateBrushHandler}
+                updateBrushEnd={this.updateBrushHandlerEnd}
+                getZoom={this.getZoom}
+              />
             );
-          }
-        }
+          });
+
+          return (
+            <g>
+              {draw.state.isDragging && (
+                <rect
+                  width={this.svg.width}
+                  height={this.svg.height}
+                  fill="transparent"
+                  onMouseup={draw.dragEnd}
+                  onMousemove={draw.dragMove}
+                  onMouseleave={(event) => {
+                    // 超出边界判断
+                    if (!inBoundary(event, event.target)) {
+                      draw.dragEnd();
+                    }
+                  }}
+                  style={{
+                    cursor: 'move',
+                  }}
+                />
+              )}
+              {h(Bbox, _props)}
+              <g class="bbox-handles-group">{Handles}</g>
+              <g class="bbox-corners-group">{Corners}</g>
+            </g>
+          );
+        }}
       </Drag>
     );
   },
-};
\ No newline at end of file
+};
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/brushTip.js b/webapp/src/views/dataset/annotate/workSpaceContainer/brushTip.js
index 61ed896..3507e37 100644
--- a/webapp/src/views/dataset/annotate/workSpaceContainer/brushTip.js
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/brushTip.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { isNil } from 'lodash';
 import { toFixed, addSuffix } from '@/utils';
@@ -27,19 +27,19 @@ export default {
   setup(props) {
     const getWidth = () => {
       const { extent } = props.brush;
-      if(isNil(extent)) return 0;
+      if (isNil(extent)) return 0;
       return extent.x1 - extent.x0;
     };
 
     const getHeight = () => {
       const { extent } = props.brush;
-      if(isNil(extent)) return 0;
+      if (isNil(extent)) return 0;
       return extent.y1 - extent.y0;
     };
 
     const getEndPoint = () => {
       const { extent = {} } = props.brush;
-      return {x: extent.x1, y: extent.y1};
+      return { x: extent.x1, y: extent.y1 };
     };
 
     return {
@@ -48,7 +48,7 @@ export default {
       getEndPoint,
     };
   },
-  render(h) {
+  render() {
     const width = this.getWidth();
     const height = this.getHeight();
     const endPoint = this.getEndPoint();
@@ -67,22 +67,24 @@ export default {
     // 到上边缘
     if (this.brush.extent?.y0 < 30) {
       sizeTipStyle.top = addSuffix(this.brush.extent?.y0 + 6);
-    };
+    }
 
     return (
-      <div class='usn'>
-        <div class='brush-tooltip size-tipper' style={sizeTipStyle}>{ 
-          width > 0 && height > 0 && (
-            <div class='tooltip-item-row'>{toFixed(width, 0, 0)} * {toFixed(height, 0, 0)}</div>
-          )
-         }</div>
-         <div class='brush-tooltip dimension-tipper' style={dimensionTipStyle}>{ 
-          endPoint && (
-            <div class='tooltip-item-row'>
+      <div class="usn">
+        <div class="brush-tooltip size-tipper" style={sizeTipStyle}>
+          {width > 0 && height > 0 && (
+            <div class="tooltip-item-row">
+              {toFixed(width, 0, 0)} * {toFixed(height, 0, 0)}
+            </div>
+          )}
+        </div>
+        <div class="brush-tooltip dimension-tipper" style={dimensionTipStyle}>
+          {endPoint && (
+            <div class="tooltip-item-row">
               ({toFixed(endPoint.x, 0, 0)}, {toFixed(endPoint.y, 0, 0)})
             </div>
-          )
-         }</div>
+          )}
+        </div>
       </div>
     );
   },
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/dropdownLabel/index.js b/webapp/src/views/dataset/annotate/workSpaceContainer/dropdownLabel/index.js
index c106a72..1e125e7 100644
--- a/webapp/src/views/dataset/annotate/workSpaceContainer/dropdownLabel/index.js
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/dropdownLabel/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { BasicTooltip } from '@/hooks';
 import './style.scss';
@@ -24,7 +24,12 @@ const DropDownLabel = {
     const { props } = context;
     const { visible, position, hideTooltip, value, handleChange, labels = [] } = props;
     return (
-      <BasicTooltip class='dropdown-label' visible={visible} position={position} hideTooltip={hideTooltip}>
+      <BasicTooltip
+        class="dropdown-label"
+        visible={visible}
+        position={position}
+        hideTooltip={hideTooltip}
+      >
         <el-select
           value={value}
           key={value} // fix: ele-select 每次创建完毕会保留 id
@@ -32,17 +37,11 @@ const DropDownLabel = {
           filterable
           allow-create
           default-first-option
-          placeholder='请选择标签'
+          placeholder="请选择标签"
         >
-          {
-            labels.map(label => (
-              <el-option
-                key={label.id}
-                label={label.name}
-                value={label.id}>
-              </el-option>
-            ))
-          }
+          {labels.map((label) => (
+            <el-option key={label.id} label={label.name} value={label.id}></el-option>
+          ))}
         </el-select>
       </BasicTooltip>
     );
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/index.vue b/webapp/src/views/dataset/annotate/workSpaceContainer/index.vue
index 331ad83..7594c9d 100644
--- a/webapp/src/views/dataset/annotate/workSpaceContainer/index.vue
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="workspace-container flex flex-col">
@@ -32,6 +32,7 @@
         :api="api"
         :setApi="setApi"
         :confirm="confirm"
+        :isSegmentation="isSegmentation"
         v-on="listeners"
       />
       <div id="stage" ref="imgWrapperRef" v-loading="!imgInfo.loaded" class="f1 rel">
@@ -44,89 +45,113 @@
         >
           <div class="zoom-content">
             <div class="zoom-content-bound rel" :style="dimension.marginStyle">
-              <div class="imgWrapper" :style="dimension.imgScaleStyle" :class="dimension.scale < 1 ? 'imgScale' : ''">
-                <img ref="imgRef" :src="currentImg.url" class='usn'>
+              <div
+                class="imgWrapper"
+                :style="dimension.imgScaleStyle"
+                :class="dimension.scale < 1 ? 'imgScale' : ''"
+              >
+                <img ref="imgRef" :src="currentImg.url" class="usn" />
               </div>
               <!-- svg 宽高要根据图片自适应 -->
               <div class="annotation-element-group abs" :style="dimension.annotationGroupStyle">
-                <svg
-                  ref="svgRef"
-                  class="canvas"
-                  :style="dimension.svg"
-                >
-                  <Brush
+                <svg ref="svgRef" class="canvas" :style="dimension.svg">
+                  <g v-if="!isSegmentation">
+                    <Brush
+                      :stageWidth="dimension.svg.width"
+                      :stageHeight="dimension.svg.height"
+                      :onBrushStart="handleBrushStart"
+                      :onBrushMove="handleBrushMove"
+                      :onBrushEnd="handleBrushEnd"
+                      :transformZoom="transformZoom"
+                    />
+                    <g class="annotation-group">
+                      <BboxWrapper
+                        v-for="annotate in api.annotations"
+                        :key="annotate.id"
+                        :annotate="annotate"
+                        :brush="brush"
+                        :offset="offset"
+                        :transformer="transformer"
+                        :svg="dimension.svg"
+                        :scale="dimension.scale"
+                        :bounds="dimension.img"
+                        :onDragStart="onDragStart"
+                        :onDragMove="onDragMove"
+                        :onDragEnd="onDragEnd"
+                        :onBrushHandleChange="onBrushHandleChange"
+                        :onBrushHandleEnd="onBrushHandleEnd"
+                        :currentAnnotationId="state.currentAnnotationId.value"
+                        :setCurAnnotation="setCurAnnotation"
+                        :getZoom="getZoom"
+                      />
+                    </g>
+                  </g>
+                  <Segmentation
+                    v-else
+                    ref="segmentationRef"
                     :stageWidth="dimension.svg.width"
                     :stageHeight="dimension.svg.height"
-                    :onBrushStart="handleBrushStart"
-                    :onBrushMove="handleBrushMove"
-                    :onBrushEnd="handleBrushEnd"
+                    :shapes="api.shapes"
+                    :offset="offsetBbox"
+                    :currentAnnotationId="state.currentAnnotationId.value"
+                    :setCurAnnotation="setCurAnnotation"
+                    :updateState="updateState"
                     :transformZoom="transformZoom"
+                    :scale="dimension.scale"
+                    :getZoom="getZoom"
+                    :bounds="dimension.img"
+                    @change="handleShapesChange"
                   />
-                  <g class="annotation-group">
-                    <BboxWrapper
+                </svg>
+                <div class="annotation-extra">
+                  <div
+                    v-if="state.showScore.value && !isSegmentation"
+                    class="annotation-score-group"
+                  >
+                    <Score
                       v-for="annotate in api.annotations"
                       :key="annotate.id"
                       :annotate="annotate"
+                      :currentAnnotationId="state.currentAnnotationId.value"
                       :brush="brush"
                       :offset="offset"
                       :transformer="transformer"
-                      :svg="dimension.svg"
-                      :scale="dimension.scale"
-                      :bounds="dimension.img"
-                      :onDragStart="onDragStart"
-                      :onDragMove="onDragMove"
-                      :onDragEnd="onDragEnd"
-                      :onBrushHandleChange="onBrushHandleChange"
-                      :onBrushHandleEnd="onBrushHandleEnd"
+                    />
+                  </div>
+                  <div v-if="state.showTag.value" class="annotation-tag-group">
+                    <Tag
+                      v-for="annotate in annotations"
+                      :key="annotate.id"
+                      :annotate="annotate"
                       :currentAnnotationId="state.currentAnnotationId.value"
-                      :setCurAnnotation="setCurAnnotation"
-                      :getZoom="getZoom"
+                      :isMoving="isSegmentation ? transformer.isDragging : brush.isBrushing"
+                      :offset="offset"
+                      :transformer="transformer"
+                      :getLabelName="getLabelName"
+                      :annotationType="annotationType"
                     />
-                  </g>
-                </svg>
-                <div v-if="state.showScore.value" class="annotation-score-group">
-                  <Score
-                    v-for="annotate in api.annotations"
-                    :key="annotate.id"
-                    :annotate="annotate"
-                    :currentAnnotationId="state.currentAnnotationId.value"
-                    :brush="brush"
-                    :offset="offset"
-                    :transformer="transformer"
-                  />
-                </div>
-                <div v-if="state.showTag.value" class="annotation-tag-group">
-                  <Tag
-                    v-for="annotate in api.annotations"
-                    :key="annotate.id"
-                    :annotate="annotate"
-                    :currentAnnotationId="state.currentAnnotationId.value"
+                  </div>
+                  <div v-if="state.showId.value && isTrack" class="annotation-tag-group">
+                    <AnnotationId
+                      v-for="annotate in api.annotations"
+                      :key="annotate.id"
+                      :annotate="annotate"
+                      :currentAnnotationId="state.currentAnnotationId.value"
+                      :brush="brush"
+                      :offset="offset"
+                      :transformer="transformer"
+                      :scale="dimension.scale"
+                      :getLabelName="getLabelName"
+                      :imgBounding="api.imgBounding"
+                    />
+                  </div>
+                  <!-- 新建标注展示尺寸信息 -->
+                  <BrushTip
+                    v-if="brush.isBrushing && brush.extent"
                     :brush="brush"
-                    :offset="offset"
-                    :transformer="transformer"
-                    :getLabelName="getLabelName"
+                    :dimension="dimension"
                   />
                 </div>
-                <div v-if="state.showId.value && isTrack" class="annotation-tag-group">
-                  <AnnotationId
-                    v-for="annotate in api.annotations"
-                    :key="annotate.id"
-                    :annotate="annotate"
-                    :currentAnnotationId="state.currentAnnotationId.value"
-                    :brush="brush"
-                    :offset="offset"
-                    :transformer="transformer"
-                    :scale="dimension.scale"
-                    :getLabelName="getLabelName"
-                    :imgBounding="api.imgBounding"
-                  />
-                </div>
-                <!-- 新建标注展示尺寸信息 -->
-                <BrushTip
-                  v-if="brush.isBrushing && brush.extent"
-                  :brush="brush"
-                  :dimension="dimension" 
-                />
               </div>
             </div>
           </div>
@@ -150,14 +175,29 @@
 </template>
 `
 <script>
-import { ref, computed, watch, reactive, inject, onMounted, onBeforeUnmount } from '@vue/composition-api';
+import {
+  ref,
+  computed,
+  watch,
+  reactive,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+} from '@vue/composition-api';
 import { isNil } from 'lodash';
 import { event as d3Event } from 'd3-selection';
 import { Message } from 'element-ui';
 
 import { labelsSymbol } from '@/views/dataset/util';
 import { useBrush, useZoom, unref, useTooltip, useImage } from '@/hooks';
-import { getBounding, raise, noop, replace, extent2Bbox, getZoomPosition } from '@/utils';
+import {
+  getBounding,
+  raise,
+  replace,
+  extent2Bbox,
+  parsePolygon2Bbox,
+  getZoomPosition,
+} from '@/utils';
 import { Brush } from '@/components/svg';
 import ZoomContainer from '@/components/ZoomContainer';
 import Exception from '@/components/Exception';
@@ -168,6 +208,7 @@ import Tag from './tag';
 import AnnotationId from './annotationId';
 import DropDownLabel from './dropdownLabel';
 import BrushTip from './brushTip';
+import Segmentation from './segmentation';
 
 const addEventListener = require('add-dom-event-listener');
 
@@ -183,6 +224,7 @@ export default {
   name: 'WorkSpaceContainer',
   components: {
     ZoomContainer,
+    Segmentation,
     Exception,
     Brush,
     ToolBar,
@@ -199,7 +241,7 @@ export default {
       type: Object,
       default: () => null,
     },
-    drawBboxEnd: Function,
+    drawShapeEnd: Function,
     createLabel: Function,
     queryLabels: Function,
     getLabelName: Function,
@@ -207,19 +249,34 @@ export default {
     handleConfirm: Function,
     deleteAnnotation: Function,
     isTrack: Boolean,
+    isSegmentation: Boolean,
+    annotationType: String,
   },
   setup(props, ctx) {
+    const {
+      drawShapeEnd,
+      state,
+      createLabel,
+      queryLabels,
+      updateState,
+      deleteAnnotation,
+      handleConfirm,
+      isSegmentation,
+      annotationType,
+    } = props;
+
     const imgWrapperRef = ref(null);
     const svgRef = ref(null);
     const resizerRef = ref(null); // 事件句柄
     const imgRef = ref(null); // 图片
+    const segmentationRef = ref(null);
 
     // 当前所有标签信息
     const labels = inject(labelsSymbol);
-
     // 初始化状态
     const api = reactive({
       annotations: props.state.annotations,
+      shapes: props.state.shapes,
       label: {}, // 一个页面当前只能存在一个标签
       bounding: null, // 容器位置信息
       isCenter: false, // 图片是否已居中
@@ -227,6 +284,9 @@ export default {
       active: '', // 当前选中
     });
 
+    // 对标注进行合并
+    const annotations = computed(() => api[annotationType]);
+
     // 标注偏移
     const transformer = reactive({
       id: undefined,
@@ -237,7 +297,6 @@ export default {
     });
 
     const { listeners } = ctx;
-    const { drawBboxEnd, state, createLabel, queryLabels, updateState, deleteAnnotation, handleConfirm } = props;
     const {
       brush,
       onBrushStart,
@@ -255,10 +314,13 @@ export default {
     };
 
     // 初始放大和缩小函数
-    const { zoomIn, zoomOut, setZoom, reset: resetZoom, zoom, getZoom } = useZoom(initialZoom, imgWrapperRef);
+    const { zoomIn, zoomOut, setZoom, reset: resetZoom, zoom, getZoom } = useZoom(
+      initialZoom,
+      imgWrapperRef
+    );
 
     // tooltip
-    const { tooltipData, showTooltip, hideTooltip } = useTooltip(imgWrapperRef);
+    const { tooltipData, showTooltip, hideTooltip } = useTooltip();
 
     // 图片尺寸
     const { imgInfo = {}, setImg } = useImage();
@@ -270,12 +332,12 @@ export default {
       return d3Event.type !== 'mousedown';
     };
 
-    const setApi = params => {
+    const setApi = (params) => {
       Object.assign(api, params);
     };
 
     // 更新标注偏移
-    const setTransformer = params => {
+    const setTransformer = (params) => {
       Object.assign(transformer, params);
     };
 
@@ -284,31 +346,9 @@ export default {
       return getZoomPosition(ctx.refs.zoomRef.wrapperRef, point);
     };
 
-    // 监听 currentImage 变化
-    watch(() => props.currentImg, (nextImg) => {
-      // 每次切换图片重置 zoom
-      resetZoom();
-      // 重置选中的标签和位置
-      Object.assign(api, {
-        label: {},
-        isCenter: false,
-        imgBounding: null,
-      });
-      if (nextImg?.url) {
-        setImg(nextImg.url);
-      }
-    }, {
-      lazy: true,
-    });
-
-    watch(() => props.state, (nextProps) => {
-      if ('annotations' in nextProps) {
-        api.annotations = nextProps.annotations || [];
-      }
-    });
-
     const defaultDimension = {
       svg: {},
+      img: {},
       wrapper: {},
       margin: {},
       scale: 1,
@@ -332,7 +372,11 @@ export default {
         };
 
         // 当图片尺寸超过容器尺寸，进行缩放
-        const imgScale = Math.min(wrapperDimension.width / imgInfo.width, wrapperDimension.height / imgInfo.height, 1);
+        const imgScale = Math.min(
+          wrapperDimension.width / imgInfo.width,
+          wrapperDimension.height / imgInfo.height,
+          1
+        );
 
         // 如果图片有缩放，直接取容器尺寸即可
         const svgDimension = {
@@ -345,12 +389,12 @@ export default {
           left: imgScale === 1 ? `${(cw - iw) / 2}px` : 0,
           top: imgScale === 1 ? `${(ch - FooterHeight - ih) / 2}px` : 0,
           width: imgScale === 1 ? `${iw}px` : `${cw}px`,
-          height: imgScale === 1 ? `${ih}px` : `${ch-FooterHeight}px`,
+          height: imgScale === 1 ? `${ih}px` : `${ch - FooterHeight}px`,
         };
 
         // 上面已经通过margin: 0 auto 做过宽度处理
-        const ml = Math.max((wrapperDimension.width - iw * imgScale), 0) / 2;
-        const mt = Math.max((wrapperDimension.height - ih * imgScale), 0) / 2;
+        const ml = Math.max(wrapperDimension.width - iw * imgScale, 0) / 2;
+        const mt = Math.max(wrapperDimension.height - ih * imgScale, 0) / 2;
 
         const marginStyle = {};
         if (ml > 0) {
@@ -371,27 +415,43 @@ export default {
           height: ih,
         };
 
-        const imgScaleStyle = imgScale < 1 ? {
-          width: `${imgInfo.width * imgScale}px`,
-          height: `${imgInfo.height * imgScale}px`,
-          transition: 'opacity 0.4s',
-          opacity: 1,
-        } : {};
+        const imgScaleStyle =
+          imgScale < 1
+            ? {
+                width: `${imgInfo.width * imgScale}px`,
+                height: `${imgInfo.height * imgScale}px`,
+                transition: 'opacity 0.4s',
+                opacity: 1,
+              }
+            : {};
         // 居中
         api.isCenter = true;
-        return { svg: svgDimension, img: imgDimension, wrapper: wrapperDimension, margin, marginStyle, scale: imgScale, imgScaleStyle, annotationGroupStyle };
-      } if (!imgInfo.loaded || imgInfo.width === 0 && imgInfo.height === 0) {
+        return {
+          svg: svgDimension,
+          img: imgDimension,
+          wrapper: wrapperDimension,
+          margin,
+          marginStyle,
+          scale: imgScale,
+          imgScaleStyle,
+          annotationGroupStyle,
+        };
+      }
+      if (!imgInfo.loaded || (imgInfo.width === 0 && imgInfo.height === 0)) {
         // 加一个过渡效果，避免太唐突
-        return { ...defaultDimension, imgScaleStyle: {
-          opacity: 0,
-        }};
+        return {
+          ...defaultDimension,
+          imgScaleStyle: {
+            opacity: 0,
+          },
+        };
       }
       return defaultDimension;
     });
 
     const findImgIndex = () => {
       const { files, currentImgId } = state;
-      const currentImgIndex = files.value.findIndex(d => d.id === currentImgId.value);
+      const currentImgIndex = files.value.findIndex((d) => d.id === currentImgId.value);
       return { currentImgIndex, files };
     };
 
@@ -405,26 +465,28 @@ export default {
       if (currentImgIndex > 0) {
         ctx.emit('changeImg', files.value[currentImgIndex - 1]);
       } else if (!msgInstance) {
-          msgInstance = Message.warning({
-            message: '当前图片不存在或图片已经到顶了',
-            onClose: onMessageClose,
-          });
-        }
+        msgInstance = Message.warning({
+          message: '当前图片不存在或图片已经到顶了',
+          onClose: onMessageClose,
+        });
+      }
     };
-    const handleNext = (callback) => {
+
+    const handleNext = () => {
+      // 未标注文件全量更新，不需要切换到下一张
+      if (props.state.filterUnfinished.value) return;
+
       const { files, currentImgIndex } = findImgIndex();
       if (currentImgIndex > -1 && currentImgIndex < files.value.length - 1) {
         ctx.emit('changeImg', files.value[currentImgIndex + 1]);
         // 触发下一页数据
         ctx.emit('nextPage', files.value[currentImgIndex + 1], currentImgIndex + 1, files);
-      } else if (typeof callback === 'function') {
-          callback();
-        } else if (!msgInstance) {
-          msgInstance = Message.warning({
-            message: '当前图片不存在或图片已经到底了',
-            onClose: onMessageClose,
-          });
-        }
+      } else if (!msgInstance) {
+        msgInstance = Message.warning({
+          message: '当前图片不存在或图片已经到底了',
+          onClose: onMessageClose,
+        });
+      }
     };
 
     // 删除注释
@@ -436,6 +498,16 @@ export default {
       }
     };
 
+    // 取消选择（目前只针对分割有效）
+    const cancelSelection = () => {
+      segmentationRef.value?.reset();
+    };
+
+    // 完成绘制（目前只针对分割有效）
+    const finishDraw = () => {
+      segmentationRef.value?.finishDraw();
+    };
+
     // 选中标注，开始画框
     const selection = () => {
       setApi({ active: 'selection' });
@@ -444,20 +516,22 @@ export default {
       listeners.selection(true);
     };
 
-    watch(() => api.isCenter, (isCenter) => {
-      if (isCenter) {
-        const { width: boundingWidth, height: boundingHeight } = api.bounding;
-        const { width: imgWidth, height: imgHeight } = getBounding(imgRef.value);
-        // todo: 缩放图片取容器尺寸，否则取图片尺寸
-        const mw = dimension.value.scale < 1 ? boundingWidth : dimension.value.img.width;
-        const mh = dimension.value.scale < 1 ? boundingHeight - FooterHeight : dimension.value.img.height;
-        Object.assign(api, {
-          imgBounding: [(mw - imgWidth) / 2, (mh - imgHeight) / 2],
-        });
+    watch(
+      () => api.isCenter,
+      (isCenter) => {
+        if (isCenter) {
+          const { width: boundingWidth, height: boundingHeight } = api.bounding;
+          const { width: imgWidth, height: imgHeight } = getBounding(imgRef.value);
+          // 缩放图片取容器尺寸，否则取图片尺寸
+          const mw = dimension.value.scale < 1 ? boundingWidth : dimension.value.img.width;
+          const mh =
+            dimension.value.scale < 1 ? boundingHeight - FooterHeight : dimension.value.img.height;
+          Object.assign(api, {
+            imgBounding: [(mw - imgWidth) / 2, (mh - imgHeight) / 2],
+          });
+        }
       }
-    }, {
-      lazy: true,
-    });
+    );
 
     // 快捷键
     const keymap = computed(() => ({
@@ -470,6 +544,8 @@ export default {
       backspace: removeAnnotation,
       delete: removeAnnotation,
       n: selection,
+      esc: cancelSelection,
+      f: finishDraw,
     }));
 
     // 选中标注
@@ -485,25 +561,25 @@ export default {
       hideTooltip();
       // 判断是否开启选框
       // if (!state.selection.value) return;
-      const {x, y} = start;
+      const { x, y } = start;
       onBrushStart({ x, y });
       // 重置当前选中的标注
       setCurAnnotation(undefined);
     };
 
     const handleBrushMove = (state) => {
-      const {x, y} = state.end || {};
+      const { x, y } = state.end || {};
       onBrushMove({ x, y });
     };
 
     const handleBrushEnd = (state, event, options = {}) => {
       const { prevState = {} } = options;
       // 确认是move 之后触发
-      if(state.end && !!prevState.isDragging) {
+      if (state.end && !!prevState.isDragging) {
         // 展示tooltip
-        showTooltip({}, event);
+        showTooltip({}, event, { el: imgWrapperRef.value });
         // 回调
-        drawBboxEnd && drawBboxEnd(state, event);
+        drawShapeEnd && drawShapeEnd(state, event);
         onBrushReset();
         return;
       }
@@ -515,39 +591,45 @@ export default {
 
     // 判断标签是否已存在
     const islabelExists = (value) => {
-      return !!(labels.value || []).find(label => label.id === Number(value));
+      return !!(labels.value || []).find((label) => label.id === Number(value));
     };
 
-    // 标注偏移
-    const offset = (annotate) => {
-      const { data = {} } = annotate;
-      const { extent } = data;
-      const _bbox = extent2Bbox(extent);
+    // 基于检测生成 bbox
+    const offsetBbox = (bbox) => {
+      const paddingLeft =
+        dimension.value.scale < 1 && !isNil(api.imgBounding) ? api.imgBounding[0] : 0;
 
-      const paddingLeft = (dimension.value.scale < 1 && !isNil(api.imgBounding))
-        ? api.imgBounding[0]
-        : 0;
+      const paddingTop =
+        dimension.value.scale < 1 && !isNil(api.imgBounding) ? api.imgBounding[1] : 0;
 
-      const paddingTop = (dimension.value.scale < 1 && !isNil(api.imgBounding))
-        ? api.imgBounding[1]
-        : 0;
-      
       const pos = {
-        x: _bbox.x * dimension.value.scale + paddingLeft,
-        y: _bbox.y * dimension.value.scale + paddingTop,
-        width: _bbox.width * dimension.value.scale,
-        height: _bbox.height * dimension.value.scale,
+        x: bbox.x * dimension.value.scale + paddingLeft,
+        y: bbox.y * dimension.value.scale + paddingTop,
       };
 
+      if (bbox.width && bbox.height) {
+        Object.assign(pos, {
+          width: bbox.width * dimension.value.scale,
+          height: bbox.height * dimension.value.scale,
+        });
+      }
+
       return pos;
     };
 
+    // 标注偏移
+    const offset = (annotate) => {
+      const { data = {} } = annotate;
+      const _bbox = isSegmentation ? parsePolygon2Bbox(data.points) : extent2Bbox(data.extent);
+      return offsetBbox(_bbox);
+    };
+
     // handle 变更
     const onBrushHandleChange = (brush, annotation) => {
       // 同步 brush
       const pos = offset(annotation);
-      updateState(prev => {
-        const index = prev.annotations.findIndex(d => d.id === annotation.id);
+      updateState((prev) => {
+        const index = prev.annotations.findIndex((d) => d.id === annotation.id);
         if (index > -1) {
           const selectedItem = prev.annotations[index];
           const _nextItem = {
@@ -564,10 +646,11 @@ export default {
             annotations: nextAnnotations,
           };
         }
+        return prev;
       });
 
       // 更新brush
-      updateBrush(prevBrush => {
+      updateBrush((prevBrush) => {
         return {
           ...prevBrush,
           isBrushing: true,
@@ -586,7 +669,7 @@ export default {
       // 同步 brush
       const pos = offset(annotation);
       // 更新brush
-      updateBrush(prevBrush => {
+      updateBrush((prevBrush) => {
         return {
           ...prevBrush,
           isBrushing: false,
@@ -604,12 +687,12 @@ export default {
     const confirm = () => {
       handleConfirm().then(() => {
         // 切换到下一页
-        Message.success({ message: '人工确认成功', duration: 800, onClose: () => handleNext(noop) });
+        Message.success({ message: '人工确认成功', duration: 400, onClose: handleNext });
       });
     };
 
     // 选中selectItem
-    const handleSelectChange = async(value) => {
+    const handleSelectChange = async (value) => {
       let labelVal = value;
       // 首先判断标签是否已存在
       // 如果没有，就先创建
@@ -621,7 +704,8 @@ export default {
           labels: nextLabels,
         });
       }
-      const { annotations = [], currentAnnotationId } = state;
+      const { currentAnnotationId } = state;
+      const annotationInfo = isSegmentation ? state.shapes : state.annotations;
       const selectedLabel = {
         ...api.label,
         value: labelVal,
@@ -629,7 +713,8 @@ export default {
       Object.assign(api, {
         label: selectedLabel,
       });
-      const curAnnotation = annotations.value.find(d => d.id === currentAnnotationId.value) || {};
+      const curAnnotation =
+        annotationInfo.value.find((d) => d.id === currentAnnotationId.value) || {};
       // 触发标注对应标签变更事件
       ctx.emit('selectLabel', { selectedLabel, curAnnotation });
       // 选择标签完成关闭选择器
@@ -647,7 +732,7 @@ export default {
 
     // 每次拖拽的优先级提升
     const onDragStart = (draw, annotation) => {
-      const index = api.annotations.findIndex(d => d.id === annotation.id);
+      const index = api.annotations.findIndex((d) => d.id === annotation.id);
       if (index > -1) {
         const raised = raise(api.annotations, index);
         Object.assign(api, {
@@ -659,7 +744,7 @@ export default {
 
       // 同步 brush
       const pos = offset(annotation);
-      updateBrush(prevBrush => {
+      updateBrush((prevBrush) => {
         const start = {
           x: pos.x,
           y: pos.y,
@@ -684,17 +769,17 @@ export default {
       const { zoom } = getZoom();
 
       const validDx =
-          drag.dx > 0
-            ? Math.min(drag.dx / zoom, dimension.value.svg.width - pos.x - pos.width)
-            : Math.max(drag.dx / zoom, -pos.x);
-   
+        drag.dx > 0
+          ? Math.min(drag.dx / zoom, dimension.value.svg.width - pos.x - pos.width)
+          : Math.max(drag.dx / zoom, -pos.x);
+
       const validDy =
-          drag.dy > 0
-            ? Math.min(drag.dy / zoom, dimension.value.svg.height - pos.y - pos.height)
-            : Math.max(drag.dy / zoom, -pos.y);
-      
+        drag.dy > 0
+          ? Math.min(drag.dy / zoom, dimension.value.svg.height - pos.y - pos.height)
+          : Math.max(drag.dy / zoom, -pos.y);
+
       // 更新 brush 位置
-      updateBrush(prevBrush => {
+      updateBrush((prevBrush) => {
         const { x: x0, y: y0 } = prevBrush.start;
         const { x: x1, y: y1 } = prevBrush.end;
         return {
@@ -733,8 +818,8 @@ export default {
         dy: 0,
       });
 
-      updateState(prev => {
-        const index = prev.annotations.findIndex(d => d.id === annotation.id);
+      updateState((prev) => {
+        const index = prev.annotations.findIndex((d) => d.id === annotation.id);
         if (index > -1) {
           const selectedItem = prev.annotations[index];
           const _nextItem = {
@@ -742,7 +827,7 @@ export default {
             data: {
               ...selectedItem.data,
               extent: {
-                // todo: 如果到达边界就不需要zoom
+                // 如果到达边界就不需要zoom
                 x0: selectedItem.data.extent.x0 + (drag.validDx || 0),
                 y0: selectedItem.data.extent.y0 + (drag.validDy || 0),
                 x1: selectedItem.data.extent.x1 + (drag.validDx || 0),
@@ -757,10 +842,11 @@ export default {
             annotations: nextAnnotations,
           };
         }
+        return prev;
       });
 
       // 更新 brush 位置
-      updateBrush(prevBrush => {
+      updateBrush((prevBrush) => {
         return {
           ...prevBrush,
           isBrushing: false,
@@ -778,11 +864,40 @@ export default {
       });
     };
 
+    const handleShapesChange = ({ type, state: shapeState, options = {} }) => {
+      const { shape, event } = options;
+      switch (type) {
+        case 'DRAW_END': {
+          // 更新当前选中的 shape
+          event &&
+            showTooltip(shape, event, {
+              el: imgWrapperRef.value,
+            });
+          // 回调，进行标注格式组装
+          drawShapeEnd(shape);
+          break;
+        }
+        default: {
+          const { transformer } = segmentationRef.value;
+          // 更新transformer
+          setTransformer(transformer);
+          updateState({
+            shapes: shapeState.shapes,
+          });
+        }
+      }
+    };
+
     onMounted(() => {
       addEventListener(document.body, 'click', (e) => {
         // 如果不在画布内，直接清空
         // 过滤右侧设置标注 table
-        if (!e.target.closest('.annotation-table') && !e.target.closest('#stage')) {
+        const { target } = e;
+        if (
+          !target.closest('.annotation-table') &&
+          !target.closest('#stage') &&
+          !target.closest('.label-list')
+        ) {
           // 清空选中的注释
           updateState({
             currentAnnotationId: '',
@@ -802,6 +917,39 @@ export default {
       resizerRef.value = null;
     });
 
+    // 监听 currentImage 变化
+    watch(
+      () => props.currentImg,
+      (nextImg) => {
+        // 每次切换图片重置 zoom
+        resetZoom();
+        // 重置选中的标签和位置
+        Object.assign(api, {
+          label: {},
+          isCenter: false,
+          imgBounding: null,
+        });
+        if (nextImg?.url) {
+          setImg(nextImg.url);
+        }
+        // 首先清空标注信息
+        setApi({
+          [annotationType]: [],
+        });
+        // 清理选择（分割）
+        cancelSelection();
+      }
+    );
+
+    watch(
+      () => props.state,
+      (nextProps) => {
+        if (annotationType in nextProps) {
+          api[annotationType] = nextProps[annotationType] || [];
+        }
+      }
+    );
+
     return {
       listeners,
       imgWrapperRef,
@@ -840,6 +988,8 @@ export default {
       handleBrushEnd,
       // 标注偏移
       offset,
+      // 针对锚点偏移
+      offsetBbox,
       transformer,
       setTransformer,
       onBrushHandleChange,
@@ -848,92 +998,94 @@ export default {
       transformZoom,
       getZoom,
       setCurAnnotation,
+      segmentationRef,
+      handleShapesChange,
+      annotations,
     };
   },
 };
 </script>
-<style lang='scss'>
-  @import "~@/assets/styles/variables.scss";
-
-  #stage {
-    max-height: 100%;
-  }
-
-  .workspace-stage {
-    flex: 1;
-    overflow: hidden;
-
-    .imgWrapper {
-      &.imgScale {
-        margin: 0 auto;
-
-        img {
-          display: inline-block;
-          width: 100%;
-          height: 100%;
-          user-select: none;
-        }
+<style lang="scss">
+@import '~@/assets/styles/variables.scss';
+
+#stage {
+  max-height: 100%;
+}
+
+.workspace-stage {
+  flex: 1;
+  overflow: hidden;
+
+  .imgWrapper {
+    &.imgScale {
+      margin: 0 auto;
+
+      img {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        user-select: none;
       }
     }
+  }
 
-    .canvas {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: calc(100vh - 50px - 48px);
-    }
+  .canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100vh - 50px - 48px);
+  }
 
-    .annotation-score-group {
-      pointer-events: none;
+  .annotation-score-group {
+    pointer-events: none;
 
-      .annotation-score-row {
-        position: absolute;
-        color: #fff;
+    .annotation-score-row {
+      position: absolute;
+      color: #fff;
 
-        .score {
-          display: inline-block;
-          min-width: 48px;
-          font-size: 16px;
-          line-height: 24px;
-          user-select: none;
+      .score {
+        display: inline-block;
+        min-width: 48px;
+        font-size: 16px;
+        line-height: 24px;
+        user-select: none;
 
-          .unit {
-            margin-left: 2px;
-            font-size: 0.8em;
-          }
+        .unit {
+          margin-left: 2px;
+          font-size: 0.8em;
         }
       }
     }
+  }
 
-    .annotation-tag-group {
-      pointer-events: none;
-
-      .annotation-label {
-        position: absolute;
-        color: #fff;
-      }
-    }
+  .annotation-tag-group {
+    pointer-events: none;
 
-    .bbox-group {
-      cursor: pointer;
-    }
-
-    .brush-tooltip {
+    .annotation-label {
       position: absolute;
-      padding: 7px 12px;
-      font-size: 12px;
-      line-height: 1em;
       color: #fff;
-      pointer-events: none;
-      background-color: $dark;
-      border-radius: 4px;
-
-      .tooltip-item-row {
-        display: flex;
-        white-space: nowrap;
-      }
     }
   }
 
+  .bbox-group {
+    cursor: pointer;
+  }
+
+  .brush-tooltip {
+    position: absolute;
+    padding: 7px 12px;
+    font-size: 12px;
+    line-height: 1em;
+    color: #fff;
+    pointer-events: none;
+    background-color: $dark;
+    border-radius: 4px;
+
+    .tooltip-item-row {
+      display: flex;
+      white-space: nowrap;
+    }
+  }
+}
 </style>
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/score.js b/webapp/src/views/dataset/annotate/workSpaceContainer/score.js
index 4bbb4b1..3ede457 100644
--- a/webapp/src/views/dataset/annotate/workSpaceContainer/score.js
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/score.js
@@ -1,23 +1,23 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { isNil } from 'lodash';
 import { addSuffix, colorByLuminance, chroma } from '@/utils';
 
-import { defaultColor } from './bbox';
+import { defaultColor } from '@/views/dataset/util';
 
 // 分数最小宽度
 const MinWidth = 48;
@@ -34,18 +34,13 @@ export default {
   },
   render(h, context) {
     const { props } = context;
-    const {
-      annotate = {},
-      offset,
-      transformer,
-      brush,
-    } = props;
+    const { annotate = {}, offset, transformer, brush } = props;
 
     const { data = {}, id } = annotate;
     const { bbox, color = defaultColor, score = 1 } = data;
 
     // 当前在拖拽中不展示
-    if(props.currentAnnotationId === id && brush.isBrushing) return null;
+    if (props.currentAnnotationId === id && brush.isBrushing) return null;
 
     if (isNil(bbox)) return null;
     const pos = offset(props.annotate);
@@ -58,7 +53,7 @@ export default {
     };
 
     // 匹配当前标注
-    if(annotate.id === transformer.id) {
+    if (annotate.id === transformer.id) {
       style.transform = `translate(${transformer.dx}px, ${transformer.dy}px)`;
     }
 
@@ -68,8 +63,11 @@ export default {
     };
 
     return (
-      <div class='annotation-score-row tc' style={style}>
-        <span class='score' style={boxStyle}>{Math.floor(score * 100)}<span class='unit'>分</span></span>
+      <div class="annotation-score-row tc" style={style}>
+        <span class="score" style={boxStyle}>
+          {Math.floor(score * 100)}
+          <span class="unit">分</span>
+        </span>
       </div>
     );
   },
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/index.vue b/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/index.vue
new file mode 100644
index 0000000..0e905d9
--- /dev/null
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/index.vue
@@ -0,0 +1,489 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <g class="segmentation">
+    <!-- 绘制 -->
+    <Selection
+      :stageWidth="stageWidth"
+      :stageHeight="stageHeight"
+      :state="state"
+      :draw="draw"
+      :handlePointClick="handlePointClick"
+      :handleChange="handleChange"
+      :transformZoom="transformZoom"
+    />
+    <PolygonRender
+      v-for="shape in state.shapes"
+      :key="shape.id"
+      :shape="shape"
+      :stageWidth="stageWidth"
+      :stageHeight="stageHeight"
+      :draw="draw"
+      :transformer="transformer"
+      :guides="state.guides"
+      :scale="scale"
+      :getZoom="getZoom"
+      :bounds="bounds"
+      :offset="offset"
+      :handleChange="handleChange"
+      :currentAnnotationId="currentAnnotationId"
+      :onDragStart="onDragStart"
+      :onDragMove="onDragMove"
+      :onDragEnd="onDragEnd"
+      :setTransformer="setTransformer"
+    />
+  </g>
+</template>
+<script>
+import { reactive, watch } from '@vue/composition-api';
+import update from 'immutability-helper';
+import { last, isFunction, isEmpty } from 'lodash';
+import { raise, replace, getPolygonExtent } from '@/utils';
+import { useDraw } from '@/hooks';
+
+import Selection from './selection';
+import PolygonRender from './polygon';
+
+export default {
+  name: 'Segmentation',
+  components: {
+    Selection,
+    PolygonRender,
+  },
+  props: {
+    stageWidth: Number,
+    stageHeight: Number,
+    className: String,
+    shapes: Array,
+    updateState: Function,
+    setCurAnnotation: Function,
+    currentAnnotationId: String,
+    transformZoom: Function,
+    getZoom: Function,
+    scale: Number,
+    bounds: Object,
+    offset: Function,
+  },
+  setup(props, ctx) {
+    const { updateState, setCurAnnotation, getZoom } = props;
+    const state = reactive({
+      // 已经完成的形状
+      shapes: props.shapes || [],
+      // 当前正在绘制的形状
+      unfinishedShape: {},
+      // 引导线
+      guides: [],
+      // 当前操作
+      status: '',
+    });
+
+    // 标注拖拽偏移
+    const transformer = reactive({
+      id: undefined,
+      dx: 0,
+      dy: 0,
+      x: undefined,
+      y: undefined,
+    });
+
+    // 上传标注校验格式校验
+    const validate = () => {
+      if (!isEmpty(state.unfinishedShape)) {
+        return false;
+      }
+      return true;
+    };
+
+    const { draw, onDrawStart, onDrawMove, onDrawEnd } = useDraw();
+
+    const setState = (key, params, callback) => {
+      // 区分函数式更新和对象更新
+      if (typeof params === 'function') {
+        const next = params(state);
+        Object.assign(state, { [key]: next });
+        if (isFunction(callback)) {
+          callback(state);
+        }
+        return;
+      }
+      // 普通更新
+      Object.assign(state, { [key]: params });
+      if (isFunction(callback)) {
+        callback(state);
+      }
+    };
+
+    // 更新标注偏移
+    const setTransformer = (params) => {
+      Object.assign(transformer, params);
+    };
+
+    const reset = () => {
+      Object.assign(state, {
+        guides: [],
+        unfinishedShape: {},
+        status: '',
+      });
+      // 触发绘制结束
+      !!draw.isDrawing && onDrawEnd();
+    };
+
+    const fireChange = (params) => {
+      ctx.emit('change', params);
+    };
+
+    const syncShapes = (type, options = {}) => (nextState) => {
+      // 数据同步
+      // state: 数据
+      // options: event 等事件参数
+      fireChange({ type, state: nextState, options });
+    };
+
+    // 根据缩放比例生成相对偏移
+    const getValidDrag = (drag, shape, options = { bounds: true }) => {
+      // 兼容图片缩放比例
+      const scale = options.scale || props.scale;
+      const { zoom } = getZoom();
+      const _scale = zoom * scale;
+
+      const { x0, x1, y0, y1 } = getPolygonExtent(shape);
+      if (!options.bounds) {
+        return {
+          ...drag,
+          validDx: drag.dx / _scale,
+          validDy: drag.dy / _scale,
+        };
+      }
+      const validDx =
+        drag.dx > 0
+          ? Math.min(drag.dx / _scale, props.bounds.width - x1)
+          : Math.max(drag.dx / _scale, -x0);
+
+      const validDy =
+        drag.dy > 0
+          ? Math.min(drag.dy / _scale, props.bounds.height - y1)
+          : Math.max(drag.dy / _scale, -y0);
+      return {
+        ...drag,
+        validDx,
+        validDy,
+      };
+    };
+
+    // 重置标注选中
+    const setCurrentAnnotation = (annotationId) => {
+      updateState({
+        currentAnnotationId: annotationId || '',
+      });
+    };
+
+    // 每次拖拽的优先级提升
+    const onDragStart = (draw, shape) => {
+      const index = state.shapes.findIndex((d) => d.id === shape.id);
+      if (index > -1) {
+        const raised = raise(state.shapes, index);
+        Object.assign(state, {
+          shapes: raised,
+        });
+      }
+      setState('status', 'EDITING');
+      // 同步当前标注
+      setCurAnnotation(shape);
+      fireChange({ type: 'DRAG_START', state });
+    };
+
+    // 根据 drag 自主生成 transformer
+    const onDragMove = ({ drag }, shape) => {
+      const { validDx, validDy } = getValidDrag(drag, shape.data.points, { scale: 1 });
+      setTransformer({
+        isDragging: true,
+        id: shape.id,
+        x: drag.x,
+        y: drag.y,
+        dx: validDx,
+        dy: validDy,
+      });
+      fireChange({ type: 'DRAG_MOVE', state });
+    };
+
+    const onDragEnd = ({ drag }, shape) => {
+      updateState(
+        (prev) => {
+          const index = prev.shapes.findIndex((d) => d.id === shape.id);
+          if (index > -1) {
+            const selectedItem = prev.shapes[index];
+            const _nextItem = {
+              ...selectedItem,
+              data: {
+                ...selectedItem.data,
+                points: selectedItem.data.points.map((point) => ({
+                  x: point.x + drag.validDx,
+                  y: point.y + drag.validDy,
+                })),
+              },
+            };
+
+            const next = replace(prev.shapes, index, _nextItem);
+            return {
+              ...prev,
+              shapes: next,
+            };
+          }
+          return prev;
+        },
+        (nextState) => fireChange({ type: 'DRAG_END', state: nextState })
+      );
+    };
+
+    // 绘制点
+    const drawPoint = (point, callback) => {
+      const { points = [] } = state.unfinishedShape;
+      const nextPoints = update(points, { $push: [point] });
+
+      setState(
+        'unfinishedShape',
+        (state) =>
+          update(state.unfinishedShape, {
+            points: {
+              $set: nextPoints,
+            },
+          }),
+        callback
+      );
+    };
+
+    // 根据异步结果更新状态
+    const handleChange = (eventType, params = {}) => {
+      switch (eventType) {
+        // 绘制点
+        case 'DRAW_START': {
+          const { point } = params;
+          onDrawStart(point);
+          // 绘图
+          setState('status', 'DRAWING');
+          drawPoint(point, () => setCurrentAnnotation());
+          break;
+        }
+        // 绘制节点
+        case 'DRAW_POINT': {
+          const { point } = params;
+          drawPoint(point);
+          break;
+        }
+        case 'DRAW_MOVE': {
+          const { point } = params;
+          const { points = [] } = state.unfinishedShape;
+          draw.start && onDrawMove(point);
+
+          // 绘制折线图才需要去触发 guideline
+          if (points.length) {
+            const nextGuides = [last(points), point];
+            setState('guides', nextGuides);
+          }
+
+          break;
+        }
+        // 绘制线借结束
+        case 'DRAW_END': {
+          const { unfinishedShape } = state;
+          // 绘制结束
+          onDrawEnd();
+          // 根据最后一条shape 记录决定更新类型
+          const lastShape = last(state.shapes);
+          // 如果不存在数据，直接写入，否则 push
+          const ACTION = !lastShape?.id ? '$set' : '$push';
+          // 完成状态
+          setState('status', 'FINISHED');
+          setState(
+            'shapes',
+            (state) =>
+              update(state.shapes, {
+                [ACTION]: [{ points: unfinishedShape.points }],
+              }),
+            syncShapes('DRAW_END', params)
+          );
+
+          reset();
+          break;
+        }
+        // 新增节点
+        case 'ADD_POINT': {
+          const { index, point, shape } = params;
+          setState(
+            'shapes',
+            (state) => {
+              // 当前 shape 索引
+              const shapeIndex = state.shapes.findIndex((d) => d.id === shape.id);
+              const updateShape = update(state.shapes[shapeIndex], {
+                data: {
+                  points: {
+                    $splice: [[index, 0, point]],
+                  },
+                },
+              });
+
+              return update(state.shapes, {
+                [shapeIndex]: {
+                  $set: updateShape,
+                },
+              });
+            },
+            syncShapes('ADD_POINT')
+          );
+          break;
+        }
+        // 移动节点
+        case 'MOVE_POINT': {
+          // shapes 没有更新
+          const guides = [];
+          if (params) {
+            const { drag, index, shape } = params;
+            const { length } = shape.data.points;
+
+            const { validDx, validDy } = getValidDrag(drag, shape.data.points, {
+              bounds: false,
+            });
+
+            const prevPoint = shape.data.points[index];
+            const point = {
+              x: prevPoint.x + validDx,
+              y: prevPoint.y + validDy,
+            };
+
+            guides.push(
+              [point, shape.data.points[(index + 1) % length]],
+              [point, shape.data.points[(index - 1 + length) % length]]
+            );
+          }
+          setState('guides', guides, syncShapes('MOVE_POINT'));
+          break;
+        }
+        // 更新节点位置
+        case 'UPDATE_POINT': {
+          const { index, shape } = params;
+
+          setState(
+            'shapes',
+            (state) => {
+              // 当前 shape 索引
+              // hack: 双击会触发更新节点
+              if (!state.guides.length) return state.shapes;
+              const shapeIndex = state.shapes.findIndex((d) => d.id === shape.id);
+              const updateShape = update(state.shapes[shapeIndex], {
+                data: {
+                  points: {
+                    $splice: [[index, 1, state.guides[0][0]]],
+                  },
+                },
+              });
+              return update(state.shapes, {
+                [shapeIndex]: {
+                  $set: updateShape,
+                },
+              });
+            },
+            syncShapes('UPDATE_POINT')
+          );
+          setState('guides', []);
+          break;
+        }
+        case 'REMOVE_POINT': {
+          const { index, shape } = params;
+          //  不足 4个点不做处理
+          if (shape.data.points.length <= 3) return;
+          setState(
+            'shapes',
+            (state) => {
+              // 当前 shape 索引
+              const shapeIndex = state.shapes.findIndex((d) => d.id === shape.id);
+              const updateShape = update(state.shapes[shapeIndex], {
+                data: {
+                  points: {
+                    $splice: [[index, 1]],
+                  },
+                },
+              });
+
+              return update(state.shapes, {
+                [shapeIndex]: {
+                  $set: updateShape,
+                },
+              });
+            },
+            syncShapes('REMOVE_POINT')
+          );
+          break;
+        }
+        default:
+          throw new Error('unknown eventType: ', eventType);
+      }
+    };
+
+    // 完成绘制
+    const finishDraw = (event) => {
+      if (state.unfinishedShape.points.length >= 3) {
+        const params = {
+          event,
+          shape: state.unfinishedShape,
+        };
+        handleChange('DRAW_END', params);
+      }
+    };
+
+    const handlePointClick = (index, shape, event) => {
+      event.stopPropagation();
+      if (index === 0) {
+        finishDraw(event);
+      }
+      return false;
+    };
+
+    watch(
+      () => props.shapes,
+      (next) => {
+        state.shapes = next;
+      }
+    );
+
+    return {
+      state,
+      transformer,
+      validate,
+      draw,
+      reset,
+      finishDraw,
+      handleChange,
+      handlePointClick,
+      setTransformer,
+      onDragStart,
+      onDragMove,
+      onDragEnd,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.segmentation {
+  ::v-deep .interactive {
+    cursor: pointer;
+  }
+
+  ::v-deep .add-point {
+    cursor: copy;
+  }
+}
+</style>
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/polygon.js b/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/polygon.js
new file mode 100644
index 0000000..18249bf
--- /dev/null
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/polygon.js
@@ -0,0 +1,321 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+import Vue from 'vue';
+import { curveLinearClosed } from 'd3';
+import { reactive } from '@vue/composition-api';
+
+import Drag from '@/components/Drag';
+import { calcDistance, midPoint, inBoundary, getPolygonExtent } from '@/utils';
+
+import PolylineRender from './polyline';
+import Vertice from './vertice';
+
+// 锚点最小距离
+export const MIN_POINT_DISTANCE = 20;
+
+export default {
+  name: 'PolygonRender',
+  components: {
+    PolylineRender,
+    Vertice,
+  },
+  props: {
+    guides: Array,
+    stageWidth: Number,
+    stageHeight: Number,
+    currentAnnotationId: String,
+    handleChange: Function,
+    draw: Object,
+    transformer: Object,
+    scale: Number, // 图片相对于原始大小的缩放比例
+    offset: Function,
+    getZoom: Function,
+    bounds: Object,
+    shape: Object,
+    onDragStart: Function,
+    onDragMove: Function,
+    onDragEnd: Function,
+    setTransformer: Function,
+  },
+  setup(props) {
+    const { onDragStart, onDragMove, onDragEnd, getZoom, setTransformer } = props;
+    const state = reactive({
+      drag: undefined,
+    });
+
+    const updateState = (updater, callback) => {
+      const newState = updater(state);
+      Vue.nextTick(() => {
+        Object.assign(state, newState);
+        if (typeof callback === 'function') {
+          callback(state);
+        }
+      });
+    };
+
+    const renderMidPoints = (points) => {
+      const midPoints = points
+        .map((pos, index) => [pos, points[(index + 1) % points.length], index])
+        .filter(([a, b]) => calcDistance(a, b) > MIN_POINT_DISTANCE * 2);
+
+      return midPoints;
+    };
+
+    const selectionDragStart = (drag) => {
+      const start = {
+        x: drag.x + drag.dx,
+        y: drag.y + drag.dy,
+      };
+      const end = { ...start };
+
+      const transformState = {
+        start,
+        end,
+      };
+
+      // 回调
+      if (typeof onDragStart === 'function') {
+        onDragStart(transformState, props.shape);
+      }
+    };
+
+    const selectionDragMove = (drag) => {
+      const { zoom } = getZoom();
+      updateState(
+        (prevState) => {
+          // 位置比较计算
+          const _scale = zoom * props.scale;
+
+          const { x0, x1, y0, y1 } = getPolygonExtent(props.shape.data.points);
+
+          const validDx =
+            drag.dx > 0
+              ? Math.min(drag.dx / _scale, props.bounds.width - x1)
+              : Math.max(drag.dx / _scale, -x0);
+
+          const validDy =
+            drag.dy > 0
+              ? Math.min(drag.dy / _scale, props.bounds.height - y1)
+              : Math.max(drag.dy / _scale, -y0);
+
+          return {
+            ...prevState,
+            drag: {
+              ...drag,
+              validDx,
+              validDy,
+            },
+          };
+        },
+        (nextState) => {
+          if (typeof onDragMove === 'function') {
+            onDragMove(nextState, props.shape);
+          }
+        }
+      );
+    };
+
+    const selectionDragEnd = (drag, event, options = {}) => {
+      const { prevState } = options;
+      setTransformer({
+        isDragging: false,
+        id: props.shape.id,
+        x: drag.x,
+        y: drag.y,
+        dx: 0,
+        dy: 0,
+      });
+      // fix 双击触发移动选框
+      if (!prevState.isMoving) return;
+      updateState(
+        (state) => ({
+          ...state,
+          drag: {
+            ...state.drag,
+            ...drag,
+          },
+        }),
+        (nextState) => {
+          // 拖拽结束以后重新生成路径
+          if (typeof onDragEnd === 'function') {
+            onDragEnd(nextState, props.shape);
+          }
+        }
+      );
+    };
+
+    return {
+      state,
+      updateState,
+      renderMidPoints,
+      selectionDragStart,
+      selectionDragMove,
+      selectionDragEnd,
+    };
+  },
+  render() {
+    const {
+      shape = {},
+      transformer = {},
+      renderMidPoints,
+      handleChange,
+      draw,
+      stageWidth,
+      stageHeight,
+      offset,
+    } = this;
+
+    let transform = null;
+    // 匹配当前标注
+    if (shape.id === transformer.id) {
+      transform = {
+        translate: `translate(${transformer.dx}, ${transformer.dy})`,
+        isDragging: transformer.isDragging,
+      };
+    }
+
+    const style = {
+      pointerEvents: draw.isDrawing || transform?.isDragging ? 'none' : 'all',
+    };
+
+    const dragProps = {
+      props: {
+        resetOnStart: true,
+        width: stageWidth,
+        height: stageHeight,
+        onDragStart: this.selectionDragStart,
+        onDragMove: this.selectionDragMove,
+        onDragEnd: this.selectionDragEnd,
+      },
+    };
+
+    const isActive = shape.id === this.currentAnnotationId;
+
+    return (
+      <Drag {...dragProps} key={shape.id}>
+        {(draw) => {
+          return (
+            <g>
+              {draw.state.isDragging && (
+                <rect
+                  width={stageWidth}
+                  height={stageHeight}
+                  fill="transparent"
+                  onMouseup={draw.dragEnd}
+                  onMousemove={draw.dragMove}
+                  onMouseleave={(event) => {
+                    // 超出边界判断
+                    if (!inBoundary(event, event.target)) {
+                      draw.dragEnd();
+                    }
+                  }}
+                  style={{
+                    cursor: 'move',
+                  }}
+                />
+              )}
+              {// 针对拖拽节点状态
+              isActive &&
+                this.guides.map((guide, index) => {
+                  return (
+                    <PolylineRender
+                      key={index}
+                      points={guide}
+                      offset={offset}
+                      fill={shape.data.color}
+                      stroke-opacity={0.7}
+                      stroke-dasharray="5"
+                    />
+                  );
+                })}
+              <g transform={transform?.translate} style={style}>
+                <PolylineRender
+                  key={shape.id}
+                  points={shape.data.points}
+                  fill={shape.data.color}
+                  stroke-dasharray={isActive ? '10' : undefined}
+                  fill-opacity={isActive ? 0.4 : 0.1}
+                  curve={curveLinearClosed}
+                  offset={offset}
+                  onMousedown={draw.dragStart}
+                  onMousemove={draw.dragMove}
+                  onMouseup={draw.dragEnd}
+                />
+                {isActive && [
+                  shape.data.points.map((point, index) => {
+                    // 已有节点
+                    const pointProps = {
+                      props: {
+                        handlePointClick: () =>
+                          handleChange('REMOVE_POINT', {
+                            index,
+                            shape,
+                          }),
+                        fill: shape.data.color,
+                      },
+                    };
+                    return (
+                      <Vertice
+                        key={index}
+                        index={index}
+                        position={point}
+                        shape={shape}
+                        offset={offset}
+                        draggable={true}
+                        stageWidth={stageWidth}
+                        stageHeight={stageHeight}
+                        handleChange={handleChange}
+                        {...pointProps}
+                      />
+                    );
+                  }),
+                  renderMidPoints(shape.data.points).map(([a, b, index]) => {
+                    // 新增节点
+                    const addPointProps = {
+                      props: {
+                        handlePointClick: () =>
+                          handleChange('ADD_POINT', {
+                            point: midPoint(a, b),
+                            index: index + 1,
+                            shape,
+                          }),
+                      },
+                    };
+                    return (
+                      <Vertice
+                        key={`${index}-mid`}
+                        index={index}
+                        position={midPoint(a, b)}
+                        shape={shape}
+                        offset={offset}
+                        innerRadius={3}
+                        outerRadius={8}
+                        fill="#fff"
+                        fillOpacity={0.6}
+                        className="add-point"
+                        {...addPointProps}
+                      />
+                    );
+                  }),
+                ]}
+              </g>
+            </g>
+          );
+        }}
+      </Drag>
+    );
+  },
+};
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/polyline.js b/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/polyline.js
new file mode 100644
index 0000000..5135ef0
--- /dev/null
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/polyline.js
@@ -0,0 +1,66 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+import { isNil, isFunction } from 'lodash';
+import { line as d3Line } from 'd3';
+
+import { defaultColor } from '@/views/dataset/util';
+
+export default {
+  name: 'PolylineRender',
+  functional: true,
+  props: {
+    points: Array,
+    curve: Function,
+    fill: String,
+    offset: Function,
+  },
+  render(h, context) {
+    const { props } = context;
+    const { fill, points = [], offset } = props;
+
+    if (isNil(points)) return null;
+
+    const { style } = context.data;
+    const line = d3Line()
+      .x((d) => d.x)
+      .y((d) => d.y);
+
+    if (props.curve) {
+      line.curve(props.curve);
+    }
+
+    const bgColor = fill || defaultColor;
+
+    const restProps = {
+      attrs: context.data.attrs,
+      on: context.data.on,
+    };
+
+    const nextData = isFunction(offset) ? points.map(offset) : points;
+
+    return (
+      <path
+        class="interactive"
+        d={line(nextData)}
+        stroke={bgColor}
+        fill={bgColor}
+        stroke-width={2}
+        {...restProps}
+        style={style}
+      />
+    );
+  },
+};
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/selection.js b/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/selection.js
new file mode 100644
index 0000000..cb3a69b
--- /dev/null
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/selection.js
@@ -0,0 +1,166 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { reactive, watch } from '@vue/composition-api';
+import cx from 'classnames';
+import { isEmpty } from 'lodash';
+
+import { calcDistance } from '@/utils';
+import Drag from '@/components/Drag';
+import Vertice from './vertice';
+import PolylineRender from './polyline';
+import { MIN_POINT_DISTANCE } from './polygon';
+
+export default {
+  name: 'SegmentationSelection',
+  components: {
+    Vertice,
+    PolylineRender,
+  },
+  props: {
+    stageWidth: Number,
+    stageHeight: Number,
+    className: String,
+    state: {
+      type: Object,
+      default: () => ({}),
+    },
+    draw: Object,
+    handlePointClick: Function,
+    handleChange: Function,
+    transformZoom: Function,
+  },
+
+  setup(props) {
+    const { handleChange, transformZoom } = props;
+
+    const drag = reactive({
+      lastPoint: null,
+    });
+
+    const resetDrag = () => {
+      Object.assign(drag, {
+        lastPoint: null,
+      });
+    };
+
+    const handleDragStart = (draw) => {
+      const point = transformZoom({ x: draw.x, y: draw.y });
+      Object.assign(drag, {
+        lastPoint: point,
+      });
+      handleChange('DRAW_START', { point });
+    };
+
+    const handleDragMove = (draw, event) => {
+      const point = transformZoom({
+        x: draw.x + draw.dx,
+        y: draw.y + draw.dy,
+      });
+      handleChange('DRAW_MOVE', { point });
+      if (event.shiftKey && drag.lastPoint) {
+        if (calcDistance(point, drag.lastPoint) > MIN_POINT_DISTANCE) {
+          handleChange('DRAW_POINT', { point });
+          Object.assign(drag, {
+            lastPoint: point,
+          });
+        }
+      }
+    };
+
+    const handleDragEnd = () => {
+      resetDrag();
+    };
+
+    const getFill = (point, index) => (index === 0 ? '#fff' : undefined);
+
+    watch(
+      () => props.state.status,
+      (next) => {
+        if (next === 'FINISHED' || next === '') {
+          resetDrag();
+        }
+      }
+    );
+
+    return {
+      drag,
+      getFill,
+      handleDragStart,
+      handleDragMove,
+      handleDragEnd,
+    };
+  },
+
+  render() {
+    const { stageWidth, stageHeight, className, handlePointClick, draw, getFill } = this;
+    const { unfinishedShape = {}, guides } = this.state;
+    const { points = [] } = unfinishedShape;
+
+    const style = {
+      pointerEvents: draw.isDrawing ? 'none' : 'all',
+    };
+
+    const dragProps = {
+      props: {
+        width: stageWidth,
+        height: stageHeight,
+        resetOnStart: true,
+        onDragStart: this.handleDragStart,
+        onDragMove: this.handleDragMove,
+        onDragEnd: this.handleDragEnd,
+      },
+    };
+
+    return (
+      <g className={cx('db-brush', className)}>
+        {/* overlay */}
+        <Drag {...dragProps}>
+          {(drag) => (
+            <rect
+              className="selection-overlay"
+              fill="transparent"
+              x={0}
+              y={0}
+              width={stageWidth}
+              height={stageHeight}
+              style={{ cursor: 'crosshair' }}
+              onMousedown={drag.dragStart}
+              onMousemove={drag.dragMove}
+              onMouseup={drag.dragEnd}
+            />
+          )}
+        </Drag>
+        {!isEmpty(points) && (
+          <g>
+            <PolylineRender points={guides} fill-opacity="1" stroke-dasharray="5" style={style} />
+            <PolylineRender points={points} fill-opacity="0.2" style={style} />
+            {points.map((point, index) => (
+              <Vertice
+                key={index}
+                index={index}
+                position={point}
+                shape={unfinishedShape}
+                handlePointClick={handlePointClick}
+                fill={getFill(point, index)}
+              />
+            ))}
+          </g>
+        )}
+      </g>
+    );
+  },
+};
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/vertice.js b/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/vertice.js
new file mode 100644
index 0000000..23568c5
--- /dev/null
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/segmentation/vertice.js
@@ -0,0 +1,150 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import cx from 'classnames';
+import { isFunction } from 'lodash';
+import { noop } from '@/utils';
+import Drag from '@/components/Drag';
+import { defaultColor } from '@/views/dataset/util';
+
+export default {
+  name: 'Vertice',
+  components: {
+    Drag,
+  },
+  props: {
+    shape: Object,
+    index: Number,
+    position: Object,
+    className: String,
+    handlePointClick: {
+      type: Function,
+      default: noop,
+    },
+    handleChange: Function,
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
+    outerRadius: {
+      type: Number,
+      default: 10,
+    },
+    innerRadius: {
+      type: Number,
+      default: 4,
+    },
+    fill: {
+      type: String,
+      default: defaultColor,
+    },
+    fillOpacity: {
+      type: Number,
+      default: 1,
+    },
+    stageHeight: Number,
+    stageWidth: Number,
+    offset: Function,
+  },
+  setup(props) {
+    const { handleChange } = props;
+    const dragEnd = (drag, event, options = {}) => {
+      const { prevState } = options;
+      // fix 双击触发移动选框
+      if (!prevState.isMoving || (prevState.dx === 0 && prevState.dy === 0)) return;
+      handleChange('UPDATE_POINT', {
+        drag,
+        index: props.index,
+        shape: props.shape,
+      });
+    };
+
+    const dragMove = (drag) => {
+      handleChange('MOVE_POINT', {
+        drag,
+        index: props.index,
+        shape: props.shape,
+      });
+    };
+    return {
+      dragEnd,
+      dragMove,
+    };
+  },
+  render() {
+    const {
+      stageWidth,
+      stageHeight,
+      className,
+      draggable,
+      position = {},
+      outerRadius,
+      innerRadius,
+      fill,
+      fillOpacity,
+      handlePointClick,
+      offset,
+    } = this;
+
+    const handleClick = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      handlePointClick(this.index, this.shape, event);
+    };
+
+    const dragProps = {
+      props: {
+        onDragMove: this.dragMove,
+        onDragEnd: this.dragEnd,
+        resetOnStart: true,
+        width: stageWidth,
+        height: stageHeight,
+      },
+    };
+
+    const pos = isFunction(offset) ? offset(position) : position;
+
+    return (
+      <g class={cx(`vertice-group cp`, className)}>
+        <circle
+          r={innerRadius}
+          cx={pos.x}
+          cy={pos.y}
+          fill-rule="evenodd"
+          fill-opacity={fillOpacity}
+          fill={fill}
+        ></circle>
+        <Drag {...dragProps}>
+          {(drag) => {
+            return (
+              <circle
+                r={outerRadius}
+                cx={pos.x}
+                cy={pos.y}
+                fill-opacity={0}
+                opacity={0}
+                onClick={handleClick}
+                onMousedown={draggable ? drag.dragStart : noop}
+                onMousemove={draggable ? drag.dragMove : noop}
+                onMouseup={draggable ? drag.dragEnd : noop}
+              ></circle>
+            );
+          }}
+        </Drag>
+      </g>
+    );
+  },
+};
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/tag.js b/webapp/src/views/dataset/annotate/workSpaceContainer/tag.js
index 3af686a..2db22ec 100644
--- a/webapp/src/views/dataset/annotate/workSpaceContainer/tag.js
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/tag.js
@@ -1,23 +1,23 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { isNil } from 'lodash';
 import { addSuffix, chroma, colorByLuminance } from '@/utils';
 
-import { defaultColor } from './bbox';
+import { defaultColor } from '@/views/dataset/util';
 
 export default {
   name: 'Tag',
@@ -27,49 +27,48 @@ export default {
     offset: Function,
     transformer: Object,
     getLabelName: Function,
-    brush: Object,
+    isMoving: {
+      type: Boolean,
+      default: false,
+    },
     currentAnnotationId: String,
+    annotationType: String,
   },
   render(h, context) {
     const { props } = context;
-    const {
-      annotate = {},
-      getLabelName,
-      offset,
-      transformer,
-      brush,
-    } = props;
+    const { annotate = {}, getLabelName, offset, transformer, annotationType } = props;
 
     const { data = {}, id } = annotate;
-    const { bbox, color = defaultColor } = data;
-
+    // 区分分割和检测
+    const shape = annotationType === 'shapes' ? data.points : data.bbox;
+    const { color = defaultColor } = data;
     // 当前在拖拽中不展示
-    if(props.currentAnnotationId === id && brush.isBrushing) return null;
-
-    if (isNil(bbox)) return null;
+    if (props.currentAnnotationId === id && props.isMoving) return null;
+    if (isNil(shape)) return null;
     // 是否为草稿模式
-
     const pos = offset(props.annotate);
-
     const style = {
-      width: addSuffix(pos.width),
       left: addSuffix(pos.x),
       top: addSuffix(pos.y),
       color: colorByLuminance(color),
     };
 
     // 匹配当前标注
-    if(annotate.id === transformer.id) {
+    if (annotate.id === transformer.id) {
       style.transform = `translate(${transformer.dx}px, ${transformer.dy}px)`;
     }
 
-    const tagColor = chroma(color).alpha(0.8).toString();
+    const tagColor = chroma(color)
+      .alpha(0.8)
+      .toString();
     const tagName = getLabelName(data.categoryId);
 
     if (!tagName) return null;
     return (
-      <div class='annotation-label image-tag' style={style}>
-        <el-tag color={tagColor} disable-transitions style={{ color: 'inherit', border: 'none' }}>{tagName}</el-tag>
+      <div class="annotation-label image-tag usn" style={style}>
+        <el-tag color={tagColor} disable-transitions style={{ color: 'inherit', border: 'none' }}>
+          {tagName}
+        </el-tag>
       </div>
     );
   },
diff --git a/webapp/src/views/dataset/annotate/workSpaceContainer/toolbar.vue b/webapp/src/views/dataset/annotate/workSpaceContainer/toolbar.vue
index 45a6daf..c2c4339 100644
--- a/webapp/src/views/dataset/annotate/workSpaceContainer/toolbar.vue
+++ b/webapp/src/views/dataset/annotate/workSpaceContainer/toolbar.vue
@@ -1,27 +1,31 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="workspace-toolbar flex flex-between">
     <div class="toolbar-left">
-      <el-tooltip content="开始标注" placement="top" :open-delay="400">
+      <el-tooltip
+        :content="isSegmentation ? '自定义绘制' : '绘制选框'"
+        placement="top"
+        :open-delay="400"
+      >
         <IconFont
           v-click-outside="onClickOutside"
           :class="api.active === 'selection' ? 'active' : ''"
-          type="SELECTION"
+          :type="isSegmentation ? 'draw' : 'SELECTION'"
           @click="onSelection"
         />
       </el-tooltip>
@@ -67,12 +71,17 @@
                 <div>确认提交：Enter</div>
                 <div>手动标注: N</div>
                 <div>删除标注：Backspace</div>
+                <div v-if="isSegmentation">完成绘制：F</div>
+                <div v-if="isSegmentation">放弃绘制：ESC</div>
+                <div v-if="isSegmentation">连续绘制：SHIFT</div>
               </div>
             </div>
           </div>
-          <IconFont type="help" />
+          <div>
+            <IconFont type="help" />
+            <span>帮助</span>
+          </div>
         </el-tooltip>
-        <span>帮助</span>
       </div>
     </div>
   </div>
@@ -97,6 +106,7 @@ export default {
     clearSelection: Function,
     confirm: Function,
     setApi: Function,
+    isSegmentation: Boolean,
   },
   setup(props, ctx) {
     const { clearSelection, zoomIn, zoomOut, zoomReset, setApi } = props;
@@ -144,7 +154,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/assets/styles/variables.scss";
+@import '~@/assets/styles/variables.scss';
 
 .workspace-toolbar {
   position: relative;
diff --git a/webapp/src/views/dataset/audio/annotation/index.vue b/webapp/src/views/dataset/audio/annotation/index.vue
new file mode 100644
index 0000000..98e2f03
--- /dev/null
+++ b/webapp/src/views/dataset/audio/annotation/index.vue
@@ -0,0 +1,524 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="main-content">
+    <div v-loading="state.pageLoading" class="text-container">
+      <div class="navbar">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item replace :to="{ path: datasetUrl }">{{
+            state.datasetInfo.name || '-'
+          }}</el-breadcrumb-item>
+          <el-breadcrumb-item>标注详情</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="workstage flex">
+        <div v-hotkey.stop="keymap" class="main f1">
+          <WorkSpace
+            :component="state.component"
+            :loading="state.loading"
+            :activeTab="state.activeTab"
+            :countInfo="state.countInfo"
+            :changeActiveTab="changeActiveTab"
+            :url="state.url"
+            :annotation="state.annotation"
+            :availLabel="availLabel"
+            :labels="state.labels"
+            :closeLabel="closeLabel"
+            :pageInfo="state.pageInfo"
+            :toNext="toNext"
+            :toPrev="toPrev"
+            :deleteFile="deleteFile"
+            :saving="state.saving"
+            :fileId="state.fileId"
+            @confirm="confirm"
+          />
+        </div>
+        <div class="sidebar" style="width: 25%;">
+          <SideBar
+            :labels="state.labels"
+            :datasetInfo="state.datasetInfo"
+            :createLabel="createLabel"
+            :handleLabel="handleLabel"
+            :updateLabels="updateLabels"
+            :fileId="state.fileId"
+            :showLabel="showLabel"
+            :availLabel="availLabel"
+            @deleteLabel="deleteLabel"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Message } from 'element-ui';
+import { omit, isNil, debounce } from 'lodash';
+import { onMounted, reactive, watch, computed } from '@vue/composition-api';
+
+import {
+  detail,
+  queryLabels as queryLabelsApi,
+  createLabel as createLabelApi,
+  count,
+} from '@/api/preparation/dataset';
+import { deleteFile as deleteFileApi, save as saveApi } from '@/api/preparation/textData';
+import { getAudioDetail } from '@/api/preparation/datafile';
+import { fileCodeMap, dataTypeMap, annotationBy, annotationCodeMap } from '../../util';
+import WorkSpace from '../workspace';
+import SideBar from '../../nlp/annotation/sidebar';
+
+const annotationByCode = annotationBy('code');
+
+export default {
+  name: 'AudioAnnotation',
+  components: {
+    WorkSpace,
+    SideBar,
+  },
+  setup(props, ctx) {
+    const { $route, $router } = ctx.root;
+    const { params = {}, query = {} } = $route;
+    const state = reactive({
+      labels: [],
+      datasetInfo: {},
+      pageInfo: {
+        current: params.current || 1,
+        size: 1,
+      },
+      countInfo: {
+        finished: 0,
+        unfinished: 0,
+      },
+      loading: false, // 加载内容
+      saving: false, // 保存状态
+      detail: null, // 标注详情
+      timestamp: Date.now(),
+      url: '',
+      annotation: null, // 标注内容
+      fileId: null,
+      labelSelected: null,
+      cacheLabel: null, // 缓存未标注标签
+      activeTab: 'unfinished',
+      pageLoading: false, // 初始化页面加载
+      component: null, // 对应的标注详情组件
+    });
+
+    // 包括已缓存的标签
+    const availLabel = computed(() => state.labelSelected || state.cacheLabel);
+
+    // 重置
+    const reset = () => {
+      Object.assign(state, {
+        detail: null,
+        labelSelected: null,
+        url: '',
+        annotation: null,
+        fileId: null,
+      });
+    };
+
+    // 查询标签
+    const queryLabels = async (requestParams = {}) => {
+      const labels = await queryLabelsApi(params.datasetId, requestParams);
+      return labels || [];
+    };
+
+    // 更新标签
+    const updateLabels = async () => {
+      const labels = await queryLabels();
+      Object.assign(state, {
+        labels,
+      });
+      if (!isNil(state.labelSelected)) {
+        const sLabel = state.labels.find((d) => d.id === state.labelSelected.id);
+        Object.assign(state, {
+          labelSelected: sLabel,
+        });
+      }
+    };
+
+    // 移除标签
+    const closeLabel = () => {
+      Object.assign(state, {
+        labelSelected: null,
+        cacheLabel: null,
+      });
+    };
+
+    // 新建标签
+    const createLabel = (labelParams = {}) => {
+      return createLabelApi(params.datasetId, labelParams).then(() => {
+        updateLabels();
+        Message.success('标签创建成功');
+      });
+    };
+
+    // 选中标签
+    const handleLabel = (label) => {
+      if (isNil(state.detail)) {
+        Message.warning('当前无文件选中');
+        return;
+      }
+      const next = {
+        labelSelected: label,
+      };
+      // 当前处于「无标注」，则记录标签，供后续使用
+      if (state.activeTab === 'unfinished') {
+        Object.assign(next, {
+          cacheLabel: label,
+        });
+      }
+      Object.assign(state, next);
+    };
+
+    const deleteLabel = (id) => {
+      if (id && state.cacheLabel && state.cacheLabel.id === id) {
+        Object.assign(state, {
+          cacheLabel: null,
+        });
+      }
+    };
+
+    // 根据当前文件状态获取 status 映射值
+    const getStatusMap = (tab) => {
+      const fileStatusKey = {
+        finished: 'FINISHED',
+        unfinished: 'UNFINISHED',
+      };
+
+      // 默认为 unfinished
+      const fileStatus = fileStatusKey[tab === 'finished' ? 'finished' : 'unfinished'];
+
+      return fileCodeMap[fileStatus];
+    };
+
+    // 获取文件工具方法
+    const queryFileUtil = (cfg) => {
+      const requestParams = omit(
+        {
+          ...state.pageInfo,
+          status: getStatusMap(state.activeTab),
+          ...cfg,
+        },
+        ['total']
+      );
+      return getAudioDetail({ datasetId: params.datasetId, ...requestParams });
+    };
+
+    const setLoadingStatus = (loading) => {
+      Object.assign(state, {
+        loading,
+      });
+    };
+
+    const setPageLoading = (loading) => {
+      Object.assign(state, {
+        pageLoading: loading,
+      });
+    };
+
+    const forceUpdate = () => {
+      Object.assign(state, {
+        timestamp: Date.now(),
+      });
+    };
+
+    // 更新文件信息，cfg 参数：
+    // status: 文件状态，current: 当前页，size: 每页数量
+    const queryFileInfo = async (cfg) => {
+      // 开始加载
+      setLoadingStatus(true);
+      const filesInfo = await queryFileUtil(cfg);
+
+      const detail = filesInfo.result[0] || {};
+      const sLabel = state.labels.find((d) => d.id === detail?.labelId) || null;
+      Object.assign(state, {
+        pageInfo: {
+          ...state.pageInfo,
+          total: filesInfo.page.total,
+        },
+        fileId: detail.id,
+        detail,
+        labelSelected: sLabel,
+        url: detail.url || '',
+        loading: false,
+      });
+      // 无文件
+      if (isNil(state.fileId)) {
+        Object.assign(state, {
+          cacheLabel: null,
+        });
+      }
+      try {
+        if (detail.annotation) {
+          Object.assign(state, {
+            annotation: JSON.parse(detail.annotation),
+          });
+        }
+      } catch (err) {
+        console.error(err);
+      }
+
+      return { pageInfo: filesInfo.page };
+    };
+
+    const setCountInfo = async () => {
+      const countInfo = await count(params.datasetId);
+      Object.assign(state, {
+        countInfo,
+      });
+    };
+
+    // 保存标注工具方法
+    // eslint-disable-next-line
+    const saveAnnotationUtil = annotation => {
+      try {
+        const annotationStr = isNil(annotation) ? null : JSON.stringify(annotation);
+        Object.assign(state, { saving: true });
+        return saveApi(params.datasetId, state.fileId, { annotation: annotationStr })
+          .then(setCountInfo)
+          .finally(() => {
+            Object.assign(state, { saving: false });
+          });
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    // 保存标注结果
+    const saveAction = (annotation) => {
+      return saveAnnotationUtil(annotation).then(() => Message.success('保存成功'));
+    };
+
+    // 下一页
+    const toNext = async () => {
+      if (state.pageInfo.current + 1 > state.pageInfo.total) return;
+      Object.assign(state, {
+        pageInfo: {
+          ...state.pageInfo,
+          current: state.pageInfo.current + 1,
+        },
+      });
+    };
+
+    // 上一页
+    const toPrev = async () => {
+      if (state.pageInfo.current < 2) return;
+      // 只有发生过变更的数据才需要保存
+      Object.assign(state, {
+        pageInfo: {
+          ...state.pageInfo,
+          current: state.pageInfo.current - 1,
+        },
+      });
+    };
+
+    // 是否为最后一首音频
+    const isLast = computed(
+      () => !(state.pageInfo.current < state.pageInfo.total) && state.pageInfo.total > 1
+    );
+
+    // 保存
+    const confirm = ({ annotation }) => {
+      // 先写入，再更新
+      return saveAction(annotation).then(() => {
+        // 最后一篇
+        isLast.value ? toPrev() : forceUpdate();
+      });
+    };
+
+    const delayToNext = debounce(toNext, 400);
+    const delayToPrev = debounce(toPrev, 400);
+
+    // 删除文本
+    const deleteFile = () => {
+      if (!state.fileId) return;
+      deleteFileApi(params.datasetId, state.fileId).then(() => {
+        // 切换到上一页
+        const { current } = state.pageInfo;
+        Object.assign(state, {
+          pageInfo: {
+            ...state.pageInfo,
+            current: Math.max(current - 1, 1),
+          },
+        });
+        // 当前第一页强制更新
+        if (current === 1) {
+          forceUpdate();
+        }
+        // 更新统计信息
+        setCountInfo();
+      });
+    };
+
+    // 切换 tab 需要更新分页信息
+    const changeActiveTab = (tab) => {
+      reset();
+      Object.assign(state, {
+        activeTab: tab.name,
+        pageInfo: {
+          ...state.pageInfo,
+          current: 1,
+        },
+      });
+      // 根据文件类型，切换到第一页
+      queryFileInfo({ status: getStatusMap(tab.name), current: 1 });
+    };
+
+    // 快捷键
+    const keymap = computed(() => ({
+      left: delayToPrev,
+      right: delayToNext,
+    }));
+
+    // 只有音频分类展示标签
+    const showLabel = computed(
+      () => state.datasetInfo.annotateType === annotationCodeMap.AUDIOCLASSIFY
+    );
+    const datasetUrl = `/data/datasets/audio/list/${params.datasetId}`;
+
+    // 监听页面变更
+    watch(
+      () => state.pageInfo.current,
+      (next) => {
+        reset();
+        queryFileInfo({ current: next });
+      }
+    );
+
+    // 强制更新
+    watch(
+      () => state.timestamp,
+      () => {
+        reset();
+        queryFileInfo({ current: state.pageInfo.current });
+      }
+    );
+
+    onMounted(async () => {
+      // 判断当前数据集不存在
+      let datasetInfo = {};
+      setPageLoading(true);
+      try {
+        // 获取数据集信息
+        datasetInfo = await detail(params.datasetId);
+      } catch (err) {
+        Object.assign(state, {
+          error: new Error('当前数据集不存在，请重新输入'),
+          pageLoading: false,
+        });
+        return;
+      }
+
+      if (![dataTypeMap.AUDIO].includes(datasetInfo.dataTypeMap)) {
+        $router.push({ path: '/data/datasets' });
+        throw new Error('不支持该标注类型');
+      }
+
+      // TODO: 获取标注详情对应组件
+      const component = annotationByCode(datasetInfo.annotateType, 'component');
+      Object.assign(state, { component });
+
+      const newState = {
+        datasetInfo,
+      };
+
+      if (query.tab === 'finished') {
+        newState.activeTab = 'finished';
+      }
+
+      // 获取数据集标签，分页结果
+      const [labels, countInfo] = await Promise.all([queryLabels(), count(params.datasetId)]);
+      newState.labels = labels;
+      newState.countInfo = countInfo;
+      Object.assign(state, newState);
+      setPageLoading(false);
+      // 文件级更新
+      queryFileInfo({ status: getStatusMap(query.tab) });
+    });
+
+    return {
+      state,
+      toNext: delayToNext,
+      toPrev: delayToPrev,
+      datasetUrl,
+      deleteFile,
+      closeLabel,
+      createLabel,
+      updateLabels,
+      handleLabel,
+      changeActiveTab,
+      confirm,
+      availLabel,
+      deleteLabel,
+      keymap,
+      isLast,
+      showLabel,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import '~@/assets/styles/variables.scss';
+
+.main-content {
+  min-height: calc(100vh - 50px);
+  padding-top: 20px;
+  background-color: #f4f6f7;
+}
+
+.text-container {
+  width: 1080px;
+  min-width: 60vw;
+  max-width: calc(100vw - 80px);
+  max-height: 100%;
+  padding: 20px 0 0;
+  margin: 0 auto;
+  background-color: #fff;
+
+  .navbar {
+    padding: 0 20px 12px;
+    border-bottom: 1px solid $borderColor;
+  }
+
+  .workstage {
+    .main {
+      padding: 10px 20px 40px;
+    }
+
+    .sidebar {
+      padding: 20px;
+      border-left: 1px solid $borderColor;
+    }
+  }
+}
+</style>
+<style lang="scss">
+@import '~@/assets/styles/variables.scss';
+
+.text-annotate {
+  font-size: 16px;
+}
+
+.range-selected {
+  padding: 0.35em;
+  margin: 0.25em 0.25em;
+  cursor: pointer;
+  border: 2px solid $borderColor;
+  border-radius: 2px;
+}
+</style>
diff --git a/webapp/src/views/dataset/audio/list/AudioCards.vue b/webapp/src/views/dataset/audio/list/AudioCards.vue
new file mode 100644
index 0000000..9843bd0
--- /dev/null
+++ b/webapp/src/views/dataset/audio/list/AudioCards.vue
@@ -0,0 +1,245 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div v-loading="loading" class="audio-cards">
+    <ul class="audio-cards__wrapper">
+      <li v-for="(item, index) in dataAudiosLocal" :key="item.id" class="audio-cards__item">
+        <div @mouseenter="onMouseEnter(item)" @mouseleave="onMouseLeave(item)">
+          <el-card class="audio-cards__card">
+            <WaveSurfer mini :height="70" :url="item.url" />
+            <!-- 去标注 -->
+            <div style="height: 25px;">
+              <el-button
+                v-show="showOption(item.id)"
+                class="audio-cards__button"
+                icon="el-icon-right"
+                circle
+                @click="goDetail(index)"
+              />
+            </div>
+            <el-tag
+              v-if="!isStatus(item, 'UNANNOTATED')"
+              :color="audioLabelTag[item.id]['color']"
+              class="audio-cards__tag"
+            >
+              {{ audioLabelTag[item.id]['text'] }}
+            </el-tag>
+            <!-- 已选标记 -->
+            <el-checkbox v-show="showOption(item.id)" :label="item.id" class="audio-checkbox"
+              >&nbsp;</el-checkbox
+            >
+            <div :title="item.name" class="auido-cards__row">
+              <div class="audio-cards__name">{{ item.name }}</div>
+            </div>
+          </el-card>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { computed, set, ref } from '@vue/composition-api';
+import { fileCodeMap, findKey, isStatus, annotationCodeMap } from '@/views/dataset/util';
+import WaveSurfer from '@/components/WaveSurfer';
+
+export default {
+  name: 'AudioCards',
+  components: { WaveSurfer },
+  props: {
+    // 数据源
+    dataAudios: {
+      type: Array,
+      default: () => [],
+    },
+    loading: Boolean,
+    categoryId2Name: {
+      type: Object,
+      default: () => {},
+    },
+    selectedId: {
+      type: Array,
+      default: () => [],
+    },
+    audioType: Number,
+  },
+  setup(props, ctx) {
+    const audioStatusMap = {
+      UNRECOGNIZED: { text: '未识别', color: '#FFFFFF' },
+      UNANNOTATED: { text: '未标注', color: '#FFFFFF' },
+      AUTO_ANNOTATED: { text: '自动', color: '#468CFF' },
+      MANUAL_ANNOTATED: { text: '人工', color: '#FF9943' },
+    };
+    const hover = ref(null);
+    const dataAudiosLocal = computed(() => props.dataAudios || []);
+    const audioLabelTag = computed(() => {
+      const labelTag = {};
+      try {
+        dataAudiosLocal.value.forEach((item) => {
+          const statusInfo = audioStatusMap[findKey(item.status, fileCodeMap)];
+          const annotation = JSON.parse(item.annotation);
+          let categoryName = {};
+          let tagColor = '#db2a2a';
+          if (statusInfo && Array.isArray(annotation) && annotation.length > 0) {
+            if (props.audioType === annotationCodeMap.AUDIOCLASSIFY) {
+              const categoryId = annotation[0].category_id;
+              categoryName = props.categoryId2Name[categoryId] || {};
+            } else if (props.audioType === annotationCodeMap.SPEECHRECOGNITION) {
+              categoryName.name = '语音识别完成';
+            }
+            tagColor = statusInfo.color;
+          }
+          const divider = categoryName.name && `| ${categoryName.name}`;
+          labelTag[item.id] = {
+            text: `${statusInfo.text} ${divider}`,
+            color: tagColor,
+          };
+        });
+      } catch (err) {
+        console.error(err);
+        throw err;
+      }
+      return labelTag;
+    });
+
+    const goDetail = (index) => {
+      ctx.emit('goDetail', index);
+    };
+
+    const onMouseEnter = (audioObj) => {
+      set(audioObj, 'isHover', true);
+      hover.value = audioObj;
+    };
+
+    const onMouseLeave = (audioObj) => {
+      if (audioObj.isHover) {
+        set(audioObj, 'isHover', false);
+        hover.value = null;
+      }
+    };
+
+    const isHover = (id) => {
+      return hover.value?.id === id;
+    };
+
+    const hasSelected = (id) => {
+      return props.selectedId.find((i) => id === i);
+    };
+
+    const showOption = (id) => {
+      return isHover(id) || hasSelected(id);
+    };
+
+    return {
+      dataAudiosLocal,
+      audioLabelTag,
+      goDetail,
+      onMouseEnter,
+      onMouseLeave,
+      isStatus,
+      showOption,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import '~@/assets/styles/mixin.scss';
+
+::v-deep.audio-cards__wrapper {
+  display: flex;
+  flex-flow: wrap;
+  padding: 0;
+  margin: 0;
+  overflow: auto;
+  list-style-position: outside;
+  list-style-type: none;
+  list-style-image: none;
+
+  .audio-cards__item {
+    width: calc((100% - 100px) / 5);
+    margin: 20px 10px 0 10px;
+
+    .audio-cards__card {
+      position: relative;
+
+      .audio-cards__button {
+        position: absolute;
+        right: 0;
+        padding: 0;
+        font-size: 20px;
+        color: #fff;
+        background: #1890ff;
+      }
+    }
+
+    .audio-cards__tag {
+      @include text-overflow;
+
+      position: absolute;
+      top: 0;
+      left: 0;
+      max-width: 150px;
+      height: unset;
+      color: #fff;
+      border-width: 0;
+      border-radius: 5px 0 5px 0;
+    }
+
+    .audio-checkbox {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin-right: 3px;
+
+      .el-checkbox__label {
+        display: none;
+      }
+    }
+
+    .auido-cards__row {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      padding-left: 4px;
+      color: #373c49;
+      background-color: #cfcdcd;
+      border-radius: 0 0 4px 4px;
+
+      .audio-cards__name {
+        @include text-overflow;
+
+        max-width: 90%;
+        font-size: 14px;
+        line-height: 2;
+        text-align: left;
+      }
+    }
+  }
+
+  .el-card__body {
+    padding: 20px 10px 28px;
+  }
+
+  @media only screen and (min-width: 1800px) {
+    .audio-cards__item {
+      width: calc((100% - 200px) / 5);
+      margin: 20px 20px 0 20px;
+    }
+  }
+}
+</style>
diff --git a/webapp/src/views/dataset/audio/list/index.vue b/webapp/src/views/dataset/audio/list/index.vue
new file mode 100644
index 0000000..b23ceff
--- /dev/null
+++ b/webapp/src/views/dataset/audio/list/index.vue
@@ -0,0 +1,583 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="wrapper">
+    <UploadForm
+      action="fakeApi"
+      title="导入音频"
+      accept=".mp3,.wav,.wma,.aac"
+      dataType="text"
+      :hash="true"
+      :visible="uploadDialogVisible"
+      :toggleVisible="handleClose"
+      :params="uploadParams"
+      @uploadSuccess="uploadSuccess"
+      @uploadError="uploadError"
+    />
+    <div class="flex">
+      <!-- 音频列表展示 -->
+      <div class="f1">
+        <div class="app-container">
+          <!-- tabs页和工具栏 -->
+          <div class="audio-classify-tab">
+            <el-tabs :value="lastTabName" @tab-click="handleTabClick">
+              <el-tab-pane :label="countInfoAudio.unfinished" name="unfinished" />
+              <el-tab-pane :label="countInfoAudio.finished" name="finished" />
+            </el-tabs>
+            <SearchBox
+              ref="searchBox"
+              :key="lastTabName"
+              :formItems="formItems"
+              :handleFilter="handleFilter"
+              :initialValue="initialValue"
+              :popperAttrs="popperAttrs"
+            >
+              <el-button slot="trigger" type="text" style="margin-bottom: 14px; margin-left: 30px;"
+                >筛选<i class="el-icon-arrow-down el-icon--right"
+              /></el-button>
+            </SearchBox>
+            <div class="audio-classify-button flex flex-between flex-vertical-align">
+              <div class="row-left f1"></div>
+              <div class="row-right">
+                <el-tooltip
+                  effect="dark"
+                  :content="isImporting ? '更新中' : '刷新'"
+                  placement="top"
+                  :open-delay="600"
+                >
+                  <el-button
+                    class="filter-item with-border"
+                    style="padding: 8px;"
+                    @click="onRefresh"
+                  >
+                    <i :class="refreshKlass"></i>
+                  </el-button>
+                </el-tooltip>
+                <el-button
+                  :disabled="disableImport"
+                  icon="el-icon-plus"
+                  @click="uploadDialogVisible = true"
+                >
+                  导入文件
+                </el-button>
+                <el-button icon="el-icon-right" class="ml-40" type="primary" @click="goDetail(-1)">
+                  去标注
+                </el-button>
+              </div>
+            </div>
+          </div>
+          <InfoAlert v-if="checkedId.length > 0">
+            <div class="flex flex-between">
+              <div>已选 {{ checkedId.length }} 项</div>
+              <div>
+                <el-checkbox
+                  v-model="checkAll"
+                  :indeterminate="isIndeterminate"
+                  @change="handleCheckAllChange"
+                >
+                  {{ checkAll ? '取消全选' : '选择全部' }}
+                </el-checkbox>
+                <el-button class="danger" type="text" :loading="delAllLoading" @click="doDelete">
+                  批量删除
+                </el-button>
+              </div>
+            </div>
+          </InfoAlert>
+          <Exception v-if="audioDataList.length === 0" />
+          <el-checkbox-group
+            v-else
+            v-model="checkedId"
+            style="margin-top: 20px;"
+            @change="handleCheckedIdChange"
+          >
+            <AudioCards
+              :loading="loading"
+              :data-audios="audioDataList"
+              :categoryId2Name="categoryId2Name"
+              :selectedId="checkedId"
+              :audio-type="audioType"
+              @goDetail="goDetail"
+            />
+          </el-checkbox-group>
+          <!-- 分页 -->
+          <el-pagination
+            layout="total, prev, pager, next, sizes"
+            :style="`text-align: center; margin-top: 30px;`"
+            :page-size="pagination.pageSize"
+            :page-sizes="[10, 20, 30]"
+            :total="pagination.total"
+            :current-page="pagination.current"
+            @size-change="onSizeChange"
+            @current-change="onPageChange"
+          />
+        </div>
+      </div>
+      <!-- Label列表 -->
+      <div class="label-list-container">
+        <div class="fixed-label-list">
+          <SideBar
+            :labels="labels"
+            :datasetInfo="datasetInfo"
+            :labelClickable="false"
+            :createLabel="createLabel"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Message, MessageBox } from 'element-ui';
+import { pick } from 'lodash';
+import { computed, reactive, toRefs, watch } from '@vue/composition-api';
+import cx from 'classnames';
+import { isStatus, fileCodeMap, getFileFromMinIO, annotationCodeMap } from '@/views/dataset/util';
+import { list as listRequest, submit, del } from '@/api/preparation/datafile';
+import {
+  detail,
+  count,
+  queryLabels as queryLabelsApi,
+  createLabel as createLabelApi,
+} from '@/api/preparation/dataset';
+import UploadForm from '@/components/UploadForm';
+import InfoAlert from '@/components/InfoAlert';
+import SearchBox from '@/components/SearchBox';
+import Exception from '@/components/Exception';
+import SideBar from '@/views/dataset/nlp/annotation/sidebar';
+import AudioCards from './AudioCards';
+
+export default {
+  name: 'Audio',
+  components: {
+    UploadForm,
+    SearchBox,
+    AudioCards,
+    InfoAlert,
+    SideBar,
+    Exception,
+  },
+  setup(props, { root }) {
+    const data = reactive({
+      uploadDialogVisible: false,
+      lastTabName: 'unfinished',
+      countInfo: {
+        unfinished: 0,
+        finished: 0,
+      },
+      statusMap: {
+        unfinished: [fileCodeMap.UNFINISHED],
+        finished: [fileCodeMap.FINISHED],
+      },
+      datasetId: parseInt(root.$route.params.datasetId, 10),
+      datasetInfo: {},
+      queryParams: {
+        datasetId: parseInt(root.$route.params.datasetId, 10),
+        status: fileCodeMap.UNFINISHED,
+      }, // 查询参数
+      audioStatusFilter: null,
+      audioDataList: [],
+      checkedId: [],
+      categoryId2Name: {},
+      labels: [], // 可使用的标签
+      isIndeterminate: false,
+      checkAll: false,
+      loading: false,
+      delAllLoading: false,
+      initialValue: {
+        annotateStatus: [''],
+        annotateType: [''],
+        labelId: [],
+      },
+      popperAttrs: {
+        placement: 'bottom',
+      },
+      formItemsUnfinish: [
+        {
+          label: '标注状态:',
+          prop: 'annotateStatus',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '未标注', value: 101 },
+            { label: '已标注', value: 302, disabled: true },
+          ],
+        },
+        {
+          label: '标注方式:',
+          prop: 'annotateType',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '手动标注', value: 104, disabled: true },
+            { label: '自动标注', value: 103, disabled: true },
+          ],
+        },
+      ],
+      formItemsFinish: [
+        {
+          label: '标注状态:',
+          prop: 'annotateStatus',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '未标注', value: 101, disabled: true },
+            { label: '已标注', value: 302 },
+          ],
+        },
+        {
+          label: '标注方式:',
+          prop: 'annotateType',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '手动标注', value: 104 },
+            { label: '自动标注', value: 103 },
+          ],
+        },
+        {
+          label: '标签:',
+          prop: 'labelId',
+          type: 'select',
+          attrs: {
+            multiple: true,
+            clearable: true,
+            filterable: true,
+          },
+          options: [],
+        },
+      ],
+    });
+    const pagination = reactive({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    });
+
+    // computed
+    const formItems = computed(() =>
+      data.lastTabName === 'unfinished' ? data.formItemsUnfinish : data.formItemsFinish
+    );
+    const uploadParams = computed(() => ({
+      datasetId: data.datasetId,
+      objectPath: `dataset/${data.datasetId}/origin`,
+    }));
+    const countInfoAudio = computed(() => {
+      return {
+        unfinished: `无标注信息（${data.countInfo.unfinished}）`,
+        finished: `有标注信息（${data.countInfo.finished}）`,
+      };
+    });
+    // 是否禁用文件导入
+    const disableImport = computed(() => {
+      if (data.lastTabName === 'finished') return true;
+      if (data.isTable && isStatus(data.datasetInfo, 'IMPORTING')) return true;
+      return false;
+    });
+    // 是否导入中
+    const isImporting = computed(() => {
+      return isStatus(data.datasetInfo, 'IMPORTING');
+    });
+    const refreshKlass = computed(() => {
+      return cx('el-icon-refresh', {
+        rotate: isImporting.value,
+      });
+    });
+    const selectedId = computed(() => {
+      const selectId = [];
+      data.audioDataList.forEach((item) => {
+        selectId.push(item.id);
+      });
+      return selectId;
+    });
+    const audioType = computed(
+      () => data.datasetInfo?.annotateType || annotationCodeMap.AUDIOCLASSIFY
+    );
+
+    /** methods */
+    // 用来请求tabs页上的数量
+    const setCountInfo = async () => {
+      const countInfo = await count(root.$route.params.datasetId, data.queryParams);
+      data.countInfo = countInfo;
+    };
+
+    const setPage = (page = {}) => Object.assign(pagination, page);
+
+    // 数据请求
+    const refresh = async () => {
+      Object.assign(data, {
+        checkedId: [],
+        checkAll: false,
+      });
+      data.loading = true;
+      const { current, pageSize } = pagination;
+      const { page, result } = await listRequest({
+        current,
+        size: pageSize,
+        ...data.queryParams,
+      }).finally(() => {
+        data.loading = false;
+      });
+      setPage(page);
+      data.audioDataList = result;
+      setCountInfo();
+    };
+
+    const query = () => {
+      setPage({
+        current: 1,
+      });
+      refresh();
+    };
+
+    const resetQuery = () => {
+      data.queryParams.status = data.statusMap[data.lastTabName];
+      query();
+    };
+
+    const onSizeChange = (size) => {
+      setPage({
+        pageSize: size,
+        current: 1,
+      });
+      query();
+    };
+
+    const onPageChange = (page) => {
+      setPage({
+        current: page,
+      });
+      refresh();
+    };
+
+    const handleFilter = (form) => {
+      Object.assign(data.queryParams, form);
+      query();
+    };
+
+    const handleTabClick = (tab) => {
+      const tabName = tab.name;
+      if (data.lastTabName === tabName) {
+        return;
+      }
+      // 切换tab页清除筛选条件
+      Object.assign(data, {
+        lastTabName: tabName,
+      });
+      data.queryParams = pick(data.queryParams, ['status', 'datasetId']);
+      resetQuery();
+    };
+
+    const handleClose = () => {
+      data.uploadDialogVisible = false;
+    };
+
+    const uploadSuccess = (res) => {
+      const files = getFileFromMinIO(res);
+      // 提交业务上传
+      if (files.length > 0) {
+        submit(data.datasetId, files).then(() => {
+          Message.success('上传文件成功');
+          query();
+        });
+      }
+    };
+
+    const uploadError = (err) => {
+      Message.error(err.message || '上传文件失败');
+    };
+
+    const onRefresh = () => {
+      resetQuery();
+    };
+
+    const handleCheckAllChange = (val) => {
+      data.checkedId = val ? selectedId.value : [];
+      data.isIndeterminate = false;
+    };
+
+    const handleCheckedIdChange = (value) => {
+      const checkedCount = value.length;
+      data.checkAll = checkedCount === data.audioDataList.length;
+      data.isIndeterminate = checkedCount > 0 && checkedCount < data.audioDataList.length;
+    };
+
+    const doDelete = () => {
+      MessageBox.confirm(`确认删除选中的${data.checkedId.length}个文件?`, '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => {
+        data.delAllLoading = true;
+        const params = {
+          fileIds: data.checkedId,
+          datasetIds: data.datasetId,
+        };
+        if (data.checkedId.length) {
+          del(params)
+            .then(() => {
+              Message.success('删除文件成功');
+              data.checkedId = [];
+              query();
+            })
+            .finally(() => {
+              data.delAllLoading = false;
+            });
+        }
+      });
+    };
+
+    const sizeOfPage = () => {
+      return pagination.pageSize * (pagination.current - 1);
+    };
+
+    const goDetail = (index = 0) => {
+      const query =
+        data.lastTabName === 'finished'
+          ? {
+              tab: 'finished',
+            }
+          : {};
+      root.$router.push({
+        name: 'AudioAnnotation',
+        query,
+        params: {
+          current: index >= 0 ? sizeOfPage() + index + 1 : 1,
+          datasetId: data.datasetId,
+        },
+      });
+    };
+
+    const queryDatasetInfo = () => {
+      detail(data.datasetId).then((res) => {
+        data.datasetInfo = res || {};
+      });
+    };
+
+    // 查询标签
+    const queryLabels = async (requestParams = {}) => {
+      const labels = await queryLabelsApi(data.datasetId, requestParams);
+      const labelOptionsIndex = data.formItemsFinish.findIndex((d) => d.prop === 'labelId');
+      // 用于筛选功能
+      data.formItemsFinish[labelOptionsIndex].options = labels.map((item) => {
+        return {
+          label: item.name,
+          value: item.id,
+        };
+      });
+      return labels || [];
+    };
+
+    const updateLabels = async () => {
+      data.labels = await queryLabels();
+      data.categoryId2Name = data.labels.reduce(
+        (acc, item) =>
+          Object.assign(acc, {
+            [item.id]: {
+              name: item.name,
+              color: item.color,
+            },
+          }),
+        {}
+      );
+    };
+
+    // 新建标签
+    const createLabel = (labelParams = {}) => {
+      return createLabelApi(data.datasetId, labelParams).then(() => {
+        updateLabels();
+        Message.success('标签创建成功');
+      });
+    };
+
+    setCountInfo().then(() => {
+      if (data.countInfo.unfinished === 0 && data.countInfo.finished !== 0) {
+        data.lastTabName = 'finished';
+        data.queryParams.status = data.statusMap[data.lastTabName];
+      }
+      query();
+    });
+    // 获取详情
+    queryDatasetInfo();
+    // 获取标签
+    updateLabels();
+
+    watch(
+      () => data.datasetId,
+      (next) => {
+        if (isStatus(next, 'IMPORTING')) {
+          setTimeout(queryDatasetInfo, 3000);
+        }
+      }
+    );
+
+    return {
+      ...toRefs(data),
+      pagination,
+      formItems,
+      uploadParams,
+      countInfoAudio,
+      disableImport,
+      isImporting,
+      refreshKlass,
+      selectedId,
+      audioType,
+      handleClose,
+      uploadSuccess,
+      uploadError,
+      handleTabClick,
+      handleCheckedIdChange,
+      handleCheckAllChange,
+      doDelete,
+      goDetail,
+      onSizeChange,
+      onPageChange,
+      handleFilter,
+      onRefresh,
+      createLabel,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.audio-classify-tab {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  margin-bottom: 10px;
+
+  .audio-classify-button {
+    flex: 1;
+    margin: 13px 0 20px 100px;
+  }
+}
+
+.label-list-container {
+  width: 20%;
+}
+
+.fixed-label-list {
+  position: fixed;
+  top: 50px;
+  width: 20%;
+  height: calc(100vh - 50px);
+  padding: 28px 28px 0;
+  margin-bottom: 33px;
+  overflow-y: auto;
+  background-color: #f2f2f2;
+}
+</style>
diff --git a/webapp/src/views/dataset/audio/workspace/audioClassify.vue b/webapp/src/views/dataset/audio/workspace/audioClassify.vue
new file mode 100644
index 0000000..6b18f8c
--- /dev/null
+++ b/webapp/src/views/dataset/audio/workspace/audioClassify.vue
@@ -0,0 +1,227 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div v-hotkey.stop="keymap">
+    <div class="flex flex-between">
+      <el-tabs :value="activeTab" class="eltabs-inlineblock" @tab-click="handlePanelClick">
+        <el-tab-pane :label="countInfoAuido.unfinished" name="unfinished" />
+        <el-tab-pane :label="countInfoAuido.finished" name="finished" />
+      </el-tabs>
+      <div class="flex flex-end f1">
+        <div class="ml-40 mr-10 my-auto">标注进度:</div>
+        <el-progress
+          :show-text="false"
+          :stroke-width="10"
+          :percentage="percentage"
+          class="my-auto"
+          style="width: 50%;"
+        ></el-progress>
+        <div class="my-auto ml-10">{{ progress }}</div>
+      </div>
+    </div>
+    <el-card class="box-card" style="margin-top: 20px;" shadow="never">
+      <div slot="header" class="clearfix flex flex-between" style="line-height: 32px;">
+        <div class="f1">
+          <span class="vm">已选择标签：</span>
+          <span v-if="!availLabel" class="g9 vm">请在右侧选择标签</span>
+          <el-tag
+            v-else
+            :color="availLabel.color"
+            closable
+            class="text-label vm"
+            disable-transitions
+            :title="availLabel.name"
+            :style="getStyle(availLabel)"
+            @close="closeLabel(availLabel)"
+          >
+            {{ sliceTag(availLabel.name) }}
+          </el-tag>
+        </div>
+        <span v-if="showCurrent">{{ current }}</span>
+        <div class="f1">
+          <div class="fr">
+            <el-button :disabled="!showPrev" type="text" @click="toPrev"
+              >上一篇(<i class="el-icon-back"></i>)</el-button
+            >
+            <el-button :disabled="!showNext" type="text" @click="toNext"
+              >下一篇(<i class="el-icon-right"></i>)</el-button
+            >
+            <el-popconfirm title="确认删除该音频？" @onConfirm="deleteFile">
+              <el-button slot="reference" :disabled="!showDelete" type="text" class="ml-10"
+                >删除</el-button
+              >
+            </el-popconfirm>
+          </div>
+        </div>
+      </div>
+      <div class="text">
+        <Exception v-if="!!showException" />
+        <div v-else-if="loading" class="flex flex-center g6" style="min-height: 80px;">
+          加载中...
+        </div>
+        <div v-else>
+          <span>{{ title }}</span>
+          <WaveSurfer :url="state.url" />
+        </div>
+      </div>
+    </el-card>
+    <div v-if="fileId" class="action-bar mt-20 flex flex-end">
+      <el-button type="primary" :disabled="comfirmDisabled" @click="confirm">确认（C）</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, watch, computed } from '@vue/composition-api';
+
+import WaveSurfer from '@/components/WaveSurfer';
+import Exception from '@/components/Exception';
+import { colorByLuminance } from '@/utils';
+
+export default {
+  name: 'AudioClassifyWorkSpace',
+  components: {
+    WaveSurfer,
+    Exception,
+  },
+  props: {
+    activeTab: String,
+    url: String,
+    availLabel: {
+      type: Object,
+      default: () => ({}),
+    },
+    countInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    pageInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    loading: Boolean,
+    deleteFile: Function,
+    closeLabel: Function,
+    toNext: Function,
+    toPrev: Function,
+    saving: Boolean,
+    changeActiveTab: Function,
+    fileId: [Number, String],
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      activeTab: props.activeTab || 'unfinished',
+      url: props.url || '',
+    });
+
+    const countInfoAuido = computed(() => ({
+      unfinished: `无标注信息（${props.countInfo.unfinished}）`,
+      finished: `有标注信息（${props.countInfo.finished}）`,
+    }));
+
+    // 确认是否可操作
+    const comfirmDisabled = computed(() => state.loading || props.saving || !props.fileId);
+
+    const percentage = computed(() => {
+      const total = props.countInfo.unfinished + props.countInfo.finished;
+      return total === 0 ? 0 : (props.countInfo.finished / total) * 100;
+    });
+
+    const progress = computed(() => {
+      return `${props.countInfo.finished}/${props.countInfo.finished + props.countInfo.unfinished}`;
+    });
+
+    const sliceTag = (tagName) => (tagName.length < 12 ? tagName : `${tagName.slice(0, 12)}...`);
+
+    const getStyle = (item) => {
+      const color = colorByLuminance(item.color);
+      return {
+        color,
+        border: 'none',
+      };
+    };
+
+    const showCurrent = computed(() => props.pageInfo.total > 0);
+    const current = computed(() => `当前音频顺序：${props.pageInfo.current}`);
+    // 上一页，下一页
+    const showPrev = computed(() => props.pageInfo.current > 1);
+    const showNext = computed(() => props.pageInfo.current < props.pageInfo.total);
+    const showDelete = computed(() => props.pageInfo.total > 0);
+    const showException = computed(() => props.loading === false && state.url === '');
+    const title = computed(() => state.url.substring(state.url.lastIndexOf('/') + 1));
+
+    const handlePanelClick = (tab) => {
+      props.changeActiveTab(tab);
+    };
+
+    // 每种类型实现 confirm
+    const confirm = () => {
+      if (comfirmDisabled.value) return;
+      // 导入分类标注内容
+      ctx.emit('confirm', {
+        annotation: props.availLabel ? [{ category_id: props.availLabel.id, score: 1 }] : null,
+      });
+    };
+
+    const keymap = computed(() => ({
+      c: confirm,
+    }));
+
+    watch(
+      () => props.url,
+      (next) => {
+        state.url = next;
+      }
+    );
+
+    watch(
+      () => props.activeTab,
+      (next) => {
+        state.activeTab = next;
+      }
+    );
+
+    return {
+      state,
+      showException,
+      showDelete,
+      getStyle,
+      showPrev,
+      showNext,
+      countInfoAuido,
+      percentage,
+      progress,
+      title,
+      handlePanelClick,
+      showCurrent,
+      current,
+      comfirmDisabled,
+      confirm,
+      keymap,
+      sliceTag,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.text-label {
+  max-width: 200px;
+
+  .el-icon-close {
+    color: inherit;
+  }
+}
+</style>
diff --git a/webapp/src/views/dataset/audio/workspace/index.vue b/webapp/src/views/dataset/audio/workspace/index.vue
new file mode 100644
index 0000000..623b4a7
--- /dev/null
+++ b/webapp/src/views/dataset/audio/workspace/index.vue
@@ -0,0 +1,46 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */ // TODO:
+后面可以共用文本的
+<template>
+  <component :is="component" v-bind="attrs" v-on="listeners" />
+</template>
+<script>
+import { computed } from '@vue/composition-api';
+
+import AudioClassify from './audioClassify';
+import SpeechRecognition from './speechRecognition';
+
+export default {
+  name: 'WorkSpace',
+  components: {
+    AudioClassify,
+    SpeechRecognition,
+  },
+  inheritAttrs: false,
+  props: {
+    component: String,
+  },
+  setup(props, ctx) {
+    const attrs = computed(() => ctx.attrs);
+    const listeners = computed(() => ctx.listeners);
+
+    return {
+      attrs,
+      listeners,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/views/dataset/audio/workspace/speechRecognition.vue b/webapp/src/views/dataset/audio/workspace/speechRecognition.vue
new file mode 100644
index 0000000..f7d1fc2
--- /dev/null
+++ b/webapp/src/views/dataset/audio/workspace/speechRecognition.vue
@@ -0,0 +1,226 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div v-hotkey.stop="keymap">
+    <div class="flex flex-between">
+      <el-tabs :value="activeTab" class="eltabs-inlineblock" @tab-click="handlePanelClick">
+        <el-tab-pane :label="countInfoAuido.unfinished" name="unfinished" />
+        <el-tab-pane :label="countInfoAuido.finished" name="finished" />
+      </el-tabs>
+      <div class="flex flex-end f1">
+        <div class="ml-40 mr-10 my-auto">标注进度:</div>
+        <el-progress
+          :show-text="false"
+          :stroke-width="10"
+          :percentage="percentage"
+          class="my-auto"
+          style="width: 50%;"
+        ></el-progress>
+        <div class="my-auto ml-10">{{ progress }}</div>
+      </div>
+    </div>
+    <el-card class="box-card" style="margin-top: 20px;" shadow="never">
+      <div slot="header" class="clearfix flex flex-between" style="line-height: 32px;">
+        <span v-if="showCurrent">{{ current }}</span>
+        <div class="f1">
+          <div class="fr">
+            <el-button :disabled="!showPrev" type="text" @click="toPrev"
+              >上一篇(<i class="el-icon-back"></i>)</el-button
+            >
+            <el-button :disabled="!showNext" type="text" @click="toNext"
+              >下一篇(<i class="el-icon-right"></i>)</el-button
+            >
+            <el-popconfirm title="确认删除该音频？" @onConfirm="deleteFile">
+              <el-button slot="reference" :disabled="!showDelete" type="text" class="ml-10"
+                >删除</el-button
+              >
+            </el-popconfirm>
+          </div>
+        </div>
+      </div>
+      <div class="text">
+        <Exception v-if="!!showException" />
+        <div v-else-if="loading" class="flex flex-center g6" style="min-height: 80px;">
+          加载中...
+        </div>
+        <div v-else>
+          <span>{{ title }}</span>
+          <WaveSurfer :url="state.url" :height="100" style="margin-top: 10px;" />
+          <label class="shift-text">语音转文本</label>
+          <el-input
+            v-model="state.content"
+            type="textarea"
+            autosize
+            placeholder="请输入语音识别内容"
+          />
+        </div>
+      </div>
+    </el-card>
+    <div v-if="fileId" class="action-bar mt-20 flex flex-end">
+      <el-button type="primary" :disabled="comfirmDisabled" @click="confirm">确认（C）</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, watch, computed } from '@vue/composition-api';
+
+import WaveSurfer from '@/components/WaveSurfer';
+import Exception from '@/components/Exception';
+import { colorByLuminance } from '@/utils';
+
+export default {
+  name: 'AudioClassifyWorkSpace',
+  components: {
+    WaveSurfer,
+    Exception,
+  },
+  props: {
+    activeTab: String,
+    url: String,
+    countInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    pageInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    loading: Boolean,
+    deleteFile: Function,
+    closeLabel: Function,
+    toNext: Function,
+    toPrev: Function,
+    saving: Boolean,
+    changeActiveTab: Function,
+    fileId: [Number, String],
+    annotation: [Array],
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      activeTab: props.activeTab || 'unfinished',
+      url: props.url || '',
+      content: '',
+    });
+
+    const countInfoAuido = computed(() => ({
+      unfinished: `无标注信息（${props.countInfo.unfinished}）`,
+      finished: `有标注信息（${props.countInfo.finished}）`,
+    }));
+
+    // 确认是否可操作
+    const comfirmDisabled = computed(() => state.loading || props.saving || !props.fileId);
+
+    const percentage = computed(() => {
+      const total = props.countInfo.unfinished + props.countInfo.finished;
+      return total === 0 ? 0 : (props.countInfo.finished / total) * 100;
+    });
+
+    const progress = computed(() => {
+      return `${props.countInfo.finished}/${props.countInfo.finished + props.countInfo.unfinished}`;
+    });
+
+    const getStyle = (item) => {
+      const color = colorByLuminance(item.color);
+      return {
+        color,
+        border: 'none',
+      };
+    };
+
+    const showCurrent = computed(() => props.pageInfo.total > 0);
+    const current = computed(() => `当前音频顺序：${props.pageInfo.current}`);
+    // 上一页，下一页
+    const showPrev = computed(() => props.pageInfo.current > 1);
+    const showNext = computed(() => props.pageInfo.current < props.pageInfo.total);
+    const showDelete = computed(() => props.pageInfo.total > 0);
+    const showException = computed(() => props.loading === false && state.url === '');
+    const title = computed(() => state.url.substring(state.url.lastIndexOf('/') + 1));
+
+    const handlePanelClick = (tab) => {
+      props.changeActiveTab(tab);
+    };
+
+    // 每种类型实现 confirm
+    const confirm = () => {
+      if (comfirmDisabled.value) return;
+      // 导入分类标注内容
+      ctx.emit('confirm', {
+        annotation: state.content.length ? [{ content: state.content }] : null,
+      });
+    };
+
+    const keymap = computed(() => ({
+      c: confirm,
+    }));
+
+    watch(
+      () => props.url,
+      (next) => {
+        state.url = next;
+      }
+    );
+
+    watch(
+      () => props.activeTab,
+      (next) => {
+        state.activeTab = next;
+      }
+    );
+
+    watch(
+      () => props.fileId,
+      () => {
+        const isContent = Array.isArray(props.annotation) && props.annotation.length > 0;
+        Object.assign(state, {
+          content: isContent ? props.annotation[0].content : '',
+        });
+      }
+    );
+
+    return {
+      state,
+      showException,
+      showDelete,
+      getStyle,
+      showPrev,
+      showNext,
+      countInfoAuido,
+      percentage,
+      progress,
+      title,
+      handlePanelClick,
+      showCurrent,
+      current,
+      comfirmDisabled,
+      confirm,
+      keymap,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.text-label {
+  .el-icon-close {
+    color: inherit;
+  }
+}
+
+.shift-text {
+  display: block;
+  margin: 30px 0 20px;
+}
+</style>
diff --git a/webapp/src/views/dataset/classify.vue b/webapp/src/views/dataset/classify.vue
index cc1ae16..59388b6 100644
--- a/webapp/src/views/dataset/classify.vue
+++ b/webapp/src/views/dataset/classify.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
@@ -23,6 +23,7 @@
       :transformFile="withDimensionFile"
       :toggleVisible="handleClose"
       :params="uploadParams"
+      :hash="true"
       @uploadSuccess="uploadSuccess"
       @uploadError="uploadError"
     />
@@ -34,13 +35,25 @@
           <!--tabs页和工具栏-->
           <div class="classify-tab">
             <el-tabs :value="lastTabName" @tab-click="handleTabClick">
-              <el-tab-pane label="未完成" name="unfinished" />
-              <el-tab-pane label="已完成" name="finished" />
+              <el-tab-pane :label="countInfoTxt.unfinished" name="unfinished" />
+              <el-tab-pane :label="countInfoTxt.finished" name="finished" />
             </el-tabs>
+            <SearchBox
+              ref="searchBox"
+              :key="lastTabName"
+              :formItems="formItems"
+              :handleFilter="handleFilter"
+              :initialValue="initialValue"
+              :popperAttrs="popperAttrs"
+            >
+              <el-button slot="trigger" type="text" style=" margin-bottom: 14px; margin-left: 30px;"
+                >筛选<i class="el-icon-arrow-down el-icon--right"
+              /></el-button>
+            </SearchBox>
             <div class="classify-button flex flex-between flex-vertical-align">
               <div class="row-left">
                 <el-button
-                  :disabled="lastTabName==='finished'"
+                  :disabled="lastTabName === 'finished'"
                   type="primary"
                   icon="el-icon-plus"
                   @click="openUploadDialog"
@@ -61,26 +74,26 @@
                 </el-button>
               </div>
               <div class="row-right">
-                <el-checkbox 
-                  v-model="checkAll" 
-                  :indeterminate="isIndeterminate" 
-                  :disabled="crud.data.length === 0" 
+                <el-checkbox
+                  v-model="checkAll"
+                  :indeterminate="isIndeterminate"
+                  :disabled="crud.data.length === 0"
                   @change="handleCheckAllChange"
                 >
                   {{ checkAll ? '取消全选' : '选择全部' }}
                 </el-checkbox>
-                <label class="classify-select-tip item__label">已选 {{ selectImgsId.length }} 张</label>
+                <label class="classify-select-tip item__label"
+                  >已选 {{ selectImgsId.length }} 张</label
+                >
               </div>
             </div>
           </div>
-          <div
-            v-if="lastTabName==='unfinished' && crud.page.total===0 && !crud.loading"
-          >
+          <div v-if="lastTabName === 'unfinished' && crud.page.total === 0 && !crud.loading">
             <InfoCard :handleClick="openUploadDialog">
               <span slot="desc">点击添加图片</span>
             </InfoCard>
           </div>
-          <div v-if="lastTabName==='finished' && crud.page.total===0 && !crud.loading">
+          <div v-if="lastTabName === 'finished' && crud.page.total === 0 && !crud.loading">
             <InfoCard>
               <i slot="image" class="el-icon-receiving" />
               <span slot="desc">
@@ -103,7 +116,7 @@
           />
           <!--分页组件-->
           <el-pagination
-            v-if="crud.page.total>0"
+            v-if="crud.page.total > 0"
             page-size.sync="crud.page.size"
             :total="crud.page.total"
             :current-page.sync="crud.page.current"
@@ -120,44 +133,71 @@
       <!--Label列表展示-->
       <div class="label-list-container">
         <div class="fixed-label-list">
-          <div v-if="datasetInfo.labelGroupId" class='mb-10'>
+          <div class="mb-10">
+            <label class="el-form-item__label no-float tl">数据集名称</label>
+            <div class="f14">
+              <span class="vm">{{ datasetInfo.name }}</span>
+            </div>
+          </div>
+          <div class="mb-10">
+            <label class="el-form-item__label no-float tl">标注类型</label>
+            <div class="f14">
+              <span class="vm">{{ annotationByCode(datasetInfo.annotateType, 'name') }}</span>
+            </div>
+          </div>
+          <div v-if="datasetInfo.labelGroupId" class="mb-10">
             <label class="el-form-item__label no-float tl">标签组</label>
             <div class="f14">
               <span class="vm">{{ datasetInfo.labelGroupName }} &nbsp;</span>
-              <el-link target="_blank" type="primary" :underline="false" class="vm" :href="`/data/labelgroup/detail?id=${datasetInfo.labelGroupId}`">
+              <el-link
+                target="_blank"
+                type="primary"
+                :underline="false"
+                class="vm"
+                :href="`/data/labelgroup/detail?id=${datasetInfo.labelGroupId}`"
+              >
                 查看详情
               </el-link>
             </div>
           </div>
-          <div v-if="datasetInfo.labelGroupType !== 1" class="mb-22">
+          <div v-if="showAddLabel" class="mb-22">
             <LabelTip />
-            <div class="flex flex-between">
+            <div class="flex flex-between mb-10">
               <InfoSelect
-                v-model="newLabel"
+                v-model="selectedLabel"
                 style="width: 68%;"
-                placeholder="选择已有标签或新建标签"
+                placeholder="选择系统预置标签"
                 :dataSource="systemLabels"
                 value-key="value"
                 default-first-option
                 filterable
-                allow-create
-                @change="handleLabelChange"
+                @change="handleLabelSelect"
               />
-              <el-button size="mini" type="primary" @click="postLabel">确定</el-button>
             </div>
+            <LabelEditor title="新建标签" @handleOk="handleLabelCreate">
+              <span slot="trigger" class="cp vm primary f14">新建标签</span>
+            </LabelEditor>
           </div>
           <div v-if="rawLabelData.length">
             <div class="pb-10 flex flex-between flex-wrap flex-vertical-align">
-              <label class="el-form-item__label" style="max-width: 39.9%; padding: 0;">全部标签({{ rawLabelData.length }})</label>
+              <label class="el-form-item__label" style="max-width: 39.9%; padding: 0;"
+                >全部标签({{ rawLabelData.length }})</label
+              >
               <SearchLabel @change="handleSearch" />
             </div>
             <div style="max-height: 200px; padding: 0 2.5px; overflow: auto;">
               <el-row :gutter="5" style="clear: both;">
                 <el-col v-for="data in labelData" :key="data.id" :span="8">
-                  <el-tag class="tag-item" :title="data.name" :color="data.color" :style="getStyle(data)" @click="event => chooseLabel(data, event)">
+                  <el-tag
+                    class="tag-item"
+                    :title="data.name"
+                    :color="data.color"
+                    :style="getStyle(data)"
+                    @click="(event) => chooseLabel(data, event)"
+                  >
                     <span :title="data.name">{{ data.name }}</span>
                     <EditLabel
-                      v-if="!data.labelGroupId"
+                      v-if="showEditLabel(data)"
                       :getStyle="getStyle"
                       :item="data"
                       @handleOk="handleEditLabel"
@@ -166,9 +206,14 @@
                 </el-col>
               </el-row>
             </div>
-            <div v-if="lastTabName==='finished'" class="label-switch-tool">
+            <div v-if="lastTabName === 'finished'" class="label-switch-tool">
               <label class="label-style">标注类型标签</label>
-              <el-switch v-model="typeSwitch" :width="45" class="label-switch" @change="switchLabelTag" />
+              <el-switch
+                v-model="typeSwitch"
+                :width="45"
+                class="label-switch"
+                @change="switchLabelTag"
+              />
             </div>
           </div>
         </div>
@@ -187,14 +232,23 @@
 </template>
 
 <script>
-import { without, isNil } from 'lodash';
+import { without, pick } from 'lodash';
 import { Message } from 'element-ui';
 
 import { colorByLuminance } from '@/utils';
-import { queryDataEnhanceList, detail } from '@/api/preparation/dataset';
+import { queryDataEnhanceList, detail, count } from '@/api/preparation/dataset';
 
-import { transformFile, transformFiles, getImgFromMinIO, dataEnhanceMap, withDimensionFile, fileCodeMap } from '@/views/dataset/util';
-import { labelGroupTypeCodeMap } from '@/views/labelGroup/util';
+import {
+  transformFile,
+  transformFiles,
+  getFileFromMinIO,
+  dataEnhanceMap,
+  withDimensionFile,
+  fileCodeMap,
+  labelGroupTypeMap,
+  annotationBy,
+  isPresetDataset,
+} from '@/views/dataset/util';
 import crudDataFile, { list, del, submit } from '@/api/preparation/datafile';
 import { getAutoLabels, getLabels, createLabel, editLabel } from '@/api/preparation/datalabel';
 import { batchFinishAnnotation } from '@/api/preparation/annotation';
@@ -204,6 +258,8 @@ import UploadForm from '@/components/UploadForm';
 import InfoCard from '@/components/Card/info';
 import InfoSelect from '@/components/InfoSelect';
 import SortingMenu from '@/components/SortingMenu';
+import SearchBox from '@/components/SearchBox';
+import LabelEditor from '@/views/dataset/components/labelEditor';
 import SearchLabel from './components/searchLabel';
 import LabelTip from './annotate/settingContainer/labelTip';
 import PicInfoModal from './components/picInfoModal';
@@ -214,43 +270,120 @@ const path = require('path');
 
 export default {
   name: 'Classify',
-  components: { ImageGallery, UploadForm, InfoCard, InfoSelect, SearchLabel, LabelTip, SortingMenu, PicInfoModal, EditLabel },
+  components: {
+    ImageGallery,
+    UploadForm,
+    InfoCard,
+    InfoSelect,
+    SearchLabel,
+    LabelTip,
+    SortingMenu,
+    PicInfoModal,
+    EditLabel,
+    LabelEditor,
+    SearchBox,
+  },
   cruds() {
     const id = this.parent.$route.params.datasetId;
-    const crudObj = CRUD({ title: '数据分类', crudMethod: { ...crudDataFile }});
-    crudObj.params = { 'datasetId': id, 'status': fileCodeMap.UNFINISHED };
+    const crudObj = CRUD({ title: '数据分类', crudMethod: { ...crudDataFile } });
+    crudObj.params = { datasetId: id, status: fileCodeMap.UNFINISHED };
     crudObj.page.size = 30;
     return crudObj;
   },
   mixins: [presenter(), header(), crud()],
-  props: {
-    categoryId2Name: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
   data() {
     return {
+      initialValue: {
+        annotateStatus: [''],
+        annotateType: [''],
+        labelId: [],
+      },
+      popperAttrs: {
+        placement: 'bottom',
+      },
+      formItemsUnfinish: [
+        {
+          label: '标注状态:',
+          prop: 'annotateStatus',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '未标注', value: 101 },
+            { label: '未识别', value: 105 },
+            { label: '已标注', value: 302, disabled: true },
+          ],
+        },
+        {
+          label: '标注方式:',
+          prop: 'annotateType',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '手动标注', value: 104, disabled: true },
+            { label: '自动标注', value: 103, disabled: true },
+          ],
+        },
+      ],
+      formItemsFinish: [
+        {
+          label: '标注状态:',
+          prop: 'annotateStatus',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '未标注', value: 101, disabled: true },
+            { label: '未识别', value: 105, disabled: true },
+            { label: '已标注', value: 302 },
+          ],
+        },
+        {
+          label: '标注方式:',
+          prop: 'annotateType',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '手动标注', value: 104 },
+            { label: '自动标注', value: 103 },
+          ],
+        },
+        {
+          label: '标签:',
+          prop: 'labelId',
+          type: 'select',
+          attrs: {
+            multiple: true,
+            clearable: true,
+            filterable: true,
+          },
+          options: [],
+        },
+      ],
       datasetId: 0,
       datasetInfo: {},
       uploadDialogVisible: false,
       lastTabName: 'unfinished',
       crudStatusMap: {
-        'unfinished': [fileCodeMap.UNFINISHED],
-        'finished': [fileCodeMap.FINISHED],
+        unfinished: [fileCodeMap.UNFINISHED],
+        finished: [fileCodeMap.FINISHED],
       },
+      selectedLabel: undefined,
       newLabel: undefined,
+      newLabelColor: undefined,
       checkAll: false,
       isIndeterminate: false,
       typeSwitch: true,
       rawLabelData: [],
       labelData: [],
-      name2CategoryId: {},
+      categoryId2Name: {},
       // 选中列表
       commit: {
         unfinished: [],
         finished: [],
       },
+      countInfo: {
+        unfinished: 0,
+        finished: 0,
+      },
       systemLabels: [],
       showPicModal: false,
       curFile: undefined, // 当前文件
@@ -258,14 +391,23 @@ export default {
       modalId: 1,
       initialIndex: 0, // 当前图在轮播图列表中的顺序
       enhanceLabels: [], // 增强标签列表
-      menuList: [{ label: '默认排序', value: 0 }, { label: '名称排序', value: 1 }],
+      menuList: [
+        { label: '默认排序', value: 0 },
+        { label: '名称排序', value: 1 },
+      ],
     };
   },
   computed: {
+    formItems() {
+      return this.lastTabName === 'unfinished' ? this.formItemsUnfinish : this.formItemsFinish;
+    },
     // 文件上传前携带尺寸信息
     withDimensionFile() {
       return withDimensionFile;
     },
+    annotationByCode() {
+      return annotationBy('code');
+    },
     uploadParams() {
       return {
         datasetId: this.datasetId,
@@ -275,33 +417,42 @@ export default {
     selectImgsId() {
       return this.commit[this.lastTabName] || [];
     },
+    countInfoTxt() {
+      return {
+        unfinished: `无标注信息（${this.countInfo.unfinished}）`,
+        finished: `有标注信息（${this.countInfo.finished}）`,
+      };
+    },
+    // 预置数据集不支持新建标签
+    showAddLabel() {
+      return !isPresetDataset(this.datasetInfo.type);
+    },
   },
   created() {
     this.datasetId = parseInt(this.$route.params.datasetId, 10);
     this.refreshLabel();
     Promise.all([
-      list({ 'datasetId': this.datasetId, 'status': [fileCodeMap.UNFINISHED] }),
-      list({ 'datasetId': this.datasetId, 'status': [fileCodeMap.FINISHED] }),
-    ])
-      .then(([unfinished, finished]) => {
-        if (unfinished.result.length === 0 && finished.result.length !== 0) {
-          this.lastTabName = 'finished';
-          this.crud.params.status = this.crudStatusMap[this.lastTabName];
-          this.crud.toQuery();
-        }
-      });
+      list({ datasetId: this.datasetId, status: [fileCodeMap.UNFINISHED] }),
+      list({ datasetId: this.datasetId, status: [fileCodeMap.FINISHED] }),
+    ]).then(([unfinished, finished]) => {
+      if (unfinished.result.length === 0 && finished.result.length !== 0) {
+        this.lastTabName = 'finished';
+        this.crud.params.status = this.crudStatusMap[this.lastTabName];
+        this.crud.toQuery();
+      }
+    });
 
-    detail(this.datasetId).then(res => {
+    detail(this.datasetId).then((res) => {
       this.datasetInfo = res || {};
     });
     // 系统标签
     this.getSystemLabel();
   },
   mounted() {
-    (async() => {
+    (async () => {
       const enhanceListResult = await queryDataEnhanceList();
       const { dictDetails = [] } = enhanceListResult || {};
-      const labels = dictDetails.map(d => ({
+      const labels = dictDetails.map((d) => ({
         label: d.label,
         value: Number(d.value),
       }));
@@ -309,7 +460,22 @@ export default {
     })();
   },
   methods: {
-    handleEditLabel(field, item){
+    [CRUD.HOOK.afterRefresh]() {
+      this.updateCountInfo();
+    },
+    // 更新数据集当前搜索条件下文件有无标注信息的统计数量
+    async updateCountInfo() {
+      this.countInfo = await count(this.datasetId, this.crud.params);
+    },
+    handleFilter(form) {
+      Object.assign(this.crud.params, form);
+      this.crud.refresh();
+    },
+    // 普通数据集的无标签组归属的标签才显示标签编辑按钮
+    showEditLabel(label) {
+      return !label.labelGroupId && !isPresetDataset(this.datasetInfo.type);
+    },
+    handleEditLabel(field, item) {
       editLabel(item.id, field).then(this.refreshLabel);
     },
     handleSort(command) {
@@ -319,7 +485,7 @@ export default {
     },
     // 根据文件 enhaneType 找到对应的增强标签
     findEnhanceMatch(item) {
-      return this.enhanceLabels.find(d => d.value === item.enhanceType);
+      return this.enhanceLabels.find((d) => d.value === item.enhanceType);
     },
     // 生成增强标签
     buildEnhanceTag(file) {
@@ -342,7 +508,7 @@ export default {
       this.crud.page.current = 1;
     },
     getSystemLabel() {
-      getAutoLabels(labelGroupTypeCodeMap.VISUAL).then(res => {
+      getAutoLabels(labelGroupTypeMap.VISUAL.value).then((res) => {
         const labels = res.map((item) => ({
           value: item.id,
           label: item.name,
@@ -355,7 +521,7 @@ export default {
     // 获取过滤后的标签
     handleSearch(label) {
       if (label) {
-        this.labelData = this.rawLabelData.filter(d => d.name.includes(label));
+        this.labelData = this.rawLabelData.filter((d) => d.name.includes(label));
       } else {
         this.labelData = this.rawLabelData;
       }
@@ -367,21 +533,23 @@ export default {
         type: 'warning',
       }).then(() => {
         this.crud.delAllLoading = true;
-        const ids = datas.map(d => ({ id: d }));
+        const ids = datas.map((d) => ({ id: d }));
         const params = {
           fileIds: datas,
           datasetIds: this.datasetId,
         };
         if (ids.length) {
-          del(params).then(() => {
-            this.$message({
-              message: '删除文件成功',
-              type: 'success',
+          del(params)
+            .then(() => {
+              this.$message({
+                message: '删除文件成功',
+                type: 'success',
+              });
+              this.crud.toQuery();
+            })
+            .finally(() => {
+              this.crud.delAllLoading = false;
             });
-            this.crud.toQuery();
-          }).finally(() => {
-            this.crud.delAllLoading = false;
-          });
         }
         this.handleCheckAllChange(0);
         // 更新 commit 表
@@ -392,11 +560,12 @@ export default {
     },
     handleCheckAllChange(val) {
       const { imgGallery } = this.$refs;
-      if(!imgGallery) return false;
-      if (val) {
-        imgGallery.selectAll();
-      } else {
-        imgGallery.resetMultipleSelection();
+      if (imgGallery) {
+        if (val) {
+          imgGallery.selectAll();
+        } else {
+          imgGallery.resetMultipleSelection();
+        }
       }
     },
     handleSelectMultipleImg(values) {
@@ -414,13 +583,13 @@ export default {
     // 点击图片事件
     clickImg(img, selectedImgList) {
       // 文件扩展
-      const extendFile = d => ({
+      const extendFile = (d) => ({
         file_name: path.basename(d.url),
         enhanceType: d.enhanceType,
       });
 
       // 扩展文件增强类型
-      const extendFileEnhance = d => ({
+      const extendFileEnhance = (d) => ({
         file_name: path.basename(d.url),
         enhanceType: d.enhanceType,
         enhanceTag: this.buildEnhanceTag(d),
@@ -431,14 +600,14 @@ export default {
         this.showPicModal = true;
         this.curFile = transformFile(img, extendFile);
         this.fileList = transformFiles(this.crud.data, extendFileEnhance);
-        const curIndex = this.crud.data.findIndex(item => item.id === this.curFile.id);
+        const curIndex = this.crud.data.findIndex((item) => item.id === this.curFile.id);
         if (curIndex > -1) {
           this.initialIndex = curIndex;
         }
       }
     },
     handlePicModalClose() {
-      this.modalId+=1;
+      this.modalId += 1;
       this.showPicModal = false;
       this.curFile = undefined;
       this.fileList = [];
@@ -448,6 +617,7 @@ export default {
       if (this.lastTabName === tabName) {
         return;
       }
+      this.crud.params = pick(this.crud.params, ['status', 'datasetId', 'sort']);
       this.crud.params.status = this.crudStatusMap[tabName];
       this.lastTabName = tabName;
       this.crud.refresh();
@@ -455,7 +625,7 @@ export default {
       this.typeSwitch = true;
     },
     async uploadSuccess(res) {
-      const files = getImgFromMinIO(res);
+      const files = getFileFromMinIO(res);
       // 提交业务上传
       if (files.length > 0) {
         submit(this.datasetId, files).then(() => {
@@ -482,12 +652,21 @@ export default {
     refreshLabel() {
       getLabels(this.datasetId).then((res) => {
         this.rawLabelData = res;
-        this.rawLabelData.forEach((item) => {
-          if (item.color === '#000000') {
-            item.color = '';
-          }
-          this.categoryId2Name[item.id] = item.name;
-          this.name2CategoryId[item.name] = item.id;
+        const labelOptionsIndex = this.formItemsFinish.findIndex((d) => d.prop === 'labelId');
+        this.categoryId2Name = this.rawLabelData.reduce(
+          (acc, item) =>
+            Object.assign(acc, {
+              [item.id]: item.name,
+            }),
+          {}
+        );
+
+        // 用于筛选功能
+        this.formItemsFinish[labelOptionsIndex].options = this.rawLabelData.map((item) => {
+          return {
+            label: item.name,
+            value: item.id,
+          };
         });
         this.typeSwitch = true;
         this.switchLabelTag(true);
@@ -495,17 +674,19 @@ export default {
         this.labelData = this.rawLabelData;
       });
     },
-    chooseLabel(row, event) {
+    chooseLabel(label, event) {
       // 过滤编辑入口
       if (event.target.classList.contains('el-icon-edit')) return;
       if (this.selectImgsId.length > 0) {
         const annotations = [];
         this.selectImgsId.forEach((item) => {
           annotations.push({
-            annotation: JSON.stringify([{
-              category_id: this.name2CategoryId[row.name],
-              score: 1.0,
-            }]),
+            annotation: JSON.stringify([
+              {
+                category_id: label.id,
+                score: 1.0,
+              },
+            ]),
             id: item,
           });
         });
@@ -520,35 +701,45 @@ export default {
         });
       }
     },
-    handleLabelChange(value) {
-      // 新建标签
-      if (!isNil(value)) {
-        // 如果不是系统标签，才会选择新建
-        if (this.systemLabels.findIndex(d => d.value === value) === -1) {
-          this.addLabel(value);
-          // 新建标签
-          this.postLabel();
-        } else {
-          const systemLabel = this.systemLabels.find(d => d.value === value) || {};
-          systemLabel.label && this.addLabel(systemLabel.label);
+    // 选择系统预置标签
+    handleLabelSelect(value) {
+      this.selectedLabel = this.systemLabels.find((d) => d.value === value)?.label;
+      // 往数据集里添加系统标签
+      if (this.selectedLabel) {
+        if (this.rawLabelData.findIndex((d) => d.name === this.selectedLabel) > -1) {
+          Message.warning(`当前数据集已存在标签[${this.selectedLabel}]`);
+          this.selectedLabel = undefined;
+          return;
         }
+        createLabel(this.datasetId, { name: this.selectedLabel }).then(() => {
+          this.$message({
+            message: `标签[${this.selectedLabel}]创建成功`,
+            type: 'success',
+          });
+          this.selectedLabel = undefined;
+          this.refreshLabel();
+        });
+      } else {
+        Message.warning('请选择标签');
       }
     },
-    addLabel(label) {
-      this.newLabel = label;
-    },
-    postLabel() {
+    // 新建自定义标签
+    handleLabelCreate(id, form) {
+      this.newLabel = form.name;
+      this.newLabelColor = form.color;
+      // 往数据集里添加自定义标签
       if (this.newLabel) {
-        if (this.rawLabelData.findIndex(d => d.name === this.newLabel) > -1) {
-          Message.warning('当前标签已存在');
+        if (this.rawLabelData.findIndex((d) => d.name === this.newLabel) > -1) {
+          Message.warning(`当前数据集已存在标签[${this.newLabel}]`);
           return;
         }
-        createLabel(this.datasetId, { name: this.newLabel }).then(() => {
+        createLabel(this.datasetId, { name: this.newLabel, color: this.newLabelColor }).then(() => {
           this.$message({
             message: `标签[${this.newLabel}]创建成功`,
             type: 'success',
           });
           this.newLabel = undefined;
+          this.newLabelColor = undefined;
           this.refreshLabel();
         });
       } else {
@@ -569,29 +760,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .classify-tab {
-    display: flex;
-    align-items: center;
-    padding: 4px 0;
-    margin-bottom: 10px;
-  }
+.classify-tab {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  margin-bottom: 10px;
+}
 
-  .sorting-menu-trigger {
-    padding: 0;
-  }
+.sorting-menu-trigger {
+  padding: 0;
+}
 
-  .classify-tab .classify-button {
-    flex: 1;
-    margin: 13px 80px 20px 100px;
-  }
+.classify-tab .classify-button {
+  flex: 1;
+  margin: 13px 80px 20px 100px;
+}
 
-  .label-switch-tool {
-    margin-top: 25px;
-  }
+.label-switch-tool {
+  margin-top: 25px;
+}
 
-  .label-switch-tool .label-switch {
-    float: right;
-  }
+.label-switch-tool .label-switch {
+  float: right;
+}
 </style>
 <style lang="scss">
 .sorting-menu-trigger {
@@ -612,7 +803,7 @@ export default {
   position: fixed;
   top: 50px;
   width: 20%;
-  height: calc(100vh - 83px);
+  height: calc(100vh - 50px);
   padding: 28px 28px 0;
   margin-bottom: 33px;
   overflow-y: auto;
diff --git a/webapp/src/views/dataset/nlp/annotation/sidebar/add.vue b/webapp/src/views/dataset/components/labelEditor/index.vue
similarity index 51%
rename from webapp/src/views/dataset/nlp/annotation/sidebar/add.vue
rename to webapp/src/views/dataset/components/labelEditor/index.vue
index 6eb25f7..9c05baf 100644
--- a/webapp/src/views/dataset/nlp/annotation/sidebar/add.vue
+++ b/webapp/src/views/dataset/components/labelEditor/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-popover
@@ -21,17 +21,19 @@
     placement="top"
     width="240"
     trigger="click"
-    title="创建标签"
+    :title="props.title"
     @show="onShow"
     @hide="onHide"
   >
-    <el-form ref="formRef" :model="state.form" :rules="rules" label-width="60px" style="margin-top: 20px;">
+    <el-form
+      ref="formRef"
+      :model="state.form"
+      :rules="rules"
+      label-width="60px"
+      style="margin-top: 20px;"
+    >
       <el-form-item label="名称" prop="name">
-        <el-input
-          ref="inputRef"
-          v-model="state.form.name"
-          placeholder="修改标签名称"
-        />
+        <el-input ref="inputRef" v-model="state.form.name" :placeholder="props.title" />
       </el-form-item>
       <el-form-item label="颜色" prop="color">
         <el-color-picker v-model="state.form.color" />
@@ -41,23 +43,26 @@
         <el-button type="primary" @click="handleOk">确定</el-button>
       </div>
     </el-form>
-    <i
-      slot="reference"
-      class="el-icon-circle-plus cp vm primary ml-4"
-      style="font-size: 18px;"
-    />
+    <span slot="reference">
+      <slot name="trigger"></slot>
+    </span>
   </el-popover>
 </template>
 <script>
 import Vue from 'vue';
 import { reactive, ref } from '@vue/composition-api';
 import { validateName } from '@/utils/validate';
+import { isNil } from 'lodash';
 
 export default {
-  name: 'AddLabel',
+  name: 'LabelEditor',
   props: {
     getStyle: Function,
     title: String,
+    labelData: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   setup(props, ctx) {
     const inputRef = ref(null);
@@ -67,8 +72,8 @@ export default {
       visible: false,
       dialogKey: 1,
       form: {
-        name: '',
-        color: '#2e4fde',
+        name: props.labelData.name || '',
+        color: props.labelData.color || '#2e4fde',
       },
     });
 
@@ -84,20 +89,32 @@ export default {
       Object.assign(state, {
         visible: false,
         form: {
-          name: '',
-          color: '#2e4fde',
+          name: props.labelData.name || '',
+          color: props.labelData.color || '#2e4fde',
         },
       });
     };
 
     // 编辑标注名称
     const handleOk = () => {
-      formRef.value.validate().then(valid => {
+      formRef.value.validate().then((valid) => {
         if (!valid) {
           return;
         }
-        ctx.emit('handleOk', state.form);
-        handleCancel();
+        // 标签信息无改动时，只需关闭弹窗
+        if (
+          !(state.form.color === props.labelData.color && state.form.name === props.labelData.name)
+        ) {
+          ctx.emit('handleOk', props.labelData.id, state.form);
+        }
+        // 原来的传入数据为空，判断是创建标签，故清空，否则是编辑标签，刷新key
+        if (isNil(props.labelData.name)) {
+          handleCancel();
+        } else {
+          Object.assign(state, {
+            dialogKey: state.dialogKey + 1,
+          });
+        }
       });
     };
 
diff --git a/webapp/src/views/dataset/components/picInfoModal/index.vue b/webapp/src/views/dataset/components/picInfoModal/index.vue
index ca2dc02..4b6e36b 100644
--- a/webapp/src/views/dataset/components/picInfoModal/index.vue
+++ b/webapp/src/views/dataset/components/picInfoModal/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseModal
@@ -36,13 +36,12 @@
     >
       <el-carousel-item v-for="item in fileList" :key="item.id">
         <div class="figure-action-row rel" :style="buildActionRow(item)">
-          <div v-if="item.enhanceTag" class="action-tag tc">增强类型：{{ item.enhanceTag.label }}</div>
+          <div v-if="item.enhanceTag" class="action-tag tc">
+            增强类型：{{ item.enhanceTag.label }}
+          </div>
         </div>
         <div class="figure-wrapper carousel-figure-item">
-          <div
-            class="carousel-figure-bg"
-            :style="buildBackground(item)"
-          />
+          <div class="carousel-figure-bg" :style="buildBackground(item)" />
         </div>
         <div class="figure-desc">{{ item.file_name }}</div>
       </el-carousel-item>
@@ -72,7 +71,7 @@ export default {
     },
     fileList: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     initialIndex: {
       type: Number,
@@ -106,13 +105,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .figure-action-row {
-    height: 28px;
-    font-size: 16px;
-    line-height: 28px;
+.figure-action-row {
+  height: 28px;
+  font-size: 16px;
+  line-height: 28px;
 
-    .action-tag {
-      font-weight: bold;
-    }
+  .action-tag {
+    font-weight: bold;
   }
+}
 </style>
diff --git a/webapp/src/views/dataset/components/searchLabel/index.vue b/webapp/src/views/dataset/components/searchLabel/index.vue
index 5348398..9bbdb60 100644
--- a/webapp/src/views/dataset/components/searchLabel/index.vue
+++ b/webapp/src/views/dataset/components/searchLabel/index.vue
@@ -1,23 +1,30 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div v-click-outside="onClickOutside" class="dataset-searchLabel tr">
     <div v-if="state.open">
-      <el-input ref="inputRef" v-model="state.value" placeholder="请输入内容" class="input-with-select" @change="search" @input="search">
+      <el-input
+        ref="inputRef"
+        v-model="state.value"
+        placeholder="请输入内容"
+        class="input-with-select"
+        @change="search"
+        @input="search"
+      >
         <el-button slot="append" size="mini" icon="el-icon-search" @click="search" />
       </el-input>
     </div>
@@ -89,7 +96,7 @@ export default {
   },
 };
 </script>
-<style lang='scss'>
+<style lang="scss">
 .dataset-searchLabel {
   flex: 1;
 
diff --git a/webapp/src/views/dataset/components/tenant/index.vue b/webapp/src/views/dataset/components/tenant/index.vue
index c90676d..8a7d9c5 100644
--- a/webapp/src/views/dataset/components/tenant/index.vue
+++ b/webapp/src/views/dataset/components/tenant/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-dropdown trigger="click" placement="bottom-start" @command="onCommand">
@@ -21,8 +21,12 @@
       <i class="el-icon-arrow-down el-icon--right" />
     </div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item command="0" :disabled="state.datasetListType === '0'" :style="choosed('0')">视觉/文本</el-dropdown-item>
-      <el-dropdown-item command="1" :disabled="state.datasetListType === '1'" :style="choosed('1')">医学影像</el-dropdown-item>
+      <el-dropdown-item command="0" :disabled="state.datasetListType === '0'" :style="choosed('0')"
+        >视觉/语音/文本</el-dropdown-item
+      >
+      <el-dropdown-item command="1" :disabled="state.datasetListType === '1'" :style="choosed('1')"
+        >医学影像</el-dropdown-item
+      >
     </el-dropdown-menu>
   </el-dropdown>
 </template>
@@ -43,14 +47,14 @@ export default {
     const onCommand = (value) => {
       state.datasetListType = value;
       localStorage.setItem('datasetListType', state.datasetListType);
-      if(value === '0') {
-        $router.push({ path: '/data/datasets'});
-      } else if(value === '1'){
-        $router.push({ path: '/data/datasets/medical'});
-      };
+      if (value === '0') {
+        $router.push({ path: '/data/datasets' });
+      } else if (value === '1') {
+        $router.push({ path: '/data/datasets/medical' });
+      }
     };
 
-    const choosed = ((val) => state.datasetListType === val ? 'color: #0000ff' : '');
+    const choosed = (val) => (state.datasetListType === val ? 'color: #0000ff' : '');
 
     return {
       onCommand,
@@ -60,4 +64,3 @@ export default {
   },
 };
 </script>
-
diff --git a/webapp/src/views/dataset/components/textInfoModal/index.vue b/webapp/src/views/dataset/components/textInfoModal/index.vue
index 151ac7c..672b314 100644
--- a/webapp/src/views/dataset/components/textInfoModal/index.vue
+++ b/webapp/src/views/dataset/components/textInfoModal/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseModal
@@ -27,21 +27,15 @@
     @ok="hanleCancel"
   >
     <div class="flex flex-between" style="padding: 20px; margin-bottom: 20px;">
-      <i v-if="showPrev" class="el-icon-arrow-left my-auto icon-max"  @click="toPrev" />
+      <i v-if="showPrev" class="el-icon-arrow-left my-auto icon-max dib" @click="delayToPrev" />
       <TextEditor :loading="state.loading" :txt="state.txt" class="my-auto f1" />
-      <i v-if="showNext" class="el-icon-arrow-right my-auto icon-max" @click="toNext"/>
+      <i v-if="showNext" class="el-icon-arrow-right my-auto icon-max dib" @click="delayToNext" />
     </div>
     <div class="tc">
-      <el-button
-        type="primary"
-        @click="goDetail"
-      >
+      <el-button type="primary" @click="goDetail">
         去标注
       </el-button>
-      <el-button
-        type="danger"
-        @click="deleteText(state.pageInfo)"
-      >
+      <el-button type="danger" @click="deleteText(state.pageInfo)">
         删除文本
       </el-button>
     </div>
@@ -50,14 +44,11 @@
 
 <script>
 import { reactive, watch, computed } from '@vue/composition-api';
-import { omit } from 'lodash';
+import { omit, debounce } from 'lodash';
 
 import BaseModal from '@/components/BaseModal';
 import TextEditor from '@/components/textEditor';
-import { queryFiles } from '@/api/preparation/textData';
-import { transformFiles, readTxt } from "../../util";
-
-const pMap = require('p-map');
+import { search } from '@/api/preparation/textData';
 
 export default {
   name: 'TextInfoModal',
@@ -100,15 +91,13 @@ export default {
       crudParams: props.crud.params,
       loading: false,
       timestamp: Date.now(),
-      txt: "",
+      txt: '',
       file: null,
-      detail: null,
     });
 
     // 重置
     const reset = () => {
       Object.assign(state, {
-        detail: null,
         txt: '',
         file: null,
       });
@@ -121,14 +110,17 @@ export default {
       });
     };
 
+    const delayToNext = debounce(props.toNext, 400);
+    const delayToPrev = debounce(props.toPrev, 400);
+
     // 在弹窗时删除某条文本数据
     const deleteText = (pageInfo) => {
-      return props.deleteFile([{id: state.file.id}]).then(() => {
+      return props.deleteFile([{ id: state.file.id }]).then(() => {
         // 当前为最后一页
         if (pageInfo.total === 1 && pageInfo.current === 1) {
           props.hanleCancel();
         } else {
-           // 回到前一页
+          // 回到前一页
           props.toPrev();
         }
         // 如果当前是第一页，强制更新
@@ -138,69 +130,62 @@ export default {
       });
     };
 
-    const requestFileInfo = params => {
-      const requestParams = omit(params, ['datasetId']);
-      return queryFiles(params.datasetId, requestParams);
-    };
-
     // 获取文件工具方法
     const queryFileUtil = (cfg) => {
-      const requestParams = omit({
-        ...state.pageInfo,
-        ...props.crud.params,
-        ...cfg,
-      }, ['total']);
-      return requestFileInfo(requestParams);
+      const requestParams = omit(
+        {
+          ...state.pageInfo,
+          ...props.crud.params,
+          ...cfg,
+        },
+        ['total']
+      );
+      return search(requestParams);
     };
 
-    const setLoadingStatus = loading => {
+    const setLoadingStatus = (loading) => {
       Object.assign(state, {
         loading,
       });
     };
 
-    const queryFileInfo = async cfg => {
+    const queryFileInfo = async (cfg) => {
       setLoadingStatus(true);
       const filesInfo = await queryFileUtil(cfg);
-      // 获取 minIO 文件路径
-      const datasetFiles = transformFiles(filesInfo.result);
-
-      const textRes = await pMap(
-        datasetFiles,
-        async file => {
-          const txt = await readTxt(file.url);
-          return txt;
-        },
-        {concurrency: 1},
-      );
-
-      const detail = filesInfo.result[0] || null;
+      const file = filesInfo.result[0] || {};
 
       Object.assign(state, {
         pageInfo: filesInfo.page,
-        file: datasetFiles[0],
-        detail,
-        txt: textRes[0] || '',
+        file,
+        txt: file.content || '',
         loading: false,
       });
     };
 
     const showPrev = computed(() => state.pageInfo.current > 1);
     const showNext = computed(() => state.pageInfo.current < state.pageInfo.total);
-    const txtTitle = computed(() => `文本${state.pageInfo.current}`);
-    
-    watch(() => props.pageInfo, next => {
-      queryFileInfo({ current: next.current });
-    }, {lazy: true});
-
-    watch(() => state.timestamp, () => {
-      reset();
-      queryFileInfo({ current: state.pageInfo.current });
-    }, {lazy: true});
+    const txtTitle = computed(() => `文本${state.pageInfo.current || ''}`);
+
+    watch(
+      () => props.pageInfo,
+      (next) => {
+        queryFileInfo({ current: next.current });
+      }
+    );
+
+    watch(
+      () => state.timestamp,
+      () => {
+        reset();
+        queryFileInfo({ current: state.pageInfo.current });
+      }
+    );
 
     return {
       state,
       deleteText,
+      delayToNext,
+      delayToPrev,
       txtTitle,
       showPrev,
       showNext,
@@ -210,18 +195,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .figure-action-row {
-    height: 28px;
-    font-size: 16px;
-    line-height: 28px;
-
-    .action-tag {
-      font-weight: bold;
-    }
-  }
+.figure-action-row {
+  height: 28px;
+  font-size: 16px;
+  line-height: 28px;
 
-  .icon-max {
-    font-size: 20px;
-    cursor: pointer;
+  .action-tag {
+    font-weight: bold;
   }
+}
+
+.icon-max {
+  font-size: 20px;
+  cursor: pointer;
+}
 </style>
diff --git a/webapp/src/views/dataset/custom/GridTable/index.vue b/webapp/src/views/dataset/custom/GridTable/index.vue
new file mode 100644
index 0000000..cbb3526
--- /dev/null
+++ b/webapp/src/views/dataset/custom/GridTable/index.vue
@@ -0,0 +1,127 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div v-if="data.length > 0" class="flex flex-wrap">
+    <div v-for="item in data" :key="item.name" class="mx-10 my-10" style="width: 200px;">
+      <el-card :body-style="{ padding: '0px' }" shadow="hover">
+        <el-checkbox
+          v-model="state.checkboxGroup[item.name]"
+          class="checkbox"
+          @change="onChange(item)"
+        ></el-checkbox>
+        <div class="tc" :class="item.browser === '' ? '' : 'pointer item'" @click="goDetail(item)">
+          <el-image
+            v-if="item.fileType === 'img'"
+            :src="buildFileUrl(item)"
+            alt="item.ext"
+            class="mb-10 w-100 h-100"
+            fit="scale-down"
+            lazy
+          />
+          <IconFont v-else :type="getIcon(item.ext)" class="mb-10" style="font-size: 99px;" />
+          <el-tooltip :open-delay="1000">
+            <div slot="content">{{ item.name }}</div>
+            <div class="ellipsis mb-10 mx-10">
+              {{ item.name }}
+            </div>
+          </el-tooltip>
+        </div>
+      </el-card>
+    </div>
+  </div>
+  <div v-else class="el-table__empty-block">
+    <span class="el-table__empty-text">暂无数据</span>
+  </div>
+</template>
+
+<script>
+import { reactive } from '@vue/composition-api';
+import { getIcon } from '../../util';
+
+export default {
+  name: 'GridTable',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    goDetail: {
+      type: Function,
+      default: () => {},
+    },
+    buildFileUrl: {
+      type: Function,
+      default: () => {},
+    },
+    selections: {
+      type: Array,
+      default: () => [],
+    },
+    changeSelection: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  setup(props) {
+    const state = reactive({
+      selections: [],
+      checkboxGroup: {},
+    });
+
+    const clearSelection = () => {
+      Object.keys(state.checkboxGroup).forEach((key) => {
+        state.checkboxGroup[key] = false;
+      });
+      state.selections = [];
+    };
+
+    const onChange = (d) => {
+      if (state.checkboxGroup[d.name]) {
+        state.selections.push(d);
+      } else {
+        state.selections = state.selections.filter((a) => d.name !== a.name);
+      }
+      props.changeSelection(state.selections);
+    };
+
+    return {
+      state,
+      onChange,
+      clearSelection,
+      getIcon,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/variables.scss';
+
+.checkbox {
+  bottom: -10px;
+  left: 87.5%;
+}
+
+.item {
+  color: $primaryColor;
+
+  &:hover {
+    color: $primaryHoverColor;
+    opacity: 0.8;
+  }
+}
+</style>
diff --git a/webapp/src/views/dataset/custom/index.vue b/webapp/src/views/dataset/custom/index.vue
new file mode 100644
index 0000000..402262f
--- /dev/null
+++ b/webapp/src/views/dataset/custom/index.vue
@@ -0,0 +1,590 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="app-container">
+    <el-card class="mb-10" :body-style="{ padding: '10px 30px' }">
+      <!--tabs页和工具栏-->
+      <div class="custom-tab dib">
+        {{ countInfoTxt }}
+      </div>
+      <div v-if="state.selections.length > 0" class="mb-10">
+        <InfoAlert>
+          <div class="flex flex-between">
+            <div>已选 {{ state.selections.length }} 项</div>
+            <div>
+              <el-button type="text" @click="cancelSelection">取消选择</el-button>
+              <el-popconfirm
+                title="删除后不可恢复，可能会影响数据集使用，继续请确定"
+                @onConfirm="doDelete(state.selections)"
+              >
+                <el-button slot="reference" class="danger" type="text">
+                  批量删除
+                </el-button>
+              </el-popconfirm>
+            </div>
+          </div>
+        </InfoAlert>
+      </div>
+      <div>
+        <el-button
+          :disabled="state.disableImport"
+          icon="el-icon-plus"
+          @click="toggleUploadFile(true)"
+        >
+          导入文件
+        </el-button>
+      </div>
+    </el-card>
+    <!-- 表格内容 -->
+    <el-card v-loading="state.loading" :body-style="{ padding: '10px 20px 20px 20px' }">
+      <div
+        slot="header"
+        class="flex flex-between flex-vertical-align"
+        style=" padding: 0 10px; font-weight: bold; color: #c0c4cc;"
+      >
+        <div class="flex flex-vertical-align">
+          <div>/&nbsp;&nbsp;</div>
+          <el-breadcrumb :key="state.breadcrumbKey" separator="/">
+            <el-breadcrumb-item v-for="path in state.pathList" :key="path.depth">
+              <a @click="handlePathClick(path)">{{ path.name }}</a>
+            </el-breadcrumb-item>
+          </el-breadcrumb>
+          <div>&nbsp;&nbsp;/</div>
+        </div>
+        <div>
+          <el-tooltip effect="dark" content="刷新" placement="top">
+            <el-button
+              class="filter-item with-border"
+              style="padding: 8px;"
+              icon="el-icon-refresh"
+              @click="handleRefresh"
+            />
+          </el-tooltip>
+          <el-tooltip effect="dark" content="切换布局" placement="top">
+            <el-button style="padding: 8px;" class="with-border" @click="changeMode">
+              <IconFont :type="state.listMode ? 'viewlist' : 'icon'" />
+            </el-button>
+          </el-tooltip>
+        </div>
+      </div>
+      <BaseTable
+        v-if="state.listMode"
+        ref="listRef"
+        :columns="columns"
+        :data="state.data"
+        :default-sort="{ prop: 'lastModified', order: 'descending' }"
+        @selection-change="onSelectionChange"
+      >
+        <template #name="scope">
+          <div class="vm">
+            <span v-if="scope.row.browser === ''">
+              <IconFont :type="getIcon(scope.row.ext)" style="font-size: 18px;" />
+              <el-tooltip :open-delay="1000">
+                <div slot="content">{{ scope.row.name }}</div>
+                <div class="ellipsis mb-10 mx-10 di">
+                  {{ scope.row.name }}
+                </div>
+              </el-tooltip>
+            </span>
+            <a v-else class="primary" @click="goDetail(scope.row)">
+              <IconFont :type="getIcon(scope.row.ext)" style="font-size: 18px;" />
+              <el-tooltip :open-delay="1000">
+                <div slot="content">{{ scope.row.name }}</div>
+                <div class="ellipsis mb-10 mx-10 di">
+                  {{ scope.row.name }}
+                </div>
+              </el-tooltip>
+            </a>
+          </div>
+        </template>
+      </BaseTable>
+      <GridTable
+        v-else
+        ref="gridTableRef"
+        :data="state.data"
+        :goDetail="goDetail"
+        :buildFileUrl="buildFileUrl"
+        :selections="state.selections"
+        :changeSelection="onSelectionChange"
+      />
+      <el-pagination
+        class="tc mt-20"
+        layout="total, prev, pager, next, jumper"
+        background
+        :page-size="30"
+        :current-page="state.pageNum"
+        :total="state.total"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+    <BaseModal
+      :key="state.formKey"
+      title="导入文件"
+      width="600px"
+      center
+      :loading="state.uploading"
+      :visible="state.uploadFileVisible"
+      @change="toggleUploadFile"
+      @ok="handleSubmit"
+    >
+      <el-form ref="uploadFormRef" :model="state.uploadForm" label-width="80px">
+        <el-form-item label="上传文件" prop="fileList">
+          <UploadInline
+            ref="uploadRef"
+            hash
+            action="fakeApi"
+            :params="uploadParams"
+            list-type="text"
+            accept="unspecified"
+            :acceptSize="8"
+            @uploadSuccess="uploadSuccess"
+            @uploadError="uploadError"
+          />
+        </el-form-item>
+        <el-form-item label="保存路径" prop="uploadPath">
+          <el-input
+            v-model="state.uploadForm.uploadPath"
+            :placeholder="`/根目录/${state.currentPrefix}`"
+            disabled
+          />
+        </el-form-item>
+      </el-form>
+    </BaseModal>
+    <BaseModal
+      :key="state.modalId"
+      :visible="state.showModal"
+      center
+      :title="modalTitle"
+      class="carousel-figure-dialog"
+      width="720px"
+      :showCancel="false"
+      okText="关闭"
+      @change="closeModal"
+      @ok="closeModal"
+    >
+      <div
+        v-if="state.modalType === 'img'"
+        class="carousel-figure-bg"
+        :style="buildBackground(state.picFileUrl)"
+      />
+      <div
+        v-if="state.modalType === 'txt'"
+        class="flex flex-between"
+        style="padding: 20px; margin-bottom: 20px;"
+      >
+        <TextEditor :loading="state.showTxtLoading" :txt="state.txt" class="my-auto f1" />
+      </div>
+    </BaseModal>
+  </div>
+</template>
+
+<script>
+import { reactive, computed, watch, ref, onMounted } from '@vue/composition-api';
+import { Message } from 'element-ui';
+
+import BaseModal from '@/components/BaseModal';
+import BaseTable from '@/components/BaseTable';
+import InfoAlert from '@/components/InfoAlert';
+import TextEditor from '@/components/textEditor';
+import { fileSizeFormatter } from '@/utils';
+import UploadInline from '@/components/UploadForm/inline';
+import { minioBaseUrl } from '@/utils/minIO';
+import { getCustomFileList } from '@/api/preparation/datafile';
+
+import { getFileType, getIcon } from '../util';
+import GridTable from './GridTable';
+
+export default {
+  name: 'CustomList',
+  components: {
+    BaseModal,
+    BaseTable,
+    InfoAlert,
+    TextEditor,
+    UploadInline,
+    GridTable,
+  },
+  setup(props, ctx) {
+    const { $route } = ctx.root;
+    const { params = {} } = $route;
+    const listRef = ref(null);
+    const uploadRef = ref(null);
+    const gridTableRef = ref(null);
+    const columns = [
+      {
+        prop: 'selections',
+        type: 'selection',
+      },
+      {
+        label: '文件名称',
+        prop: 'name',
+        minWidth: '200px',
+        sortable: true,
+      },
+      {
+        label: '文件大小',
+        prop: 'size',
+        formatter: fileSizeFormatter,
+        sortable: true,
+      },
+      {
+        label: '文件类型',
+        prop: 'ext',
+        formatter: (val) => (val === 'dir' ? '文件夹' : val),
+      },
+      {
+        label: '最近修改时间',
+        prop: 'lastModified',
+        minWidth: '100px',
+        sortable: true,
+        type: 'time',
+      },
+    ];
+    const defaultDir = 'versionFile/V0001';
+    const defaultPrefix = `dataset/${params.datasetId}/${defaultDir}`; // 自定义数据集脚本导入的默认路径
+
+    const state = reactive({
+      disableImport: false,
+      currentPrefix: '',
+      pathList: [{ name: '根目录', prefix: '', depth: 1 }],
+      breadcrumbKey: 1,
+      data: [],
+      loading: false,
+      uploading: false,
+      fileCount: 0, // 根目录下递归得出总的文件数
+      listMode: true,
+      selections: [], // 当前选中行
+      uploadFileVisible: false,
+      uploadForm: {
+        fileList: [],
+        uploadPath: '',
+      },
+      showModal: false,
+      modalId: 0,
+      modalType: '',
+      fileUrl: '',
+      showTxtLoading: false,
+      txt: '',
+      pageNum: 1,
+      total: 0,
+    });
+
+    const changeMode = () => {
+      state.listMode = !state.listMode;
+      state.selections = [];
+    };
+
+    const buildFileUrl = (row) =>
+      `${minioBaseUrl}/${defaultPrefix}/${state.currentPrefix}${row.name}`;
+
+    const previewFile = async (row) => {
+      state.showModal = true;
+      const fileUrl = buildFileUrl(row);
+      if (row.fileType === 'img') {
+        Object.assign(state, {
+          modalType: 'img',
+          picFileUrl: fileUrl,
+        });
+      }
+      if (row.fileType === 'txt') {
+        Object.assign(state, {
+          modalType: 'txt',
+          showTxtLoading: true,
+        });
+        const result = await fetch(fileUrl).then((res) => res.text());
+        Object.assign(state, {
+          txt: result,
+          showTxtLoading: false,
+        });
+      }
+    };
+
+    const closeModal = () => {
+      Object.assign(state, {
+        modalId: state.modalId + 1,
+        showModal: false,
+        fileUrl: '',
+        modalType: '',
+        txt: '',
+      });
+    };
+
+    const modalTitle = computed(() => {
+      const title = state.modalType === 'img' ? '图片' : '文本';
+      return `查看${title}`;
+    });
+
+    // 分页查询当前路径下的文件列表
+    const getFilesByApi = async (prefix, pageNum = 1, pageSize = 30) =>
+      getCustomFileList({
+        datasetId: params.datasetId,
+        filePath: `/${defaultDir}/${prefix}`,
+        pageSize,
+        pageNum,
+      });
+
+    // 默认不递归，只查找当前路径下的文件
+    const getFiles = async (prefix, recursive = false) =>
+      window.minioClient.listObjects(`${defaultPrefix}/${prefix}`, recursive);
+
+    // 更新根目录子文件的统计数量
+    const updateFileCount = async () => {
+      const totalData = await getFiles(state.currentPrefix, true);
+      state.fileCount = totalData.length;
+    };
+
+    // 路径跳转
+    const handlePathClick = (path) => {
+      state.pathList.length = path.depth;
+      Object.assign(state, {
+        breadcrumbKey: path.depth,
+        currentPrefix: path.prefix,
+      });
+    };
+
+    // 数据刷新
+    const updateDataFromApi = (rawData) => {
+      const { rows, pageNum, total } = rawData;
+      Object.assign(state, {
+        pageNum,
+        total,
+      });
+      const listData = rows?.map((d) => {
+        if (d.dir) {
+          return {
+            name: d.name,
+            size: '-',
+            ext: 'dir',
+            fileType: 'dir',
+            lastModified: '-',
+            browser: 'inside',
+          };
+        }
+        // 对非文件夹类型的数据进行处理
+        const nameArr = d.name.split('.');
+        let ext = nameArr.length > 1 ? nameArr[nameArr.length - 1].toLowerCase() : '-';
+        // 过滤一些文件名包含（.数字）的文件
+        // eslint-disable-next-line no-restricted-globals
+        if (!isNaN(ext)) ext = '-';
+        return {
+          name: d.name,
+          size: d.size,
+          ext,
+          fileType: getFileType(ext),
+          lastModified: d.lastModified,
+          browser: ['jpg', 'txt', 'png', 'bmp', 'jpeg'].includes(ext) ? 'preview' : '',
+        };
+      });
+      Object.assign(state, {
+        data: listData || [],
+      });
+    };
+
+    // 手动刷新
+    const handleRefresh = async () => {
+      state.loading = true;
+      const rawData = await getFilesByApi(state.currentPrefix);
+      updateDataFromApi(rawData);
+      state.loading = false;
+      updateFileCount();
+    };
+
+    // 页码跳转
+    const handleCurrentChange = async (pageNum) => {
+      state.loading = true;
+      const rawData = await getFilesByApi(state.currentPrefix, pageNum);
+      updateDataFromApi(rawData);
+      state.loading = false;
+    };
+
+    // 清空上传表单
+    const resetUpload = () => {
+      state.uploading = false;
+      uploadRef.value.formRef.reset();
+    };
+
+    const toggleUploadFile = (visible = false) => {
+      state.uploadFileVisible = visible;
+      !visible && resetUpload();
+    };
+
+    // 点击进入下一级文件夹或者对可预览文件进行展示
+    const goDetail = (row) => {
+      if (row.browser === 'inside') {
+        const { pathList } = state;
+        const pathLength = pathList.length;
+        const path = {
+          name: row.name,
+          prefix: `${pathList[pathLength - 1].prefix}${row.name}/`,
+          depth: `${pathLength + 1}`,
+        };
+        pathList.push(path);
+        Object.assign(state, {
+          currentPrefix: `${state.currentPrefix}${row.name}/`,
+          pathList,
+          pageNum: 1,
+        });
+      } else if (row.browser === 'preview') {
+        previewFile(row);
+      }
+    };
+
+    const cancelSelection = () => {
+      if (state.listMode) {
+        listRef.value.$refs.table.clearSelection();
+      } else {
+        gridTableRef.value.clearSelection();
+      }
+      state.selections = [];
+    };
+
+    // 删除文件夹
+    const doRemoveDir = async (dir) => {
+      // 获取所有嵌套的子文件，删除所有子文件就是删除该文件夹
+      const rawNestedSelections = await getFiles(`${state.currentPrefix}${dir.name}/`, true);
+      return Promise.all(
+        rawNestedSelections.map((d) => {
+          return window.minioClient.removeObject(`${d.name}`);
+        })
+      );
+    };
+
+    // 批量删除操作
+    const doDelete = (selections) => {
+      state.loading = true;
+      Promise.all(
+        selections.map((d) => {
+          if (d.ext === 'dir') {
+            return doRemoveDir(d);
+          }
+          return window.minioClient.removeObject(
+            `${defaultPrefix}/${state.currentPrefix}${d.name}`
+          );
+        })
+      )
+        .then(() => {
+          Message.success('删除成功');
+          handleRefresh();
+          cancelSelection();
+        })
+        .catch((err) => {
+          Message.error('删除失败');
+          console.error(err);
+          state.loading = false;
+        });
+    };
+
+    const countInfoTxt = computed(() => {
+      return `全部（${state.fileCount}）`;
+    });
+
+    // 上传参数
+    const uploadParams = computed(() => {
+      const suffix = state.currentPrefix === '' ? '' : `/${state.currentPrefix.slice(0, -1)}`;
+      return { objectPath: `${defaultPrefix}${suffix}` };
+    });
+
+    const uploadSuccess = () => {
+      Message.success('上传成功');
+      toggleUploadFile();
+      resetUpload();
+      handleRefresh();
+    };
+
+    const uploadError = (err) => {
+      console.error(err);
+      Message.error(err.message || '上传文件失败');
+      state.uploading = false;
+    };
+
+    const handleSubmit = () => {
+      state.uploading = true;
+      uploadRef.value.uploadSubmit();
+    };
+
+    const onSelectionChange = (selections) => {
+      state.selections = selections;
+    };
+
+    const buildBackground = (url) => {
+      return {
+        backgroundImage: `url("${url}")`,
+        width: `600px`,
+        height: `300px`,
+      };
+    };
+
+    watch(
+      () => state.currentPrefix,
+      async (next) => {
+        state.loading = true;
+        setTimeout(async () => {
+          const rawData = await getFilesByApi(next);
+          updateDataFromApi(rawData);
+          state.loading = false;
+          cancelSelection();
+        }, 300);
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    onMounted(() => {
+      updateFileCount();
+    });
+
+    return {
+      listRef,
+      uploadRef,
+      gridTableRef,
+      changeMode,
+      countInfoTxt,
+      uploadParams,
+      uploadSuccess,
+      uploadError,
+      handleSubmit,
+      handleCurrentChange,
+      doDelete,
+      columns,
+      state,
+      handlePathClick,
+      handleRefresh,
+      toggleUploadFile,
+      goDetail,
+      onSelectionChange,
+      cancelSelection,
+      closeModal,
+      modalTitle,
+      buildBackground,
+      buildFileUrl,
+      getIcon,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/variables.scss';
+
+.custom-tab {
+  padding: 10px 5px;
+  margin-bottom: 10px;
+  font-size: 14px;
+  border-bottom: 2px solid $primaryColor;
+}
+</style>
diff --git a/webapp/src/views/dataset/entrance.vue b/webapp/src/views/dataset/entrance.vue
index d3460d7..cf9bcb2 100644
--- a/webapp/src/views/dataset/entrance.vue
+++ b/webapp/src/views/dataset/entrance.vue
@@ -1,33 +1,39 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="flex flex-center flex-col entry-wrapper">
     <div class="flex box-wrapper">
-      <div :class="['radio-label', state.entrance === 0 ? 'border-chosen': 'border']" @click="changeRadio(0)">
-        <img src="@/assets/images/dataset/normalDataset.png" width="50%"/>
+      <div
+        :class="['radio-label', state.entrance === 0 ? 'border-chosen' : 'border']"
+        @click="changeRadio(0)"
+      >
+        <img src="@/assets/images/dataset/normalDataset.png" width="50%" />
         <div class="mb-20 mt-20 bold">
-          视觉/文本
+          视觉/语音/文本
         </div>
         <div class="tl">
-          针对一般计算机视觉、文本的数据标注，目前支持图像分类、目标检测、目标跟踪和文本分类场景
+          针对图像、视频、语音、文本及自定义格式的数据标注，涵常规深度学习领域场景
         </div>
       </div>
-      <div :class="['radio-label', state.entrance === 1 ? 'border-chosen': 'border']" @click="changeRadio(1)">
-        <img src="@/assets/images/dataset/medicalDataset.png" width="50%"/>
+      <div
+        :class="['radio-label', state.entrance === 1 ? 'border-chosen' : 'border']"
+        @click="changeRadio(1)"
+      >
+        <img src="@/assets/images/dataset/medicalDataset.png" width="50%" />
         <div class="mb-20 mt-20 bold">
           医学影像
         </div>
@@ -48,16 +54,16 @@ import { reactive } from '@vue/composition-api';
 import { cacheDatasetType } from './util';
 
 export default {
-  name: "Entrance",
+  name: 'Entrance',
   setup(props, ctx) {
     const { $router } = ctx.root;
 
     const redirect = (val) => {
-      if(val === 0) {
-        $router.push({ path: '/data/datasets/list'});
-      } else if(val === 1){
-        $router.push({ path: '/data/datasets/medical'});
-      };
+      if (val === 0) {
+        $router.push({ path: '/data/datasets/list' });
+      } else if (val === 1) {
+        $router.push({ path: '/data/datasets/medical' });
+      }
     };
 
     const state = reactive({
@@ -84,38 +90,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '@/assets/styles/variables.scss';
+@import '@/assets/styles/variables.scss';
 
-  .entry-wrapper {
-    height: calc(100vh - 50px - 32px);
-  }
+.entry-wrapper {
+  height: calc(100vh - 50px - 32px);
+}
 
-  .box-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 1000px;
-    padding-right: 125px;
-    padding-left: 125px;
-    margin: 0 auto 64px;
-  }
+.box-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 1000px;
+  padding-right: 125px;
+  padding-left: 125px;
+  margin: 0 auto 64px;
+}
 
-  .radio-label {
-    width: 250px;
-    min-height: 320px;
-    padding: 30px 16px;
-    line-height: 24px;
-    text-align: center;
-    cursor: pointer;
-    border-radius: 12px;
-  }
+.radio-label {
+  width: 250px;
+  min-height: 320px;
+  padding: 30px 16px;
+  line-height: 24px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 12px;
+}
 
-  .border {
-    border: 2px solid $borderColor;
-  }
+.border {
+  border: 2px solid $borderColor;
+}
 
-  .border-chosen {
-    background-color: $subMenuBg;
-    border: 2px solid $primaryColor;
-  }
+.border-chosen {
+  background-color: $subMenuBg;
+  border: 2px solid $primaryColor;
+}
 </style>
diff --git a/webapp/src/views/dataset/fork.vue b/webapp/src/views/dataset/fork.vue
index 0a13b6c..2a4cf5b 100644
--- a/webapp/src/views/dataset/fork.vue
+++ b/webapp/src/views/dataset/fork.vue
@@ -1,25 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <script>
 import NProgress from 'nprogress'; // progress bar
 import { getDatasetType } from './util';
 
 export default {
-  name: "DatasetFork",
+  name: 'DatasetFork',
   beforeRouteEnter(to, from, next) {
     // 根据用户选择场景类型跳转到具体列表页
     // 0: 视觉/文本场景，1: 医学场景
@@ -27,9 +27,9 @@ export default {
     const datasetListType = getDatasetType();
     // 全局触发progres，这里需要完成
     NProgress.done();
-    if(datasetListType === 0) {
+    if (datasetListType === 0) {
       next('/data/datasets/list');
-    } else if(datasetListType === 1) {
+    } else if (datasetListType === 1) {
       next('/data/datasets/medical');
     } else {
       next('/data/datasets/entrance');
diff --git a/webapp/src/views/dataset/list/action.js b/webapp/src/views/dataset/list/action.js
index f6dccd5..2f86f6f 100644
--- a/webapp/src/views/dataset/list/action.js
+++ b/webapp/src/views/dataset/list/action.js
@@ -1,20 +1,30 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
- 
-import { statusCodeMap, dataTypeCodeMap, annotationCodeMap, isPublishDataset } from '../util';
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { isNil } from 'lodash';
+import {
+  dataTypeCodeMap,
+  annotationCodeMap,
+  isPublishDataset,
+  isCustomDataset,
+  isIncludeStatus,
+  isStatus,
+  annotationWhitelist,
+  isPresetDataset,
+} from '../util';
 
 export default {
   name: 'DatasetAction',
@@ -34,7 +44,19 @@ export default {
     checkImport: Function, // 查询外部数据集导入状态
   },
   render(h, { data, props }) {
-    const { showPublish, uploadDataFile, goDetail, autoAnnotate, gotoVersion, reAnnotation, track, dataEnhance, topDataset, editDataset, checkImport } = props;
+    const {
+      showPublish,
+      uploadDataFile,
+      goDetail,
+      autoAnnotate,
+      gotoVersion,
+      reAnnotation,
+      track,
+      dataEnhance,
+      topDataset,
+      editDataset,
+      checkImport,
+    } = props;
     const columnProps = {
       ...data,
       scopedSlots: {
@@ -42,9 +64,20 @@ export default {
           return (
             <span>
               <span>操作</span>
-              <el-tooltip effect='dark' placement='top' class="ml-10">
-                <div slot='content'>如果文本数据集关联的不是预置标签组，<br/>自动标注按钮可能无法使用</div>
-                <i class='el-icon-question'/>
+              <el-tooltip effect="dark" placement="top" class="ml-10">
+                <div slot="content">
+                  数据集「自动标注」功能需要关联预置标签组，
+                  <br />
+                  详见
+                  <a
+                    href={`${process.env.VUE_APP_DOCS_URL}module/dataset/intro`}
+                    class="primary"
+                    target="_blank"
+                  >
+                    说明文档
+                  </a>
+                </div>
+                <i class="el-icon-question" />
               </el-tooltip>
             </span>
           );
@@ -55,17 +88,33 @@ export default {
               type: 'text',
               disabled: row.disabledAction,
             },
-            style: {
-              marginLeft: '0px',
-              marginRight: '10px',
-            },
+            class: 'action-button',
           };
 
-          // 查看标注按钮在 自动标注中 未采样 采样中 采样失败 目标跟踪中 数据增强中 目标跟踪失败 时不显示, 此外，类型为视频时，自动标注完成也不可查看(此时下游会进行目标跟踪)
-          let showCheckButton = !['AUTO_ANNOTATING', 'UNSAMPLED', 'SAMPLING', 'SAMPLE_FAILED', 'TRACKING', 'ENHANCING', 'TRACK_FAILED'].includes(statusCodeMap[row.status]);
-          if (row.dataType === dataTypeCodeMap.VIDEO && statusCodeMap[row.status] === 'AUTO_ANNOTATED') {
+          // 查看标注按钮在 自动标注中 未采样 采样中 采样失败 目标跟踪中 数据增强中 目标跟踪失败，导入中 时不显示, 此外，类型为视频时，自动标注完成也不可查看(此时下游会进行目标跟踪)
+          let showCheckButton = !isIncludeStatus(row, [
+            'AUTO_ANNOTATING',
+            'UNSAMPLED',
+            'SAMPLING',
+            'SAMPLE_FAILED',
+            'TRACKING',
+            'ENHANCING',
+            'TRACK_FAILED',
+            'IMPORTING',
+          ]);
+          if (row.dataType === dataTypeCodeMap.VIDEO && isStatus(row, 'AUTO_ANNOTATED')) {
             showCheckButton = false;
           }
+          // 根据数据类型区分文字
+          const normalCheckButton = isCustomDataset(row) ? (
+            <el-button {...btnProps} onClick={() => goDetail(row)}>
+              查看文件
+            </el-button>
+          ) : (
+            <el-button {...btnProps} onClick={() => goDetail(row)}>
+              查看标注
+            </el-button>
+          );
           // 查看标注按钮根据版本发布的状态决定是否置灰加提示
           const checkButton = isPublishDataset(row) ? (
             <el-tooltip content="当前版本生成中，请稍后刷新" placement="top">
@@ -74,15 +123,16 @@ export default {
               </el-button>
             </el-tooltip>
           ) : (
-            <el-button {...btnProps} onClick={() => goDetail(row)}>
-              查看标注
-            </el-button>
+            normalCheckButton
           );
 
+          const isAutoWhite =
+            annotationWhitelist.auto.includes(row.annotateType) &&
+            row.dataType !== dataTypeCodeMap.TABLE;
           // 自动标注按钮只在 未标注 标注中 时显示
-          let showAutoButton = ['UNANNOTATED', 'ANNOTATING'].includes(statusCodeMap[row.status]);
+          let showAutoButton = isIncludeStatus(row, ['UNANNOTATED', 'ANNOTATING']) && isAutoWhite;
           // 如果是文本分类，只有使用了预置标签组的数据集可以进行自动标注，autoAnnotation字段
-          if(row.dataType === dataTypeCodeMap.TEXT && !row.autoAnnotation) {
+          if (row.annotateType === annotationCodeMap.TEXTCLASSIFY && !row.autoAnnotation) {
             showAutoButton = false;
           }
           // 自动标注按钮
@@ -94,13 +144,13 @@ export default {
 
           const showPublishEventProps = {
             on: {
-              'onConfirm': () => showPublish(row),
+              onConfirm: () => showPublish(row),
             },
           };
 
           const reAnnotationEventProps = {
             on: {
-              'onConfirm': () => reAnnotation(row),
+              onConfirm: () => reAnnotation(row),
             },
           };
 
@@ -109,13 +159,15 @@ export default {
           // 带有确认提示的发布按钮
           const publishConfirmButton = (
             <el-popconfirm
-              popper-class='reannotate-popconfirm'
-              placement='bottom'
-              title='提示：自动标注已完成，尚未进行人工确认，是否发布？'
-              width='200'
+              popper-class="reannotate-popconfirm"
+              placement="bottom"
+              title="提示：自动标注已完成，尚未进行人工确认，是否发布？"
+              width="200"
               {...showPublishEventProps}
             >
-              <el-button slot='reference' {...btnProps}>发布</el-button>
+              <el-button slot="reference" {...btnProps}>
+                发布
+              </el-button>
             </el-popconfirm>
           );
           // 进入对话框的发布按钮
@@ -124,23 +176,46 @@ export default {
               发布
             </el-button>
           );
-          
-          // 当类型为文本时,不显示发布按钮
-          // 当类型为视频时,状态为标注完成、目标跟踪完成时显示发布按钮,其余状态不显示发布按钮
-          // 当类型为图片时,状态为自动标注完成时显示有弹窗确认的发布按钮,为标注完成时显示发布按钮,其余状态不显示发布按钮
-          if (row.dataType === dataTypeCodeMap.VIDEO) {
-            if (['ANNOTATED', 'TRACK_SUCCEED'].includes(statusCodeMap[row.status])) {
-              showPublishButton = true;
-              publishButton = publishDialogButton;
-            }
-          } else if (row.dataType === dataTypeCodeMap.IMAGE) {
-            if (statusCodeMap[row.status] === 'AUTO_ANNOTATED') {
+
+          // 状态为自动标注完成时 图片、文本、表格、音频数据类型会显示有弹窗确认的发布按钮
+          // 状态为标注完成时 图片、文本、表格、音频、视频数据类型显示发布按钮
+          // 状态为目标跟踪完成时 显示发布按钮 其余状态不显示(默认false)
+          if (isStatus(row, 'AUTO_ANNOTATED')) {
+            if (
+              [
+                dataTypeCodeMap.IMAGE,
+                dataTypeCodeMap.TEXT,
+                dataTypeCodeMap.TABLE,
+                dataTypeCodeMap.AUDIO,
+              ].includes(row.dataType)
+            ) {
               showPublishButton = true;
               publishButton = publishConfirmButton;
-            } else if (statusCodeMap[row.status] === 'ANNOTATED') {
+            }
+          } else if (isStatus(row, 'ANNOTATED')) {
+            if (
+              [
+                dataTypeCodeMap.IMAGE,
+                dataTypeCodeMap.TEXT,
+                dataTypeCodeMap.TABLE,
+                dataTypeCodeMap.AUDIO,
+                dataTypeCodeMap.VIDEO,
+              ].includes(row.dataType)
+            ) {
               showPublishButton = true;
               publishButton = publishDialogButton;
             }
+          } else if (isStatus(row, 'TRACK_SUCCEED')) {
+            showPublishButton = true;
+            publishButton = publishDialogButton;
+          }
+
+          // 特殊情况处理 文本和表格数据集目前只能发布一次
+          if (
+            [dataTypeCodeMap.TEXT, dataTypeCodeMap.TABLE].includes(row.dataType) &&
+            !isNil(row.currentVersionName)
+          ) {
+            showPublishButton = false;
           }
 
           let showUploadButton = false;
@@ -150,39 +225,45 @@ export default {
               导入
             </el-button>
           );
-          // 类型为视频时，当状态为未采样时才可导入，其余状态不可导入
-          // 类型为图片时，自动标注中、数据增强中 目标跟踪失败 不可导入，其余状态均可导入
-          if (row.dataType === dataTypeCodeMap.VIDEO) {
-            if (statusCodeMap[row.status] === 'UNSAMPLED') {
-              showUploadButton = true;
-            }
-          } else if (!['AUTO_ANNOTATING', 'ENHANCING', 'TRACK_FAILED'].includes(statusCodeMap[row.status])) {
+          // 不限制文件类型（图像、视频、文本、表格均可多次导入）
+          // 采样中、导入中、自动标注中、数据增强中 目标跟踪中不可导入，其余状态均可导入
+          if (
+            !isIncludeStatus(row, [
+              'SAMPLING',
+              'AUTO_ANNOTATING',
+              'ENHANCING',
+              'TRACKING',
+              'IMPORTING',
+            ])
+          ) {
             showUploadButton = true;
           }
 
           // 当标注完成、目标跟踪完成，以及非视频的自动标注完成时显示重新自动标注按钮 (若为视频此时下游会进行目标跟踪)
-          let showReAutoButton = ['ANNOTATED', 'TRACK_SUCCEED'].includes(statusCodeMap[row.status]) || (statusCodeMap[row.status] === 'AUTO_ANNOTATED' && row.dataType === dataTypeCodeMap.IMAGE);
-          // 文本不能重新自动标注
-          if (row.dataType === dataTypeCodeMap.TEXT) { 
-            showReAutoButton = false; 
-          }
+          const judgeState =
+            isIncludeStatus(row, ['ANNOTATED', 'TRACK_SUCCEED']) ||
+            (isStatus(row, 'AUTO_ANNOTATED') && row.dataType === dataTypeCodeMap.IMAGE);
+          const isReautoWhite = annotationWhitelist.reAuto.includes(row.annotateType);
+          let showReAutoButton = judgeState && isReautoWhite;
           // 重新自动标注按钮
           const reAutoButton = (
             <el-popconfirm
-              popper-class='reannotate-popconfirm'
-              placement='top-end'
-              title='提示：确认清除现有标注并重新自动标注？'
-              width='200'
+              popper-class="reannotate-popconfirm"
+              placement="top-end"
+              title="提示：确认清除现有标注并重新自动标注？"
+              width="200"
               {...reAnnotationEventProps}
             >
-              <el-button slot='reference' {...btnProps} >
+              <el-button slot="reference" {...btnProps}>
                 重新自动标注
               </el-button>
             </el-popconfirm>
           );
-          
+
           // 当目标跟踪标注类型的数据集状态为自动标注完成 标注完成时，显示目标跟踪按钮
-          let showTrackButton = row.annotateType === annotationCodeMap.TRACK && ['AUTO_ANNOTATED','ANNOTATED'].includes(statusCodeMap[row.status]);
+          let showTrackButton =
+            row.annotateType === annotationCodeMap.TRACK &&
+            isIncludeStatus(row, ['AUTO_ANNOTATED', 'ANNOTATED']);
           // 目标跟踪按钮
           const trackButton = (
             <el-button {...btnProps} onClick={() => track(row, false)}>
@@ -191,7 +272,7 @@ export default {
           );
 
           // 当目标跟踪失败时，显示重新目标跟踪按钮
-          let showReTrackButton = ['TRACK_FAILED', 'TRACK_SUCCEED'].includes(statusCodeMap[row.status]);
+          let showReTrackButton = isIncludeStatus(row, ['TRACK_FAILED', 'TRACK_SUCCEED']);
           // 重新目标跟踪按钮
           const reTrackButton = (
             <el-button {...btnProps} onClick={() => track(row, true)}>
@@ -201,7 +282,9 @@ export default {
 
           // 展示数据增强入口
           // 当数据类型为图片,并且状态为自动标注完成、标注完成展示数据增强入口
-          let showAugmentButton = row.dataType === dataTypeCodeMap.IMAGE && ['AUTO_ANNOTATED', 'ANNOTATED'].includes(statusCodeMap[row.status]);
+          let showAugmentButton =
+            row.dataType === dataTypeCodeMap.IMAGE &&
+            isIncludeStatus(row, ['AUTO_ANNOTATED', 'ANNOTATED']);
           // 数据增强按钮
           const augmentButton = (
             <el-button {...btnProps} onClick={() => dataEnhance(row)}>
@@ -210,14 +293,16 @@ export default {
           );
 
           // 有当前版本且状态不为自动标注中、数据增强中、目标跟踪中，导入中
-          let showVersionButton = (row.currentVersionName && !['AUTO_ANNOTATING', 'ENHANCING', 'TRACKING', 'IMPORTING'].includes(statusCodeMap[row.status]));
+          let showVersionButton =
+            row.currentVersionName &&
+            !isIncludeStatus(row, ['AUTO_ANNOTATING', 'ENHANCING', 'TRACKING', 'IMPORTING']);
           // 历史版本按钮
           const versionButton = (
             <el-button {...btnProps} onClick={() => gotoVersion(row)}>
               历史版本
             </el-button>
           );
-          
+
           let showTopButton = true;
           // 置顶按钮总会显示
           const topButton = (
@@ -235,16 +320,22 @@ export default {
           );
 
           // 导入外部数据集
-          const showImportButton = row.import === true && ['UNANNOTATED'].includes(statusCodeMap[row.status]);
+          const showImportButton = row.import === true && isIncludeStatus(row, ['UNANNOTATED']);
 
           // 外部导入数据集
           const importDatasetButton = showImportButton ? (
-            <a {...btnProps} onClick={() => checkImport(row)} href="http://docs.dubhe.ai/docs/module/dataset/import-dataset" target="_blank" class="primary">
+            <a
+              {...btnProps}
+              onClick={() => checkImport(row)}
+              href={`${process.env.VUE_APP_DOCS_URL}module/dataset/import-dataset`}
+              target="_blank"
+              class="primary"
+            >
               导入本地数据集&nbsp;
               <IconFont type="externallink" />
             </a>
           ) : null;
-          
+
           // 数据集版本发布或者切换中 只允许置顶 修改 历史版本，查看标注置灰
           if (isPublishDataset(row)) {
             showPublishButton = false;
@@ -258,10 +349,10 @@ export default {
             showAugmentButton = false;
             showTopButton = true;
             showEditButton = true;
-          };
+          }
 
-          // 预置数据集只具备查看标注,历史版本功能。 
-          if (row.type === 2) {
+          // 预置数据集只具备查看标注,历史版本功能。
+          if (isPresetDataset(row.type)) {
             showPublishButton = false;
             showUploadButton = false;
             showCheckButton = true;
@@ -273,8 +364,8 @@ export default {
             showAugmentButton = false;
             showTopButton = false;
             showEditButton = false;
-          };
-          // 导入的自定义数据集只允许删除 置顶 修改操作
+          }
+          // 脚本导入的数据集只允许删除 置顶 修改操作
           if (row.import) {
             showUploadButton = false;
             showAutoButton = false;
@@ -282,72 +373,92 @@ export default {
             showTrackButton = false;
             showReTrackButton = false;
             showAugmentButton = false;
-            // 导入完成才可以查看标注
-            showCheckButton = (statusCodeMap[row.status] === 'ANNOTATED');
-          };
+            showCheckButton = false;
+            // 数据格式为自定义的,可以查看文件，其它格式的，根据数据集状态查看标注
+            if (annotationCodeMap.CUSTOM === row.annotateType) {
+              showCheckButton = true;
+            } else {
+              showCheckButton = !isIncludeStatus(row, [
+                'AUTO_ANNOTATING',
+                'UNSAMPLED',
+                'SAMPLING',
+                'SAMPLE_FAILED',
+                'TRACKING',
+                'ENHANCING',
+                'IMPORTING',
+              ]);
+            }
+          }
           // 统计需要显示的按钮个数
           const buttonCount = (arr) => {
             let count = 0;
-            arr.forEach(
-              (item) => { if (item) count+=1; });
+            arr.forEach((item) => {
+              if (item) count += 1;
+            });
             return count;
           };
-          const leftButtonArr = [showPublishButton, showUploadButton, showCheckButton, showAutoButton, showReAutoButton, showTrackButton];
-          const rightButtonArr = [showVersionButton, showAugmentButton, showTopButton, showEditButton, showReTrackButton];
+          const leftButtonArr = [
+            showPublishButton,
+            showUploadButton,
+            showCheckButton,
+            showAutoButton,
+            showTrackButton,
+          ];
+          const rightButtonArr = [
+            showVersionButton,
+            showAugmentButton,
+            showTopButton,
+            showEditButton,
+            showReAutoButton,
+            showReTrackButton,
+          ];
           const leftButtonCount = buttonCount(leftButtonArr);
           const rightButtonCount = buttonCount(rightButtonArr);
 
-          let moreButton = null;
-          // 先判断是否有更多按钮
-          // 当前左侧按钮不足三个时,不显示更多按钮
-          if (rightButtonCount > 0) {
-            if (leftButtonCount < 3) {
-              moreButton = (
-                <span>
-                  {showReTrackButton && reTrackButton}                  
-                  {showVersionButton && versionButton}
+          const hideButtons = (
+            <el-dropdown placement="bottom">
+              <el-button {...btnProps}>
+                更多<i class="el-icon-arrow-down el-icon--right"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>{showReAutoButton && reAutoButton}</el-dropdown-item>
+                <el-dropdown-item>{showReTrackButton && reTrackButton}</el-dropdown-item>
+                <el-dropdown-item>{showVersionButton && versionButton}</el-dropdown-item>
+                <el-dropdown-item key="dataEnhance">
                   {showAugmentButton && augmentButton}
-                  {showTopButton && topButton}
-                  {showEditButton && editButton}
-                </span>
-              );
-            } else {
-              moreButton = (
-                <el-dropdown placement='bottom'>
-                  <el-button {...btnProps}>
-                    更多<i class='el-icon-arrow-down el-icon--right'></i>
-                  </el-button>
-                  <el-dropdown-menu slot='dropdown'>
-                    <el-dropdown-item>
-                      {showReTrackButton && reTrackButton}
-                    </el-dropdown-item>
-                    <el-dropdown-item>
-                      {showVersionButton && versionButton}
-                    </el-dropdown-item>
-                    <el-dropdown-item key='dataEnhance'>
-                      {showAugmentButton && augmentButton}
-                    </el-dropdown-item>                    
-                    <el-dropdown-item key='top'>
-                      {showTopButton && topButton}
-                    </el-dropdown-item>
-                    <el-dropdown-item key='edit'>
-                      {showEditButton && editButton}
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
-              );
-            }
+                </el-dropdown-item>
+                <el-dropdown-item key="top">{showTopButton && topButton}</el-dropdown-item>
+                <el-dropdown-item key="edit">{showEditButton && editButton}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          );
+          const noHideButtons = (
+            <span>
+              {showReAutoButton && reAutoButton}
+              {showReTrackButton && reTrackButton}
+              {showVersionButton && versionButton}
+              {showAugmentButton && augmentButton}
+              {showTopButton && topButton}
+              {showEditButton && editButton}
+            </span>
+          );
+
+          let moreButton = null;
+          // 判断按钮个数，超过5个显示更多予以隐藏
+          if (leftButtonCount + rightButtonCount < 6) {
+            moreButton = noHideButtons;
+          } else {
+            moreButton = hideButtons;
           }
 
           return (
             <span>
-              { importDatasetButton }
+              {importDatasetButton}
               {showPublishButton && publishButton}
               {showUploadButton && uploadButton}
               {showCheckButton && checkButton}
               {showAutoButton && autoButton}
               {showTrackButton && trackButton}
-              {showReAutoButton && reAutoButton}
               {moreButton}
             </span>
           );
diff --git a/webapp/src/views/dataset/list/create-dataset.vue b/webapp/src/views/dataset/list/create-dataset.vue
index 701b2d8..d881e10 100644
--- a/webapp/src/views/dataset/list/create-dataset.vue
+++ b/webapp/src/views/dataset/list/create-dataset.vue
@@ -1,292 +1,201 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <el-dialog
-    append-to-body
-    custom-class="create-dataset"
-    center
-    :close-on-click-modal="false"
-    :visible="visible"
+  <BaseModal
+    :key="state.formKey"
     title="创建数据集"
-    width="610px"
-    @close="closeDialog"
+    width="630px"
+    :loading="state.loading"
+    :visible="state.visible"
+    @change="handleClose"
+    @ok="handleOk"
   >
-    <!--步骤条-->
-    <el-steps :active="activeStep" finish-status="success">
-      <el-step title="新建数据集" />
-      <el-step title="导入数据" />
-      <el-step title="完成" />
-    </el-steps>
-    <!--step0新建数据集-->
-    <div v-if="activeStep === 0">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="数据集名称" prop="name">
-          <el-input v-model="form.name" placeholder="数据集名称不能超过50字" maxlength="50" />
-        </el-form-item>
-        <el-form-item label="数据类型" prop="dataType">
-          <InfoSelect
-            v-model="form.dataType"
-            placeholder="数据类型"
-            :dataSource="dataTypeList"
-            @change="handleDataTypeChange"
-          />
-        </el-form-item>
-        <el-form-item label="标注类型" prop="annotateType">
-          <InfoSelect
-            v-model="form.annotateType"
-            placeholder="标注类型"
-            :dataSource="annotationList"
-            @change="handleAnnotateTypeChange"
-          />
-        </el-form-item>
-        <el-form-item label="标签组" style="height: 32px;">
-          <el-cascader
-            v-model="chosenGroup"
-            clearable
-            placeholder="标签组"
-            :options="labelGroupOptions"
-            :props="{expandTrigger: 'hover'}"
-            :show-all-levels="false"
-            filterable
-            popper-class="group-cascader"
-            style="width: 100%; line-height: 32px;"
-            @change="handleGroupChange"
-            @focus="handleGroupFocus"
+    <el-form ref="formRef" :model="state.form" :rules="rules" label-width="100px">
+      <el-form-item label="数据集名称" prop="name">
+        <el-input v-model="state.form.name" placeholder="数据集名称不能超过50字" maxlength="50" />
+      </el-form-item>
+      <el-form-item label="数据类型" prop="dataType">
+        <InfoRadio
+          v-model="state.form.dataType"
+          :dataSource="dataTypeList"
+          :transformOptions="transformOptions"
+          type="button"
+          @change="handleDataTypeChange"
+        />
+      </el-form-item>
+      <el-form-item label="标注类型" prop="annotateType">
+        <div class="image-select flex flex-wrap">
+          <div
+            v-for="item in annotationList"
+            :key="item.code"
+            :class="getImageKlass(item)"
+            @click="selectAnnotationType(item)"
           >
-            <div slot="empty">
-              <span>没有找到标签组？去</span>
-              <a
-                target="_blank"
-                type="primary"
-                :underline="false"
-                class="primary"
-                :href="`/data/labelgroup/create`"
-              >
-                新建标签组
-              </a>
-              <span>页面创建</span>
-            </div>
-          </el-cascader>
-          <div style="position: relative; top: -33px; right: 30px; float: right;">
-            <el-link
-              v-if="chosenGroupId !== null"
+            <div class="image-title">{{ item.name }}</div>
+            <img class="pic responsive" :src="getImgUrl(item)" />
+            <span>
+              <i class="check-icon" />
+            </span>
+          </div>
+        </div>
+        <el-input :value="state.form.annotateType" class="dn" />
+      </el-form-item>
+      <div style="position: relative; top: -10px; margin-left: 100px;">
+        更多标注类型说明参考<a
+          target="_blank"
+          type="primary"
+          :underline="false"
+          class="primary"
+          :href="`${VUE_APP_DOCS_URL}module/dataset/intro`"
+          >官方文档</a
+        >
+      </div>
+      <el-form-item v-if="showlabelGroup" label="标签组" style="height: 32px;" prop="labelGroup">
+        <el-cascader
+          v-model="state.form.labelGroup"
+          clearable
+          placeholder="标签组"
+          :options="labelGroupOptions"
+          :props="{ expandTrigger: 'hover' }"
+          :show-all-levels="false"
+          filterable
+          popper-class="group-cascader"
+          style="width: 100%; line-height: 32px;"
+          @change="handleGroupChange"
+        >
+          <div slot="empty">
+            <span>没有找到标签组？去</span>
+            <a
               target="_blank"
               type="primary"
               :underline="false"
-              class="vm"
-              :href="`/data/labelgroup/detail?id=${chosenGroupId}`"
+              class="primary"
+              :href="`/data/labelgroup/create`"
             >
-              查看详情
-            </el-link>
+              新建标签组
+            </a>
+            <span>页面创建</span>
           </div>
-        </el-form-item>
-        <div v-if="chosenGroupId === null" style=" position: relative; top: -12px; left: 116px;">
-          <span>标签组需要在</span>
-          <a
+        </el-cascader>
+        <div style="position: relative; top: -33px; right: 30px; float: right;">
+          <el-link
+            v-if="state.form.labelGroupId !== null"
             target="_blank"
             type="primary"
             :underline="false"
-            class="primary"
-            :href="`/data/labelgroup/create`"
+            class="vm"
+            :href="`/data/labelgroup/detail?id=${state.form.labelGroupId}`"
           >
-            新建标签组
-          </a>
-          <span>页面创建</span>
+            查看详情
+          </el-link>
         </div>
-        <el-form-item label="数据集描述" prop="remark">
-          <el-input
-            v-model="form.remark"
-            type="textarea"
-            placeholder="数据集描述长度不能超过100字"
-            maxlength="100"
-            rows="3"
-            show-word-limit
-          />
-        </el-form-item>
-      </el-form>
-      <div style=" margin-top: 25px; text-align: center;">
-        <el-button
-          :loading="crud.status.cu === 2"
-          type="primary"
-          @click="createDataset"
-        >
-          下一步
-        </el-button>
-      </div>
-    </div>
-    <!--TODO: v-if not work，why?-->
-    <!--step1上传文件-->
-    <div v-show="activeStep === 1">
-      <upload-inline
-        :key="form.dataType"
-        ref="initFileUploadForm"
-        action="fakeApi"
-        :params="uploadParams"
-        v-bind="optionCreateProps"
-        @uploadSuccess="uploadSuccess"
-        @uploadError="uploadError"
-      />
-      <!--上传视频时显示帧间隔设置-->
-      <el-form
-        v-if="form.dataType === dataTypeCodeMap.VIDEO"
-        ref="formStep1"
-        :model="step1Form"
-        label-width="100px"
-        style="margin-top: 10px;"
+      </el-form-item>
+      <div
+        v-if="state.form.labelGroupId === null && showlabelGroup"
+        style="position: relative; top: -10px; margin-left: 100px;"
       >
-        <el-form-item
-          label="视频帧间隔"
-          prop="frameInterval"
-          :rules="[{required: true, message: '请输入有效的帧间隔', trigger: 'blur'}]"
+        <span>标签组需要在</span>
+        <a
+          target="_blank"
+          type="primary"
+          :underline="false"
+          class="primary"
+          :href="`/data/labelgroup/create`"
         >
-          <el-input-number v-model="step1Form.frameInterval" :min="1" />
-        </el-form-item>
-      </el-form>
-      <div style=" margin-top: 25px; text-align: center;">
-        <el-button @click="skip">跳过</el-button>
-        <el-button type="primary" @click="uploadSubmit('initFileUploadForm')">确定上传</el-button>
+          新建标签组
+        </a>
+        <span>页面创建</span>
       </div>
-    </div>
-    <!--step2上传中-->
-    <div v-if="activeStep === 2 && skipUpload !== true">
-      <!--上传图片进度条-->
-      <el-progress
-        v-if="form.dataType !== dataTypeCodeMap.VIDEO"
-        type="circle"
-        :percentage="uploadPercent"
-        :status="uploadStatus"
-        :format="formatProgress"
-      />
-      <!--上传视频进度条-->
-      <div v-else class="circleProgressWrapper">
-        <div class="circleText">正在上传</div>
-        <div class="wrapper right">
-          <div class="circleProgress rightCircle"></div>
-        </div>
-        <div class="wrapper left">
-          <div class="circleProgress leftCircle"></div>
-        </div>
-      </div>
-      <div style=" margin-top: 25px; text-align: center;">
-        <el-button type="primary" :loading="true">确定</el-button>
-      </div>
-    </div>
-    <!--step3上传完成-->
-    <div v-if="activeStep === 3">
-      <el-progress v-if="skipUpload !== true" type="circle" :percentage="100" :status="uploadStatus"/>
-      <div style=" margin-top: 25px; text-align: center;">
-        <el-button type="primary" :loading="!uploadFinished" @click="completeCreate">确定</el-button>
-      </div>
-    </div>
-  </el-dialog>
+      <el-form-item label="数据集描述">
+        <el-input
+          v-model="state.form.remark"
+          type="textarea"
+          placeholder="数据集描述长度不能超过100字"
+          maxlength="100"
+          rows="3"
+          show-word-limit
+        />
+      </el-form-item>
+    </el-form>
+  </BaseModal>
 </template>
-
 <script>
-import CRUD, { presenter, header, form, crud } from '@crud/crud';
-import crudDataset, { detail } from '@/api/preparation/dataset';
-import { submit, submitVideo } from '@/api/preparation/datafile';
-import { getLabelGroupList } from '@/api/preparation/labelGroup';
+import { onMounted, reactive, watch, ref, computed } from '@vue/composition-api';
+import { Message } from 'element-ui';
+import cx from 'classnames';
+import { set, omit } from 'lodash';
+
 import {
-  getImgFromMinIO,
-  getTextFromMinIO,
-  annotationMap,
-  annotationCodeMap,
   dataTypeMap,
+  transformMapToList,
+  annotationBy,
+  enableLabelGroup,
   dataTypeCodeMap,
-  dataTypeAnnotateTypeMap,
-  withDimensionFile,
-  trackUploadProps,
 } from '@/views/dataset/util';
+import BaseModal from '@/components/BaseModal';
+import InfoRadio from '@/components/InfoRadio';
+import { isEmptyValue } from '@/utils';
 import { validateName } from '@/utils/validate';
-import UploadInline from '@/components/UploadForm/inline';
-import InfoSelect from '@/components/InfoSelect';
-import { toFixed } from '@/utils';
-import { isNil } from 'lodash';
 
-// 默认帧间隔
-const defaultFrameInterval = 5;
-// 默认表单
-const defaultForm = {
-  id: null,
-  name: null,
-  dataType: null,
-  annotateType: null,
-  labelGroupId: null,
-  presetLabelType: '',
-  remark: '',
-  type: 0,
+import { getLabelGroupList } from '@/api/preparation/labelGroup';
+import { add } from '@/api/preparation/dataset';
+
+const annotationByDataType = annotationBy('dataType');
+
+// 数据类型 => 图像
+const imageNameMap = {
+  imageClassify: 'classify.png',
+  targetDetection: 'annotate.png',
+  segmentation: 'segmentation.png',
+  objectTracking: 'track.png',
+  textClassify: 'textclassify.png',
+  audioClassify: 'audioClassify.png',
+  textSegmentation: 'textsegmentation.png',
+  ner: 'ner.png',
+  speechRecognition: 'speechRecognition.png',
+  custom: 'custom.png',
 };
 
 export default {
-  name: "CreateDataset",
+  name: 'CreateDataset',
   components: {
-    UploadInline,
-    InfoSelect,
+    BaseModal,
+    InfoRadio,
   },
-  cruds() {
-    return CRUD({
-      title: '数据集管理',
-      crudMethod: { ...crudDataset },
-      props: { optText: { add: '创建数据集' }},
-      queryOnPresenterCreated: false,
-    });
-  },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
   props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    closeCreateDatasetForm: {
-      type: Function,
-    },
-    onResetFresh: {
-      type: Function,
-    },
+    visible: Boolean,
+    toggleVisible: Function,
+    onResetFresh: Function,
   },
-  data() {
-    return {
-      dataTypeCodeMap,
-      chosenDatasetId: 0, // 当前数据集id
-      activeStep: 0,  // 当前的step
-      uploadPercent: 0,
-      uploadStatus: undefined,
-      skipUpload: false, // 跳过上传
-      rules: {
-        name: [
-          { required: true, message: '请输入数据集名称', trigger: ['change', 'blur'] },
-          { validator: validateName, trigger: ['change', 'blur'] },
-        ],
-        dataType: [
-          { required: true, message: '请选择数据类型', trigger: 'change' },
-        ],
-        annotateType: [
-          { required: true, message: '请选择标注类型', trigger: 'change' },
-        ],
-        remark: [
-          { required: false, message: '请输入数据集描述信息', trigger: 'blur' },
-        ],
-      },
-      step1Form: {
-        frameInterval: defaultFrameInterval, // 默认值
-      },
-      chosenGroupId: null,
-      chosenGroup: null,
-      labelGroupOptions: [{
+  setup(props) {
+    const { toggleVisible, onResetFresh } = props;
+    const initialForm = {
+      name: '',
+      dataType: 0,
+      annotateType: 2,
+      labelGroup: null,
+      labelGroupId: null,
+      remark: '',
+      type: 0,
+    };
+    const formRef = ref(null);
+
+    const initialLabelGroupOptions = [
+      {
         value: 'custom',
         label: '自定义标签组',
         disabled: false,
@@ -297,301 +206,220 @@ export default {
         label: '预置标签组',
         disabled: false,
         children: [],
-      }],
+      },
+    ];
+
+    const state = reactive({
+      form: initialForm,
+      formKey: 1,
+      visible: props.visible,
+      loading: false, // 数据集创建进行中
+    });
+
+    const labelGroupOptions = ref(initialLabelGroupOptions);
+
+    const rules = {
+      name: [
+        {
+          required: true,
+          message: '请输入数据集名称',
+          trigger: ['change', 'blur'],
+        },
+        { validator: validateName, trigger: ['change', 'blur'] },
+      ],
+      dataType: [{ required: true, message: '请选择数据类型', trigger: 'change' }],
+      annotateType: [{ required: true, message: '请选择标注类型', trigger: 'change' }],
+      labelGroup: [{ required: true, message: '请选择标签组', trigger: 'change' }],
     };
-  },
-  computed: {
-    // 文件上传前携带尺寸信息
-    withDimensionFile() {
-      return withDimensionFile;
-    },
-    isText() {
-      return this.form.dataType === dataTypeCodeMap.TEXT;
-    },
-    uploadParams() {
-      // 是否为视频数据类类型
-      const isVideo =
-        this.importRow?.dataType === dataTypeCodeMap.VIDEO || this.form.dataType === dataTypeCodeMap.VIDEO;
-      const dir = isVideo ? `video` : `origin`;
-      return {
-        datasetId: this.chosenDatasetId,
-        objectPath: `dataset/${this.chosenDatasetId}/${dir}`, // 对象存储路径
-      };
-    },
-    // 新建数据集上传组件参数拼装
-    optionCreateProps() {
-      const textProps = {
-        accept: ".txt",
-        dataType: "text",
-      };
-      const baseImageProps = {
-        transformFile: this.withDimensionFile,
-      };
-      let props = {};
-      switch( this.form.dataType){
-        case dataTypeCodeMap.VIDEO:
-          props = { ...baseImageProps, ...trackUploadProps };
-          break;
-        case dataTypeCodeMap.IMAGE:
-          props = baseImageProps;
-          break;
-        case dataTypeCodeMap.TEXT:
-          props = textProps;
-          break;
-        default:
-          props = {};
-      }
-      return props;
-    },
-    annotationList() {
-      // 原始标注列表
-      const rawAnnotationList = Object.keys(annotationMap).map(d => ({
-        label: annotationMap[d].name,
-        value: Number(d),
-      }));
-      // 图片，可用图像分类和目标检测；视频，可用目标跟踪；文本，可用文本分类
-      return rawAnnotationList.filter(d => {
-        if (this.form.dataType === dataTypeCodeMap.IMAGE) {
-          return [annotationCodeMap.ANNOTATE, annotationCodeMap.CLASSIFY].includes(d.value);
-        }
-        if (this.form.dataType === dataTypeCodeMap.VIDEO) {
-          return d.value === annotationCodeMap.TRACK;
-        }
-        if (this.form.dataType === dataTypeCodeMap.TEXT) {
-          return d.value === annotationCodeMap.TEXTCLASSIFY;
-        }
-        return true;
+
+    // 是否展示标签组
+    const showlabelGroup = computed(() => enableLabelGroup(state.form.annotateType));
+
+    const setForm = (params) =>
+      Object.assign(state, {
+        form: {
+          ...state.form,
+          ...params,
+        },
       });
-    },
 
-    dataTypeList: () =>
-      Object.keys(dataTypeMap).map(d => ({
-        label: dataTypeMap[d],
-        value: Number(d),
-      })),
+    // 更新加载状态
+    const setLoading = (loading) => Object.assign(state, { loading });
 
-    uploadFinished() {
-      if(this.skipUpload) return true;
-      return this.uploadStatus && ['success', 'exception'].includes(this.uploadStatus);
-    },
-  },
-  methods: {
-    handleGroupFocus() {
-      // 在未选择数据类型和标注类型之前，不对可用的标签组进行查询
-      if(!isNil(this.form.dataType) && this.form.dataType !== '' && !isNil(this.form.annotateType) && this.form.annotateType !== ''){
-        // 在数据类型和标注类型未改动的情况下 避免对可用的标签组列表进行重复查询
-        if((this.labelGroupOptions[1].children).length === 0){
-          getLabelGroupList({type: 1, dataType: this.form.dataType, annotateType: this.form.annotateType}).then(res => {
-            res.forEach((item) => {
-              this.labelGroupOptions[1].children.push({
-                value: item.id,
-                label: item.name,
-                disabled: false,
-              });
-            });
-          });
-        }
-        if((this.labelGroupOptions[0].children).length === 0){
-          getLabelGroupList({type: 0, dataType: this.form.dataType, annotateType: this.form.annotateType}).then(res => {
-            res.forEach((item) => {
-              this.labelGroupOptions[0].children.push({
-                value: item.id,
-                label: item.name,
-                disabled: false,
-              });
-            });
-          });
-        }
-      }
-    },
+    // 重置状态（reactive mutate 原始对象）
+    const resetForm = () =>
+      Object.assign(state, {
+        form: {
+          name: '',
+          dataType: 0,
+          annotateType: 2,
+          labelGroup: null,
+          labelGroupId: null,
+          remark: '',
+          type: 0,
+        },
+      });
 
-    handleGroupChange(val){
-      if(val.length === 0) {
-        this.chosenGroup = null;
-        this.chosenGroupId = null;
-      } else {
-        this.chosenGroup = val;
-        // eslint-disable-next-line prefer-destructuring
-        this.chosenGroupId = val[1];
+    // 更新标签组信息
+    const updateLabelGroupOptions = (index, path, params) => {
+      labelGroupOptions.value[index] = set(labelGroupOptions.value[index], path, params);
+    };
+
+    const annotationList = computed(() => annotationByDataType(state.form.dataType));
+
+    const transformOptions = (list) => {
+      return list.map((d) => ({
+        ...d,
+        label: d.label,
+        value: Number(d.value),
+      }));
+    };
+
+    // eslint-disable-next-line
+    const getImgUrl = item => {
+      try {
+        // eslint-disable-next-line
+        return require(`@/assets/images/dataset/${imageNameMap[item.type]}`);
+      } catch (err) {
+        console.error(err);
       }
-    },
+    };
 
-    // 重置创建数据集表单
-    resetCreateDatasetForm() {
-      // 清理第一步表单
-      this.$refs.form?.resetFields();
-      // 清除标签组
-      this.chosenGroup = null;
-      this.chosenGroupId = null;
-      // 清理上传表单
-      this.$refs.initFileUploadForm?.$refs?.formRef.reset();
-      this.crud.cancelCU();
-      this.crud.status.add = CRUD.STATUS.NORMAL;
-      this.chosenDatasetId = 0;
-      this.activeStep = 0;
-      // 重置帧数
-      this.step1Form.frameInterval = defaultFrameInterval;
-      this.skipUpload = false;
-      this.uploadStatus = undefined;
-      this.uploadPercent = 0;
-      this.videoUploadProgress = 0;
-    },
-    // 清空标签组可选列表 清除选中的标签组
-    clearLabelGroupItem() {
-      this.labelGroupOptions[0].children = [];
-      this.labelGroupOptions[1].children = [];
-      this.chosenGroupId = null;
-      this.chosenGroup = null;
-    },
-    // step0 改变数据类型
-    handleDataTypeChange(dataType) {
-      this.clearLabelGroupItem();
-      this.form.annotateType = dataTypeAnnotateTypeMap.get(dataType);
-    },
-    // step0 改变标注类型
-    handleAnnotateTypeChange() {
-      this.clearLabelGroupItem();
-    },
-    // step0 创建数据集调用
-    createDataset() {
-      if (this.activeStep === 0) {
-        this.crud.findVM('form').$refs.form.validate(valid => {
-          if (!valid) {
-            return;
-          }
-          this.crud.status.add = CRUD.STATUS.PROCESSING;
-          this.crud.form.labelGroupId = this.chosenGroupId;
-          this.crud.crudMethod
-            .add(this.crud.form)
-            .then(res => {
-              this.chosenDatasetId = res;
-              this.activeStep = 1;
-            })
-            .catch(err => {
-              this.$message({
-                message: err.message || '数据集创建失败',
-                type: 'exception',
-              });
-              this.crud.status.add = CRUD.STATUS.PREPARED;
-            });
+    const getImageKlass = (item) =>
+      cx(`image-select-item item-${item.urlPrefix}`, {
+        'is-active': item.code === Number(state.form.annotateType),
+      });
+
+    // 构建标签组信息
+    const buildLabelOptions = (data) =>
+      data.map((d) => ({
+        value: d.id,
+        label: d.name,
+        disabled: false,
+      }));
+
+    const updateLabelGroup = () => {
+      const { dataType, annotateType } = state.form || {};
+      if (!isEmptyValue(dataType) && !isEmptyValue(annotateType)) {
+        // 遍历两层
+        [0, 1].forEach((d) => {
+          getLabelGroupList({ type: d, dataType, annotateType }).then((res) => {
+            const options = buildLabelOptions(res);
+            updateLabelGroupOptions(d, 'children', options);
+          });
         });
       }
-    },
+    };
 
-    // step1 上传前需要查询数据集详情
-    async queryDatasetDetail(datasetId) {
-      const res = await detail(datasetId);
-      return res;
-    },
-    // step1 上传包括图片和视频
-    async uploader(datasetId, files) {
-      const datasetInfo = await this.queryDatasetDetail(datasetId);
-      // 点击导入操作
-      const { dataType } = datasetInfo || {};
-      // 文件上传
-      if (dataType === dataTypeCodeMap.IMAGE) {
-        return submit(datasetId, files);
-      }
-      if (dataType === dataTypeCodeMap.VIDEO) {
-        return submitVideo(datasetId, {
-          frameInterval: this.step1Form.frameInterval,
-          url: files[0].url,
+    const selectAnnotationType = (item) => {
+      if (item.code === Number(state.form.annotateType)) return;
+      setForm({
+        annotateType: item.code,
+        labelGroup: null,
+        labelGroupId: null,
+      });
+      updateLabelGroup();
+    };
+
+    const handleDataTypeChange = () => {
+      // 默认定位到第一个标注场景
+      if (annotationList.value.length) {
+        setForm({
+          annotateType: annotationList.value[0].code,
+          labelGroup: null,
+          labelGroupId: null,
         });
       }
-      if (dataType === dataTypeCodeMap.TEXT) {
-        return submit(datasetId, files);
-      }
-      return Promise.reject();
-    },
-    // step1 上传成功
-    uploadSuccess(res) {
-      if (this.crud.status.cu > 0) {
-        this.activeStep+=1;
-      }
-      // 视频上传完毕
-      if (this.form.dataType === dataTypeCodeMap.VIDEO) {
-        this.videoUploadProgress = 100;
-      }
+      updateLabelGroup();
+    };
 
-      let files;
-      if (this.form.dataType === dataTypeCodeMap.TEXT) {
-        files = getTextFromMinIO(res);
+    const handleGroupChange = (val) => {
+      if (val.length === 0) {
+        setForm({ labelGroup: null, labelGroupId: null });
       } else {
-        files = getImgFromMinIO(res);
+        setForm({ labelGroup: val, labelGroupId: val[1] });
       }
+    };
 
-      // 自动标注完成时 导入 提示信息不同
-      const successMessage = '上传文件成功';
-      if (files.length > 0) {
-        this.uploader(this.chosenDatasetId, files).then(() => {
-          this.$message({
-            message: successMessage,
-            duration: 5000,
-            type: 'success',
-          });
-          this.uploadStatus = 'success';
-        });
-      }
-    },
-    // step1 上传失败
-    uploadError(err) {
-      this.$message({
-        message: err.message || '上传文件失败',
-        type: 'error',
-      });
-    },
-    // step1 跳过上传
-    skip() {
-      this.skipUpload = true;
-      this.activeStep += 2;
-    },
-    // step1 确定上传
-    uploadSubmit(formName) {
-      this.$refs[formName].uploadSubmit((resolved, total) => {
-         if (this.crud.status.cu > 0) {
-            this.activeStep = 2;
-          }
-        // eslint-disable-next-line func-names
-        this.$nextTick(function() {
-          this.uploadPercent =
-            this.uploadPercent > 100 ? 100 : toFixed(resolved / total);
-        });
+    const handleClose = () => {
+      Object.assign(state, {
+        formKey: state.formKey + 1,
+        // reactive mutate 原始对象
+        form: {
+          name: '',
+          dataType: 0,
+          annotateType: 2,
+          labelGroup: null,
+          labelGroupId: null,
+          remark: '',
+          type: 0,
+        },
+        loading: false,
       });
-    },
+      toggleVisible();
+      onResetFresh();
+    };
 
-    // step2 进度格式化
-    formatProgress(percentage) {
-      let formatTxt = `${percentage}%`;
-      if (this.form.dataType === dataTypeCodeMap.VIDEO) {
-        formatTxt = this.videoUploadProgress === 100 ? `100%` : `上传中...`;
-      }
-      return formatTxt;
-    },
-    // step2 完成时点击确定
-    completeCreate() {
-      // 发送创建成功消息
-      this.$message({
-        message: '数据集创建成功',
-        type: 'success',
+    const handleOk = () => {
+      formRef.value.validate((valid) => {
+        if (!valid) return;
+        const params = omit(state.form, ['labelGroup']);
+        params.import = params.dataType === dataTypeCodeMap.CUSTOM;
+        setLoading(true);
+        add(params)
+          .then(() => {
+            Message.success('数据集创建成功');
+            resetForm();
+            toggleVisible();
+          })
+          .finally(() => {
+            setLoading(false);
+          });
       });
-      // 关闭创建数据集对话框
-      this.closeCreateDatasetForm();
-      this.onResetFresh();
-      // 重置创建数据集各个步骤的表单
-      this.resetCreateDatasetForm();
-    },
+    };
 
-    // 关闭显示的创建数据集对话框
-    closeDialog() {
-      if(this.activeStep === 0){
-      // step=0还未创建数据集时不需要刷新列表
-        this.closeCreateDatasetForm();
-        this.resetCreateDatasetForm();
-      } else{
-      // step>0数据集创建成功
-        this.completeCreate();
+    watch(
+      () => props.visible,
+      (next) => {
+        next !== state.visible &&
+          Object.assign(state, {
+            visible: next,
+          });
       }
-    },
+    );
+
+    onMounted(() => {
+      annotationList.value.forEach((item) => getImgUrl(item));
+      // 初始化标签组
+      updateLabelGroup();
+    });
+
+    return {
+      state,
+      formRef,
+      VUE_APP_DOCS_URL: process.env.VUE_APP_DOCS_URL,
+      dataTypeList: transformMapToList(dataTypeMap),
+      selectAnnotationType,
+      handleDataTypeChange,
+      handleGroupChange,
+      transformOptions,
+      labelGroupOptions,
+      getImageKlass,
+      getImgUrl,
+      annotationList,
+      handleClose,
+      handleOk,
+      rules,
+      showlabelGroup,
+    };
   },
 };
 </script>
+<style lang="scss">
+@import '../style/common.scss';
+</style>
+<style lang="scss" scoped>
+.image-select-item {
+  max-width: 33.3333333%;
+}
+</style>
diff --git a/webapp/src/views/dataset/list/data-enhance.vue b/webapp/src/views/dataset/list/data-enhance.vue
index 8c4045b..d810fed 100644
--- a/webapp/src/views/dataset/list/data-enhance.vue
+++ b/webapp/src/views/dataset/list/data-enhance.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseModal
@@ -88,7 +88,7 @@ export default {
     // element fieldValue 取自 model
     // ??? 好奇怪的设计
     const buildModel = (record, options) => {
-      return { ...record, ...options};
+      return { ...record, ...options };
     };
 
     const state = reactive({
@@ -106,7 +106,7 @@ export default {
     };
 
     const handleDataEnhance = () => {
-      formRef.value.validate(valid => {
+      formRef.value.validate((valid) => {
         if (!valid) {
           return false;
         }
@@ -115,33 +115,39 @@ export default {
       });
     };
 
-    onMounted(async() => {
+    onMounted(async () => {
       const result = await queryDataEnhanceList();
       const { dictDetails = [] } = result || {};
-      const enhanceList = dictDetails.map(d => ({
+      const enhanceList = dictDetails.map((d) => ({
         label: d.label,
-        value: Number(d.value),
+        value: d.value,
       }));
       Object.assign(state, {
         enhanceList,
       });
     });
 
-    watch(() => props.row, (next) => {
-      Object.assign(state, {
-        model: { ...state.model, ...next },
-      });
-    });
+    watch(
+      () => props.row,
+      (next) => {
+        Object.assign(state, {
+          model: { ...state.model, ...next },
+        });
+      }
+    );
 
-    watch(() => props.visible, (next) => {
-      if (next) {
-        getOriginFileCount(props.row.id).then(res => {
-          Object.assign(state, {
-            fileCount: res,
+    watch(
+      () => props.visible,
+      (next) => {
+        if (next) {
+          getOriginFileCount(props.row.id).then((res) => {
+            Object.assign(state, {
+              fileCount: res,
+            });
           });
-        });
+        }
       }
-    });
+    );
 
     return {
       rules,
diff --git a/webapp/src/views/dataset/list/edit-dataset.vue b/webapp/src/views/dataset/list/edit-dataset.vue
index dcb286f..7da36e6 100644
--- a/webapp/src/views/dataset/list/edit-dataset.vue
+++ b/webapp/src/views/dataset/list/edit-dataset.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseModal
@@ -26,14 +26,6 @@
       <el-form-item label="数据集名称" prop="name">
         <el-input v-model="state.model.name" placeholder="数据集名称不能超过50字" maxlength="50" />
       </el-form-item>
-      <el-form-item label="数据类型" prop="dataType">
-        <InfoSelect
-          v-model="state.model.dataType"
-          placeholder="数据类型"
-          :dataSource="dataTypeList"
-          disabled
-        />
-      </el-form-item>
       <el-form-item v-if="!state.model.import" label="标注类型" prop="annotateType">
         <InfoSelect
           v-model="state.model.annotateType"
@@ -42,22 +34,30 @@
           disabled
         />
       </el-form-item>
-      <el-form-item v-if="!state.model.import" label="标签组" style="height: 32px;">
+      <el-form-item label="数据类型" prop="dataType">
+        <InfoSelect
+          v-model="state.model.dataType"
+          placeholder="数据类型"
+          :dataSource="dataTypeList"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item v-if="showlabelGroup" label="标签组" style="height: 32px;">
         <div v-if="editable">
           <el-cascader
             v-model="state.chosenGroup"
             placeholder="标签组"
             :options="state.labelGroupOptions"
-            :props="{expandTrigger: 'hover'}"
+            :props="{ expandTrigger: 'hover' }"
             :show-all-levels="false"
             filterable
             :clearable="deletable"
-            popper-class="group-cascader" 
+            popper-class="group-cascader"
             style="width: 100%; line-height: 32px;"
             @change="handleGroupChange"
           >
             <div slot="empty">
-              <span>没有找到标签组？去</span> 
+              <span>没有找到标签组？去</span>
               <a
                 target="_blank"
                 type="primary"
@@ -71,12 +71,12 @@
             </div>
           </el-cascader>
           <div style="position: relative; top: -33px; right: 30px; float: right;">
-            <el-link 
-              v-if="state.chosenGroupId !== null" 
+            <el-link
+              v-if="state.chosenGroupId !== null"
               target="_blank"
               type="primary"
               :underline="false"
-              class="vm" 
+              class="vm"
               :href="`/data/labelgroup/detail?id=${state.chosenGroupId}`"
             >
               查看详情
@@ -84,22 +84,25 @@
           </div>
         </div>
         <div v-else class="label-input" style="color: #c0c4cc; background-color: #f5f7fa;">
-          &nbsp;&nbsp;&nbsp;&nbsp;{{state.model.labelGroupName}}
-          <el-link 
-            v-if="state.model.labelGroupId !== null" 
-            target="_blank" 
-            type="primary" 
-            :underline="false" 
-            class="vm" 
+          &nbsp;&nbsp;&nbsp;&nbsp;{{ state.model.labelGroupName }}
+          <el-link
+            v-if="state.model.labelGroupId !== null"
+            target="_blank"
+            type="primary"
+            :underline="false"
+            class="vm"
             :href="`/data/labelgroup/detail?id=${state.model.labelGroupId}`"
-            style="float: right; margin-right: 8px;"  
+            style="float: right; margin-right: 8px;"
           >
             查看详情
           </el-link>
         </div>
       </el-form-item>
-      <div v-if="state.chosenGroupId === null" style=" position: relative; top: -12px; left: 116px;">
-        <span>标签组需要在</span> 
+      <div
+        v-if="state.chosenGroupId === null && showlabelGroup"
+        style=" position: relative; top: -10px; margin-left: 100px;"
+      >
+        <span>标签组需要在</span>
         <a
           target="_blank"
           type="primary"
@@ -126,13 +129,18 @@
 </template>
 
 <script>
-import {isNil} from 'lodash'; 
+import { isNil } from 'lodash';
 import { watch, reactive, computed } from '@vue/composition-api';
 
 import BaseModal from '@/components/BaseModal';
 import InfoSelect from '@/components/InfoSelect';
 import { validateName } from '@/utils/validate';
-import { annotationMap, annotationCodeMap, dataTypeMap, dataTypeCodeMap, statusCodeMap  } from '@/views/dataset/util';
+import {
+  annotationList,
+  dataTypeMap,
+  isIncludeStatus,
+  enableLabelGroup,
+} from '@/views/dataset/util';
 import { getLabelGroupList } from '@/api/preparation/labelGroup';
 
 export default {
@@ -160,42 +168,37 @@ export default {
   setup(props, { refs }) {
     const { handleOk } = props;
 
-    const rules= {
+    const rules = {
       name: [
         { required: true, message: '请输入数据集名称', trigger: ['change', 'blur'] },
         { validator: validateName, trigger: ['change', 'blur'] },
       ],
-      dataType: [
-        { required: true, message: '请选择数据类型', trigger: 'change' },
-      ],
-      annotateType: [
-        { required: true, message: '请选择标注类型', trigger: 'change' },
-      ],
-      remark: [
-        { required: false, message: '请输入数据集描述信息', trigger: 'blur' },
-      ],
+      annotateType: [{ required: true, message: '请选择标注类型', trigger: 'change' }],
+      remark: [{ required: false, message: '请输入数据集描述信息', trigger: 'blur' }],
     };
 
     const buildModel = (record, options) => {
-      return { ...record, ...options};
+      return { ...record, ...options };
     };
 
     const state = reactive({
       model: buildModel(props.row),
       chosenGroupId: null,
       chosenGroup: null,
-      labelGroupOptions: [{
-        value: 'custom',
-        label: '自定义标签组',
-        disabled: false,
-        children: [],
-      }, 
-      {
-        value: 'system',
-        label: '预置标签组',
-        disabled: false,
-        children: [],
-      }], 
+      labelGroupOptions: [
+        {
+          value: 'custom',
+          label: '自定义标签组',
+          disabled: false,
+          children: [],
+        },
+        {
+          value: 'system',
+          label: '预置标签组',
+          disabled: false,
+          children: [],
+        },
+      ],
     });
 
     const deletable = computed(() => {
@@ -203,42 +206,24 @@ export default {
     });
 
     const dataTypeList = computed(() => {
-      return Object.keys(dataTypeMap).map(d => ({
+      return Object.keys(dataTypeMap).map((d) => ({
         label: dataTypeMap[d],
         value: Number(d),
       }));
     });
 
-    const annotationList = computed(() => {
-      // 原始标注列表
-      const rawAnnotationList = Object.keys(annotationMap).map(d => ({
-        label: annotationMap[d].name,
-        value: Number(d),
-      }));
-      // 图片，可用图像分类和目标检测；视频，可用目标跟踪；文本，可用文本分类
-      return rawAnnotationList.map(d => {
-        let disabled = false;
-        if (state.model.dataType === dataTypeCodeMap.IMAGE) {
-          disabled = ![annotationCodeMap.ANNOTATE, annotationCodeMap.CLASSIFY].includes(d.value);
-        } else if (state.model.dataType === dataTypeCodeMap.VIDEO) {
-          disabled = d.value !== annotationCodeMap.TRACK;
-        } else {
-          disabled = d.value !== annotationCodeMap.TEXTCLASSIFY;
-        }
-        return {
-          ...d,
-          disabled,
-        };
-      });
-    });
-
     const editable = computed(() => {
-      return ['UNANNOTATED', 'UNSAMPLED'].includes(statusCodeMap[state.model.status]);
+      return isIncludeStatus(state.model, ['UNANNOTATED', 'UNSAMPLED']);
     });
-        
+
+    // 是否展示标签组
+    const showlabelGroup = computed(
+      () => enableLabelGroup(state.model.annotateType) && !state.model.import
+    );
+
     const handleEditDataset = () => {
       state.model.labelGroupId = state.chosenGroupId;
-      refs.form.validate(valid => {
+      refs.form.validate((valid) => {
         if (!valid) {
           return false;
         }
@@ -246,9 +231,9 @@ export default {
         return null;
       });
     };
-   
+
     const handleGroupChange = (val) => {
-      if(val.length === 0) {
+      if (val.length === 0) {
         state.chosenGroup = null;
         state.chosenGroupId = null;
       } else {
@@ -258,45 +243,56 @@ export default {
       }
     };
 
-    watch(() => props.row, (next) => {
-      Object.assign(state, {
-        model: { ...state.model, ...next },
-      });
-      if(!isNil(state.model.dataType)){
-        getLabelGroupList({type: 1, dataType: state.model.dataType, annotateType: state.model.annotateType}).then(res => {
-          res.forEach((item) => {
-            state.labelGroupOptions[1].children.push({
-              value: item.id,
-              label: item.name,
-              disabled: false,
+    watch(
+      () => props.row,
+      (next) => {
+        Object.assign(state, {
+          model: { ...state.model, ...next },
+        });
+        if (!isNil(state.model.dataType)) {
+          getLabelGroupList({
+            type: 1,
+            dataType: state.model.dataType,
+            annotateType: state.model.annotateType,
+          }).then((res) => {
+            res.forEach((item) => {
+              state.labelGroupOptions[1].children.push({
+                value: item.id,
+                label: item.name,
+                disabled: false,
+              });
             });
           });
-        });   
-      }
-      if(!isNil(state.model.dataType)){
-        getLabelGroupList({type: 0, dataType: state.model.dataType, annotateType: state.model.annotateType}).then(res => {
-          res.forEach((item) => {
-            state.labelGroupOptions[0].children.push({
-              value: item.id,
-              label: item.name,
-              disabled: false,
+        }
+        if (!isNil(state.model.dataType)) {
+          getLabelGroupList({
+            type: 0,
+            dataType: state.model.dataType,
+            annotateType: state.model.annotateType,
+          }).then((res) => {
+            res.forEach((item) => {
+              state.labelGroupOptions[0].children.push({
+                value: item.id,
+                label: item.name,
+                disabled: false,
+              });
             });
           });
-        });
-      }
-      // 读取数据集已有标签组
-      if(!isNil(next?.labelGroupId)) {
-        state.chosenGroupId = next.labelGroupId;
-        if(next.labelGroupType === 0) {
-          state.chosenGroup = ['custom', next.labelGroupId];
+        }
+        // 读取数据集已有标签组
+        if (!isNil(next?.labelGroupId)) {
+          state.chosenGroupId = next.labelGroupId;
+          if (next.labelGroupType === 0) {
+            state.chosenGroup = ['custom', next.labelGroupId];
+          } else {
+            state.chosenGroup = ['system', next.labelGroupId];
+          }
         } else {
-          state.chosenGroup = ['system', next.labelGroupId];
+          state.chosenGroupId = null;
+          state.chosenGroup = null;
         }
-      } else {
-        state.chosenGroupId = null;
-        state.chosenGroup = null;
       }
-    });
+    );
 
     return {
       rules,
@@ -307,6 +303,7 @@ export default {
       handleEditDataset,
       dataTypeList,
       annotationList,
+      showlabelGroup,
     };
   },
 };
diff --git a/webapp/src/views/dataset/list/import-dataset.vue b/webapp/src/views/dataset/list/import-dataset.vue
index 2b8d33e..aa01f49 100644
--- a/webapp/src/views/dataset/list/import-dataset.vue
+++ b/webapp/src/views/dataset/list/import-dataset.vue
@@ -1,65 +1,66 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseModal
-    :key="formKey"
-    :title="importStep===0 ? '导入数据集' : '创建数据集'"
+    :key="state.formKey"
+    title="导入本地数据集"
     width="600px"
     center
-    :visible="visible"
-    @change="handleCancelUploadDataset"
-    @ok="handleUploadDataset('formRef')"
+    :loading="state.loading"
+    :visible="state.visible"
+    @change="handleClose"
+    @ok="handleOk"
   >
-    <div v-if="importStep===0" class="placeholder">
-      <div class="has-tip">
-        <div class="tip">
-          请参考下方说明文档，创建数据集完毕后，按照数据集模板格式上传数据集文件，否则标注文件可能无法正确解析。
-        </div>
-        <div class="requirement">
-          <p>1. 数据集脚本工具（<a href="http://docs.dubhe.ai/docs/module/dataset/import-dataset" target="_blank">文档</a>）
-          <p>2. 图片数据集（<a href="http://docs.dubhe.ai/docs/module/dataset/import-dataset/#%E5%AF%BC%E5%85%A5%E5%B7%B2%E6%9C%89%E6%95%B0%E6%8D%AE%E9%9B%86" target="_blank">文档</a>）</p>
-          <p>3. 文本数据集（<a href="http://docs.dubhe.ai/docs/module/dataset/import-dataset/#%E5%AF%BC%E5%85%A5%E6%96%87%E6%9C%AC%E6%95%B0%E6%8D%AE%E9%9B%86" target="_blank">文档</a></p>
-          <p>4. 图片数据集模板（<a href="http://tianshu.org.cn/static/upload/file/dubhe-dataset-template.zip" target="_blank">下载</a>）</p>
-          <p>5. 文本数据集模板（<a href="http://tianshu.org.cn/static/upload/file/dubhe-dataset-nlp-template.zip" target="_blank">下载</a>）</p>
-          <p>7. 更多参考（<a href="http://docs.dubhe.ai/docs/" target="_blank">官网文档</a>）</p>
-        </div>
-      </div>
-    </div>
-    <el-form v-else ref="formRef" :model="form" :rules="rules" label-width="100px">
+    <el-form ref="formRef" :model="state.form" :rules="rules" label-width="100px">
       <el-alert class="info-alert" type="warning" show-icon :closable="false">
-        <div slot='title' class='slot-content'>
+        <div slot="title" class="slot-content">
           <div>数据集创建完毕后，需要使用脚本工具上传本地已有数据集</div>
-          <a href="http://docs.dubhe.ai/docs/module/dataset/import-dataset" target="_blank">使用文档</a>
+          <a :href="`${VUE_APP_DOCS_URL}module/dataset/dataset-util`" target="_blank">使用文档</a>
         </div>
       </el-alert>
       <el-form-item label="数据集名称" prop="name">
-        <el-input v-model="form.name" placeholder="数据集名称不能超过50字" maxlength="50" />
+        <el-input v-model="state.form.name" placeholder="数据集名称不能超过50字" maxlength="50" />
       </el-form-item>
-      <el-form-item label="数据类型" prop="dataType">
-        <InfoSelect
-          v-model="form.dataType"
-          placeholder="数据类型"
+      <el-form-item label="数据集来源" prop="sourceType">
+        <InfoRadio v-model="state.form.sourceType" :dataSource="sourceTypeList" />
+        <div>
+          标准数据集是指天枢平台预置支持的部分数据集类型，
+          <a
+            target="_blank"
+            type="primary"
+            :underline="false"
+            class="primary"
+            :href="`${VUE_APP_DOCS_URL}module/dataset/intro`"
+            >详细参考</a
+          >
+        </div>
+      </el-form-item>
+      <el-form-item v-if="!sourceByCustom" label="数据类型" prop="dataType">
+        <InfoRadio
+          v-model="state.form.dataType"
           :dataSource="dataTypeList"
-          width="200px"
-          @change="handleDataTypeChange" />
+          :transformOptions="transformOptions"
+          type="button"
+          @change="handleDataTypeChange"
+        />
       </el-form-item>
-      <el-form-item label="标注类型" prop="annotateType">
+      <el-form-item v-if="!sourceByCustom" label="标注类型" prop="annotateType">
         <InfoSelect
-          v-model="form.annotateType"
+          v-model="state.form.annotateType"
           placeholder="标注类型"
           :dataSource="annotationList"
           width="200px"
@@ -67,7 +68,7 @@
       </el-form-item>
       <el-form-item label="数据集描述">
         <el-input
-          v-model="form.remark"
+          v-model="state.form.remark"
           type="textarea"
           placeholder="数据集描述长度不能超过100字"
           maxlength="100"
@@ -76,23 +77,37 @@
         />
       </el-form-item>
     </el-form>
-    <el-button v-if="importStep===0" slot="footer" class="tc" type="primary" @click="nextImportStep">已阅读，确定创建</el-button>
   </BaseModal>
 </template>
 
 <script>
-import BaseModal from '@/components/BaseModal';
+import { reactive, watch, ref, computed } from '@vue/composition-api';
+import { Message } from 'element-ui';
+import { omit } from 'lodash';
 
+import BaseModal from '@/components/BaseModal';
+import InfoRadio from '@/components/InfoRadio';
 import InfoSelect from '@/components/InfoSelect';
-import { validateName } from "@/utils/validate";
-import { annotationCodeMap, annotationMap, dataTypeCodeMap, dataTypeMap, dataTypeAnnotateTypeMap } from '@/views/dataset/util';
+
+import { validateName } from '@/utils/validate';
+import {
+  annotationBy,
+  dataTypeMap,
+  dataTypeCodeMap,
+  annotationCodeMap,
+  transformMapToList,
+  extDataAnnotationByCode,
+} from '@/views/dataset/util';
 
 import { add } from '@/api/preparation/dataset';
 
+const annotationByDataType = annotationBy('dataType');
+
 export default {
-  name: "ImportDataset",
+  name: 'ImportDataset',
   components: {
     BaseModal,
+    InfoRadio,
     InfoSelect,
   },
   props: {
@@ -100,131 +115,206 @@ export default {
       type: Boolean,
       default: false,
     },
-    toggleImportDataset: {
+    toggleVisible: {
       type: Function,
     },
     onResetFresh: {
       type: Function,
     },
   },
-  data() {
-    return {
-      importStep: 0,
+  setup(props) {
+    const { toggleVisible, onResetFresh } = props;
+    const initialForm = {
+      name: '',
+      dataType: 0,
+      annotateType: 2,
+      remark: '',
+      loading: false,
+      sourceType: 0,
+    };
+
+    const formRef = ref(null);
+
+    // 标准数据集白名单：图像分类、目标检测、语义分割
+    // 文本分类
+    // 音频分类
+    const stdAnnotateType = [
+      annotationCodeMap.ANNOTATE,
+      annotationCodeMap.CLASSIFY,
+      annotationCodeMap.SEGMENTATION,
+      annotationCodeMap.TEXTCLASSIFY,
+      annotationCodeMap.AUDIOCLASSIFY,
+    ];
+
+    const rules = {
+      name: [
+        {
+          required: true,
+          message: '请输入数据集名称',
+          trigger: ['change', 'blur'],
+        },
+        { validator: validateName, trigger: ['change', 'blur'] },
+      ],
+      sourceType: [{ required: true, message: '请选择数据集来源', trigger: 'change' }],
+      dataType: [{ required: true, message: '请选择数据类型', trigger: 'change' }],
+      annotateType: [{ required: true, message: '请选择标注类型', trigger: ['change', 'blur'] }],
+    };
+
+    const state = reactive({
+      form: initialForm,
       formKey: 1,
-      form: {
-        name: "",
-        dataType: "",
-        annotateType: "",
-        status: 4,
-        remark: "",
+      visible: props.visible,
+      loading: false, // 数据集创建进行中
+    });
+
+    const sourceTypeList = [
+      {
+        label: '自定义数据集',
+        value: 0,
       },
-      rules: {
-        name: [
-          {
-            required: true,
-            message: "请输入数据集名称",
-            trigger: ["change", "blur"],
-          },
-          { validator: validateName, trigger: ["change", "blur"] },
-        ],
-        dataType: [
-          {
-            required: true,
-            message: "请选择数据类型",
-            trigger: ["change", "blur"],
-          },
-        ],
-        annotateType: [
-          {
-            required: true,
-            message: "请选择标注类型",
-            trigger: ["change", "blur"],
-          },
-        ],
+      {
+        label: '标准数据集',
+        value: 1,
       },
-    };
-  },
-  computed: {
-    annotationList() {
-      // 原始标注列表
-      const rawAnnotationList = Object.keys(annotationMap).map(d => ({
-        label: annotationMap[d].name,
-        value: Number(d),
+    ];
+
+    // 是否为自定义来源
+    const sourceByCustom = computed(() => state.form.sourceType === 0);
+
+    const dataTypeList = computed(() => {
+      const transformed = transformMapToList(
+        omit(dataTypeMap, [dataTypeCodeMap.TABLE, dataTypeCodeMap.CUSTOM, dataTypeCodeMap.VIDEO])
+      );
+      return transformed.map((d) => ({
+        ...d,
+        value: Number(d.value),
       }));
-      // 图片，可用图像分类和目标检测；视频，可用目标跟踪；文本，可用文本分类
-      return rawAnnotationList.filter(d => {
-        if (this.form.dataType === dataTypeCodeMap.IMAGE) {
-          return [annotationCodeMap.ANNOTATE, annotationCodeMap.CLASSIFY].includes(d.value);
-        }
-        if (this.form.dataType === dataTypeCodeMap.VIDEO) {
-          return d.value === annotationCodeMap.TRACK;
-        }
-        if (this.form.dataType === dataTypeCodeMap.TEXT) {
-          return d.value === annotationCodeMap.TEXTCLASSIFY;
-        }
-        return true;
+    });
+
+    const annotationList = computed(() =>
+      annotationByDataType(state.form.dataType)
+        .filter((d) => stdAnnotateType.includes(d.code))
+        .map((d) => ({
+          value: d.code,
+          label: d.name,
+        }))
+    );
+
+    const setForm = (params) =>
+      Object.assign(state, {
+        form: {
+          ...state.form,
+          ...params,
+        },
       });
-    },
 
-    dataTypeList: () =>
-      Object.keys(dataTypeMap)
-        .filter(type => [dataTypeCodeMap.IMAGE, dataTypeCodeMap.TEXT].includes(Number(type)))
-        .map(d => ({
-          label: dataTypeMap[d],
-          value: Number(d),
-        }),
-      ),
-  },
-  methods: {
-    nextImportStep() {
-      this.importStep += 1;
-    },
-    handleCancelUploadDataset() {
-      this.formKey += 1;
-      this.importStep = 0;
-      this.toggleImportDataset();
-      this.onResetFresh();
-    },
-    handleUploadDataset(formName) {
-      this.$refs[formName].validate(valid => {
-        if (!valid) {
-          return;
-        }
-        const customForm = {
-          name: this.form.name,
-          remark: this.form.remark,
-          annotateType: this.form.annotateType,
-          dataType: this.form.dataType,
-          type: 0,
-          import: true,
-        };
-
-        return add(customForm).then(() => {
-          this.$message({
-            message: '创建数据集成功',
-            type: 'success',
-          });
-        }).finally(() => {
-          this.resetFormFields();
-          this.toggleImportDataset();
-          this.onResetFresh();
+    // 更新加载状态
+    const setLoading = (loading) => Object.assign(state, { loading });
+
+    // 重置状态（reactive mutate 原始对象）
+    const resetForm = () =>
+      Object.assign(state, {
+        form: {
+          name: '',
+          dataType: 0,
+          sourceType: 0,
+          annotateType: 2,
+          remark: '',
+        },
+      });
+
+    const handleDataTypeChange = () => {
+      // 默认定位到第一个标注场景
+      if (annotationList.value.length) {
+        setForm({
+          annotateType: annotationList.value[0].value,
         });
+      }
+    };
+
+    const selectAnnotationType = (item) => {
+      if (item.code === Number(state.form.annotateType)) return;
+      setForm({
+        annotateType: item.code,
       });
-    },
-    resetFormFields() {
-      this.formKey += 1;
-      this.importStep = 0;
-      this.form = {
-        name: "",
-        dataType: "",
-        annotateType: "",
-        status: 4,
-        remark: "",
-      };
-    },
-    handleDataTypeChange(dataType) {
-      this.form.annotateType = dataTypeAnnotateTypeMap.get(dataType);
-    },
+    };
+
+    const handleClose = () => {
+      Object.assign(state, {
+        formKey: state.formKey + 1,
+        // reactive mutate 原始对象
+        form: {
+          name: '',
+          dataType: 0,
+          sourceType: 0,
+          annotateType: 2,
+          remark: '',
+        },
+        loading: false,
+      });
+      toggleVisible(false);
+      onResetFresh();
+    };
+
+    const handleOk = () => {
+      formRef.value.validate((valid) => {
+        if (!valid) return;
+        const params = { type: 0, import: true, name: state.form.name, remark: state.form.remark };
+        // 区分自定义数据集、标注数据集
+        state.form.sourceType === 0
+          ? Object.assign(params, {
+              dataType: dataTypeCodeMap.CUSTOM,
+              annotateType: extDataAnnotationByCode(dataTypeCodeMap.CUSTOM)[0],
+            })
+          : Object.assign(params, {
+              dataType: state.form.dataType,
+              annotateType: state.form.annotateType,
+            });
+        setLoading(true);
+        add(params)
+          .then(() => {
+            Message.success('数据集创建成功，请下载数据集脚本工具进行下一步操作');
+            resetForm();
+            toggleVisible(false);
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      });
+    };
+
+    const transformOptions = (list) => {
+      return list.map((d) => ({
+        ...d,
+        label: d.label,
+        value: Number(d.value),
+      }));
+    };
+
+    watch(
+      () => props.visible,
+      (next) => {
+        Object.assign(state, {
+          visible: next,
+        });
+      }
+    );
+
+    return {
+      VUE_APP_DOCS_URL: process.env.VUE_APP_DOCS_URL,
+      rules,
+      state,
+      formRef,
+      sourceTypeList,
+      sourceByCustom,
+      dataTypeList,
+      annotationList,
+      transformOptions,
+      handleDataTypeChange,
+      selectAnnotationType,
+      handleClose,
+      handleOk,
+    };
   },
 };
 </script>
diff --git a/webapp/src/views/dataset/list/index.vue b/webapp/src/views/dataset/list/index.vue
index bbc7954..0bde49f 100644
--- a/webapp/src/views/dataset/list/index.vue
+++ b/webapp/src/views/dataset/list/index.vue
@@ -1,24 +1,24 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <cdOperation :addProps="operationProps" :delProps="operationProps">
+      <cdOperation :addProps="operationProps">
         <el-button
           slot="left"
           class="filter-item"
@@ -34,7 +34,7 @@
           class="filter-item"
           icon="el-icon-upload"
           round
-          @click="toggleImportDataset"
+          @click="toggleImportDatasetEvent"
         >
           导入数据集
         </el-button>
@@ -50,7 +50,7 @@
           />
           <el-date-picker
             v-model="query.createTime"
-            :default-time="['00:00:00','23:59:59']"
+            :default-time="['00:00:00', '23:59:59']"
             type="daterange"
             value-format="timestamp"
             range-separator=":"
@@ -66,13 +66,13 @@
     <!--创建数据集表单组件-->
     <CreateDataset
       :visible="createDatasetVisible"
-      :closeCreateDatasetForm="closeCreateDatasetForm"
+      :toggleVisible="closeCreateDatasetForm"
       :onResetFresh="onResetFresh"
     />
     <!--导入自定义数据集表单组件-->
     <ImportDataset
       :visible="importDatasetVisible"
-      :toggleImportDataset="toggleImportDataset"
+      :toggleVisible="toggleImportDataset"
       :onResetFresh="onResetFresh"
     />
     <!--单独导入数据表单组件-->
@@ -88,7 +88,12 @@
       </el-tabs>
       <div>
         <el-tooltip effect="dark" content="刷新" placement="top">
-          <el-button class="filter-item with-border" style="padding: 8px;" icon="el-icon-refresh" @click="onResetFresh"/>
+          <el-button
+            class="filter-item with-border"
+            style="padding: 8px;"
+            icon="el-icon-refresh"
+            @click="onResetFresh"
+          />
         </el-tooltip>
         <TenantSelector :datasetListType="datasetListType" style="margin: 0 3px 10px 10px;" />
       </div>
@@ -109,11 +114,25 @@
         <template slot-scope="scope">
           <span>
             {{ scope.row.id }}
-            <span v-if="isImport(scope.row)" class='ml-10 cp'> 
-              <copy-to-clipboard :text="String(scope.row.id)" @copy="(text, result) => handleCopy(text, result, scope.row)">
-                <el-tooltip effect='dark' placement='top'>
-                  <div slot='content'>当前数据集为外部导入数据集<br />点击复制数据集 ID<br/><a class="mt-10 db primary" target="_blank" href="http://docs.dubhe.ai/docs/module/dataset/import-dataset">使用文档</a></div>
-                  <i :class="scope.row.copySuccess ? 'el-icon-success success' : 'el-icon-copy-document'" />
+            <span v-if="isImport(scope.row)" class="ml-10 cp">
+              <copy-to-clipboard
+                :text="String(scope.row.id)"
+                @copy="(text, result) => handleCopy(text, result, scope.row)"
+              >
+                <el-tooltip effect="dark" placement="top">
+                  <div slot="content">
+                    当前数据集为外部导入数据集<br />点击复制数据集 ID<br /><a
+                      class="mt-10 db primary"
+                      target="_blank"
+                      :href="`${VUE_APP_DOCS_URL}module/dataset/import-dataset`"
+                      >使用文档</a
+                    >
+                  </div>
+                  <i
+                    :class="
+                      scope.row.copySuccess ? 'el-icon-success success' : 'el-icon-copy-document'
+                    "
+                  />
                 </el-tooltip>
               </copy-to-clipboard>
             </span>
@@ -130,8 +149,16 @@
         class-name="dataset-name-col"
       >
         <template slot-scope="scope">
-          <el-link class="mr-10 name-col" @click="goDetail(scope.row)">{{ scope.row.name }}</el-link>
-          <Edit class="edit-icon" :row="scope.row" valueBy="name" title="修改数据集名称" @handleOk="handleEditDatasetName" />
+          <el-link class="mr-10 name-col" type="primary" @click="goDetail(scope.row)">{{
+            scope.row.name
+          }}</el-link>
+          <Edit
+            class="edit-icon"
+            :row="scope.row"
+            valueBy="name"
+            title="修改数据集名称"
+            @handleOk="handleEditDatasetName"
+          />
         </template>
       </el-table-column>
       <el-table-column
@@ -146,7 +173,7 @@
             title="数据类型"
             :list="dataTypeList"
             :filtered="!isNil(dataType)"
-            @command="cmd => filter('dataType', cmd)"
+            @command="(cmd) => filter('dataType', cmd)"
           />
         </template>
       </el-table-column>
@@ -154,11 +181,7 @@
         <template slot-scope="scope">
           <div v-if="scope.row.progress !== null" class="flex progress-wrap">
             <i v-show="scope.row.pollIng" class="el-icon-loading" />
-            <el-popover
-              placement="top-start"
-              trigger="hover"
-              popper-class="f1"
-            >
+            <el-popover placement="top-start" trigger="hover" popper-class="f1">
               <TableTooltip
                 className="progress-tip"
                 :keys="progressKeys(scope.row)"
@@ -170,17 +193,15 @@
               <el-progress
                 slot="reference"
                 :percentage="getProgress(scope.row) || 0"
-                :color="progressFill(statusCodeMap[scope.row.status])"
+                :color="progressFill(scope.row.status)"
+                :format="(progress) => progressFormat(scope.row, progress)"
               />
             </el-popover>
           </div>
           <div v-else class="flex progress-wrap">
             <i class="el-icon-loading" />
             <span>
-              <el-progress
-                slot="reference"
-                :percentage="0"
-              />
+              <el-progress slot="reference" :percentage="0" />
             </span>
           </div>
         </template>
@@ -190,14 +211,14 @@
         prop="annotateType"
         :formatter="parseAnnotateType"
         align="left"
-        min-width="100"
+        min-width="120"
       >
         <template slot="header">
           <dropdown-header
             title="标注类型"
             :list="annotateTypeList"
             :filtered="!isNil(annotateType)"
-            @command="cmd => filter('annotateType', cmd)"
+            @command="(cmd) => filter('annotateType', cmd)"
           />
         </template>
       </el-table-column>
@@ -219,13 +240,15 @@
         sortable="custom"
         align="left"
       />
-      <el-table-column
-        prop="remark"
-        min-width="200"
-        label="数据集描述"
-        align="left"
-        show-overflow-tooltip
-      />
+      <el-table-column prop="remark" min-width="200" label="数据集描述" align="left">
+        <template slot-scope="scope">
+          <el-tooltip :content="scope.row.remark" enterable placement="top">
+            <div class="ellipsis dib " style="max-width: 100%;">
+              {{ scope.row.remark }}
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
       <Action
         fixed="right"
         min-width="330"
@@ -285,11 +308,18 @@
 
 <script>
 import { Message } from 'element-ui';
-import { isNil, omit } from 'lodash';
+import { isNil, omit, findKey } from 'lodash';
 import { mapState } from 'vuex';
 import CopyToClipboard from 'vue-copy-to-clipboard';
 
-import crudDataset, { editDataset, detail, postDataEnhance, topDataset, queryDatasetsProgress, queryDatasetStatus } from '@/api/preparation/dataset';
+import crudDataset, {
+  editDataset,
+  detail,
+  postDataEnhance,
+  topDataset,
+  queryDatasetsProgress,
+  queryDatasetStatus,
+} from '@/api/preparation/dataset';
 import {
   publish,
   autoAnnotate,
@@ -303,16 +333,20 @@ import cdOperation from '@crud/CD.operation';
 import datePickerMixin from '@/mixins/datePickerMixin';
 
 import {
-  annotationMap,
+  annotationList,
   dataTypeMap,
+  dataTypeCodeMap,
   annotationProgressMap,
   decompressProgressMap,
   datasetStatusMap,
-  statusCodeMap,
-  findKey,
+  rankDatasetStatusMap,
+  isStatus,
+  isIncludeStatus,
   getDatasetType,
   annotationCodeMap,
   isPublishDataset,
+  isPresetDataset,
+  annotationBy,
 } from '@/views/dataset/util';
 import Edit from '@/components/InlineTableEdit';
 import BaseModal from '@/components/BaseModal';
@@ -330,7 +364,7 @@ import ImportDataset from './import-dataset';
 import DataEnhance from './data-enhance';
 import EditDataset from './edit-dataset';
 import UploadDataFile from './upload-datafile';
-import "../style/list.scss";
+import '../style/list.scss';
 
 const defaultForm = {
   id: null,
@@ -342,17 +376,15 @@ const defaultForm = {
   type: 0,
 };
 
+const annotationByCode = annotationBy('code');
+
 // 自定义数据集
-const isImport = d => d.import;
-// todo: 未开始
-const isImportStatus = (d, status) => isImport(d) && statusCodeMap[d.status] === status;
-// 查找状态码是否匹配
-const isStatus = (d, code) => statusCodeMap[d.status] === code;
+const isImport = (d) => d.import;
 
 // 上传中
-const isImportDataset = d => isImportStatus(d, 'IMPORTING');
+const isImportDataset = (d) => isStatus(d, 'IMPORTING');
 
-const enhanceCode = findKey('ENHANCING', statusCodeMap);
+const enhanceCode = findKey(datasetStatusMap, { status: 'ENHANCING' });
 
 export default {
   name: 'DataSet',
@@ -376,7 +408,7 @@ export default {
   },
   beforeRouteEnter(to, from, next) {
     // 拦截非视觉场景
-    if(getDatasetType() !== 0) {
+    if (getDatasetType() !== 0) {
       next('/data/datasets');
     } else {
       // 正常跳转，并将导航高亮切换为数据集管理
@@ -408,17 +440,7 @@ export default {
       annotateType: null,
       dataType: null,
       datasetStatusFilter: 'all',
-      datasetListType: '0',
-      options: [
-        {
-          value: '1',
-          label: '医学影像',
-        }, 
-        {
-          value: '0',
-          label: '视觉/文本',
-        },
-      ],
+      datasetListType: '0', // 视觉/语音/文本
       actionModal: {
         show: false,
         row: undefined,
@@ -428,12 +450,12 @@ export default {
       importRow: null,
       autoTimer: {}, // 自动标注定时器
       decompressStateMap: decompressProgressMap, // deprecated
-      statusCodeMap,
+      datasetStatusMap,
     };
   },
   computed: {
     ...mapState({
-      activePanel: state => {
+      activePanel: (state) => {
         return String(state.dataset.activePanel);
       },
     }),
@@ -441,7 +463,7 @@ export default {
     isImport() {
       return isImport;
     },
-    // 解压缩中的自定义数据集
+    // 上传中数据集
     isImportDataset() {
       return isImportDataset;
     },
@@ -454,22 +476,17 @@ export default {
       };
     },
     annotateTypeList() {
-      // 原始标注列表
-      const rawAnnotateTypeList = Object.keys(annotationMap).map(d => ({
-        label: annotationMap[d].name,
-        value: Number(d),
-      }));
-      return [{ label: '全部', value: null }].concat(rawAnnotateTypeList);
+      return [{ label: '全部', value: null }].concat(annotationList);
     },
     dataTypeList() {
-      const rawDataTypeList = Object.keys(dataTypeMap).map(d => ({
+      const rawDataTypeList = Object.keys(dataTypeMap).map((d) => ({
         label: dataTypeMap[d],
         value: Number(d),
       }));
       return [{ label: '全部', value: null }].concat(rawDataTypeList);
     },
     statusList() {
-      const rawStatusList = Object.keys(datasetStatusMap).map(d => ({
+      const rawStatusList = Object.keys(rankDatasetStatusMap).map((d) => ({
         label: datasetStatusMap[d].name,
         value: Number(d),
       }));
@@ -477,38 +494,52 @@ export default {
     },
     // 区分预置数据集和普通数据集操作权限
     operationProps() {
-      return Number(this.activePanel) === 2 ? { disabled: true } : undefined;
+      return isPresetDataset(this.activePanel) ? { disabled: true } : undefined;
+    },
+    VUE_APP_DOCS_URL() {
+      return process.env.VUE_APP_DOCS_URL;
     },
   },
   watch: {
     // eslint-disable-next-line func-names
     'crud.data': function(next, prev = []) {
       // 首先匹配size, 其次匹配 id 是否一致, 再次检查此前是否存在轮询的数据集
-      if (next.length > 0 && (prev.length !== next.length || !isEqualByProp(prev, next, 'id') || prev.some(d => d.pollIng))) {
+      if (
+        next.length > 0 &&
+        (prev.length !== next.length ||
+          !isEqualByProp(prev, next, 'id') ||
+          prev.some((d) => d.pollIng))
+      ) {
         // 获取自动标注状态列表的结果
-        const autoList = next.filter(d => statusCodeMap[d.status] === 'AUTO_ANNOTATING');
+        const autoList = next.filter((d) => isStatus(d, 'AUTO_ANNOTATING'));
         // 获取正在采样中的数据集
-        const sampleList = next.filter(d => statusCodeMap[d.status] === 'SAMPLING');
+        const sampleList = next.filter((d) => isStatus(d, 'SAMPLING'));
         // 获取正在目标跟踪中的数据集
-        const trackList = next.filter(d => statusCodeMap[d.status] === 'TRACKING');
+        const trackList = next.filter((d) => isStatus(d, 'TRACKING'));
         // 获取数据增强中的数据
-        const enhanceList = next.filter(d => statusCodeMap[d.status] === 'ENHANCING');
+        const enhanceList = next.filter((d) => isStatus(d, 'ENHANCING'));
         // 发布中
         const publishList = next.filter(isPublishDataset);
         // 导入中列表
         const importList = next.filter(isImportDataset);
         // 需要轮询的列表
-        const pollList = autoList.concat(sampleList, trackList, enhanceList, importList, publishList);
+        const pollList = autoList.concat(
+          sampleList,
+          trackList,
+          enhanceList,
+          importList,
+          publishList
+        );
 
         Promise.all(
-          pollList.map(row => {
+          pollList.map((row) => {
             // vue hack, 初始化状态
             this.$set(row, 'pollIng', true);
             // 给 采样、增强、目标跟踪 一个默认起始值
-            if (['SAMPLING', 'ENHANCING', 'TRACKING'].includes(statusCodeMap[row.status])) {
+            if (isIncludeStatus(row, ['SAMPLING', 'ENHANCING', 'TRACKING'])) {
               this.$set(row, 'sample_progress', 10);
             }
-            // 导入自定义数据集
+            // 导入自定义数据集，导入中
             if (isImportDataset(row)) {
               this.$set(row, 'pollType', 'IMPORTING');
             }
@@ -517,8 +548,8 @@ export default {
               this.$set(row, 'pollType', 'PUBLISHING');
             }
             // 轮询类型，兼容自定义数据集
-            return this.poll(row, row.pollType || statusCodeMap[row.status]);
-          }),
+            return this.poll(row, row.pollType || datasetStatusMap[row.status]?.status);
+          })
         );
       }
     },
@@ -535,29 +566,29 @@ export default {
     }
   },
   beforeDestroy() {
-    Object.keys(this.autoTimer).forEach(key => clearTimeout(this.autoTimer[key]));
+    Object.keys(this.autoTimer).forEach((key) => clearTimeout(this.autoTimer[key]));
   },
   methods: {
     // tooltip的key，需要根据数据集类型进行过滤
     progressKeys(row) {
       const keys = Object.keys(annotationProgressMap);
-      if(row.annotateType !== annotationCodeMap.TRACK) {
-        return keys.filter(key => key !== "finishAutoTrack");
+      if (row.annotateType !== annotationCodeMap.TRACK) {
+        return keys.filter((key) => key !== 'finishAutoTrack');
       }
       return keys;
-    }, 
+    },
     keyAccessor: (key) => annotationProgressMap[key],
     valueAccessor: (key, idx, data) => data[key],
     [CRUD.HOOK.beforeRefresh]() {
-      this.crud.query = { ...this.query, ...this.localQuery};
+      this.crud.query = { ...this.query, ...this.localQuery };
     },
     [CRUD.HOOK.afterRefresh]() {
       const { data } = this.crud;
-      this.queryRowProgress(data.map(d => d.id));
+      this.queryRowProgress(data.map((d) => d.id));
     },
     // 计算置顶行的样式
-    tableTopRowClass({row}) {
-      if(row.top){
+    tableTopRowClass({ row }) {
+      if (row.top) {
         return 'table-top-row';
       }
       return '';
@@ -582,11 +613,11 @@ export default {
 
     // 将进度条单独拆分
     queryRowProgress(ids) {
-      if(ids.length === 0) return;
-      queryDatasetsProgress({ datasetIds: ids }).then(res => {
-        const nextData = this.crud.data.map(d => {
+      if (ids.length === 0) return;
+      queryDatasetsProgress({ datasetIds: ids }).then((res) => {
+        const nextData = this.crud.data.map((d) => {
           const rowProgress = res[d.id] || null;
-          return {...d, progress: rowProgress };
+          return { ...d, progress: rowProgress };
         });
 
         Object.assign(this.crud, {
@@ -594,25 +625,24 @@ export default {
         });
       });
     },
-    pollRowProgress(id){
+    pollRowProgress(id) {
       return new Promise((resolve) => {
-        queryDatasetsProgress({ datasetIds: [id] })
-          .then(res => {
-            const progress = res[id];
-            if(this.getAllFinished(progress) > 0) {
-              if (this.pollDone === false){
-                this.pollDone = true;
-                resolve(progress);
-              }
+        queryDatasetsProgress({ datasetIds: [id] }).then((res) => {
+          const progress = res[id];
+          if (this.getAllFinished(progress) > 0) {
+            if (this.pollDone === false) {
+              this.pollDone = true;
+              resolve(progress);
             }
-          });
+          }
+        });
       });
     },
 
     updateRow(id, { progress, info }) {
-      const sIndex = this.crud.data.findIndex(d => d.id === id);
-      if(sIndex > -1) {
-        const nextRow = omit({...this.crud.data[sIndex], ...info, progress }, ['pollType']);
+      const sIndex = this.crud.data.findIndex((d) => d.id === id);
+      if (sIndex > -1) {
+        const nextRow = omit({ ...this.crud.data[sIndex], ...info, progress }, ['pollType']);
         const nextData = replace(this.crud.data, sIndex, nextRow);
         Object.assign(this.crud, {
           data: nextData,
@@ -629,13 +659,16 @@ export default {
     },
     // 进度条颜色
     progressFill(status) {
-      const fillMap = {
-        'AUTO_ANNOTATING': '#52C41A',
-        'SAMPLING': '#606266',
-      };
-      if (fillMap[status]) return fillMap[status];
+      if (status && datasetStatusMap[status].progressColor)
+        return datasetStatusMap[status].progressColor;
       return '#52C41A';
     },
+    progressFormat(row, progress) {
+      if (isImportDataset(row)) {
+        return '导入中';
+      }
+      return `${progress}%`;
+    },
     // 查询数据集详情
     async queryDatasetDetail(datasetId) {
       const res = await detail(datasetId);
@@ -652,8 +685,11 @@ export default {
       this.createDatasetVisible = false;
     },
     // 导入自定义数据集表单显隐切换
-    toggleImportDataset() {
-      this.importDatasetVisible = !this.importDatasetVisible;
+    toggleImportDataset(visible) {
+      this.importDatasetVisible = isNil(visible) ? !this.importDatasetVisible : visible;
+    },
+    toggleImportDatasetEvent() {
+      return this.toggleImportDataset();
     },
     handleCopy(text, result, row) {
       this.$set(row, 'copySuccess', false);
@@ -677,29 +713,39 @@ export default {
         this.crud.status.edit = CRUD.STATUS.NORMAL;
         this.$set(row, 'name', editForm.name);
         if (row.pollIng) {
-          this.poll(row, statusCodeMap[row.status]);
+          this.poll(row, datasetStatusMap[row.status]?.status);
         }
       });
     },
     isValidDetail(row) {
       // 未采样、采样中、采样失败、自动标注中、目标跟踪中、目标跟踪失败 不能进行查看标注
-      return !['AUTO_ANNOTATING', 'UNSAMPLED', 'SAMPLING', 'SAMPLE_FAILED', 'ENHANCING', 'TRACKING', 'TRACK_FAILED'].includes(statusCodeMap[row.status]);
+      const statusArr = [
+        'AUTO_ANNOTATING',
+        'UNSAMPLED',
+        'SAMPLING',
+        'SAMPLE_FAILED',
+        'ENHANCING',
+        'TRACKING',
+        'TRACK_FAILED',
+      ];
+      return !isIncludeStatus(row, statusArr);
     },
     // 查看标注
     async goDetail(row) {
-      // 版本切换中无法查看详情
-      if(isPublishDataset(row)) return false;
-      // 自定义数据集无法查看详情
-      if(isImport(row) && statusCodeMap[row.status] !== 'ANNOTATED') return false;
+      // 版本切换中
+      if (isPublishDataset(row)) {
+        Message.error('版本切换中，请稍后');
+        return false;
+      }
       const datasetInfo = await this.queryDatasetDetail(row.id);
       if (!this.isValidDetail(datasetInfo)) {
         return Message.error('数据集当前状态不能进行查看');
       }
-      this.$router.push({
-        path: `/data/datasets/${
-          annotationMap[row.annotateType].urlPrefix
-        }/${row.id}`,
-      });
+      const urlPrefix = annotationByCode(row.annotateType, 'urlPrefix');
+      !!urlPrefix &&
+        this.$router.push({
+          path: `/data/datasets/${urlPrefix}/${row.id}`,
+        });
       return null;
     },
 
@@ -720,7 +766,7 @@ export default {
           // 启动自动标注轮询
           this.poll(row, 'AUTO_ANNOTATING');
         })
-        .catch(e => {
+        .catch((e) => {
           row.pollIng = false;
           this.$message({
             message: e.message || '自动标注任务失败',
@@ -749,8 +795,16 @@ export default {
       this.crud.refresh();
     },
     showUploadDataFile(row) {
-      this.importRow = row;
-      this.uploadDataFileVisible = true;
+      // 如果是表格类型，跳转到导入表格页面
+      if (row.dataType === dataTypeCodeMap.TABLE) {
+        this.$router.push({
+          name: `TableImport`,
+          params: { datasetId: row.id, annotateType: row.annotateType },
+        });
+      } else {
+        this.importRow = row;
+        this.uploadDataFileVisible = true;
+      }
     },
     closeUploadDataFile() {
       this.importRow = null;
@@ -758,17 +812,21 @@ export default {
       this.onResetFresh();
     },
     // 统计完成进度
-    getAllFinished (progress = {}){
-      const { finished, autoFinished, finishAutoTrack, annotationNotDistinguishFile} = progress;
+    getAllFinished(progress = {}) {
+      const { finished, autoFinished, finishAutoTrack, annotationNotDistinguishFile } = progress;
       return finished + autoFinished + finishAutoTrack + annotationNotDistinguishFile;
     },
     getProgress(row) {
       const { progress } = row;
       // 采样中 数据增强中 目标跟踪中 模拟一个假的进度条
-      if (['SAMPLING', 'ENHANCING', 'TRACKING'].includes(statusCodeMap[row.status])) {
+      if (isIncludeStatus(row, ['SAMPLING', 'ENHANCING', 'TRACKING'])) {
         return Math.min(Math.floor(row.sample_progress), 99);
       }
-      if (statusCodeMap[row.status] === 'UNANNOTATED' && row.sample_progress > 0) {
+      if (isStatus(row, 'UNANNOTATED') && row.sample_progress > 0) {
+        return 100;
+      }
+      // 自定义格式的数据集，导入后标注状态为完成的，进度100%
+      if (isImport(row) && isStatus(row, 'ANNOTATED')) {
         return 100;
       }
       const allFinished = this.getAllFinished(progress);
@@ -780,7 +838,7 @@ export default {
       return dataTypeMap[cellValue];
     },
     parseAnnotateType(row, column, cellValue) {
-      return (annotationMap[cellValue] || {}).name || '';
+      return annotationByCode(cellValue, 'name');
     },
     parseStatus(row, column, cellValue = 0) {
       return datasetStatusMap[cellValue].name;
@@ -788,7 +846,7 @@ export default {
     // 轮询状态
     poll(row, type, options = {}) {
       // 假进度条：给采样一个递增值
-      if (['SAMPLING', 'ENHANCING', 'TRACKING'].includes(statusCodeMap[row.status])) {
+      if (isIncludeStatus(row, ['SAMPLING', 'ENHANCING', 'TRACKING'])) {
         row.sample_increment = 9;
       }
       return this.setTime(row, 0, { type, callback: options.callback });
@@ -809,14 +867,19 @@ export default {
           }, 3000);
         }
         // 回调
-        if(typeof callback === 'function') {
+        if (typeof callback === 'function') {
           callback(row);
         }
       });
     },
     // deprecate: 展示解压状态
     showUnZip(d) {
-      return d.import && ['UNANNOTATED', 'ANNOTATING', 'AUTO_ANNOTATED'].includes(statusCodeMap[d.decompressState]);
+      return (
+        d.import &&
+        ['UNANNOTATED', 'ANNOTATING', 'AUTO_ANNOTATED'].includes(
+          datasetStatusMap[d.decompressState]?.status
+        )
+      );
     },
     // 数据集轮询进度
     datasetPoll(row, type) {
@@ -827,7 +890,7 @@ export default {
           const res = result[row.id];
           // 开始上传数据集
           if (!isStatus(res, 'UNANNOTATED')) {
-          // 进入下一个阶段
+            // 进入下一个阶段
             Object.assign(row, res, {
               pollIng: false,
             });
@@ -837,11 +900,11 @@ export default {
         });
       }
       // 导入中
-      if (type === 'IMPORTING'){
-        return this.queryDatasetDetail(row.id).then(res => {
+      if (type === 'IMPORTING') {
+        return this.queryDatasetDetail(row.id).then((res) => {
           row.status = res.status; // 更新标注状态
           // 标注状态进入下一个阶段
-          if (statusCodeMap[res.status] !== type) {
+          if (!isStatus(res, type)) {
             row.pollIng = false;
             row.status = res.status; // 更新标注状态
           }
@@ -850,15 +913,14 @@ export default {
       }
       // 轮询数据集发布状态
       if (type === 'PUBLISHING') {
-        return this.queryDatasetDetail(row.id).then(info => {
+        return this.queryDatasetDetail(row.id).then((info) => {
           // 标注状态进入下一个阶段
           if (!isPublishDataset(info)) {
             setTimeout(() => {
-              this.pollRowProgress(row.id)
-                .then(progress => {
-                  row.pollIng = false;
-                  this.updateRow(row.id, { progress, info });
-                });
+              this.pollRowProgress(row.id).then((progress) => {
+                row.pollIng = false;
+                this.updateRow(row.id, { progress, info });
+              });
             }, 2000);
           }
           return Promise.resolve(row);
@@ -866,15 +928,15 @@ export default {
       }
       if (['SAMPLING', 'ENHANCING', 'TRACKING'].includes(type)) {
         // 采样中 数据增强中 目标跟踪中
-        return this.queryDatasetDetail(row.id).then(res => {
-          if (statusCodeMap[res.status] === 'TRACKING') {
+        return this.queryDatasetDetail(row.id).then((res) => {
+          if (isStatus(row, 'TRACKING')) {
             row.status = res.status;
             row.pollIng = true;
             row.sample_progress = (row.sample_progress || 10) + row.sample_increment;
             row.sample_increment *= 0.9;
           }
-          if (statusCodeMap[res.status] !== type) {
-          // 采样视频进入下一个阶段
+          if (!isStatus(res, type)) {
+            // 采样视频进入下一个阶段
             row.pollIng = false;
             row.progress = res.progress; // 更新最新自动标注进度
             row.status = res.status; // 更新标注状态
@@ -888,17 +950,17 @@ export default {
       }
       if (type === 'AUTO_ANNOTATING') {
         // 自动标注中
-        return annotateStatus(row.id).then(res => {
+        return annotateStatus(row.id).then((res) => {
           if (!isNil(res.progress)) {
             row.pollIng = true;
             row.progress = res.progress; // 更新最新自动标注进度
             row.status = res.status; // 更新标注状态
             // 自动标注完成
-            if (statusCodeMap[res.status] === 'TRACKING') {
+            if (isStatus(row, 'TRACKING')) {
               this.poll(row, 'TRACKING');
               return null;
             }
-            if (statusCodeMap[res.status] !== 'AUTO_ANNOTATING') {
+            if (!isStatus(row, 'AUTO_ANNOTATING')) {
               row.pollIng = false;
             }
             return Promise.resolve(row);
@@ -909,12 +971,18 @@ export default {
       // 异常兼容
       return Promise.reject(new Error(`数据集 ${row.id} 查询错误`));
     },
-    // 数据集状态为自动标注中、采样中、数据增强中不能被选中
-    // 数据集导入中允许删除
+    // 判断数据集能否被选中
     canSelect(row) {
-      if(row.import) return true;
-      return !(row.pollIng ||
-        ['AUTO_ANNOTATING', 'SAMPLING', 'ENHANCING', 'TRACKING'].includes(statusCodeMap[row.status])
+      // 预置数据集 若从普通数据集转换生成的是可以删除的
+      if (isPresetDataset(this.activePanel)) {
+        return !isNil(row.sourceId);
+      }
+      // 普通数据集状态为自动标注中、采样中、数据增强中不能被选中
+      // 数据集导入中允许删除
+      if (row.import) return true;
+      return !(
+        row.pollIng ||
+        isIncludeStatus(row, ['AUTO_ANNOTATING', 'SAMPLING', 'ENHANCING', 'TRACKING'])
       );
     },
     showActionModal(row, type) {
@@ -935,7 +1003,7 @@ export default {
       this.showActionModal(row, 'editDataset');
     },
     // 轮询查询数据集状态
-    checkImport(row){
+    checkImport(row) {
       this.$set(row, 'pollIng', true);
       // 启动轮询数据集状态查询
       this.poll(row, 'CHECK_STATUS', {
@@ -949,9 +1017,9 @@ export default {
       });
     },
     resetActionModal() {
-      if (this.actionModal.type === "dataEnhance") {
+      if (this.actionModal.type === 'dataEnhance') {
         this.enhanceKey += 1;
-      };
+      }
       if (this.actionModal.type === 'editDataset') {
         this.editKey += 1;
       }
@@ -967,7 +1035,7 @@ export default {
     },
     handlePublish(row) {
       const publishForm = this.$refs.publishForm.$refs.form;
-      publishForm.validate(async valid => {
+      publishForm.validate(async (valid) => {
         if (valid) {
           const { model } = this.$refs.publishForm.state;
           // 重置 actionModal
@@ -975,6 +1043,7 @@ export default {
           publish({
             datasetId: model.id,
             versionNote: model.versionNote || '',
+            ofRecord: model.ofRecord,
           });
           setTimeout(() => {
             this.crud.toQuery();
@@ -996,7 +1065,7 @@ export default {
           // 启动自动标注轮询
           this.poll(row, 'AUTO_ANNOTATING');
         })
-        .catch(e => {
+        .catch((e) => {
           row.pollIng = false;
           this.$message({
             message: e.message || '重新自动标注任务失败',
@@ -1017,7 +1086,7 @@ export default {
           // 启动目标跟踪轮询
           this.poll(row, 'TRACKING');
         })
-        .catch(e => {
+        .catch((e) => {
           row.pollIng = false;
           this.$message({
             message: e.message || messageText2,
@@ -1029,18 +1098,20 @@ export default {
       Object.assign(this.actionModal, {
         showOkLoading: true,
       });
-      return postDataEnhance(model.id, model.types).then(() => {
-        // 启动数据集增强
-        this.$set(row, 'status', enhanceCode);
-        this.$set(row, 'pollIng', true);
-        this.poll(row, 'ENHANCING');
-      }).finally(() => {
-        // 重置 actionModal
-        this.resetActionModal();
-      });
+      return postDataEnhance(model.id, model.types)
+        .then(() => {
+          // 启动数据集增强
+          this.$set(row, 'status', enhanceCode);
+          this.$set(row, 'pollIng', true);
+          this.poll(row, 'ENHANCING');
+        })
+        .finally(() => {
+          // 重置 actionModal
+          this.resetActionModal();
+        });
     },
     topDataset(row) {
-      return topDataset(row).then(() => { this.onResetFresh(); });
+      return topDataset(row).then(this.onResetFresh);
     },
     handleEditDataset(data, row) {
       Object.assign(this.actionModal, {
@@ -1059,8 +1130,8 @@ export default {
       return editDataset(editForm)
         .then(() => {
           this.$message({
-          message: '数据集修改成功',
-          type: 'success',
+            message: '数据集修改成功',
+            type: 'success',
           });
         })
         .finally(() => {
diff --git a/webapp/src/views/dataset/list/publish.vue b/webapp/src/views/dataset/list/publish.vue
index ebdfd73..53f9a37 100644
--- a/webapp/src/views/dataset/list/publish.vue
+++ b/webapp/src/views/dataset/list/publish.vue
@@ -1,21 +1,21 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <el-form ref="form" :model="state.model" :rules="rules" label-width="100px">
+  <el-form ref="form" :model="state.model" :rules="rules" label-width="110px">
     <el-form-item label="数据集名称" prop="name">
       <el-input disabled :value="state.model.name" />
     </el-form-item>
@@ -35,6 +35,13 @@
         show-word-limit
       />
     </el-form-item>
+    <el-form-item v-if="showOfRecord(row.annotateType)" label="转换OFRecord" prop="ofRecord">
+      <el-switch v-model="state.model.ofRecord" :active-value="1" :inactive-value="0" />
+      <p style="margin: 0;">
+        OFRecord是天枢深度学习框架原生的数据格式,
+        <a href="https://docs.oneflow.org/extended_topics/ofrecord.html">更多参考</a>
+      </p>
+    </el-form-item>
   </el-form>
 </template>
 
@@ -42,6 +49,7 @@
 import { onMounted, reactive } from '@vue/composition-api';
 
 import { queryNextVersion } from '@/api/preparation/dataset';
+import { showOfRecord } from '../util';
 
 export default {
   name: 'Publish',
@@ -59,7 +67,7 @@ export default {
       model: props.row,
     });
 
-    onMounted(async() => {
+    onMounted(async () => {
       const nextVersionName = await queryNextVersion(props.row?.id);
       Object.assign(state, {
         model: { ...state.model, nextVersionName },
@@ -69,6 +77,7 @@ export default {
     return {
       rules,
       state,
+      showOfRecord,
     };
   },
 };
diff --git a/webapp/src/views/dataset/list/status.js b/webapp/src/views/dataset/list/status.js
index c9e044b..a1f0c40 100644
--- a/webapp/src/views/dataset/list/status.js
+++ b/webapp/src/views/dataset/list/status.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { datasetStatusMap } from '../util';
 
@@ -28,13 +28,13 @@ export default {
       scopedSlots: {
         header: () => {
           return (
-            <el-dropdown trigger='click' size='medium'>
+            <el-dropdown trigger="click" size="medium">
               <span>
-                <span {... { class: textClass } }>状态</span>
-                <i {... { class: iconClass } } />
+                <span {...{ class: textClass }}>状态</span>
+                <i {...{ class: iconClass }} />
               </span>
-              <el-dropdown-menu slot='dropdown'>
-                {statusList.map(item => {
+              <el-dropdown-menu slot="dropdown">
+                {statusList.map((item) => {
                   return (
                     <el-dropdown-item
                       key={item.value}
@@ -50,17 +50,20 @@ export default {
         },
         default: ({ row }) => {
           const status = datasetStatusMap[row.status] || {};
-          const colorProps = (!status.type && status.bgColor) && {
-            props: {
-              color: status.bgColor,
-            },
-            style: {
-              color: status.color,
-              borderColor: status.bgColor,
-            },
-          };
+          const colorProps = !status.type &&
+            status.bgColor && {
+              props: {
+                color: status.bgColor,
+              },
+              style: {
+                color: status.color,
+                borderColor: status.bgColor,
+              },
+            };
           return (
-            <el-tag type={status.type} {...colorProps}>{status.name}</el-tag>
+            <el-tag type={status.type} {...colorProps}>
+              {status.name}
+            </el-tag>
           );
         },
       },
diff --git a/webapp/src/views/dataset/list/upload-datafile.vue b/webapp/src/views/dataset/list/upload-datafile.vue
index a1daa1d..e5ab011 100644
--- a/webapp/src/views/dataset/list/upload-datafile.vue
+++ b/webapp/src/views/dataset/list/upload-datafile.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-dialog
@@ -37,7 +37,7 @@
       />
       <!--上传视频时显示帧间隔设置-->
       <el-form
-        v-if="!(state.isImage || state.isText)"
+        v-if="!(state.isImage || state.isText || state.isAudio)"
         ref="formStep"
         :model="state.form"
         label-width="100px"
@@ -46,7 +46,7 @@
         <el-form-item
           label="视频帧间隔"
           prop="frameInterval"
-          :rules="[{required: true, message: '请输入有效的帧间隔', trigger: 'blur'}]"
+          :rules="[{ required: true, message: '请输入有效的帧间隔', trigger: 'blur' }]"
         >
           <el-input-number v-model="state.form.frameInterval" :min="1" />
         </el-form-item>
@@ -55,7 +55,7 @@
     <!--上传文件进度展示-->
     <div v-show="state.uploadStep === 1">
       <el-progress
-        v-if="state.isImage || state.isText"
+        v-if="state.isImage || state.isText || state.isAudio"
         type="circle"
         :percentage="state.percentage"
         :status="state.uploadStatus"
@@ -71,34 +71,53 @@
         </div>
       </div>
     </div>
-    <!--上传成功-->
+    <!--结果-->
     <div v-show="state.uploadStep === 2">
-      <el-progress type="circle" :percentage="100" status="success" />
+      <el-progress
+        type="circle"
+        :percentage="state.uploadStatus === 'exception' ? 0 : 100"
+        :status="state.uploadStatus"
+      />
+      <div v-if="state.uploadStatus === 'exception'" class="app-result-subtitle mt-10">
+        {{ state.error.message }}
+      </div>
     </div>
     <div slot="footer">
       <div v-show="state.uploadStep === 0">
         <el-button @click="handleClose">取消</el-button>
-        <el-button type="primary" @click="uploadSubmit('fileUploadForm')">开始上传</el-button>
+        <el-button type="primary" :loading="state.loading" @click="uploadSubmit('fileUploadForm')"
+          >开始上传</el-button
+        >
       </div>
-      <div v-show="state.uploadStep === 1">
-        <el-button @click="handleClose">取消</el-button>
+      <div v-show="state.uploadStep === 1" class="tc">
+        <el-button @click="handleClose">隐藏</el-button>
       </div>
-      <div v-show="state.uploadStep === 2">
-        <el-button type="primary" @click="handleClose">完成</el-button>
+      <div v-show="state.uploadStep === 2" class="tc">
+        <el-button type="primary" @click="handleClose">{{
+          state.uploadStatus === 'success' ? '完成' : '关闭'
+        }}</el-button>
       </div>
     </div>
   </el-dialog>
 </template>
 <script>
+import { last } from 'lodash';
 
-import Vue from 'vue';
-import { reactive, watch, computed } from '@vue/composition-api';
+import { reactive, watch, computed, nextTick } from '@vue/composition-api';
 import { toFixed } from '@/utils';
 import UploadInline from '@/components/UploadForm/inline';
-import { getImgFromMinIO, withDimensionFile, trackUploadProps, dataTypeCodeMap } from '@/views/dataset/util';
+import {
+  getFileFromMinIO,
+  withDimensionFile,
+  trackUploadProps,
+  dataTypeCodeMap,
+} from '@/views/dataset/util';
 import { submit, submitVideo } from '@/api/preparation/datafile';
 import { Message } from 'element-ui';
 
+// 每次最多上传的文件数量
+const MAX_FILE_COUNT = 200;
+
 export default {
   name: 'UploadDataFile',
   components: {
@@ -128,22 +147,27 @@ export default {
       uploadKey: 1,
       row: {},
       uploadStep: 0,
+      loading: false,
       isImage: undefined,
       isText: undefined,
+      isAudio: undefined,
       isVideo: undefined,
-      accept: "",
-      title: "",
+      accept: '',
+      title: '',
       percentage: 0,
       uploadStatus: undefined,
       form: {
         frameInterval: defaultFrameInterval,
       },
+      error: null, // 上传错误
+      // 上传步数
+      steps: [],
     });
 
     // 上传包括图片和视频
     const uploader = async (datasetId, files) => {
       // 文件上传
-      if (state.isImage || state.isText) {
+      if (state.isImage || state.isText || state.isAudio) {
         return submit(datasetId, files);
       }
       return submitVideo(datasetId, {
@@ -154,49 +178,97 @@ export default {
 
     // 上传视频时不显示实时进度
     const format = (percentage) => {
-      return percentage < 100 ? `${percentage}%` : ``;
+      return percentage <= 100 ? `${percentage}%` : ``;
+    };
+
+    // 上传失败
+    const uploadError = (err) => {
+      state.loading = false;
+      Message.error({ message: err.message || '上传失败', duration: 1000 });
     };
 
     // 上传成功
     const uploadSuccess = (res) => {
+      // 文本已经同步过，不需要再同步
+      if (state.isText) return;
       // 视频上传完毕
       if (state.isVideo) {
         state.percentage = 100;
       }
-      const files = getImgFromMinIO(res);
+      const files = getFileFromMinIO(res);
       // 自动标注完成时 导入 提示信息不同
-      const successMessage = "上传文件成功";
+      const successMessage = '上传文件成功';
       if (files.length > 0) {
-        uploader(state.row.id, files).then(() => {
-          Message.success({ message: successMessage, duration: 1000 });
-        });
+        uploader(state.row.id, files)
+          .then(() => {
+            Object.assign(state, {
+              loading: false,
+              uploadStatus: 'success',
+              uploadStep: 2,
+              title: '上传成功',
+            });
+            Message.success({ message: successMessage, duration: 1000 });
+          })
+          .catch((err) => {
+            Object.assign(state, {
+              loading: false,
+              error: err,
+              uploadStatus: 'exception',
+              uploadStep: 2,
+              title: '上传失败',
+            });
+          });
       }
-      Object.assign(state, {
-        loading: false,
-        uploadStatus: "success",
-        uploadStep: 2,
-        title: "上传成功",
-      });
-    };
-
-    // 上传失败
-    const uploadError = (err) => {
-      state.loading = false;
-      Message.error({ message: err || "上传失败", duration: 1000 });
     };
 
     // 确定上传
-    const uploadSubmit = formName => {
-      context.refs[formName].uploadSubmit((resolved, total) => {
+    const uploadSubmit = (formName) => {
+      // 判断选中文件数量再去调接口
+      if (context.refs[formName].formRef.lenOfFileList === 0) {
+        Message.error({ message: '文件不能为空', duration: 1000 });
+        return;
+      }
+      state.loading = true;
+      context.refs[formName].uploadSubmit((resolved, fileList, resolveFiles) => {
+        // 按阶段最大值取模（针对文本分批同步）
+        const mod = fileList.length % MAX_FILE_COUNT;
+        const intSteps = (fileList.length - mod) / MAX_FILE_COUNT;
+        const steps = Array.from({ length: intSteps }, (_, i) => (i + 1) * MAX_FILE_COUNT);
+        if (mod) {
+          steps.push((last(steps) || 0) + mod);
+        }
         Object.assign(state, {
-          loading: true,
           uploadStep: 1,
-          title: "上传中",
+          title: '上传中',
+          steps,
         });
+
         // eslint-disable-next-line func-names
-        Vue.nextTick(function() {
-          state.percentage =
-            state.percentage > 100 ? 100 : toFixed(resolved / total);
+        nextTick(function() {
+          // 只针对文本做分批上传
+          if (state.isText) {
+            state.steps.forEach((step, i) => {
+              if (step === resolved) {
+                const prevStep = i === 0 ? 0 : state.steps[i - 1];
+                // 分批同步文件
+                const stepFiles = getFileFromMinIO(resolveFiles.slice(prevStep, step));
+                uploader(state.row.id, stepFiles).then(() => {
+                  // 最后一步同步
+                  if (i === state.steps.length - 1) {
+                    Object.assign(state, {
+                      loading: false,
+                      uploadStatus: 'success',
+                      uploadStep: 2,
+                      title: '上传成功',
+                    });
+                    Message.success({ message: '上传文件成功', duration: 1000 });
+                  }
+                });
+              }
+            });
+          }
+
+          state.percentage = state.percentage > 100 ? 100 : toFixed(resolved / fileList.length);
         });
       });
     };
@@ -208,64 +280,92 @@ export default {
         uploadKey: state.uploadKey + 1,
         percentage: 0,
         uploadStatus: undefined,
+        error: null,
       });
     };
 
+    const buildDataParams = (type) => {
+      const dataParamMap = {
+        [dataTypeCodeMap.IMAGE]: {
+          isImage: true,
+          isText: false,
+          isAudio: false,
+          isVideo: false,
+          title: '导入图片',
+          accept: '.jpg,.png,.bmp,.jpeg',
+        },
+        [dataTypeCodeMap.TEXT]: {
+          isImage: false,
+          isText: true,
+          isAudio: false,
+          isVideo: false,
+          title: '导入文本',
+          accept: '.txt',
+        },
+        [dataTypeCodeMap.AUDIO]: {
+          isImage: false,
+          isText: false,
+          isAudio: true,
+          isVideo: false,
+          title: '导入音频',
+          accept: '.mp3,.wav,.wma,.aac',
+        },
+        [dataTypeCodeMap.VIDEO]: {
+          isImage: false,
+          isText: false,
+          isAudio: false,
+          isVideo: true,
+          title: '导入视频',
+          accept: '.mp4,.avi,.mkv,.mov,.webm,.wmv',
+        },
+      };
+      return dataParamMap[type] || {};
+    };
+
     const optionCreateProps = computed(() => {
-      if(!state.row) return {};
+      if (!state.row) return {};
       const props = {
         params: {
           datasetId: state.row.id,
-          objectPath: `dataset/${state.row.id}/origin`, // 图片对象存储路径
+          objectPath: `dataset/${state.row.id}/${state.isVideo ? 'video' : 'origin'}`, // 图片/视频对象存储路径
         },
       };
       const baseImgProps = {
         transformFile: withDimensionFile,
+        hash: true,
       };
-      if(state.isText) {
+      if (state.isText || state.isAudio) {
+        Object.assign(props, {
+          dataType: 'text',
+          hash: true, // 支持同名文件上传
+        });
+      }
+      if (state.isText) {
         Object.assign(props, {
-          dataType: "text",
+          acceptSize: 0.1, // Mb 为单位
+          acceptSizeFormat: (size) => `${size * 1000} kb`,
         });
       }
-      if(state.isImage) {
+      if (state.isImage) {
         Object.assign(props, baseImgProps);
       }
-      if(state.isVideo) {
+      if (state.isVideo) {
         Object.assign(props, baseImgProps, trackUploadProps);
       }
       return props;
     });
 
     // 监测选中导入的列数据变化
-    watch(() => props.row, (next) => {
-      Object.assign(state, {
-        row: { ...state.row, ...next },
-      });
-      if (state.row.dataType === dataTypeCodeMap.IMAGE) {
+    watch(
+      () => props.row,
+      (next) => {
         Object.assign(state, {
-          isImage: true,
-          isText: false,
-          isVideo: false,
-          title: "导入图片",
-          accept: ".jpg,.png,.bmp,.jpeg",
+          row: { ...state.row, ...next },
         });
-      } else if(state.row.dataType === dataTypeCodeMap.TEXT){
-        Object.assign(state, {
-          isImage: false,
-          isText: true,
-          isVideo: false,
-          title: "导入文本",
-          accept: ".txt",
-        });
-      } else {
-        Object.assign(state, {
-          isImage: false,
-          isText: false,
-          isVideo: true,
-          title: "导入视频",
-        });
-      }      
-    }, { lazy: true });
+        const nextParams = buildDataParams(state.row.dataType);
+        Object.assign(state, nextParams);
+      }
+    );
 
     return {
       state,
diff --git a/webapp/src/views/dataset/medical/action.js b/webapp/src/views/dataset/medical/action.js
index 05b233f..7cf8559 100644
--- a/webapp/src/views/dataset/medical/action.js
+++ b/webapp/src/views/dataset/medical/action.js
@@ -1,20 +1,20 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
- 
-import { statusCodeMap } from '../util';
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { isStatus, isPresetDataset } from '../util';
 import { medicalAnnotationCodeMap } from './constant';
 
 export default {
@@ -34,9 +34,9 @@ export default {
           return (
             <span>
               <span>操作</span>
-              <el-tooltip effect='dark' placement='top' style={{ marginLeft: '10px' }}>		
-                <div slot='content'>自动标注仅支持肺部CT影像</div>		
-                <i class='el-icon-question'/>		
+              <el-tooltip effect="dark" placement="top" style={{ marginLeft: '10px' }}>
+                <div slot="content">自动标注仅支持肺部CT影像</div>
+                <i class="el-icon-question" />
               </el-tooltip>
             </span>
           );
@@ -53,8 +53,8 @@ export default {
             },
           };
 
-          // 查看标注按钮在自动标注中时不显示 
-          let showCheckButton = !(statusCodeMap[row.status] === 'AUTO_ANNOTATING');
+          // 查看标注按钮在自动标注中时不显示
+          let showCheckButton = !isStatus(row, 'AUTO_ANNOTATING');
           // 查阅影像按钮
           const checkButton = (
             <el-button {...btnProps} onClick={() => goDetail(row)}>
@@ -63,10 +63,11 @@ export default {
           );
 
           // 自动标注按钮只在未标注且目前算法支持的情形下显示
-          let showAutoButton = ['UNANNOTATED'].includes(statusCodeMap[row.status])
-            && row.bodyPartExamined === "LUNG"
-            && row.modality === "CT"
-            && row.annotateType === medicalAnnotationCodeMap.OrganSegmentation;
+          let showAutoButton =
+            isStatus(row, 'UNANNOTATED') &&
+            row.bodyPartExamined === 'LUNG' &&
+            row.modality === 'CT' &&
+            row.annotateType === medicalAnnotationCodeMap.OrganSegmentation;
           // 自动标注按钮
           const autoButton = (
             <el-button {...btnProps} onClick={() => autoAnnotate(row)}>
@@ -83,11 +84,11 @@ export default {
           );
 
           // 预置数据集只具备查阅影像功能
-          if (row.type === 2) {
+          if (isPresetDataset(row.type)) {
             showCheckButton = true;
             showAutoButton = false;
             showEditButton = false;
-          };        
+          }
 
           return (
             <span>
diff --git a/webapp/src/views/dataset/medical/constant.js b/webapp/src/views/dataset/medical/constant.js
index 9364e9d..779fb95 100644
--- a/webapp/src/views/dataset/medical/constant.js
+++ b/webapp/src/views/dataset/medical/constant.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export const medicalProgressMap = {
   unfinished: '未标注',
@@ -22,9 +22,9 @@ export const medicalProgressMap = {
 };
 
 export const medicalAnnotationCodeMap = {
-  'OrganSegmentation': 1001,
-  'LesionDetection': 2001,
-  'Other': 2999,
+  OrganSegmentation: 1001,
+  LesionDetection: 2001,
+  Other: 2999,
 };
 
 export const medicalFirstLevelCodeMap = {
@@ -39,16 +39,16 @@ export const medicalAnnotationMap = {
 };
 
 export const modalityMap = {
-  'CT':  'CT', 
-  'MR':  'MR',
-  'US':  'US',
-  'X-Ray':  'X-Ray',   
-  'OTHER':  'OTHER',
+  CT: 'CT',
+  MR: 'MR',
+  US: 'US',
+  'X-Ray': 'X-Ray',
+  OTHER: 'OTHER',
 };
 
 export const bodyPartMap = {
   BRAIN: 'BRAIN',
-  LUNG: 'LUNG', 
+  LUNG: 'LUNG',
   LIVER: 'LIVER',
   SOFTTISSUE: 'SOFTTISSUE',
   OTHER: 'OTHER',
@@ -66,9 +66,9 @@ export const medicalStatusMap = {
 // 标注类型
 export const getAnnotateType = (type) => {
   // 2001-2999 病灶检测
-  if(Number(type) > 2000 && Number(type) < 3000) return 1;
+  if (Number(type) > 2000 && Number(type) < 3000) return 1;
   // 1001-1999 为器官分割
-  if(Number(type) > 1000 && Number(type) < 2000) return 0;
+  if (Number(type) > 1000 && Number(type) < 2000) return 0;
   // 历史数据
   return 0;
 };
diff --git a/webapp/src/views/dataset/medical/create-dataset.vue b/webapp/src/views/dataset/medical/create-dataset.vue
index 292c362..3976122 100644
--- a/webapp/src/views/dataset/medical/create-dataset.vue
+++ b/webapp/src/views/dataset/medical/create-dataset.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseModal
@@ -33,7 +33,7 @@
           clearable
           placeholder="标注类型"
           :options="annotateTypeOptions"
-          :props="{expandTrigger: 'hover'}"
+          :props="{ expandTrigger: 'hover' }"
           :show-all-levels="false"
           popper-class="group-cascader"
           style="width: 100%; line-height: 32px;"
@@ -53,11 +53,10 @@
       <el-form-item ref="dcmPath" label="医疗影像" prop="dcmPath">
         <UploadInline
           ref="uploadRef"
-          class='dcm-list'
+          class="dcm-list"
           action="fakeApi"
           accept=".dcm"
           list-type="text"
-          :hash="false"
           :acceptSize="0"
           :show-file-count="false"
           :auto-upload="false"
@@ -68,7 +67,9 @@
         />
       </el-form-item>
     </el-form>
-    <el-button slot="footer" class="tc" type="primary" :loading="state.loading" @click="handleOk">创建数据集</el-button>
+    <el-button slot="footer" class="tc" type="primary" :loading="state.loading" @click="handleOk"
+      >创建数据集</el-button
+    >
   </BaseModal>
 </template>
 <script>
@@ -78,13 +79,13 @@ import BaseModal from '@/components/BaseModal';
 
 import { add, upload } from '@/api/preparation/medical';
 import UploadInline from '@/components/UploadForm/inline';
-import { validateName } from "@/utils/validate";
+import { validateName } from '@/utils/validate';
 import { buildUrlItem } from '@/views/dataset/util';
 import { medicalAnnotationCodeMap } from './constant';
 import { readDicoms, readDicom, validateDicomSeries } from './lib';
 
 export default {
-  name: "CreateMedicalDataset",
+  name: 'CreateMedicalDataset',
   components: {
     BaseModal,
     UploadInline,
@@ -94,7 +95,7 @@ export default {
     toggleVisible: Function,
     onResetFresh: Function,
   },
-  setup(props){
+  setup(props) {
     const { toggleVisible, onResetFresh } = props;
     const formRef = ref(null);
     const uploadRef = ref(null);
@@ -116,14 +117,12 @@ export default {
       name: [
         {
           required: true,
-          message: "请输入数据集名称",
-          trigger: ["change", "blur"],
+          message: '请输入数据集名称',
+          trigger: ['change', 'blur'],
         },
-        { validator: validateName, trigger: ["change", "blur"] },
-      ],
-      annotateType: [
-        { required: true, message: '请选择标注类型', trigger: 'change' },
+        { validator: validateName, trigger: ['change', 'blur'] },
       ],
+      annotateType: [{ required: true, message: '请选择标注类型', trigger: 'change' }],
     };
 
     const annotateTypeOptions = [
@@ -145,16 +144,16 @@ export default {
           {
             value: medicalAnnotationCodeMap.Other,
             label: '其它',
-            disabled:false,
+            disabled: false,
           },
         ],
       },
     ];
 
     const handleAnnotateTypeChange = (val) => {
-      if(val.length === 0) {
+      if (val.length === 0) {
         state.form.annotateType = '';
-      } else if(val.length === 1) {
+      } else if (val.length === 1) {
         // eslint-disable-next-line prefer-destructuring
         state.form.annotateType = val[0];
       } else {
@@ -180,8 +179,8 @@ export default {
 
     const setUploadStatus = (loading) => {
       Object.assign(state, {
-          loading,
-        });
+        loading,
+      });
     };
 
     const transformFile = async (fileRes, file) => {
@@ -200,7 +199,7 @@ export default {
         const series = await readDicoms(fileList);
         // 判断文件是否允许上传
         const validation = validateDicomSeries(series);
-        if(validation !== '') {
+        if (validation !== '') {
           throw new Error(validation);
         }
         // 取出series第一个对象
@@ -210,17 +209,19 @@ export default {
           ...state.form,
         };
         // 先创建好数据集
-        return add(params).then(res => {
-          // 更新当前创建的数据集 id
-          state.medicalId = res;
-          return {
-            objectPath: `dataset/dcm/${res}/origin`,
-          };
-        }).catch((err) => {
-          setUploadStatus(false);
-          throw err;
-        });
-      } catch(err) {
+        return add(params)
+          .then((res) => {
+            // 更新当前创建的数据集 id
+            state.medicalId = res;
+            return {
+              objectPath: `dataset/dcm/${res}/origin`,
+            };
+          })
+          .catch((err) => {
+            setUploadStatus(false);
+            throw err;
+          });
+      } catch (err) {
         console.error('err', err);
         return Promise.reject(err);
       }
@@ -228,18 +229,20 @@ export default {
 
     const uploadSuccess = (res) => {
       // 上传完毕同步文件地址到 db
-      const params = res.map(d => ({
+      const params = res.map((d) => ({
         SOPInstanceUID: d.SOPInstanceUID,
         ...buildUrlItem(d),
       }));
 
-      upload(state.medicalId, params).then(() => {
-        Message.success('数据集创建成功');
-        handleClose();
-        onResetFresh();
-      }).finally(() => {
-        setUploadStatus(false);
-      });
+      upload(state.medicalId, params)
+        .then(() => {
+          Message.success('数据集创建成功');
+          handleClose();
+          onResetFresh();
+        })
+        .finally(() => {
+          setUploadStatus(false);
+        });
     };
 
     const uploadError = (err) => {
@@ -249,7 +252,7 @@ export default {
     };
 
     const handleOk = () => {
-      formRef.value.validate(valid => {
+      formRef.value.validate((valid) => {
         if (!valid) {
           return;
         }
@@ -259,11 +262,15 @@ export default {
       });
     };
 
-    watch(() => props.visible, (next) => {
-      next !== state.visible && Object.assign(state, {
-        visible: next,
-      });
-    });
+    watch(
+      () => props.visible,
+      (next) => {
+        next !== state.visible &&
+          Object.assign(state, {
+            visible: next,
+          });
+      }
+    );
 
     return {
       state,
@@ -282,13 +289,12 @@ export default {
     };
   },
 };
-  
 </script>
 <style lang="scss" scoped>
-  .dcm-list {
-    ::v-deep .el-upload-list__item {
-      display: inline-block;
-      width: 33.3%;
-    }
+.dcm-list {
+  ::v-deep .el-upload-list__item {
+    display: inline-block;
+    width: 33.3%;
   }
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/webapp/src/views/dataset/medical/edit-dataset.vue b/webapp/src/views/dataset/medical/edit-dataset.vue
index b86c2b7..6057a9d 100644
--- a/webapp/src/views/dataset/medical/edit-dataset.vue
+++ b/webapp/src/views/dataset/medical/edit-dataset.vue
@@ -1,26 +1,21 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <BaseModal
-    :visible="visible"
-    title="修改数据集"
-    @change="handleCancel"
-    @ok="handleEditDataset"
-  >
+  <BaseModal :visible="visible" title="修改数据集" @change="handleCancel" @ok="handleEditDataset">
     <el-form ref="form" :model="state.model" :rules="rules" label-width="100px">
       <el-form-item label="数据集名称" prop="name">
         <el-input v-model="state.model.name" placeholder="数据集名称不能超过50字" maxlength="50" />
@@ -75,18 +70,16 @@ export default {
   },
   setup(props, { refs }) {
     const { handleOk } = props;
-    const rules= {
+    const rules = {
       name: [
         { required: true, message: '请输入数据集名称', trigger: ['change', 'blur'] },
         { validator: validateName, trigger: ['change', 'blur'] },
       ],
-      remark: [
-        { required: false, message: '请输入数据集描述信息', trigger: 'blur' },
-      ],
+      remark: [{ required: false, message: '请输入数据集描述信息', trigger: 'blur' }],
     };
 
     const buildModel = (record, options) => {
-      return { ...record, ...options};
+      return { ...record, ...options };
     };
 
     const state = reactive({
@@ -94,14 +87,14 @@ export default {
     });
 
     const annotationList = computed(() => {
-      return Object.keys(medicalAnnotationMap).map(d => ({
+      return Object.keys(medicalAnnotationMap).map((d) => ({
         label: medicalAnnotationMap[d].name,
         value: Number(d),
       }));
     });
-        
+
     const handleEditDataset = () => {
-      refs.form.validate(valid => {
+      refs.form.validate((valid) => {
         if (!valid) {
           return false;
         }
@@ -110,11 +103,14 @@ export default {
       });
     };
 
-    watch(() => props.row, (next) => {
-      Object.assign(state, {
-        model: { ...state.model, ...next },
-      });
-    });
+    watch(
+      () => props.row,
+      (next) => {
+        Object.assign(state, {
+          model: { ...state.model, ...next },
+        });
+      }
+    );
 
     return {
       rules,
diff --git a/webapp/src/views/dataset/medical/lib/actions.js b/webapp/src/views/dataset/medical/lib/actions.js
index da582c9..fda3869 100644
--- a/webapp/src/views/dataset/medical/lib/actions.js
+++ b/webapp/src/views/dataset/medical/lib/actions.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 import { noop } from '@/utils';
 import { genDrawingFromAnnotations } from './index';
 
@@ -145,17 +145,19 @@ export const viewerCommands = {
     const kGroups = [];
 
     // 遍历所有的posGroups，并提供匹配的形状groups
-    posGroups.forEach(group => {
-      const subGroups = group.getChildren(
-        node => autoAnnotationIds.includes(node.id()));
-        kGroups.push(subGroups);
+    posGroups.forEach((group) => {
+      const subGroups = group.getChildren((node) => autoAnnotationIds.includes(node.id()));
+      kGroups.push(subGroups);
     });
 
-    for(let i=0; i<kGroups.length; i+=1) {
+    for (let i = 0; i < kGroups.length; i += 1) {
       app.getDrawController().deleteDrawGroup(kGroups[i], noop, noop);
     }
 
-    const { drawings, drawingsDetails, drawingIds } = genDrawingFromAnnotations(JSON.parse(tool.annotations), tool.precision);
+    const { drawings, drawingsDetails, drawingIds } = genDrawingFromAnnotations(
+      JSON.parse(tool.annotations),
+      tool.precision
+    );
     app.setDrawings(drawings, drawingsDetails);
     updateState({
       autoAnnotationIds: drawingIds,
diff --git a/webapp/src/views/dataset/medical/lib/gui.js b/webapp/src/views/dataset/medical/lib/gui.js
index 0e1ef73..1c32fc7 100644
--- a/webapp/src/views/dataset/medical/lib/gui.js
+++ b/webapp/src/views/dataset/medical/lib/gui.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import dwv from '@wulucxy/dwv';
 
diff --git a/webapp/src/views/dataset/medical/lib/index.js b/webapp/src/views/dataset/medical/lib/index.js
index d19d57f..0113683 100644
--- a/webapp/src/views/dataset/medical/lib/index.js
+++ b/webapp/src/views/dataset/medical/lib/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import dwv from '@wulucxy/dwv';
 import dicomParser from 'dicom-parser';
@@ -38,8 +38,7 @@ export const sortInstances = (series) => {
   });
 };
 
-
-export const buildWADOUrl = ({studyInstanceUID, seriesInstanceUID, objectUID }) => {
+export const buildWADOUrl = ({ studyInstanceUID, seriesInstanceUID, objectUID }) => {
   return `${process.env.VUE_APP_DCM_API}/wado?requestType=WADO&studyUID=${studyInstanceUID}&seriesUID=${seriesInstanceUID}&objectUID=${objectUID}&contentType=application/dicom`;
 };
 
@@ -48,14 +47,14 @@ export const getImageIdsForSeries = (seriesData) => {
     return [];
   }
 
-  return sortInstances(seriesData).map(instance => {
+  return sortInstances(seriesData).map((instance) => {
     const BulkDataURI = instance['7FE00010'].BulkDataURI.replace(/^https?:\/\//, '');
     const bulkDataArr = BulkDataURI.split('/');
-    const studyIndex = bulkDataArr.findIndex(d => d === 'studies');
-    const seriesIndex = bulkDataArr.findIndex(d => d === 'series');
-    const instanceIndex = bulkDataArr.findIndex(d => d === 'instances');
+    const studyIndex = bulkDataArr.findIndex((d) => d === 'studies');
+    const seriesIndex = bulkDataArr.findIndex((d) => d === 'series');
+    const instanceIndex = bulkDataArr.findIndex((d) => d === 'instances');
 
-    if(studyIndex > -1 && seriesIndex > -1) {
+    if (studyIndex > -1 && seriesIndex > -1) {
       const studyInstanceUID = bulkDataArr[studyIndex + 1];
       const seriesInstanceUID = bulkDataArr[seriesIndex + 1];
       const objectUID = bulkDataArr[instanceIndex + 1];
@@ -76,7 +75,7 @@ export const getSOPInstanceUID = (data) => {
   throw new Error('当前 dcm 文件不合法，无法找到 SOPInstanceUID');
 };
 
-export const retrieveBulkData = imageId => {
+export const retrieveBulkData = (imageId) => {
   return dwc.retrieveBulkData({
     BulkDataURI: imageId,
   });
@@ -86,7 +85,7 @@ export function readRawData(drawings) {
   // update drawings
   const data = {};
   const v02DAndD = dwv.v01Tov02DrawingsAndDetails(drawings);
-  data.drawings = dwv.v02Tov03Drawings( v02DAndD.drawings ).toObject();
+  data.drawings = dwv.v02Tov03Drawings(v02DAndD.drawings).toObject();
   data.drawingsDetails = v02DAndD.drawingsDetails;
   return data;
 }
@@ -105,11 +104,21 @@ export const parseDicom = (byteArray, filename) => {
     const bodyPartExamined = dataSet.string('x00180015');
     const SOPInstanceUID = dataSet.string('x00080018');
     const pixelData = dataSet.elements.x7fe00010;
-    if(!pixelData) {
+    if (!pixelData) {
       throw new Error(`文件信息不完整：7fe00010字段不存在`);
     }
-    return {rows, columns, patientID, seriesInstanceUID, studyInstanceUID, modality, bodyPartExamined, filename, SOPInstanceUID};
-  } catch(err) {
+    return {
+      rows,
+      columns,
+      patientID,
+      seriesInstanceUID,
+      studyInstanceUID,
+      modality,
+      bodyPartExamined,
+      filename,
+      SOPInstanceUID,
+    };
+  } catch (err) {
     // parse返回错误信息为err.exception
     return err instanceof Error ? err : new Error(err.exception || err);
   }
@@ -119,11 +128,11 @@ export const parseDicom = (byteArray, filename) => {
 export const readDicom = (file) => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
-    reader.onload = e => {
+    reader.onload = (e) => {
       const arrayBuffer = e.target.result;
       const byteArray = new Uint8Array(arrayBuffer);
       const info = parseDicom(byteArray, file.raw.name.slice(0, -4));
-      if(info instanceof Error) {
+      if (info instanceof Error) {
         reject(info);
       } else {
         resolve(info);
@@ -136,38 +145,39 @@ export const readDicom = (file) => {
 
 // 读取上传文件信息
 export const readDicoms = async (files) => {
-  const mapper = (file) => new Promise((resolve, reject) => {
-    const reader = new FileReader();
+  const mapper = (file) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
 
-    reader.onload = e => {
-      const arrayBuffer = e.target.result;
-      const byteArray = new Uint8Array(arrayBuffer);
-      const info = parseDicom(byteArray, file.raw.name.slice(0, -4));
-      if(info instanceof Error) {
-        reject(info);
-      } else {
-        resolve(info);
-      }
-    };
+      reader.onload = (e) => {
+        const arrayBuffer = e.target.result;
+        const byteArray = new Uint8Array(arrayBuffer);
+        const info = parseDicom(byteArray, file.raw.name.slice(0, -4));
+        if (info instanceof Error) {
+          reject(info);
+        } else {
+          resolve(info);
+        }
+      };
 
-    reader.readAsArrayBuffer(file.raw);
-  });
+      reader.readAsArrayBuffer(file.raw);
+    });
 
   try {
-    const result = await pMap(files, mapper, {concurrency: 10});
+    const result = await pMap(files, mapper, { concurrency: 10 });
     return result;
-  } catch(err){
+  } catch (err) {
     return Promise.reject(err);
   }
 };
 
 // 判断上传系列文件格式是否一致
 export const validateDicomSeries = (series) => {
-  if(series.length < 1) return '文件数量不能为空';
+  if (series.length < 1) return '文件数量不能为空';
   const isEqualRows = isEqualBy(series, 'rows');
-  if(!isEqualRows) return '文件系列 rows 必须一致';
+  if (!isEqualRows) return '文件系列 rows 必须一致';
   const isEqualColumns = isEqualBy(series, 'columns');
-  if(!isEqualColumns) return '文件系列 columns 必须一致';
+  if (!isEqualColumns) return '文件系列 columns 必须一致';
   return '';
 };
 
@@ -179,35 +189,37 @@ export const genDrawingFromAnnotations = (annotations, percent) => {
   // 记录标注对应的slice 和 标注 对应关系
   const sliceDrawingMap = {};
   // 遍历 slice
-  for(let k = 0; k < annotations.length; k+=1) {
+  for (let k = 0; k < annotations.length; k += 1) {
     const slice = [];
     // 每个 slice 分别对应的标注 id
     const sliceDrawingIds = [];
     // 自动标注帧数为1
-    for(let f = 0; f < frames; f+=1) {
+    for (let f = 0; f < frames; f += 1) {
       const frame = [];
-      for(let g = 0; g < annotations[k].length; g+=1) {
+      for (let g = 0; g < annotations[k].length; g += 1) {
         const pos = annotations[k][g];
         // percent为精度 100%时步长为1，显示所有标注点。10%时步长为10,即10个标注点取1个点显示
-        const step = 1/percent;
+        const step = 1 / percent;
         const points = everyStep(pos, step);
         const guid = dwv.math.guid();
         frame.push({
-           "attrs": {
-            "name": "roi-group",
-            "id": guid,
+          attrs: {
+            name: 'roi-group',
+            id: guid,
           },
-          "className": "Group",
-          "children": [{
-            "attrs": {
-              "points": flatten(points),
-              "name": "shape",
-              "closed": true,
-              "strokeWidth": 3,
-              "draggable": true,
+          className: 'Group',
+          children: [
+            {
+              attrs: {
+                points: flatten(points),
+                name: 'shape',
+                closed: true,
+                strokeWidth: 3,
+                draggable: true,
+              },
+              className: 'Line',
             },
-            "className": "Line",
-          }],
+          ],
         });
         drawingIds.push(guid);
         sliceDrawingIds.push(guid);
@@ -218,18 +230,18 @@ export const genDrawingFromAnnotations = (annotations, percent) => {
     draws.push(slice);
   }
   const { drawings, drawingsDetails } = readRawData(draws);
-   // sliceDrawingMap: 每个slice 对应的 drawingId
+  // sliceDrawingMap: 每个slice 对应的 drawingId
   return { drawings, drawingsDetails, drawingIds, sliceDrawingMap };
 };
 
 // 保存标注时去掉 anchor 信息
 export const removeAnchorsFromDrawer = (drawLayer) => {
   const pGroups = drawLayer.getChildren(dwv.draw.isPositionNode);
-  pGroups.forEach(group => {
+  pGroups.forEach((group) => {
     const subGroups = group.getChildren();
-    subGroups.forEach(shape => {
-     const anchors = shape.getChildren(node => node.name() === 'anchor');
-     anchors.each(anchor => anchor.remove());
+    subGroups.forEach((shape) => {
+      const anchors = shape.getChildren((node) => node.name() === 'anchor');
+      anchors.each((anchor) => anchor.remove());
     });
   });
 };
@@ -257,11 +269,11 @@ export const activeShapeGroup = (app, selectedShape) => {
 export const getShapeGroup = (drawId, drawLayer) => {
   const pGroups = drawLayer.getChildren(dwv.draw.isPositionNode);
   let selectedShape = null;
-  for(const group of pGroups) {
+  for (const group of pGroups) {
     const subGroups = group.getChildren();
-    const groups = subGroups.filter(shape => drawId === shape.id());
-    if(groups.length) {
-      [selectedShape] = groups[0].find(".shape");
+    const groups = subGroups.filter((shape) => drawId === shape.id());
+    if (groups.length) {
+      [selectedShape] = groups[0].find('.shape');
       break;
     }
   }
diff --git a/webapp/src/views/dataset/medical/list.vue b/webapp/src/views/dataset/medical/list.vue
index c3f8439..b11b5e5 100644
--- a/webapp/src/views/dataset/medical/list.vue
+++ b/webapp/src/views/dataset/medical/list.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
@@ -30,11 +30,11 @@
     <!--工具栏-->
     <div class="head-container">
       <cdOperation :addProps="operationProps" :delProps="operationProps">
-        <el-button 
-          slot="left" 
-          class="filter-item" 
-          icon="el-icon-upload" 
-          round 
+        <el-button
+          slot="left"
+          class="filter-item"
+          icon="el-icon-upload"
+          round
           @click="toggleImport"
         >
           创建数据集
@@ -68,7 +68,12 @@
       </el-tabs>
       <div>
         <el-tooltip effect="dark" content="刷新" placement="top">
-          <el-button class="filter-item with-border" style="padding: 8px;" icon="el-icon-refresh" @click="onResetFresh"/>
+          <el-button
+            class="filter-item with-border"
+            style="padding: 8px;"
+            icon="el-icon-refresh"
+            @click="onResetFresh"
+          />
         </el-tooltip>
         <TenantSelector :datasetListType="datasetListType" style="margin: 0 3px 10px 10px;" />
       </div>
@@ -100,8 +105,16 @@
         class-name="dataset-name-col"
       >
         <template slot-scope="scope">
-          <el-link class="mr-10 name-col" @click="goDetail(scope.row)">{{ scope.row.name }}</el-link>
-          <Edit class="edit-icon" :row="scope.row" valueBy="name" title="修改数据集名称" @handleOk="handleEditDatasetName" />
+          <el-link class="mr-10 name-col" type="primary" @click="goDetail(scope.row)">{{
+            scope.row.name
+          }}</el-link>
+          <Edit
+            class="edit-icon"
+            :row="scope.row"
+            valueBy="name"
+            title="修改数据集名称"
+            @handleOk="handleEditDatasetName"
+          />
         </template>
       </el-table-column>
       <el-table-column
@@ -115,7 +128,7 @@
             title="标注类型"
             :list="annotateTypeList"
             :filtered="!isNil(annotateType)"
-            @command="cmd => filter('annotateType', cmd)"
+            @command="(cmd) => filter('annotateType', cmd)"
           />
         </template>
       </el-table-column>
@@ -123,11 +136,7 @@
         <template slot-scope="scope">
           <div v-if="scope.row.progress !== null" class="flex progress-wrap">
             <i v-show="scope.row.pollIng" class="el-icon-loading" />
-            <el-popover
-              placement="top-start"
-              trigger="hover"
-              popper-class="f1"
-            >
+            <el-popover placement="top-start" trigger="hover" popper-class="f1">
               <TableTooltip
                 className="progress-tip"
                 :keys="progressKeys"
@@ -138,17 +147,14 @@
               <el-progress
                 slot="reference"
                 :percentage="getProgress(scope.row)"
-                :color="progressFill(statusCodeMap[scope.row.status])"
+                :color="progressFill(datasetStatusMap[scope.row.status].status)"
               />
             </el-popover>
           </div>
           <div v-else class="flex progress-wrap">
             <i class="el-icon-loading" />
             <span>
-              <el-progress
-                slot="reference"
-                :percentage="0"
-              />
+              <el-progress slot="reference" :percentage="0" />
             </span>
           </div>
         </template>
@@ -160,7 +166,12 @@
           </span>
         </template>
       </el-table-column>
-      <el-table-column prop="studyInstanceUID" min-width="150" label="StudyInstanceUID" align="left">
+      <el-table-column
+        prop="studyInstanceUID"
+        min-width="150"
+        label="StudyInstanceUID"
+        align="left"
+      >
         <template slot-scope="scope">
           <el-tooltip :content="scope.row.studyInstanceUID" enterable placement="top">
             <div class="ellipsis" style=" display: inline-block; width: 100%;">
@@ -169,7 +180,12 @@
           </el-tooltip>
         </template>
       </el-table-column>
-      <el-table-column prop="seriesInstanceUID" min-width="150" label="SeriesInstanceUID" align="left">
+      <el-table-column
+        prop="seriesInstanceUID"
+        min-width="150"
+        label="SeriesInstanceUID"
+        align="left"
+      >
         <template slot-scope="scope">
           <el-tooltip :content="scope.row.seriesInstanceUID" enterable placement="top">
             <div class="ellipsis" style=" display: inline-block; width: 100%;">
@@ -178,7 +194,7 @@
           </el-tooltip>
         </template>
       </el-table-column>
-      <el-table-column 
+      <el-table-column
         show-overflow-tooltip
         prop="modality"
         :formatter="parseModality"
@@ -191,7 +207,7 @@
             title="Modality"
             :list="modalityList"
             :filtered="!isNil(modality)"
-            @command="cmd => filter('modality', cmd)"
+            @command="(cmd) => filter('modality', cmd)"
           />
         </template>
       </el-table-column>
@@ -201,7 +217,7 @@
             title="BodyPart"
             :list="bodyPartList"
             :filtered="!isNil(bodyPartExamined)"
-            @command="cmd => filter('bodyPartExamined', cmd)"
+            @command="(cmd) => filter('bodyPartExamined', cmd)"
           />
         </template>
       </el-table-column>
@@ -248,28 +264,45 @@
 <script>
 import { Message } from 'element-ui';
 import { mapState } from 'vuex';
-import { isNil } from 'lodash';
-import crudDataset, { autoAnnotate, queryDatasetsProgress, editDataset } from '@/api/preparation/medical';
+import { isNil, findKey } from 'lodash';
+import crudDataset, {
+  autoAnnotate,
+  queryDatasetsProgress,
+  editDataset,
+} from '@/api/preparation/medical';
 import CRUD, { presenter, header, form, crud } from '@crud/crud';
 import rrOperation from '@crud/RR.operation';
 import cdOperation from '@crud/CD.operation';
 import datePickerMixin from '@/mixins/datePickerMixin';
 import DropdownHeader from '@/components/DropdownHeader';
 
-import { statusCodeMap, getDatasetType, findKey } from '@/views/dataset/util';
+import {
+  isStatus,
+  datasetStatusMap,
+  getDatasetType,
+  isIncludeStatus,
+  isPresetDataset,
+} from '@/views/dataset/util';
 
 import Edit from '@/components/InlineTableEdit';
 import { toFixed, isEqualByProp } from '@/utils';
 import { TableTooltip } from '@/hooks/tooltip';
 import store from '@/store';
 
-import { medicalProgressMap, modalityMap, bodyPartMap, medicalStatusMap, medicalAnnotationMap, medicalFirstLevelCodeMap } from './constant';
+import {
+  medicalProgressMap,
+  modalityMap,
+  bodyPartMap,
+  medicalStatusMap,
+  medicalAnnotationMap,
+  medicalFirstLevelCodeMap,
+} from './constant';
 import CreateDataset from './create-dataset';
 import TenantSelector from '../components/tenant';
 import Status from './status';
 import Action from './action';
 import EditDataset from './edit-dataset';
-import "../style/list.scss";
+import '../style/list.scss';
 
 const defaultForm = {
   id: null,
@@ -298,7 +331,7 @@ export default {
   },
   beforeRouteEnter(to, from, next) {
     // 拦截非医学场景
-    if(getDatasetType() !== 1) {
+    if (getDatasetType() !== 1) {
       next('/data/datasets');
     } else {
       // 正常跳转，并将导航高亮切换为数据集管理
@@ -322,7 +355,7 @@ export default {
       importVisible: false, // 导入影像
       editVisible: false, // 修改数据集
       editRow: null, // 当前编辑数据集
-      datasetListType: '1',
+      datasetListType: '1', // 医疗影像
       patientID: null,
       studyInstanceUID: null,
       seriesInstanceUID: null,
@@ -330,30 +363,20 @@ export default {
       modality: null,
       bodyPartExamined: null,
       datasetStatusFilter: 'all',
-      options: [
-        {
-          value: '1',
-          label: '医学影像',
-        }, 
-        {
-          value: '0',
-          label: '视觉/文本',
-        },
-      ],
       progressKeys: Object.keys(medicalProgressMap),
-      statusCodeMap,
+      datasetStatusMap,
       autoTimer: {}, // 自动标注定时器
     };
   },
   computed: {
     ...mapState({
-      activePanel: state => {
+      activePanel: (state) => {
         return String(state.dataset.activePanelMedical);
       },
-    }),   
+    }),
     isNil() {
       return isNil;
-    }, 
+    },
     localQuery() {
       return {
         type: this.activePanel || 0,
@@ -361,32 +384,32 @@ export default {
     },
     // 区分预置数据集和普通数据集操作权限
     operationProps() {
-      return Number(this.activePanel) === 2 ? { disabled: true } : undefined;
+      return isPresetDataset(this.activePanel) ? { disabled: true } : undefined;
     },
     annotateTypeList() {
       // 原始标注列表
-      const rawAnnotateTypeList = Object.keys(medicalFirstLevelCodeMap).map(d => ({
+      const rawAnnotateTypeList = Object.keys(medicalFirstLevelCodeMap).map((d) => ({
         label: medicalFirstLevelCodeMap[d].name,
         value: Number(d),
       }));
       return [{ label: '全部', value: null }].concat(rawAnnotateTypeList);
     },
     modalityList() {
-      const rawModalityList = Object.keys(modalityMap).map(d => ({
+      const rawModalityList = Object.keys(modalityMap).map((d) => ({
         label: modalityMap[d],
         value: d,
       }));
       return [{ label: 'ALL', value: null }].concat(rawModalityList);
     },
     bodyPartList() {
-      const rawBodyPartList = Object.keys(bodyPartMap).map(d => ({
+      const rawBodyPartList = Object.keys(bodyPartMap).map((d) => ({
         label: bodyPartMap[d],
         value: d,
       }));
       return [{ label: 'ALL', value: null }].concat(rawBodyPartList);
     },
     statusList() {
-      const rawStatusList = Object.keys(medicalStatusMap).map(d => ({
+      const rawStatusList = Object.keys(medicalStatusMap).map((d) => ({
         label: medicalStatusMap[d].name,
         value: Number(d),
       }));
@@ -397,16 +420,21 @@ export default {
     // eslint-disable-next-line func-names
     'crud.data': function(next, prev = []) {
       // 首先匹配size, 其次匹配 id 是否一致, 再次检查此前是否存在轮询的数据集
-      if (next.length > 0 && (prev.length !== next.length || !isEqualByProp(prev, next, 'id') || prev.some(d => d.pollIng))) {
+      if (
+        next.length > 0 &&
+        (prev.length !== next.length ||
+          !isEqualByProp(prev, next, 'id') ||
+          prev.some((d) => d.pollIng))
+      ) {
         // 获取自动标注状态列表的结果
-        const autoList = next.filter(d => statusCodeMap[d.status] === 'AUTO_ANNOTATING');
+        const autoList = next.filter((d) => isStatus(d, 'AUTO_ANNOTATING'));
 
         Promise.all(
-          autoList.map(row => {
+          autoList.map((row) => {
             // vue hack, 初始化状态
             this.$set(row, 'pollIng', true);
-            return this.poll(row, statusCodeMap[row.status]);
-          }),
+            return this.poll(row, datasetStatusMap[row.status]?.status);
+          })
         );
       }
     },
@@ -415,21 +443,20 @@ export default {
     this.crud.toQuery();
   },
   beforeDestroy() {
-    Object.keys(this.autoTimer).forEach(key => clearTimeout(this.autoTimer[key]));
+    Object.keys(this.autoTimer).forEach((key) => clearTimeout(this.autoTimer[key]));
   },
   methods: {
     keyAccessor: (key) => medicalProgressMap[key],
     valueAccessor: (key, idx, data) => data[key],
     [CRUD.HOOK.beforeRefresh]() {
-      this.crud.query = { ...this.query, ...this.localQuery};
+      this.crud.query = { ...this.query, ...this.localQuery };
     },
     [CRUD.HOOK.afterRefresh]() {
       const { data } = this.crud;
-      this.queryRowProgress(data.map(d => d.id));
+      this.queryRowProgress(data.map((d) => d.id));
     },
     canSelect(row) {
-      return !(row.pollIng || ['AUTO_ANNOTATING'].includes(statusCodeMap[row.status])
-      );
+      return !(row.pollIng || isStatus(row, 'AUTO_ANNOTATING'));
     },
     handleEditDatasetName(name, row) {
       const editForm = {
@@ -440,7 +467,7 @@ export default {
         this.crud.status.edit = CRUD.STATUS.NORMAL;
         this.$set(row, 'name', editForm.name);
         if (row.pollIng) {
-          this.poll(row, statusCodeMap[row.status]);
+          this.poll(row, datasetStatusMap[row.status]?.status);
         }
       });
     },
@@ -454,8 +481,8 @@ export default {
       return editDataset(editForm)
         .then(() => {
           this.$message({
-          message: '数据集修改成功',
-          type: 'success',
+            message: '数据集修改成功',
+            type: 'success',
           });
         })
         .finally(() => {
@@ -466,7 +493,7 @@ export default {
     },
     // 查看标注
     async goDetail(row) {
-      if (statusCodeMap[row.status] === 'AUTO_ANNOTATING') {
+      if (isStatus(row, 'AUTO_ANNOTATING')) {
         return Message.error('数据集当前状态不能进行查看');
       }
       this.$router.push({
@@ -486,7 +513,7 @@ export default {
           // 启动自动标注轮询
           this.poll(row, 'AUTO_ANNOTATING');
         })
-        .catch(e => {
+        .catch((e) => {
           row.pollIng = false;
           this.$message({
             message: e.message || '自动标注任务失败',
@@ -497,7 +524,7 @@ export default {
     // 进度条颜色
     progressFill(status) {
       const fillMap = {
-        'AUTO_ANNOTATING': '#52C41A',
+        AUTO_ANNOTATING: '#52C41A',
       };
       if (fillMap[status]) return fillMap[status];
       return '#52C41A';
@@ -544,11 +571,11 @@ export default {
     },
     // 将进度条单独拆分
     queryRowProgress(ids) {
-      if(ids.length === 0) return;
-      queryDatasetsProgress({ ids }).then(res => {
-        const nextData = this.crud.data.map(d => {
+      if (ids.length === 0) return;
+      queryDatasetsProgress({ ids }).then((res) => {
+        const nextData = this.crud.data.map((d) => {
           const rowProgress = res[d.id] || null;
-          return {...d, progress: rowProgress };
+          return { ...d, progress: rowProgress };
         });
 
         Object.assign(this.crud, {
@@ -558,18 +585,24 @@ export default {
     },
     getProgress(row) {
       let percent = 0;
-      if(!isNil(row.progress)) {
-        const total = row.progress.autoFinished + row.progress.finished + row.progress.unfinished + row.progress.manualAnnotating;
-        if(total !== 0) {
+      if (!isNil(row.progress)) {
+        const total =
+          row.progress.autoFinished +
+          row.progress.finished +
+          row.progress.unfinished +
+          row.progress.manualAnnotating;
+        if (total !== 0) {
           percent = (row.progress.autoFinished + row.progress.finished) / total;
         }
-      } else if(['AUTO_ANNOTATED', 'ANNOTATED'].includes(statusCodeMap[row.status])){
+      } else if (isIncludeStatus(row, ['AUTO_ANNOTATED', 'ANNOTATED'])) {
         percent = 1;
       }
       return toFixed(percent, 2, 0);
     },
     getProgressData(progress) {
-      return (!isNil(progress)) ? progress : { unfinished: 0, finished: 0, autoFinished: 0, manualAnnotating: 0 };
+      return !isNil(progress)
+        ? progress
+        : { unfinished: 0, finished: 0, autoFinished: 0, manualAnnotating: 0 };
     },
     filter(column, value) {
       this[column] = value;
@@ -619,7 +652,7 @@ export default {
           }, 3000);
         }
         // 回调
-        if(typeof callback === 'function') {
+        if (typeof callback === 'function') {
           callback(row);
         }
       });
@@ -629,14 +662,14 @@ export default {
       // 轮询数据集状态
       if (type === 'AUTO_ANNOTATING') {
         // 自动标注中
-        return queryDatasetsProgress( {ids: row.id}).then(res => {
+        return queryDatasetsProgress({ ids: row.id }).then((res) => {
           row.progress = res[row.id]; // 更新最新自动标注进度
           if (res[row.id].unfinished !== 0) {
             row.pollIng = true;
-            row.status = findKey('AUTO_ANNOTATING', statusCodeMap); // 更新标注状态
+            row.status = findKey(datasetStatusMap, { status: 'AUTO_ANNOTATING' }); // 更新标注状态
           } else {
             row.pollIng = false;
-            row.status = findKey('AUTO_ANNOTATED', statusCodeMap); // 更新标注状态
+            row.status = findKey(datasetStatusMap, { status: 'AUTO_ANNOTATED' }); // 更新标注状态
             return Promise.resolve(row);
           }
           return null;
@@ -647,4 +680,4 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/webapp/src/views/dataset/medical/status.js b/webapp/src/views/dataset/medical/status.js
index f6720e2..1ccb7ba 100644
--- a/webapp/src/views/dataset/medical/status.js
+++ b/webapp/src/views/dataset/medical/status.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import { medicalStatusMap } from './constant';
 
@@ -28,13 +28,13 @@ export default {
       scopedSlots: {
         header: () => {
           return (
-            <el-dropdown trigger='click' size='medium'>
+            <el-dropdown trigger="click" size="medium">
               <span>
-                <span {... { class: textClass } }>状态</span>
-                <i {... { class: iconClass } } />
+                <span {...{ class: textClass }}>状态</span>
+                <i {...{ class: iconClass }} />
               </span>
-              <el-dropdown-menu slot='dropdown'>
-                {statusList.map(item => {
+              <el-dropdown-menu slot="dropdown">
+                {statusList.map((item) => {
                   return (
                     <el-dropdown-item
                       key={item.value}
@@ -50,17 +50,20 @@ export default {
         },
         default: ({ row }) => {
           const status = medicalStatusMap[row.status] || {};
-          const colorProps = (!status.type && status.bgColor) && {
-            props: {
-              color: status.bgColor,
-            },
-            style: {
-              color: status.color,
-              borderColor: status.bgColor,
-            },
-          };
+          const colorProps = !status.type &&
+            status.bgColor && {
+              props: {
+                color: status.bgColor,
+              },
+              style: {
+                color: status.color,
+                borderColor: status.bgColor,
+              },
+            };
           return (
-            <el-tag type={status.type} {...colorProps}>{status.name}</el-tag>
+            <el-tag type={status.type} {...colorProps}>
+              {status.name}
+            </el-tag>
           );
         },
       },
diff --git a/webapp/src/views/dataset/medical/viewer/action.vue b/webapp/src/views/dataset/medical/viewer/action.vue
index 499631a..5a300fd 100644
--- a/webapp/src/views/dataset/medical/viewer/action.vue
+++ b/webapp/src/views/dataset/medical/viewer/action.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="action-section flex">
@@ -20,14 +20,14 @@
       <div class="icon-wrapper">
         <IconFont type="full-screen" />
       </div>
-      <div class='toolbarText'>全屏</div>
+      <div class="toolbarText">全屏</div>
     </div>
     <div class="rel">
       <div class="ToolbarButton" @click="showTags">
         <div class="icon-wrapper">
           <IconFont type="tag" />
         </div>
-        <div class='toolbarText'>查看标签</div>
+        <div class="toolbarText">查看标签</div>
       </div>
       <div v-if="state.tagsOpen" class="popup">
         <div class="fullBg" @mousedown="closePopup" />
@@ -56,7 +56,7 @@
         <div class="icon-wrapper">
           <IconFont type="help" />
         </div>
-        <div class='toolbarText'>帮助</div>
+        <div class="toolbarText">帮助</div>
       </div>
       <div v-if="state.helpOpen" class="popup">
         <div class="fullBg" @mousedown="closePopup" />
@@ -72,14 +72,14 @@
         <i v-if="saveState.loading" class="el-icon-loading" />
         <IconFont v-else type="baocun" />
       </div>
-      <div class='toolbarText'>保存</div>
+      <div class="toolbarText">保存</div>
     </div>
     <div class="ToolbarButton" :class="state.finishIng ? 'pen' : ''" @click="saveAnnotation(1)">
       <div class="round icon-wrapper">
         <i v-if="saveState.loading" class="el-icon-loading" />
         <IconFont v-else type="finish" />
       </div>
-      <div class='toolbarText'>完成</div>
+      <div class="toolbarText">完成</div>
     </div>
   </div>
 </template>
@@ -94,7 +94,7 @@ import { removeAnchorsFromDrawer } from '../lib';
 import HelpInfo from './helpInfo';
 
 export default {
-  name: "ToolAction",
+  name: 'ToolAction',
   components: {
     InfoTable,
     HelpInfo,
@@ -108,12 +108,12 @@ export default {
     medicalId: String,
     rawAutoAnnotationIds: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     // 修改过的 drawId
     changedDrawId: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     sliceDrawingMap: {
       type: Object,
@@ -151,7 +151,7 @@ export default {
     };
 
     const transformMeta = (data) => {
-      const dataInfo = {...data};
+      const dataInfo = { ...data };
       if (typeof dataInfo.InstanceNumber !== 'undefined') {
         delete dataInfo.InstanceNumber;
       }
@@ -183,25 +183,27 @@ export default {
       const posGroups = drawLayer.getChildren();
       const kGroups = [];
       // 遍历所有的posGroups，并提供匹配的形状groups
-      posGroups.forEach(group => {
+      posGroups.forEach((group) => {
         const position = dwv.draw.getPositionFromGroupId(group.id());
         // group 对应的形状 id 列表
-        const groupShapeIds = group.getChildren().map(node => node.id());
+        const groupShapeIds = group.getChildren().map((node) => node.id());
         // 检测标注 id 是否发生了变更（新增、删除、修改）
-        const changeSinceBefore = !isEqual(groupShapeIds, props.sliceDrawingMap[position.sliceNumber]) || intersection(groupShapeIds, props.changedDrawId).length > 0;
+        const changeSinceBefore =
+          !isEqual(groupShapeIds, props.sliceDrawingMap[position.sliceNumber]) ||
+          intersection(groupShapeIds, props.changedDrawId).length > 0;
 
         const SOPInstanceUIDKeys = Object.keys(SOPInstanceUIDs);
-          if(changeSinceBefore) {
-            kGroups.push(SOPInstanceUIDKeys[position.sliceNumber]);
-          }
+        if (changeSinceBefore) {
+          kGroups.push(SOPInstanceUIDKeys[position.sliceNumber]);
+        }
       });
 
       // 如果有发生过变更，重新生成 sliceDrawingMap
-      if(kGroups.length) {
-        posGroups.forEach(group => {
+      if (kGroups.length) {
+        posGroups.forEach((group) => {
           const position = dwv.draw.getPositionFromGroupId(group.id());
           // group 对应的形状 id 列表
-          const groupShapeIds = group.getChildren().map(node => node.id());
+          const groupShapeIds = group.getChildren().map((node) => node.id());
           newSliceDrawingMap[position.sliceNumber] = groupShapeIds;
         });
       }
@@ -216,15 +218,16 @@ export default {
           sliceDrawingMap: kGroups.length ? newSliceDrawingMap : props.sliceDrawingMap,
         }),
       };
-      if(type === 0) {
+      if (type === 0) {
         // 如果是保存操作，需要把变动的dcm 文件索引发送给服务端
         // 服务端根据文件变动索引，来修改数据集状态
         if (kGroups.length) {
-          savedDrawing.medicalFiles = kGroups.map(index => SOPInstanceUIDs[index]);
+          savedDrawing.medicalFiles = kGroups.map((index) => SOPInstanceUIDs[index]);
         }
       }
 
-      return props.save({drawing: savedDrawing})
+      return props
+        .save({ drawing: savedDrawing })
         .then(() => {
           const msg = type === 0 ? '保存成功' : '数据集标注完成';
           Message.success(msg);
@@ -246,17 +249,17 @@ export default {
         rawMetaData,
       });
     };
-      
+
     // 全屏
+    // eslint-disable-next-line
     const fullScreen = () => {
       if (!screenfull.isEnabled) {
         Message.info('当前浏览器不支持全屏模式');
         return false;
       }
-      state.isFullscreen =  !state.isFullscreen;
+      state.isFullscreen = !state.isFullscreen;
       screenfull.toggle();
     };
-    
 
     const showHelp = () => {
       Object.assign(state, {
@@ -266,10 +269,14 @@ export default {
     };
 
     const handleTagFilter = (value) => {
-      const nextMeta = state.rawMetaData.filter(row => {
+      const nextMeta = state.rawMetaData.filter((row) => {
         let isMatch = false;
-        for(const text of Object.values(row)) {
-          if(String(text).toLowerCase().indexOf(value.toLowerCase()) > -1) {
+        for (const text of Object.values(row)) {
+          if (
+            String(text)
+              .toLowerCase()
+              .indexOf(value.toLowerCase()) > -1
+          ) {
             isMatch = true;
             break;
           }
@@ -308,55 +315,55 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-  .action-section {
-    padding-top: 4px;
+.action-section {
+  padding-top: 4px;
 
-    .svg-icon {
-      font-size: 24px;
-    }
+  .svg-icon {
+    font-size: 24px;
+  }
 
-    .round {
-      width: 60px;
-      border: 1px solid #9ccef9;
-      border-radius: 14px;
-    }
+  .round {
+    width: 60px;
+    border: 1px solid #9ccef9;
+    border-radius: 14px;
+  }
 
-    .icon-wrapper {
-      height: 28px;
+  .icon-wrapper {
+    height: 28px;
 
-      .el-icon-loading {
-        font-size: 18px;
-        line-height: 28px;
-      }
+    .el-icon-loading {
+      font-size: 18px;
+      line-height: 28px;
     }
+  }
 
-    .action-text {
-      margin-top: 4px;
-    }
+  .action-text {
+    margin-top: 4px;
+  }
 
-    .ToolbarButton {
-      &.active svg,
-      &:active svg {
-        fill: #7cf4fe;
-        stroke: #7cf4fe;
-      }
+  .ToolbarButton {
+    &.active svg,
+    &:active svg {
+      fill: #7cf4fe;
+      stroke: #7cf4fe;
+    }
 
-      &.active,
-      &:active {
-        color: #7cf4fe;
-      }
+    &.active,
+    &:active {
+      color: #7cf4fe;
     }
   }
+}
 
-  .dwv-popup {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 11;
-    width: 100%;
-    max-width: 800px;
-    max-height: 80vh;
-    overflow: auto;
-    transform: translate(-50%, -50%);
-  }
+.dwv-popup {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+  width: 100%;
+  max-width: 800px;
+  max-height: 80vh;
+  overflow: auto;
+  transform: translate(-50%, -50%);
+}
 </style>
diff --git a/webapp/src/views/dataset/medical/viewer/controls.vue b/webapp/src/views/dataset/medical/viewer/controls.vue
index e8769bc..b90a25d 100644
--- a/webapp/src/views/dataset/medical/viewer/controls.vue
+++ b/webapp/src/views/dataset/medical/viewer/controls.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div
@@ -33,17 +33,13 @@
       <div class="control-options">
         <ul>
           <li v-for="key in Object.keys(item.options)" :key="key">
-            <label
-              :for="key"
-              class="control-option-label"
-              :class="value === key ? 'active' : ''"
-            >
+            <label :for="key" class="control-option-label" :class="value === key ? 'active' : ''">
               <input
                 :id="key"
                 :name="item.command"
                 :value="key"
                 type="radio"
-                :checked="value === key ? true: false"
+                :checked="value === key ? true : false"
                 @change="updatePreset"
               />
               {{ accessor(key) }}
@@ -77,18 +73,19 @@ export default {
     activeTool: String,
     valueAccessor: Function, // 展示字段
   },
-  setup(props, ctx){
+  setup(props, ctx) {
     const wrapperRef = ref(null);
     const state = reactive({
       isOpen: false,
     });
 
-    const getklass = () => cx({
-      active: props.activeTool === props.item.command,
-    });
+    const getklass = () =>
+      cx({
+        active: props.activeTool === props.item.command,
+      });
 
     // 展示内容默认方法
-    const defaultValueAccessor = key => props.item.options[key].name;
+    const defaultValueAccessor = (key) => props.item.options[key].name;
 
     const toggleDropdown = (open) => {
       const toggle = isNil(open) ? !state.isOpen : open;
@@ -106,7 +103,7 @@ export default {
 
     // 更新 preset
     const updatePreset = (event) => {
-      if(props.value !== event.target.value) {
+      if (props.value !== event.target.value) {
         ctx.emit('change', {
           value: event.target.value,
           ...props.item,
@@ -130,7 +127,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "~@/assets/styles/mixin.scss";
+@import '~@/assets/styles/mixin.scss';
 
 .controls {
   span {
diff --git a/webapp/src/views/dataset/medical/viewer/helpInfo.vue b/webapp/src/views/dataset/medical/viewer/helpInfo.vue
index 2b480a5..60ad3a3 100644
--- a/webapp/src/views/dataset/medical/viewer/helpInfo.vue
+++ b/webapp/src/views/dataset/medical/viewer/helpInfo.vue
@@ -1,23 +1,27 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <div class='dwv-content'>
+  <div class="dwv-content">
     <p>欢迎使用天枢医疗影像标注工具！</p>
-    <p>在这里，你可以通过上传标准 <el-link href="https://www.dicomstandard.org/" target="_blank">DICOM</el-link> 文件就能实现随时随地进行医疗影像查询、阅片、智能识别、影像标注等常见操作。系统还提供了一些标准工具对影像文件进行操作，包括滚动浏览，缩放/拖拽，窗宽/窗位，对比，预设窗口等工具。</p>
+    <p>
+      在这里，你可以通过上传标准
+      <el-link href="https://www.dicomstandard.org/" target="_blank">DICOM</el-link>
+      文件就能实现随时随地进行医疗影像查询、阅片、智能识别、影像标注等常见操作。系统还提供了一些标准工具对影像文件进行操作，包括滚动浏览，缩放/拖拽，窗宽/窗位，对比，预设窗口等工具。
+    </p>
     <p>所有 DICOM 标签都可以点击「查看标签」按钮进行查询，你可以指定搜索条件对信息进行过滤。</p>
     <p>下列工具定义了与用户操作相关的产品交互行为：</p>
     <el-collapse v-model="activeNames" accordion>
@@ -38,8 +42,12 @@
       </el-collapse-item>
       <el-collapse-item title="绘制标注（Draw）" name="Draw">
         <div>基于锚点绘制标注</div>
-        <div>绘制标注：按下鼠标开始绘制锚点，移动鼠标到想要的地点，再次单击鼠标连接两个锚点，双击完成绘制。</div>
-        <div>修改标注：单击选中标注路径，路径出现锚点，拖动锚点到想要的位置，点击「保存」按钮完成修改</div>
+        <div>
+          绘制标注：按下鼠标开始绘制锚点，移动鼠标到想要的地点，再次单击鼠标连接两个锚点，双击完成绘制。
+        </div>
+        <div>
+          修改标注：单击选中标注路径，路径出现锚点，拖动锚点到想要的位置，点击「保存」按钮完成修改
+        </div>
         <div>删除标注：单击选中标注，按住 delete 快捷键删除标注</div>
       </el-collapse-item>
       <el-collapse-item title="展示、隐藏信息（Info）" name="Info">
@@ -59,7 +67,7 @@
         <div>大脑：80/40</div>
         <p></p>
         <div>注：实际以图像真实窗口、窗位信息为准</div>
-      </el-collapse-item>      
+      </el-collapse-item>
       <el-collapse-item title="更多（More）" name="More">
         <div class="ml-40">
           <el-collapse v-model="activeSubNames" accordion>
@@ -68,51 +76,51 @@
               <div>精度可调范围为1%~100%，手动标注结果不支持调节。</div>
               <div>100%时显示算法生成的所有标注点。</div>
             </el-collapse-item>
-          </el-collapse> 
+          </el-collapse>
         </div>
       </el-collapse-item>
     </el-collapse>
   </div>
 </template>
 <script>
-  export default {
-    name: 'DCOMHelpInfo',
-    data() {
-      return {
-        activeNames: ['Scroll'],
-        activeSubNames:[],
-      };
-    },
-  };
+export default {
+  name: 'DCOMHelpInfo',
+  data() {
+    return {
+      activeNames: ['Scroll'],
+      activeSubNames: [],
+    };
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .dwv-content {
-    padding: 2em 2em 3em;
-    font-size: 14px;
-    line-height: 1.5;
-    color: #b8baee;
-    background-color: #151a1f;
-    border-radius: 8px;
+.dwv-content {
+  padding: 2em 2em 3em;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #b8baee;
+  background-color: #151a1f;
+  border-radius: 8px;
 
-    .el-link {
-      color: #7cf4fe;
-      text-decoration: underline;
-    }
+  .el-link {
+    color: #7cf4fe;
+    text-decoration: underline;
+  }
 
-    ::v-deep .el-collapse-item {
-      .el-collapse-item__header {
-        color: inherit;
-        background: none;
-      }
+  ::v-deep .el-collapse-item {
+    .el-collapse-item__header {
+      color: inherit;
+      background: none;
+    }
 
-      .el-collapse-item__wrap {
-        background: none;
-      }
+    .el-collapse-item__wrap {
+      background: none;
+    }
 
-      .el-collapse-item__content {
-        font-size: 14px;
-        color: inherit;
-      }
+    .el-collapse-item__content {
+      font-size: 14px;
+      color: inherit;
     }
   }
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/webapp/src/views/dataset/medical/viewer/index.vue b/webapp/src/views/dataset/medical/viewer/index.vue
index a9d7324..aa4322b 100644
--- a/webapp/src/views/dataset/medical/viewer/index.vue
+++ b/webapp/src/views/dataset/medical/viewer/index.vue
@@ -1,22 +1,22 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="rel dwv-container">
-    <div id="dwv" v-hotkey="keymap" class='dwv-wrapper viewer rel'>
+    <div id="dwv" v-hotkey="keymap" class="dwv-wrapper viewer rel">
       <div class="dwv-page-header flex flex-between">
         <ToolBar
           :tools="state.actions"
@@ -79,14 +79,28 @@ import { onMounted, reactive, ref, computed, onBeforeUnmount } from '@vue/compos
 import { findIndex, uniq, isNil, max } from 'lodash';
 
 import { toFixed, remove, replace, noop, mergeArrayByKey, generateUuid } from '@/utils';
-import { getCaseInfo, queryAutoResult, queryManualResult, save, saveLesions, queryLesions } from '@/api/preparation/medical';
-import { statusCodeMap } from '@/views/dataset/util';
+import {
+  getCaseInfo,
+  queryAutoResult,
+  queryManualResult,
+  save,
+  saveLesions,
+  queryLesions,
+} from '@/api/preparation/medical';
+import { datasetStatusMap } from '@/views/dataset/util';
 import LesionInfo from './lesionInfo';
 import InfoLayer from './infoLayer';
 import ToolBar from './toolbar';
 import Action from './action';
 import actions, { viewerCommands } from '../lib/actions';
-import { dwc, getImageIdsForSeries, getSOPInstanceUID, genDrawingFromAnnotations, buildWADOUrl, getDrawLayer } from '../lib';
+import {
+  dwc,
+  getImageIdsForSeries,
+  getSOPInstanceUID,
+  genDrawingFromAnnotations,
+  buildWADOUrl,
+  getDrawLayer,
+} from '../lib';
 import { getAnnotateType } from '../constant';
 import '../lib/gui';
 
@@ -98,9 +112,9 @@ export default {
     Action,
     LesionInfo,
   },
-  setup(props, ctx){
+  setup(props, ctx) {
     const { $route, $router } = ctx.root;
-    const { params = {}} = $route;
+    const { params = {} } = $route;
     const canvasRef = ref(null);
 
     // 记录 id
@@ -121,7 +135,8 @@ export default {
       curInstanceID: undefined, // 当前实例 ID
       seriesDicomInfo: {}, // 当前系列 dicom 信息
       showInfo: true, // 是否展示覆盖信息
-      overlayInfo: { // 覆盖层信息
+      overlayInfo: {
+        // 覆盖层信息
         zoom: { scale: 1 },
       },
       stack: {
@@ -140,9 +155,9 @@ export default {
     });
 
     const tools = {
-      Scroll: {}, 
+      Scroll: {},
       ZoomAndPan: {},
-      WindowLevel: {}, 
+      WindowLevel: {},
       Draw: {
         options: ['Roi', 'Rectangle'],
         type: 'factory',
@@ -160,7 +175,7 @@ export default {
     // 根据异步结果更新状态
     const updateState = (params) => {
       // 区分函数式更新和对象更新
-      if(typeof params === 'function') {
+      if (typeof params === 'function') {
         const next = params(state);
         Object.assign(state, next);
         return;
@@ -173,7 +188,7 @@ export default {
       const { data } = event;
       const SOPInstanceUID = getSOPInstanceUID(data);
       // 如果已存在，什么都不做
-      if(state.seriesDicomInfo[SOPInstanceUID]) return;
+      if (state.seriesDicomInfo[SOPInstanceUID]) return;
       const nextInfo = {
         ...state.seriesDicomInfo,
         [SOPInstanceUID]: data,
@@ -191,11 +206,11 @@ export default {
     };
 
     const toggleCanvasListener = (canvas, bool) => {
-      if(bool === false) {
-        canvas.setAttribute("style", "pointer-events: none;");
+      if (bool === false) {
+        canvas.setAttribute('style', 'pointer-events: none;');
       } else {
         // todo: draw layer
-        canvas.setAttribute("style", "pointer-events: auto;");
+        canvas.setAttribute('style', 'pointer-events: auto;');
       }
     };
 
@@ -210,9 +225,9 @@ export default {
 
     // 下拉菜单，draw 需要打开的时候触发
     const handleOpenTool = (isOpen, tool) => {
-      if(isOpen) {
-        if(tool.command === 'Draw') {
-          if (state.shape){
+      if (isOpen) {
+        if (tool.command === 'Draw') {
+          if (state.shape) {
             dwvApp.setTool(tool.command);
             changeShape(state.shape, 'Draw');
             toggleToolEvent(tool, true);
@@ -229,18 +244,19 @@ export default {
         dwvApp.setTool(tool.command);
         if (tool.command === 'Draw') {
           changeShape(tool.value, 'Draw');
-          tool.value && updateState({
-            shape: tool.value,
-          });
+          tool.value &&
+            updateState({
+              shape: tool.value,
+            });
         }
         // 如果从command 切换回来，要重新绑定事件
-        if (!isTool(state.activeTool)){
+        if (!isTool(state.activeTool)) {
           // 非 tool 事件关闭 canvas 事件
           toggleToolEvent(tool, true);
         }
       } else {
         const selectedTool = dwvApp.getToolboxController().getSelectedTool();
-        if(selectedTool) {
+        if (selectedTool) {
           // 非 tool 事件关闭 canvas 事件
           toggleToolEvent(tool, false);
         }
@@ -252,7 +268,7 @@ export default {
     };
 
     const updateOverlayInfo = (info) => {
-      if(typeof info === 'function') {
+      if (typeof info === 'function') {
         const next = info(state.overlayInfo);
         Object.assign(state, {
           overlayInfo: {
@@ -270,15 +286,15 @@ export default {
       });
     };
 
-    const updateWwwc = event => {
+    const updateWwwc = (event) => {
       updateOverlayInfo({
         ww: event.ww,
         wc: event.wc,
       });
     };
 
-    const updateZoom = event => {
-      if(event.type === 'zoom-change') {
+    const updateZoom = (event) => {
+      if (event.type === 'zoom-change') {
         updateOverlayInfo({
           zoom: {
             ...event,
@@ -290,7 +306,7 @@ export default {
 
     // 写入变更过的id
     const addChangedId = (id) => {
-      if(!state.changedDrawId.includes(id)) {
+      if (!state.changedDrawId.includes(id)) {
         state.changedDrawId.push(id);
       }
     };
@@ -315,7 +331,7 @@ export default {
       const saveDrawingPromise = save(drawing);
       const promises = [saveDrawingPromise];
       // 保存病灶信息
-      if(state.showLesionInfo) {
+      if (state.showLesionInfo) {
         const saveLesionPromise = saveLesions(params.medicalId, state.lesions);
         promises.push(saveLesionPromise);
       }
@@ -326,7 +342,7 @@ export default {
     // 更新病灶记录
     const updateLesionCount = () => {
       const counts = state.lesions.reduce((acc, d) => {
-        if(!isNil(d.lesionOrder)) {
+        if (!isNil(d.lesionOrder)) {
           acc.push(d.lesionOrder);
         }
         return acc;
@@ -335,18 +351,25 @@ export default {
       // 更新 count 记录
       // eslint-disable-next-line
       lesionOrderMap.count = counts.length
-        ? (isNil(max(counts)) ? 1 : max(counts)) 
+        ? isNil(max(counts))
+          ? 1
+          : max(counts)
         : state.lesions.length;
     };
 
     // 获取远程数据并渲染应用
     const applyState = async (app) => {
       const { caseInfo } = state;
-      switch(statusCodeMap[caseInfo.status]) {
+      switch (datasetStatusMap[caseInfo.status]?.status) {
         case 'AUTO_ANNOTATED': {
           // 自动标注结果
           const autoResult = await queryAutoResult(caseInfo.id);
-          const { drawings, drawingsDetails, drawingIds, sliceDrawingMap } = genDrawingFromAnnotations(JSON.parse(autoResult.annotations), state.precision);
+          const {
+            drawings,
+            drawingsDetails,
+            drawingIds,
+            sliceDrawingMap,
+          } = genDrawingFromAnnotations(JSON.parse(autoResult.annotations), state.precision);
           Object.assign(state, {
             sliceDrawingMap,
             annotations: autoResult.annotations,
@@ -369,7 +392,7 @@ export default {
         }
         // 未标注  什么都不做
         case 'UNANNOTATED':
-        break;
+          break;
         // 其他状态均不允许查看详情页
         default:
           setTimeout(() => {
@@ -378,12 +401,12 @@ export default {
           throw new Error('当前数据集状态不允许查看');
       }
 
-      if(state.showLesionInfo) {
+      if (state.showLesionInfo) {
         const drawDetails = app.getDrawDisplayDetails();
-        queryLesions(params.medicalId).then(res => {
+        queryLesions(params.medicalId).then((res) => {
           try {
-            const lesions = res.map(d => {
-              const rawList = JSON.parse(d.list).map(d => ({
+            const lesions = res.map((d) => {
+              const rawList = JSON.parse(d.list).map((d) => ({
                 ...d,
                 id: d.drawId,
               }));
@@ -400,7 +423,7 @@ export default {
           } catch (err) {
             console.error(err);
             throw err;
-          }   
+          }
         });
       }
     };
@@ -408,7 +431,7 @@ export default {
     // 移除修改标注记录
     const moveDrawIdBy = (source, findBy) => {
       const changedIndex = findBy(state[source]);
-      if(changedIndex > -1) {
+      if (changedIndex > -1) {
         const updateArr = remove(state[source], changedIndex);
         Object.assign(state, {
           [source]: updateArr,
@@ -416,31 +439,33 @@ export default {
       }
     };
 
-    const deleteLesionInfo = id => {
-      if(state.showLesionInfo && id) {
+    const deleteLesionInfo = (id) => {
+      if (state.showLesionInfo && id) {
         // 如果删除的 drawId 存在于 lesions 则移除
-        moveDrawIdBy('lesions', arr => findIndex(arr, o => {
-          return (o.list || []).map(d => d.drawId).includes(id);
-        }));
+        moveDrawIdBy('lesions', (arr) =>
+          findIndex(arr, (o) => {
+            return (o.list || []).map((d) => d.drawId).includes(id);
+          })
+        );
       }
     };
 
     // 删除 draw 数据
-    const deleteDrawInfo = id => {
-      if(!id) return;
+    const deleteDrawInfo = (id) => {
+      if (!id) return;
       // 如果删除的 drawId 存在于 changedDrawId，则移除
-      moveDrawIdBy('changedDrawId', arr => findIndex(arr, o => o === id));
+      moveDrawIdBy('changedDrawId', (arr) => findIndex(arr, (o) => o === id));
       deleteLesionInfo(id);
     };
 
     // 删除标注形状
-    const deleteDrawShape = id => {
-      if(!id) return;
+    const deleteDrawShape = (id) => {
+      if (!id) return;
       const drawLayer = getDrawLayer(dwvApp);
       const groups = drawLayer.getChildren();
-      for(const group of groups) {
-        const groupToDelete = group.getChildren(node => node.id() === id);
-        if(groupToDelete.length === 1) {
+      for (const group of groups) {
+        const groupToDelete = group.getChildren((node) => node.id() === id);
+        if (groupToDelete.length === 1) {
           dwvApp.getDrawController().deleteDrawGroup(groupToDelete[0], noop, noop);
         }
       }
@@ -449,8 +474,8 @@ export default {
     // 同时删除形状和数据
     const deleteDraw = (row = {}) => {
       // 获取病灶下方
-      const drawIds = (row.list || []).map(d => d.drawId).filter(d => !!d);
-      for(const id of drawIds) {
+      const drawIds = (row.list || []).map((d) => d.drawId).filter((d) => !!d);
+      for (const id of drawIds) {
         deleteDrawShape(id);
         deleteDrawInfo(id);
       }
@@ -462,16 +487,16 @@ export default {
     };
 
     // 跳转到指定slice
-    const setCurrentSlice = k => {
+    const setCurrentSlice = (k) => {
       dwvApp.getViewController().setCurrentSlice(k);
     };
 
     // 更新 draw 颜色
     const updateDrawColor = (drawIds, color) => {
       const drawDetails = dwvApp.getDrawDisplayDetails();
-      drawIds.forEach(drawId => {
-        const drawDetail = drawDetails.find(d => d.id === drawId);
-        if(drawDetail) {
+      drawIds.forEach((drawId) => {
+        const drawDetail = drawDetails.find((d) => d.id === drawId);
+        if (drawDetail) {
           drawDetail.color = color;
           addChangedId(drawId);
           dwvApp.updateDraw(drawDetail);
@@ -481,9 +506,9 @@ export default {
 
     // 编辑病灶 id
     const editLesionOrder = (value, row) => {
-      const index = findIndex(state.lesions, o => o.lesionOrder === Number(value));
+      const index = findIndex(state.lesions, (o) => o.lesionOrder === Number(value));
       // 检查到当前改动已存在 lesionOrder
-      if(index > -1) {
+      if (index > -1) {
         const rawlesion = state.lesions[index];
         const sliceDesc = String(rawlesion.sliceDesc)
           .split(',')
@@ -496,23 +521,25 @@ export default {
 
         let nextLesions = replace(state.lesions, index, {
           ...rawlesion,
-          sliceDesc: uniq(sliceDesc).sort().join(','),
+          sliceDesc: uniq(sliceDesc)
+            .sort()
+            .join(','),
           list: nextList,
         });
 
         // 只删除病灶信息，保留形状
-        const mergedRowIndex = findIndex(nextLesions, o => o.id === row.id);
-        if(mergedRowIndex > -1) {
+        const mergedRowIndex = findIndex(nextLesions, (o) => o.id === row.id);
+        if (mergedRowIndex > -1) {
           nextLesions = remove(nextLesions, mergedRowIndex);
         }
 
         Object.assign(state, {
           lesions: nextLesions,
         });
-        const drawIds = nextList.map(d => d.drawId);
+        const drawIds = nextList.map((d) => d.drawId);
         updateDrawColor(drawIds, rawColor);
       } else {
-        const curIndex = findIndex(state.lesions, o => o.id === row.id);
+        const curIndex = findIndex(state.lesions, (o) => o.id === row.id);
         const nextRow = {
           ...row,
           lesionOrder: Number(value), // lesionOrder 必须为数字
@@ -526,10 +553,11 @@ export default {
       updateLesionCount();
     };
 
+    // eslint-disable-next-line
     const editDrawDetail = (type, value, row) => {
-      switch(type) {
+      switch (type) {
         case 'color': {
-          const drawIds = row.list.map(d => d.drawId);
+          const drawIds = row.list.map((d) => d.drawId);
           updateDrawColor(drawIds, value);
           break;
         }
@@ -540,7 +568,7 @@ export default {
 
     // 编辑病灶信息
     const editLesionItem = (value, row) => {
-      const index = findIndex(state.lesions, o => o.id === row.id);
+      const index = findIndex(state.lesions, (o) => o.id === row.id);
       const nextLesions = replace(state.lesions, index, {
         ...row,
         sliceDesc: value,
@@ -573,7 +601,7 @@ export default {
       const showLesionInfo = getAnnotateType(annotateType) === 1;
 
       const seriesMetadata = await dwc.retrieveSeriesMetadata(caseInfo);
-      if(!seriesMetadata || !seriesMetadata.length) {
+      if (!seriesMetadata || !seriesMetadata.length) {
         throw new Error('找不到数据');
       }
       const imageInstances = getImageIdsForSeries(seriesMetadata);
@@ -593,7 +621,7 @@ export default {
           loading: true,
         });
       });
-      dwvApp.addEventListener('load-progress', event => {
+      dwvApp.addEventListener('load-progress', (event) => {
         Object.assign(state, {
           loadProgress: event.loaded,
         });
@@ -611,7 +639,7 @@ export default {
       dwvApp.addEventListener('load', (event) => {
         const firstObjectId = new URL(imageIds[0]).searchParams.get('objectUID');
         // 返回一个列表
-        if(event.source.length) {
+        if (event.source.length) {
           // 默认第一个为选中索引值
           Object.assign(state, {
             curInstanceID: firstObjectId,
@@ -633,14 +661,14 @@ export default {
         }
         // 初始化 tool
         dwvApp.setTool(state.activeTool);
-        
+
         dwvApp.getViewController().goFirstSlice();
         // 加载数据
         await applyState(dwvApp);
         Object.assign(state, nextState);
       });
-    
-      dwvApp.addEventListener('error', event => {
+
+      dwvApp.addEventListener('error', (event) => {
         console.error('load error', event);
         Object.assign(state, {
           receivedError: state.receivedError + 1,
@@ -655,9 +683,9 @@ export default {
 
       dwvApp.addEventListener('draw-create', ({ id }) => {
         const drawDetails = dwvApp.getDrawDisplayDetails();
-        const drawInfo = drawDetails.find(d => d.id === id) || {};
+        const drawInfo = drawDetails.find((d) => d.id === id) || {};
         // 判断是用户手动创建，还是代码生成
-        if(state.showLesionInfo) {
+        if (state.showLesionInfo) {
           const lesionOrder = (lesionOrderMap.count += 1);
           const sliceIndex = state.stack.currentImageIdIndex + 1;
           // 展示病灶信息
@@ -665,11 +693,13 @@ export default {
             id: generateUuid(),
             lesionOrder,
             sliceDesc: sliceIndex,
-            list: [{
-              drawId: id,
-              sliceNumber: sliceIndex,
-              ...drawInfo,
-            }],
+            list: [
+              {
+                drawId: id,
+                sliceNumber: sliceIndex,
+                ...drawInfo,
+              },
+            ],
           });
         }
       });
@@ -678,7 +708,7 @@ export default {
         deleteDrawInfo(id);
       });
 
-      // todo: 如何获取 ww,wc? 
+      // todo: 如何获取 ww,wc?
       // 监听窗宽、窗高
       dwvApp.addEventListener('wl-width-change', updateWwwc);
       dwvApp.addEventListener('wl-center-change', updateWwwc);
@@ -687,12 +717,12 @@ export default {
       dwvApp.addEventListener('zoom-change', updateZoom);
       dwvApp.addEventListener('slice-change', onSliceChange);
 
-      dwvApp.addEventListener('keydown', event => {
-        if(event.keyCode === 39) {
+      dwvApp.addEventListener('keydown', (event) => {
+        if (event.keyCode === 39) {
           event.preventDefault();
           dwvApp.getViewController().incrementSliceNb();
         }
-        if(event.keyCode === 37) {
+        if (event.keyCode === 37) {
           event.preventDefault();
           dwvApp.getViewController().decrementSliceNb();
         }
@@ -727,10 +757,10 @@ export default {
 };
 </script>
 <style lang="scss">
-  .fullBg {
-    background-color: #fff;
-    opacity: 0.3;
-  }
+.fullBg {
+  background-color: #fff;
+  opacity: 0.3;
+}
 </style>
 <style lang="scss" scoped>
 .dwv-wrapper {
@@ -776,5 +806,4 @@ export default {
   height: calc(100vh - 80px);
   color: #9ccef9;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/dataset/medical/viewer/infoLayer.vue b/webapp/src/views/dataset/medical/viewer/infoLayer.vue
index d2cb660..77ae972 100644
--- a/webapp/src/views/dataset/medical/viewer/infoLayer.vue
+++ b/webapp/src/views/dataset/medical/viewer/infoLayer.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="infoLayer">
@@ -25,8 +25,7 @@
       <ul>
         <li>WW/WC：{{ overlayInfo.ww }} / {{ overlayInfo.wc }}</li>
         <li>Zoom：{{ overlayInfo.zoom.scale }}</li>
-        <li>Image: {{stack.currentImageIdIndex + 1}} / {{stack.imageIds.length}}
-        </li>
+        <li>Image: {{ stack.currentImageIdIndex + 1 }} / {{ stack.imageIds.length }}</li>
       </ul>
     </div>
   </div>
@@ -34,11 +33,11 @@
 <script>
 import dwv from '@wulucxy/dwv';
 import cx from 'classnames';
-import { reactive, onMounted, watch } from '@vue/composition-api';
+import { reactive, watch } from '@vue/composition-api';
 import overlays from '../lib/overlays.json';
 
 export default {
-  name: "InfoLayer",
+  name: 'InfoLayer',
   props: {
     seriesInfo: {
       type: Object,
@@ -54,7 +53,7 @@ export default {
       default: () => ({}),
     },
   },
-  setup(props){
+  setup(props) {
     const state = reactive({
       overlayData: {},
     });
@@ -65,13 +64,13 @@ export default {
       if (!modality) {
         return {};
       }
-      for(const item of overlays) {
+      for (const item of overlays) {
         // eslint-disable-next-line
         let { value, tags, format, pos } = item;
         // 根据 tags 生成值
         if (typeof tags !== 'undefined' && tags.length !== 0) {
           const values = [];
-          tags.forEach(tag => {
+          tags.forEach((tag) => {
             values.push(dicomElements.getElementValueAsStringFromKey(tag));
           });
 
@@ -91,7 +90,7 @@ export default {
         if (!overlayMap[pos]) {
           overlayMap[pos] = [];
         }
-        overlayMap[pos].push({value: value.trim(), format});
+        overlayMap[pos].push({ value: value.trim(), format });
       }
       return overlayMap;
     };
@@ -105,18 +104,22 @@ export default {
       });
     };
 
-    const klass = pos => cx('info-element', {
-      [`info-${pos}`]: !!pos,
-    });
-
-    onMounted(() => {
-    });
+    const klass = (pos) =>
+      cx('info-element', {
+        [`info-${pos}`]: !!pos,
+      });
 
-    watch(() => props.curInstanceID, (next) => {
-      if(next) {
-        readItem(next);
+    watch(
+      () => props.curInstanceID,
+      (next) => {
+        if (next) {
+          readItem(next);
+        }
+      },
+      {
+        immediate: true,
       }
-    });
+    );
 
     return {
       state,
@@ -126,39 +129,39 @@ export default {
 };
 </script>
 <style lang="scss">
-  .infoLayer {
+.infoLayer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  height: calc(100vh - 80px);
+  pointer-events: none;
+
+  .info-element {
     position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    width: 100%;
-    height: calc(100vh - 80px);
-    pointer-events: none;
-
-    .info-element {
-      position: absolute;
-      color: lightblue;
-      text-shadow: 1px 1px black;
-    }
+    color: lightblue;
+    text-shadow: 1px 1px black;
+  }
 
-    .info-tl {
-      top: 10px;
-      left: 27px;
-    }
+  .info-tl {
+    top: 10px;
+    left: 27px;
+  }
 
-    .info-tr {
-      top: 10px;
-      right: 32px;
-    }
+  .info-tr {
+    top: 10px;
+    right: 32px;
+  }
 
-    .info-bl {
-      bottom: 16px;
-      left: 27px;
-    }
+  .info-bl {
+    bottom: 16px;
+    left: 27px;
+  }
 
-    .info-br {
-      right: 32px;
-      bottom: 16px;
-    }
+  .info-br {
+    right: 32px;
+    bottom: 16px;
   }
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/webapp/src/views/dataset/medical/viewer/lesionInfo.vue b/webapp/src/views/dataset/medical/viewer/lesionInfo.vue
index 17dd0f0..a847bb7 100644
--- a/webapp/src/views/dataset/medical/viewer/lesionInfo.vue
+++ b/webapp/src/views/dataset/medical/viewer/lesionInfo.vue
@@ -1,21 +1,21 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <div class='lesion-table-wrapper'>
+  <div class="lesion-table-wrapper">
     <el-form label-position="top" @submit.native.prevent>
       <div class="el-form-item__label">
         可疑结节
@@ -39,36 +39,46 @@
           </template>
         </el-table-column>
         <el-table-column label="ID" :min-width="64">
-          <template slot-scope="{row}">
+          <template slot-scope="{ row }">
             <span>{{ row.lesionOrder }}</span>
-            <Edit :row="row" title="修改ID" valueBy="lesionOrder" rules="required|validateLesionId" label="ID" @handleOk="editLesionOrder" />
+            <Edit
+              :row="row"
+              title="修改ID"
+              valueBy="lesionOrder"
+              rules="required|validateLesionId"
+              label="ID"
+              @handleOk="editLesionOrder"
+            />
           </template>
         </el-table-column>
         <el-table-column label="层面" :min-width="60">
-          <template slot-scope="{row}">
+          <template slot-scope="{ row }">
             <span>{{ row.sliceDesc }}</span>
-            <Edit :row="row" title="修改层面" valueBy="sliceDesc" rules="required|validateLesionSliceNumber" label="层面" @handleOk="editLesionItem" />
+            <Edit
+              :row="row"
+              title="修改层面"
+              valueBy="sliceDesc"
+              rules="required|validateLesionSliceNumber"
+              label="层面"
+              @handleOk="editLesionItem"
+            />
           </template>
         </el-table-column>
         <el-table-column label="颜色" :min-width="60">
-          <template slot-scope="{row}">
-            <el-color-picker v-model="row.list[0].color" @change="editDrawDetail('color', $event, row)" />
+          <template slot-scope="{ row }">
+            <el-color-picker
+              v-model="row.list[0].color"
+              @change="editDrawDetail('color', $event, row)"
+            />
           </template>
         </el-table-column>
         <el-table-column label="操作" :min-width="60">
-          <template slot-scope="{row}">
+          <template slot-scope="{ row }">
             <el-tooltip effect="dark" content="跳转到结节层面" placement="top" :open-delay="800">
-              <i
-                class="el-icon-d-arrow-right cp"
-                style="color: #fff;"
-                @click="toPosition(row)"
-              />
+              <i class="el-icon-d-arrow-right cp" style="color: #fff;" @click="toPosition(row)" />
             </el-tooltip>
-            <el-popconfirm
-              title="确定删除标注？"
-              @onConfirm="() => deleteDrawItem(row)"
-            >
-              <span slot="reference"><i class="el-icon-delete cp ml-4" /></span>
+            <el-popconfirm title="确定删除标注？" @onConfirm="() => deleteDrawItem(row)">
+              <span slot="reference"><i class="el-icon-delete cp ml-4"/></span>
             </el-popconfirm>
           </template>
         </el-table-column>
@@ -89,7 +99,7 @@ export default {
   props: {
     lesions: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     deleteDraw: Function,
     setCurrentSlice: Function,
@@ -98,13 +108,13 @@ export default {
     getApp: Function,
     editDrawDetail: Function,
   },
-  setup(props){
+  setup(props) {
     const { deleteDraw, setCurrentSlice, getApp } = props;
     const state = reactive({
       lesions: props.lesions,
     });
     // 删除标注
-    const deleteDrawItem = row => {
+    const deleteDrawItem = (row) => {
       deleteDraw(row);
     };
 
@@ -114,14 +124,17 @@ export default {
       setCurrentSlice(sliceNumber - 1);
       const drawLayer = getDrawLayer(getApp());
       const selectedShape = getShapeGroup(drawId, drawLayer);
-      if(selectedShape) {
+      if (selectedShape) {
         activeShapeGroup(getApp(), selectedShape);
       }
     };
 
-    watch(() => props.lesions, (next) => {
-      state.lesions = next;
-    });
+    watch(
+      () => props.lesions,
+      (next) => {
+        state.lesions = next;
+      }
+    );
 
     return {
       state,
@@ -212,4 +225,4 @@ export default {
     border: none;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/dataset/medical/viewer/toolbar.vue b/webapp/src/views/dataset/medical/viewer/toolbar.vue
index a7527cc..fc28154 100644
--- a/webapp/src/views/dataset/medical/viewer/toolbar.vue
+++ b/webapp/src/views/dataset/medical/viewer/toolbar.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="dwv-toolbar toolbar-section">
@@ -40,7 +40,7 @@ import ToolbarMore from './toolbarMore';
 import { defaultWlPresets } from '../lib/actions';
 
 export default {
-  name: "ToolBar",
+  name: 'ToolBar',
   components: {
     ToolbarItem,
     ToolbarMore,
@@ -75,16 +75,16 @@ export default {
 };
 </script>
 <style lang="scss">
-  .toolbar-section {
-    display: flex;
-    margin-left: 24px;
-  }
+.toolbar-section {
+  display: flex;
+  margin-left: 24px;
+}
 
-  .ToolbarButton {
-    .toolbarText {
-      height: 18px;
-      margin-top: 4px;
-      line-height: 18px;
-    }
+.ToolbarButton {
+  .toolbarText {
+    height: 18px;
+    margin-top: 4px;
+    line-height: 18px;
   }
+}
 </style>
diff --git a/webapp/src/views/dataset/medical/viewer/toolbarButton.vue b/webapp/src/views/dataset/medical/viewer/toolbarButton.vue
index 90165fa..a115dbe 100644
--- a/webapp/src/views/dataset/medical/viewer/toolbarButton.vue
+++ b/webapp/src/views/dataset/medical/viewer/toolbarButton.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="ToolbarButton usn" :class="getklass()" @click="handleClick(item)">
@@ -21,32 +21,33 @@
   </div>
 </template>
 <script>
-  import cx from 'classnames';
+import cx from 'classnames';
 
-  export default {
-    name: 'ToolbarButton',
-    props: {
-      item: Object,
-      activeTool: String,
-    },
-    setup(props, ctx){
-      const getklass = () => cx({
+export default {
+  name: 'ToolbarButton',
+  props: {
+    item: Object,
+    activeTool: String,
+  },
+  setup(props, ctx) {
+    const getklass = () =>
+      cx({
         active: props.activeTool === props.item.command,
       });
-      const handleClick = (item) => {
-        if(item.command === props.activeTool) return;
-        ctx.emit('change', item);
-      };
+    const handleClick = (item) => {
+      if (item.command === props.activeTool) return;
+      ctx.emit('change', item);
+    };
 
-      return {
-        getklass,
-        handleClick,
-      };
-    },
-  };
+    return {
+      getklass,
+      handleClick,
+    };
+  },
+};
 </script>
 <style lang="scss">
-@import "~@/assets/styles/mixin.scss";
+@import '~@/assets/styles/mixin.scss';
 
 .ToolbarButton {
   min-width: 48px;
diff --git a/webapp/src/views/dataset/medical/viewer/toolbarItem.js b/webapp/src/views/dataset/medical/viewer/toolbarItem.js
index 4440eb7..64e0d87 100644
--- a/webapp/src/views/dataset/medical/viewer/toolbarItem.js
+++ b/webapp/src/views/dataset/medical/viewer/toolbarItem.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 import ToolbarButton from './toolbarButton';
 import ToolbarControls from './controls';
@@ -38,29 +38,15 @@ const ToolbarItem = {
       },
       on: this.$listeners,
     };
-    if(this.item.command === 'Draw') {
-      return (
-        <ToolbarControls
-          value={this.shape}
-          {...toolItemProps}
-        />
-      );
+    if (this.item.command === 'Draw') {
+      return <ToolbarControls value={this.shape} {...toolItemProps} />;
     }
 
-    if(this.item.command === 'SetWlPreset') {
-      return (
-        <ToolbarControls
-          value={this.wlPreset}
-          {...toolItemProps}
-        />
-      );
+    if (this.item.command === 'SetWlPreset') {
+      return <ToolbarControls value={this.wlPreset} {...toolItemProps} />;
     }
 
-    return (
-      <ToolbarButton
-        {...toolItemProps}
-      />
-    );
+    return <ToolbarButton {...toolItemProps} />;
   },
 };
 
diff --git a/webapp/src/views/dataset/medical/viewer/toolbarMore.vue b/webapp/src/views/dataset/medical/viewer/toolbarMore.vue
index 209ce6b..be491e7 100644
--- a/webapp/src/views/dataset/medical/viewer/toolbarMore.vue
+++ b/webapp/src/views/dataset/medical/viewer/toolbarMore.vue
@@ -1,25 +1,21 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <div
-    v-if="showMore"
-    class="ToolbarButton more usn rel"
-    :active="state.isOpen ? 'true' : 'false'"
-  >
+  <div v-if="showMore" class="ToolbarButton more usn rel" :active="state.isOpen ? 'true' : 'false'">
     <div v-click-outside="onClickOutside" @click="toggleDropdown">
       <IconFont type="more" />
       <div>
@@ -30,14 +26,20 @@
     <div v-if="state.isOpen">
       <div class="control-options">
         标注精度
-        <el-slider v-model="state.precision" :min=0.01 :max=1 :step=0.01 :format-tooltip="formatTooltip"/>
+        <el-slider
+          v-model="state.precision"
+          :min="0.01"
+          :max="1"
+          :step="0.01"
+          :format-tooltip="formatTooltip"
+        />
       </div>
     </div>
   </div>
 </template>
 <script>
-import { statusCodeMap } from '@/views/dataset/util';
-import { reactive,computed } from '@vue/composition-api';
+import { isStatus } from '@/views/dataset/util';
+import { reactive, computed } from '@vue/composition-api';
 import vClickOutside from 'v-click-outside';
 import { isNil } from 'lodash';
 
@@ -52,7 +54,7 @@ export default {
     annotations: String,
     status: Number,
   },
-  setup(props, ctx){
+  setup(props, ctx) {
     const state = reactive({
       isOpen: false,
       precision: props.precision,
@@ -66,7 +68,7 @@ export default {
 
     // 更新 precision
     const updatePrecision = () => {
-      if(props.precision !== state.precision) {
+      if (props.precision !== state.precision) {
         ctx.emit('change', {
           command: 'SetPrecision',
           precision: state.precision,
@@ -84,11 +86,11 @@ export default {
     };
 
     const formatTooltip = (val) => {
-      return String((val*100).toFixed(0)).concat('%');
+      return String((val * 100).toFixed(0)).concat('%');
     };
 
     const showMore = computed(() => {
-      return statusCodeMap[props.status] === 'AUTO_ANNOTATED';
+      return isStatus(props, 'AUTO_ANNOTATED');
     });
 
     return {
@@ -103,7 +105,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "~@/assets/styles/mixin.scss";
+@import '~@/assets/styles/mixin.scss';
 
 .more {
   span {
diff --git a/webapp/src/views/dataset/nlp/annotation/index.vue b/webapp/src/views/dataset/nlp/annotation/index.vue
index 1ceacdc..b3da348 100644
--- a/webapp/src/views/dataset/nlp/annotation/index.vue
+++ b/webapp/src/views/dataset/nlp/annotation/index.vue
@@ -1,44 +1,50 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="main-content">
     <div v-loading="state.pageLoading" class="text-container">
       <div class="navbar">
         <el-breadcrumb separator="/">
-          <el-breadcrumb-item :to="{ path: datasetUrl }">{{ state.datasetInfo.name || '-' }}</el-breadcrumb-item>
+          <el-breadcrumb-item replace :to="{ path: datasetUrl }">{{
+            state.datasetInfo.name || '-'
+          }}</el-breadcrumb-item>
           <el-breadcrumb-item>标注详情</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
-      <div class='workstage flex'>
-        <div class="main f1">
+      <div class="workstage flex">
+        <div v-hotkey.stop="keymap" class="main f1">
           <WorkSpace
+            :component="state.component"
             :loading="state.loading"
             :activeTab="state.activeTab"
             :countInfo="state.countInfo"
             :changeActiveTab="changeActiveTab"
             :txt="state.txt"
-            :file="state.file"
-            :labelSelected="state.labelSelected"
+            :annotation="state.annotation"
+            :availLabel="availLabel"
+            :labels="state.labels"
             :closeLabel="closeLabel"
             :pageInfo="state.pageInfo"
             :toNext="toNext"
             :toPrev="toPrev"
-            :saveAnnotation="saveAnnotation"
             :deleteFile="deleteFile"
+            :saving="state.saving"
+            :fileId="state.fileId"
+            @confirm="confirm"
           />
         </div>
         <div class="sidebar" style="width: 25%;">
@@ -47,6 +53,10 @@
             :datasetInfo="state.datasetInfo"
             :createLabel="createLabel"
             :handleLabel="handleLabel"
+            :updateLabels="updateLabels"
+            :fileId="state.fileId"
+            :availLabel="availLabel"
+            @deleteLabel="deleteLabel"
           />
         </div>
       </div>
@@ -55,31 +65,36 @@
 </template>
 <script>
 import { Message } from 'element-ui';
-import { omit, isNil } from 'lodash';
+import { omit, isNil, debounce } from 'lodash';
 import { onMounted, reactive, watch, computed } from '@vue/composition-api';
-import { detail, queryLabels as queryLabelsApi, createLabel as createLabelApi } from '@/api/preparation/dataset';
-import { queryFiles, deleteFile as deleteFileApi, save as saveApi, count } from '@/api/preparation/textData';
-import { transformFiles, fileCodeMap, dataTypeCodeMap, readTxt } from '../../util';
+
+import {
+  detail,
+  queryLabels as queryLabelsApi,
+  createLabel as createLabelApi,
+  count,
+} from '@/api/preparation/dataset';
+import { search, deleteFile as deleteFileApi, save as saveApi } from '@/api/preparation/textData';
+import { fileCodeMap, dataTypeMap, annotationBy } from '../../util';
 import WorkSpace from './workspace';
 import SideBar from './sidebar';
 
-const pMap = require('p-map');
+const annotationByCode = annotationBy('code');
 
 export default {
-  name: "TextAnnotation",
+  name: 'TextAnnotation',
   components: {
     WorkSpace,
     SideBar,
   },
-  setup(props, ctx){
+  setup(props, ctx) {
     const { $route, $router } = ctx.root;
-    const { params = {}, query = {}} = $route;
-
+    const { params = {}, query = {} } = $route;
     const state = reactive({
       labels: [],
       datasetInfo: {},
       pageInfo: {
-        current: 1,
+        current: params.current || 1,
         size: 1,
       },
       countInfo: {
@@ -87,27 +102,40 @@ export default {
         unfinished: 0,
       },
       loading: false, // 加载内容
+      saving: false, // 保存状态
       detail: null, // 标注详情
       timestamp: Date.now(),
       txt: '',
-      file: null,
+      annotation: null, // 标注内容
+      fileId: null,
       labelSelected: null,
+      cacheLabel: null, // 缓存未标注标签
       activeTab: 'unfinished',
       pageLoading: false, // 初始化页面加载
+      component: null, // 对应的标注详情组件
     });
 
+    // 包括已缓存的标签
+    const availLabel = computed(() => state.labelSelected || state.cacheLabel);
+
+    // 当前是否为最后一篇文章
+    const isLast = computed(
+      () => !(state.pageInfo.current < state.pageInfo.total) && state.pageInfo.total > 1
+    );
+
     // 重置
     const reset = () => {
       Object.assign(state, {
         detail: null,
         labelSelected: null,
         txt: '',
-        file: null,
+        annotation: null,
+        fileId: null,
       });
     };
 
     // 查询标签
-    const queryLabels = async(requestParams = {}) => {
+    const queryLabels = async (requestParams = {}) => {
       const labels = await queryLabelsApi(params.datasetId, requestParams);
       return labels || [];
     };
@@ -118,12 +146,19 @@ export default {
       Object.assign(state, {
         labels,
       });
+      if (!isNil(state.labelSelected)) {
+        const sLabel = state.labels.find((d) => d.id === state.labelSelected.id);
+        Object.assign(state, {
+          labelSelected: sLabel,
+        });
+      }
     };
 
     // 移除标签
     const closeLabel = () => {
       Object.assign(state, {
         labelSelected: null,
+        cacheLabel: null,
       });
     };
 
@@ -141,9 +176,24 @@ export default {
         Message.warning('当前无文件选中');
         return;
       }
-      Object.assign(state, {
+      const next = {
         labelSelected: label,
-      });
+      };
+      // 当前处于「无标注」，则记录标签，供后续使用
+      if (state.activeTab === 'unfinished') {
+        Object.assign(next, {
+          cacheLabel: label,
+        });
+      }
+      Object.assign(state, next);
+    };
+
+    const deleteLabel = (id) => {
+      if (id && state.cacheLabel && state.cacheLabel.id === id) {
+        Object.assign(state, {
+          cacheLabel: null,
+        });
+      }
     };
 
     // 根据当前文件状态获取 status 映射值
@@ -161,21 +211,24 @@ export default {
 
     // 获取文件工具方法
     const queryFileUtil = (cfg) => {
-      const requestParams = omit({
-        ...state.pageInfo,
-        status: getStatusMap(state.activeTab),
-        ...cfg,
-      }, ['total']);
-      return queryFiles(params.datasetId, requestParams);
+      const requestParams = omit(
+        {
+          ...state.pageInfo,
+          status: getStatusMap(state.activeTab),
+          ...cfg,
+        },
+        ['total']
+      );
+      return search({ datasetId: params.datasetId, ...requestParams });
     };
 
-    const setLoadingStatus = loading => {
+    const setLoadingStatus = (loading) => {
       Object.assign(state, {
         loading,
       });
     };
 
-    const setPageLoading = loading => {
+    const setPageLoading = (loading) => {
       Object.assign(state, {
         pageLoading: loading,
       });
@@ -189,34 +242,43 @@ export default {
 
     // 更新文件信息，cfg 参数：
     // status: 文件状态，current: 当前页，size: 每页数量
-    const queryFileInfo = async cfg => {
+    const queryFileInfo = async (cfg) => {
       // 开始加载
       setLoadingStatus(true);
       const filesInfo = await queryFileUtil(cfg);
-      // 获取 minIO 文件路径
-      const datasetFiles = transformFiles(filesInfo.result);
-
-      const textRes = await pMap(
-        datasetFiles,
-        async file => {
-          const text = await readTxt(file.url);
-          return text;
-        },
-        {concurrency: 1},
-      );
-
-      const detail = filesInfo.result[0] || null;
-      const sLabel = state.labels.find(d => d.id === detail?.labelId) || null;
+      const detail = filesInfo.result[0] || {};
+      const sLabel = state.labels.find((d) => d.id === detail?.labelId) || null;
 
       Object.assign(state, {
-        pageInfo: filesInfo.page,
-        file: datasetFiles[0],
+        pageInfo: {
+          ...state.pageInfo,
+          total: filesInfo.page.total,
+        },
+        fileId: detail.id,
         detail,
         labelSelected: sLabel,
-        txt: textRes[0] || '',
+        txt: detail.content || '',
         loading: false,
       });
-      return { datasetFiles, textRes, pageInfo: filesInfo.page };
+
+      // 无文件
+      if (isNil(state.fileId)) {
+        Object.assign(state, {
+          cacheLabel: null,
+        });
+      }
+
+      try {
+        if (detail.annotation) {
+          Object.assign(state, {
+            annotation: JSON.parse(detail.annotation),
+          });
+        }
+      } catch (err) {
+        console.error(err);
+      }
+
+      return { pageInfo: filesInfo.page };
     };
 
     const setCountInfo = async () => {
@@ -226,71 +288,43 @@ export default {
       });
     };
 
+    // 兼容文本分类、分词、NER
     // 保存标注工具方法
-    const saveAnnotationUtil = () => {
-      const annotation = state.labelSelected 
-        ? JSON.stringify([{
-            category_id: state.labelSelected.id,
-            score: 1,
-          }])
-        : null;
-      return saveApi(params.datasetId, state.file.id, { annotation }).then(setCountInfo);
-    };
-
-    const saveAnnotation = () => {
-      return saveAnnotationUtil().then(forceUpdate);
-    };
-
-    // 相对于原有记录是否发生过变更
-    const checkChanged = () => {
-      let changed = false;
-      if(state.labelSelected) {
-        // 如果 id 已修改
-        changed = (state.detail.labelId !== state.labelSelected.id);
-      } else {
-        // 未选择标签，需要判断初始是否存在标签
-        changed = !!state.detail.labelId;
+    // eslint-disable-next-line
+    const saveAnnotationUtil = annotation => {
+      try {
+        const annotationStr = isNil(annotation) ? null : JSON.stringify(annotation);
+        Object.assign(state, { saving: true });
+        return saveApi(params.datasetId, state.fileId, { annotation: annotationStr })
+          .then(setCountInfo)
+          .finally(() => {
+            Object.assign(state, { saving: false });
+          });
+      } catch (err) {
+        console.error(err);
       }
-      return changed;
     };
 
     // 保存标注结果
-    const saveAction = () => {
-      return saveAnnotationUtil().then(() => Message.success('自动保存成功'));
+    const saveAction = (annotation) => {
+      return saveAnnotationUtil(annotation).then(() => Message.success('保存成功'));
     };
 
     // 下一页
     const toNext = async () => {
       if (state.pageInfo.current + 1 > state.pageInfo.total) return;
-      // 只有发生过变更的数据才需要保存
-      const changed = checkChanged();
-      if(changed) {
-        // 阻塞请求，保证先写入，后更新
-        await saveAction();
-      }
-      // 区分内容是否有变更 
-      if (!changed) {
-        Object.assign(state, {
-          pageInfo: {
-            ...state.pageInfo,
-            current: state.pageInfo.current + 1,
-          },
-        });
-      } else {
-        // 强制更新，获取最新 current 对应内容
-        forceUpdate();
-      }
+      Object.assign(state, {
+        pageInfo: {
+          ...state.pageInfo,
+          current: state.pageInfo.current + 1,
+        },
+      });
     };
 
     // 上一页
     const toPrev = async () => {
       if (state.pageInfo.current < 2) return;
       // 只有发生过变更的数据才需要保存
-      const changed = checkChanged();
-      if(changed) {
-        // 阻塞请求，保证先写入，后更新
-        await saveAction();
-      }
       Object.assign(state, {
         pageInfo: {
           ...state.pageInfo,
@@ -299,10 +333,22 @@ export default {
       });
     };
 
+    // 保存
+    const confirm = ({ annotation }) => {
+      // 先写入，再更新
+      return saveAction(annotation).then(() => {
+        // 最后一篇
+        isLast.value ? toPrev() : forceUpdate();
+      });
+    };
+
+    const delayToNext = debounce(toNext, 400);
+    const delayToPrev = debounce(toPrev, 400);
+
     // 删除文本
-    const deleteFile = (file) => {
-      if(!file.id) return;
-      deleteFileApi(params.datasetId, file.id).then(() => {
+    const deleteFile = () => {
+      if (!state.fileId) return;
+      deleteFileApi(params.datasetId, state.fileId).then(() => {
         // 切换到上一页
         const { current } = state.pageInfo;
         Object.assign(state, {
@@ -312,7 +358,7 @@ export default {
           },
         });
         // 当前第一页强制更新
-        if(current === 1) {
+        if (current === 1) {
           forceUpdate();
         }
         // 更新统计信息
@@ -325,28 +371,40 @@ export default {
       reset();
       Object.assign(state, {
         activeTab: tab.name,
+        pageInfo: {
+          ...state.pageInfo,
+          current: 1,
+        },
       });
       // 根据文件类型，切换到第一页
-      queryFileInfo({status: getStatusMap(tab.name), current: 1});
+      queryFileInfo({ status: getStatusMap(tab.name), current: 1 });
     };
 
-    const datasetUrl = computed(() => `/data/datasets/textclassify/${params.datasetId}`);
+    // 快捷键
+    const keymap = computed(() => ({
+      left: delayToPrev,
+      right: delayToNext,
+    }));
+
+    const datasetUrl = `/data/datasets/text/list/${params.datasetId}`;
 
     // 监听页面变更
-    watch(() => state.pageInfo.current, next => {
-      reset();
-      queryFileInfo({current: next});
-    }, {
-      lazy: true,
-    });
+    watch(
+      () => state.pageInfo.current,
+      (next) => {
+        reset();
+        queryFileInfo({ current: next });
+      }
+    );
 
     // 强制更新
-    watch(() => state.timestamp, () => {
-      reset();
-      queryFileInfo({current: state.pageInfo.current});
-    }, {
-      lazy: true,
-    });
+    watch(
+      () => state.timestamp,
+      () => {
+        reset();
+        queryFileInfo({ current: state.pageInfo.current });
+      }
+    );
 
     onMounted(async () => {
       // 判断当前数据集不存在
@@ -363,11 +421,15 @@ export default {
         return;
       }
       // 校验数据类型是否为文本
-      if (datasetInfo.dataType !== dataTypeCodeMap.TEXT) {
+      if (![dataTypeMap.TEXT, dataTypeMap.TABLE].includes(datasetInfo.dataTypeMap)) {
         $router.push({ path: '/data/datasets' });
         throw new Error('不支持该标注类型');
       }
 
+      // 获取标注详情对应组件
+      const component = annotationByCode(datasetInfo.annotateType, 'component');
+      Object.assign(state, { component });
+
       const newState = {
         datasetInfo,
       };
@@ -377,8 +439,7 @@ export default {
       }
 
       // 获取数据集标签，分页结果
-      const [labels, countInfo] = await Promise.all([
-        queryLabels(), count(params.datasetId)]);
+      const [labels, countInfo] = await Promise.all([queryLabels(), count(params.datasetId)]);
       newState.labels = labels;
       newState.countInfo = countInfo;
       Object.assign(state, newState);
@@ -389,24 +450,29 @@ export default {
 
     return {
       state,
-      toNext,
-      toPrev,
+      toNext: delayToNext,
+      toPrev: delayToPrev,
       datasetUrl,
       deleteFile,
       closeLabel,
       createLabel,
+      updateLabels,
       handleLabel,
-      saveAnnotation,
       changeActiveTab,
+      confirm,
+      availLabel,
+      deleteLabel,
+      keymap,
+      isLast,
     };
   },
 };
 </script>
 <style lang="scss" scoped>
-@import "~@/assets/styles/variables.scss";
+@import '~@/assets/styles/variables.scss';
 
 .main-content {
-  height: calc(100vh - 50px - 32px);
+  height: calc(100vh - 50px);
   padding-top: 20px;
   background-color: #f4f6f7;
 }
@@ -436,4 +502,19 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
+<style lang="scss">
+@import '~@/assets/styles/variables.scss';
+
+.text-annotate {
+  font-size: 16px;
+}
+
+.range-selected {
+  padding: 0 0.35em;
+  margin: 0 0.25em 0.25em;
+  cursor: pointer;
+  border: 2px solid $borderColor;
+  border-radius: 2px;
+}
+</style>
diff --git a/webapp/src/views/dataset/nlp/annotation/sidebar/index.vue b/webapp/src/views/dataset/nlp/annotation/sidebar/index.vue
index b5b6875..b98e9cd 100644
--- a/webapp/src/views/dataset/nlp/annotation/sidebar/index.vue
+++ b/webapp/src/views/dataset/nlp/annotation/sidebar/index.vue
@@ -1,25 +1,33 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-form label-position="top" @submit.native.prevent>
-    <el-form-item label="标签组" style="margin-bottom: 0;">
-      <div v-if="datasetInfo.labelGroupId" style="margin-top: -10px;">
+    <el-form-item label="数据集名称" style="margin-bottom: 0;">
+      <div style="margin-top: -10px;">{{ datasetInfo.name }}</div>
+    </el-form-item>
+    <el-form-item label="标注类型" style="margin-bottom: 0;">
+      <div style="margin-top: -10px;">{{ annotationType }}</div>
+    </el-form-item>
+    <el-form-item v-if="showLabelGroupName" label="标签组" style="margin-bottom: 0;">
+      <div style="margin-top: -10px;">
         <el-tooltip placement="top" :content="datasetInfo.labelGroupName">
-          <span class="vm dib ellipsis" style="max-width: 60%;">{{ datasetInfo.labelGroupName }} &nbsp;</span>
+          <span class="vm dib ellipsis" style="max-width: 60%;"
+            >{{ datasetInfo.labelGroupName }} &nbsp;</span
+          >
         </el-tooltip>
         <el-link
           target="_blank"
@@ -33,14 +41,23 @@
       </div>
     </el-form-item>
     <LabelList
+      v-if="showLabelList"
       v-bind="attrs"
+      :datasetId="datasetInfo.id"
+      :type="datasetInfo.type"
+      v-on="listeners"
     />
   </el-form>
 </template>
 <script>
+import { isNil } from 'lodash';
 import { computed } from '@vue/composition-api';
+import { annotationBy, annotationCodeMap } from '@/views/dataset/util';
+
 import LabelList from './labelList';
 
+const annotationByCode = annotationBy('code');
+
 export default {
   name: 'TextLabelList',
   components: {
@@ -53,11 +70,27 @@ export default {
       default: () => ({}),
     },
   },
-  setup(props, ctx){
+  setup(props, ctx) {
+    const { TEXTSEGMENTATION, SPEECHRECOGNITION } = annotationCodeMap;
     const attrs = computed(() => ctx.attrs);
+    const listeners = computed(() => ctx.listeners);
+    const annotationType = computed(() => annotationByCode(props.datasetInfo.annotateType, 'name'));
+    const showLabelList = computed(
+      () => ![TEXTSEGMENTATION, SPEECHRECOGNITION].includes(props.datasetInfo.annotateType)
+    );
+    // 不是中文分词且标签组存在时显示标签组名称
+    const showLabelGroupName = computed(
+      () =>
+        !(props.datasetInfo.annotateType === TEXTSEGMENTATION) &&
+        !isNil(props.datasetInfo.labelGroupId)
+    );
     return {
       attrs,
+      listeners,
+      annotationType,
+      showLabelGroupName,
+      showLabelList,
     };
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/webapp/src/views/dataset/nlp/annotation/sidebar/labelList.vue b/webapp/src/views/dataset/nlp/annotation/sidebar/labelList.vue
index a2aaf83..c076e5f 100644
--- a/webapp/src/views/dataset/nlp/annotation/sidebar/labelList.vue
+++ b/webapp/src/views/dataset/nlp/annotation/sidebar/labelList.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="mb-10">
@@ -20,21 +20,55 @@
       <el-form-item v-show="showLabel" style="padding: 0; margin-bottom: 0;">
         <label class="el-form-item__label">
           <span class="vm">{{ labelsTitle }}</span>
-          <Add @handleOk="handleCreateLabel" />
+          <LabelEditor title="创建标签" @handleOk="handleCreateLabel">
+            <i
+              slot="trigger"
+              class="el-icon-circle-plus cp vm primary ml-4"
+              style="font-size: 18px;"
+            />
+          </LabelEditor>
         </label>
       </el-form-item>
       <SearchLabel ref="searchRef" style="padding-bottom: 10px;" @change="handleSearch" />
     </div>
     <div style="max-height: 200px; padding: 0 2.5px; overflow: auto;">
       <div v-if="state.labelData.length">
-        <div v-for="item in state.labelData" :key="item.id">
-          <el-tag
-            class="tag-item"
-            :title="item.name"
-            :color="item.color"
-            :style="getStyle(item)"
-            @click="handleClick(item)"
+        <el-radio-group
+          v-if="labelClickable"
+          v-model="state.selectedLabel"
+          :disabled="!fileId"
+          style="width: 100%;"
+          @change="handleLabelChange"
+        >
+          <div
+            v-for="item in state.labelData"
+            :key="item.id"
+            class="flex flex-between flex-vertical-align label-container"
           >
+            <el-radio :label="item.name" class="flex flex-vertical-align">
+              <el-tag
+                class="tag-item"
+                :title="item.name"
+                :color="item.color"
+                :style="getStyle(item)"
+              >
+                {{ item.name }}
+              </el-tag>
+            </el-radio>
+            <!-- 只在文本详情页的侧边栏可删改标签 -->
+            <div
+              v-if="!isPresetDataset(type) && isNil(item.labelGroupId)"
+              class="hover-show fr f14 g6"
+            >
+              <LabelEditor title="修改标签" :labelData="item" @handleOk="handleEdit">
+                <i slot="trigger" class="el-icon-edit cp vm ml-4" />
+              </LabelEditor>
+              <i class="el-icon-delete cp vm" @click="handleDelete(datasetId, item)" />
+            </div>
+          </div>
+        </el-radio-group>
+        <div v-for="item in state.labelData" v-else :key="item.id" class="label-container">
+          <el-tag class="tag-item" :title="item.name" :color="item.color" :style="getStyle(item)">
             {{ item.name }}
           </el-tag>
         </div>
@@ -51,18 +85,21 @@ import { Message } from 'element-ui';
 import { reactive, watch, computed, ref } from '@vue/composition-api';
 import { colorByLuminance } from '@/utils';
 import SearchLabel from '@/views/dataset/components/searchLabel';
-import Add from './add';
+import { isNil } from 'lodash';
+import { editLabel, deleteLabel } from '@/api/preparation/datalabel';
+import LabelEditor from '@/views/dataset/components/labelEditor';
+import { isPresetDataset } from '@/views/dataset/util';
 
 export default {
   name: 'LabelList',
   components: {
     SearchLabel,
-    Add,
+    LabelEditor,
   },
   props: {
     labels: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     currentAnnotationId: {
       type: String,
@@ -71,40 +108,68 @@ export default {
     handleLabel: Function,
     annotations: Array,
     createLabel: Function,
+    updateLabels: {
+      type: Function,
+      default: () => ({}),
+    },
     labelClickable: {
       type: Boolean,
       default: true,
     },
+    datasetId: Number,
+    type: Number,
+    availLabel: Object,
+    fileId: [String, Number],
   },
-  setup(props) {
-    const { annotations: rawAnnotations, labelClickable, handleLabel } = props;
-
+  setup(props, ctx) {
+    const { annotations: rawAnnotations, labelClickable, handleLabel, datasetId } = props;
     const searchRef = ref(null);
 
     const state = reactive({
       annotations: rawAnnotations,
       labelData: props.labels,
       currentAnnotationId: props.currentAnnotationId,
+      selectedLabel: props.availLabel?.name, // 改成对象会异常
     });
+
     // 根据亮度来决定颜色
     const getStyle = (item) => {
       const color = colorByLuminance(item.color);
       return {
         color,
         display: 'inline-block',
-        width: 'auto',
-        minWidth: "120px",
-        cursor: labelClickable ? "pointer" : "unset",
+        width: '120px',
+        cursor: labelClickable ? 'pointer' : 'unset',
       };
     };
     // label点击事件处理
-    const handleClick = (item) => {
-      labelClickable ? handleLabel(item, event) : null;
+    const handleLabelChange = (value) => {
+      const label = state.labelData.find((d) => d.name === value);
+      if (label && labelClickable) {
+        handleLabel(label);
+      }
     };
+
+    // label编辑事件
+    const handleEdit = (labelId, item) => {
+      return editLabel(labelId, item).then(() => {
+        props.updateLabels(datasetId);
+        Message.success({ message: '标签修改成功' });
+      });
+    };
+    // label删除事件
+    const handleDelete = (datasetId, item) => {
+      return deleteLabel(datasetId, item.id).then(() => {
+        props.updateLabels(datasetId);
+        ctx.emit('deleteLabel', item.id);
+        Message.success({ message: '标签删除成功' });
+      });
+    };
+
     // 查询分类标签
     const handleSearch = (label) => {
       if (label) {
-        state.labelData = props.labels.filter(d => d.name.includes(label));
+        state.labelData = props.labels.filter((d) => d.name.includes(label));
       } else {
         state.labelData = props.labels;
       }
@@ -119,29 +184,46 @@ export default {
       return !searchRef.value.state.open;
     });
 
-    const handleCreateLabel = (form) => {
+    const handleCreateLabel = (id, form) => {
       // TODO: 判断是否重复
-      if (state.labelData.findIndex(d => d.name === form.name) > -1) {
-          Message.warning('当前标签已存在');
-          return;
-        }
+      if (state.labelData.findIndex((d) => d.name === form.name) > -1) {
+        Message.warning('当前标签已存在');
+        return;
+      }
       props.createLabel(form);
     };
 
-    watch(() => props.labels, (next) => {
-      state.labelData = next;
-    });
+    watch(
+      () => props.labels,
+      (next) => {
+        state.labelData = next;
+      }
+    );
 
-    watch(() => props.currentAnnotationId, (next) => {
-      state.currentAnnotationId = next;
-    });
+    watch(
+      () => props.availLabel,
+      (next) => {
+        state.selectedLabel = next?.name;
+      }
+    );
+
+    watch(
+      () => props.currentAnnotationId,
+      (next) => {
+        state.currentAnnotationId = next;
+      }
+    );
 
     return {
       state,
       searchRef,
+      isNil,
+      isPresetDataset,
       labelsTitle,
       getStyle,
-      handleClick,
+      handleLabelChange,
+      handleEdit,
+      handleDelete,
       showLabel,
       handleCreateLabel,
       handleSearch,
@@ -150,8 +232,18 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-  .el-icon-edit {
-    padding: 0 4px;
-    margin-left: 4px;
+.el-icon-edit {
+  padding: 0 4px;
+  margin-left: 4px;
+}
+
+.label-container {
+  .hover-show {
+    display: none;
+  }
+
+  &:hover .hover-show {
+    display: unset;
   }
+}
 </style>
diff --git a/webapp/src/views/dataset/nlp/annotation/workspace/index.vue b/webapp/src/views/dataset/nlp/annotation/workspace/index.vue
index c3be650..856e97a 100644
--- a/webapp/src/views/dataset/nlp/annotation/workspace/index.vue
+++ b/webapp/src/views/dataset/nlp/annotation/workspace/index.vue
@@ -1,158 +1,48 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <div>
-    <el-tabs :value="activeTab" class="eltabs-inlineblock" @tab-click="handlePanelClick">
-      <el-tab-pane :label="countInfoTxt.unfinished" name="unfinished" />
-      <el-tab-pane :label="countInfoTxt.finished" name="finished" />
-    </el-tabs>
-    <el-card class="box-card" style="margin-top: 20px;" shadow="never">
-      <div slot="header" class="clearfix" style="line-height: 24px;">
-        <span class="vm">已选择标签：</span>
-        <span
-          v-if="!labelSelected"
-          class="g9 vm"
-        >请在右侧选择标签</span>
-        <el-tag
-          v-else
-          :color="labelSelected.color"
-          closable
-          disable-transitions
-          :style="getStyle(labelSelected)"
-          @close="closeLabel(labelSelected)"
-        >{{ labelSelected.name }}</el-tag>
-
-        <div style="float: right; padding: 3px 0;">
-          <el-button v-if="showSave" type="text" @click="save">保存标注</el-button>
-          <el-button :disabled="!showPrev" type="text" @click="toPrev">上一篇</el-button>
-          <el-button :disabled="!showNext" type="text" @click="toNext">下一篇</el-button>
-          <el-popconfirm
-            title="确认删除该文本？"
-            @onConfirm="deleteFile(file)"
-          >
-            <el-button slot="reference" :disabled="!showDelete" type="text">删除</el-button>
-          </el-popconfirm>
-        </div>
-      </div>
-      <div class="text">
-        <Exception v-if="!!showException" />
-        <div v-else-if="loading" class="flex flex-center g6" style="min-height: 80px;" >加载中...</div>
-        <TextEditor v-else :txt="state.txt" />
-      </div>
-    </el-card>
-  </div>
+  <component :is="component" v-bind="attrs" v-on="listeners" />
 </template>
 <script>
-import { Message } from 'element-ui';
-import { reactive, watch, computed } from '@vue/composition-api';
-import TextEditor from '@/components/textEditor';
-import Exception from '@/components/Exception';
-import { colorByLuminance } from '@/utils';
+import { computed } from '@vue/composition-api';
+
+import TextClassify from './textClassify';
+import TextSegmentation from './textSegmentation';
+import NER from './ner';
 
 export default {
-  name: 'TextAnnotationWorkSpace',
+  name: 'TextWorkSpace',
   components: {
-    TextEditor,
-    Exception,
+    TextClassify,
+    TextSegmentation,
+    NER,
   },
+  inheritAttrs: false,
   props: {
-    activeTab: String,
-    txt: String,
-    labelSelected: {
-      type: Object,
-      default: () => ({}),
-    },
-    countInfo: {
-      type: Object,
-      default: () => ({}),
-    },
-    pageInfo: {
-      type: Object,
-      default: () => ({}),
-    },
-    file: {
-      type: Object,
-      default: () => ({}),
-    },
-    loading: Boolean,
-    deleteFile: Function,
-    closeLabel: Function,
-    toNext: Function,
-    toPrev: Function,
-    saveAnnotation: Function,
-    changeActiveTab: Function,
+    component: String,
   },
-  setup(props) {
-    const state = reactive({
-      activeTab: props.activeTab || 'unfinished',
-      txt: props.txt || '',
-    });
-
-    const countInfoTxt = computed(() => ({
-      unfinished: `无标注信息（${props.countInfo.unfinished}）`,
-      finished: `有标注信息（${props.countInfo.finished}）`,
-    }));
-
-    const getStyle = (item) => {
-      const color = colorByLuminance(item.color);
-      return {
-        color,
-        border: 'none',
-      };
-    };
-
-    // 上一页，下一页
-    const showPrev = computed(() => props.pageInfo.current > 1);
-    const showNext = computed(() => props.pageInfo.current < props.pageInfo.total);
-    const showDelete = computed(() => props.pageInfo.total > 0);
-    const showException = computed(() => 
-      props.loading === false && state.txt === '');
-    // 下一页不展示，并且有文件存在
-    const showSave = computed(() => !(props.pageInfo.current < props.pageInfo.total) && props.pageInfo.total > 0);
-
-    // 保存标注
-    const save = () => {
-      props.saveAnnotation().then(() => Message.success('保存成功'));
-    };
-
-    const handlePanelClick = (tab) => {
-      props.changeActiveTab(tab);
-    };
-
-    watch(() => props.txt, (next) => {
-      state.txt = next;
-    });
+  setup(props, ctx) {
+    const attrs = computed(() => ctx.attrs);
+    const listeners = computed(() => ctx.listeners);
 
-    watch(() => props.activeTab, (next) => {
-      state.activeTab = next;
-    });
-  
     return {
-      state,
-      showException,
-      showDelete,
-      save,
-      getStyle,
-      showPrev,
-      showNext,
-      showSave,
-      countInfoTxt,
-      handlePanelClick,
+      attrs,
+      listeners,
     };
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/webapp/src/views/dataset/nlp/annotation/workspace/ner.vue b/webapp/src/views/dataset/nlp/annotation/workspace/ner.vue
new file mode 100644
index 0000000..ea9a0df
--- /dev/null
+++ b/webapp/src/views/dataset/nlp/annotation/workspace/ner.vue
@@ -0,0 +1,365 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div v-hotkey.stop="keymap">
+    <div class="flex flex-between">
+      <el-tabs :value="activeTab" class="eltabs-inlineblock" @tab-click="handlePanelClick">
+        <el-tab-pane :label="countInfoTxt.unfinished" name="unfinished" />
+        <el-tab-pane :label="countInfoTxt.finished" name="finished" />
+      </el-tabs>
+      <div class="flex flex-end f1">
+        <div class="ml-40 mr-10 my-auto">标注进度:</div>
+        <el-progress
+          :show-text="false"
+          :stroke-width="10"
+          :percentage="percentage"
+          class="my-auto"
+          style="width: 50%;"
+        ></el-progress>
+        <div class="my-auto ml-10">{{ progressTxt }}</div>
+      </div>
+    </div>
+    <el-card class="box-card" style="margin-top: 20px;" shadow="never">
+      <div slot="header" class="clearfix flex flex-between" style="line-height: 32px;">
+        <div v-if="fileId" class="f1">&nbsp;</div>
+        <span v-if="showCurrent">{{ current }}</span>
+        <div class="f1">
+          <div class="fr">
+            <el-button :disabled="!showPrev" type="text" @click="toPrev"
+              >上一篇(<i class="el-icon-back"></i>)</el-button
+            >
+            <el-button :disabled="!showNext" type="text" @click="toNext"
+              >下一篇(<i class="el-icon-right"></i>)</el-button
+            >
+            <el-popconfirm title="确认删除该文本？" @onConfirm="deleteFile">
+              <el-button slot="reference" :disabled="!showDelete" type="text" class="ml-10">
+                删除
+              </el-button>
+            </el-popconfirm>
+          </div>
+        </div>
+      </div>
+      <div class="text">
+        <Exception v-if="!!showException" />
+        <div v-else-if="loading" class="flex flex-center g6" style="min-height: 80px;">
+          加载中...
+        </div>
+        <TextEditor
+          v-else
+          ref="textRef"
+          :txt="state.txt"
+          class="text-annotate ner"
+          @mount="handleTextMount"
+        />
+      </div>
+    </el-card>
+    <div v-if="fileId" class="action-bar mt-20 flex flex-end">
+      <el-button type="primary" :disabled="comfirmDisabled" @click="confirm">确认（C）</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, watch, computed, ref, nextTick } from '@vue/composition-api';
+import Highlighter from 'web-highlighter';
+import { isEmpty } from 'lodash';
+
+import TextEditor from '@/components/textEditor';
+import Exception from '@/components/Exception';
+import { colorByLuminance, removeBy } from '@/utils';
+import { hs2Json, json2Hs } from '../../util';
+
+export default {
+  name: 'NERWorkSpace',
+  components: {
+    TextEditor,
+    Exception,
+  },
+  props: {
+    activeTab: String,
+    txt: String,
+    availLabel: {
+      type: Object,
+      default: () => ({}),
+    },
+    labels: {
+      type: Array,
+      default: () => [],
+    },
+    countInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    pageInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    loading: Boolean,
+    deleteFile: Function,
+    closeLabel: Function,
+    toNext: Function,
+    toPrev: Function,
+    saving: Boolean,
+    changeActiveTab: Function,
+    fileId: [Number, String],
+    annotation: [Array],
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      activeTab: props.activeTab || 'unfinished',
+      txt: props.txt || '',
+      sources: [],
+    });
+
+    const textRef = ref(null);
+    const highlighter = ref(null);
+
+    const countInfoTxt = computed(() => ({
+      unfinished: `无标注信息（${props.countInfo.unfinished}）`,
+      finished: `有标注信息（${props.countInfo.finished}）`,
+    }));
+
+    // 确认是否可操作
+    const comfirmDisabled = computed(() => state.loading || props.saving || !props.fileId);
+
+    const percentage = computed(() => {
+      const total = props.countInfo.unfinished + props.countInfo.finished;
+      return total === 0 ? 100 : (props.countInfo.finished / total) * 100;
+    });
+
+    const progressTxt = computed(() => {
+      return `${props.countInfo.finished}/${props.countInfo.finished + props.countInfo.unfinished}`;
+    });
+
+    const getStyle = (item) => {
+      const color = colorByLuminance(item.color);
+      return {
+        color,
+        border: 'none',
+      };
+    };
+
+    const showCurrent = computed(() => props.pageInfo.total > 0);
+    const current = computed(() => `当前文本顺序：${props.pageInfo.current}`);
+    // 上一页，下一页
+    const showPrev = computed(() => props.pageInfo.current > 1);
+    const showNext = computed(() => props.pageInfo.current < props.pageInfo.total);
+    const showDelete = computed(() => props.pageInfo.total > 0);
+    const showException = computed(() => props.loading === false && state.txt === '');
+
+    const handlePanelClick = (tab) => {
+      props.changeActiveTab(tab);
+    };
+
+    const onCreate = ({ sources, type }) => {
+      sources.forEach((s) => {
+        highlighter.value.addClass('range-selected', s.id);
+        const el = highlighter.value.getDoms(s.id)[0];
+        // 建立标签与高亮的关联
+        const selectedLabel = props.labels.find((d) => d.id === s.extra?.labelId) || {};
+        Object.assign(el.style, {
+          background: selectedLabel.color,
+          color: colorByLuminance(selectedLabel.color),
+        });
+        // 标签不为空，写入 entity
+        if (!isEmpty(selectedLabel)) {
+          Object.assign(el.dataset, {
+            entity: selectedLabel.name,
+          });
+        }
+      });
+      // TODO: 用户手动创建
+      if (type === 'from-input') {
+        const mergeLabelSource = sources.map((s) => ({
+          ...s,
+          extra: {
+            labelId: props.availLabel.id,
+            type,
+          },
+        }));
+        Object.assign(state, {
+          sources: state.sources.concat(mergeLabelSource),
+        });
+      }
+    };
+
+    // 删除高亮元素
+    const onHighlightClick = ({ id }) => {
+      highlighter.value.remove(id);
+      const next = removeBy(state.sources, (d) => d.id === id);
+      Object.assign(state, {
+        sources: next,
+      });
+    };
+
+    // 检测当前 id 属于用户创建还是服务端输出
+    const sourceBy = (id) => {
+      const selected = state.sources.find((d) => d.id === id);
+      if (selected) {
+        return selected.extra.type;
+      }
+      return undefined;
+    };
+
+    const runHook = (instance) => {
+      // 为选区序列化时的持久化数据生成额外信息(手动)
+      instance.hooks.Serialize.RecordInfo.tap(() => {
+        if (props.availLabel) {
+          return { labelId: props.availLabel.id };
+        }
+        return undefined;
+      });
+
+      instance.hooks.Render.SelectedNodes.tap((id, selectedNodes) => {
+        const sourceFrom = sourceBy(id);
+        // 未选中标签（区分是持久化返回的，还是用户创建的）
+        if (sourceFrom !== 'from-store' && !props.availLabel) {
+          console.error('标签未选中');
+          return [];
+        }
+        // 不允许嵌套选中
+        if (selectedNodes.length > 1) return [];
+        // 过滤空选项
+        const next = selectedNodes.filter((n) => n.$node.textContent.trim());
+        if (next.length === 0) {
+          return [];
+        }
+        return next;
+      });
+    };
+
+    const createHighLighter = () => {
+      highlighter.value = new Highlighter({
+        $root: textRef.value.$el,
+        exceptSelectors: ['span'], // 不允许对已标注的文本进行拆分标注
+      });
+
+      highlighter.value
+        .on(Highlighter.event.CREATE, onCreate)
+        .on(Highlighter.event.CLICK, onHighlightClick);
+
+      // 生命周期
+      runHook(highlighter.value);
+
+      // 启动
+      highlighter.value.run();
+    };
+
+    // 反序列化，将存储的内容转化为 DOM 展示
+    const deSerialize = () => {
+      if (props.annotation) {
+        const sources = json2Hs(props.annotation);
+        // 将source 同步到 state
+        Object.assign(state, {
+          sources: state.sources.concat(sources),
+        });
+        sources.forEach((hs) => {
+          highlighter.value.fromStore(hs.startMeta, hs.endMeta, hs.text, hs.id, hs.extra);
+        });
+      }
+    };
+
+    const handleTextMount = () => {
+      nextTick(() => {
+        // 创建highlight 实例
+        createHighLighter();
+        deSerialize();
+      });
+    };
+
+    const reset = () => {
+      Object.assign(state, {
+        sources: [],
+      });
+    };
+
+    // 每种类型实现 confirm
+    const confirm = () => {
+      if (comfirmDisabled.value) return;
+      const annotation = state.sources.length ? hs2Json(state.sources) : null;
+      // 导入标注内容
+      ctx.emit('confirm', { annotation });
+    };
+
+    const keymap = computed(() => ({
+      c: confirm,
+    }));
+
+    watch(
+      () => props.txt,
+      (next) => {
+        state.txt = next;
+      }
+    );
+
+    watch(
+      () => props.fileId,
+      () => {
+        reset();
+      }
+    );
+
+    watch(
+      () => props.activeTab,
+      (next) => {
+        state.activeTab = next;
+      }
+    );
+
+    return {
+      state,
+      textRef,
+      showException,
+      showDelete,
+      getStyle,
+      showPrev,
+      showNext,
+      countInfoTxt,
+      percentage,
+      progressTxt,
+      handlePanelClick,
+      showCurrent,
+      current,
+      comfirmDisabled,
+      handleTextMount,
+      confirm,
+      keymap,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.text-label {
+  .el-icon-close {
+    color: inherit;
+  }
+}
+
+.ner .range-selected::after {
+  position: relative;
+  top: -0.5em;
+  box-sizing: border-box;
+  display: inline-block;
+  padding: 0.35em;
+  font-size: 0.6em;
+  font-style: italic;
+  font-weight: 700;
+  line-height: 1;
+  text-transform: uppercase;
+  content: attr(data-entity);
+  border-radius: 0.35em;
+}
+</style>
diff --git a/webapp/src/views/dataset/nlp/annotation/workspace/textClassify.vue b/webapp/src/views/dataset/nlp/annotation/workspace/textClassify.vue
new file mode 100644
index 0000000..99a5318
--- /dev/null
+++ b/webapp/src/views/dataset/nlp/annotation/workspace/textClassify.vue
@@ -0,0 +1,222 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div v-hotkey.stop="keymap">
+    <div class="flex flex-between">
+      <el-tabs :value="activeTab" class="eltabs-inlineblock" @tab-click="handlePanelClick">
+        <el-tab-pane :label="countInfoTxt.unfinished" name="unfinished" />
+        <el-tab-pane :label="countInfoTxt.finished" name="finished" />
+      </el-tabs>
+      <div class="flex flex-end f1">
+        <div class="ml-40 mr-10 my-auto">标注进度:</div>
+        <el-progress
+          :show-text="false"
+          :stroke-width="10"
+          :percentage="percentage"
+          class="my-auto"
+          style="width: 50%;"
+        ></el-progress>
+        <div class="my-auto ml-10">{{ progressTxt }}</div>
+      </div>
+    </div>
+    <el-card class="box-card" style="margin-top: 20px;" shadow="never">
+      <div slot="header" class="clearfix flex flex-between" style="line-height: 32px;">
+        <div class="f1">
+          <span class="vm">已选择标签：</span>
+          <span v-if="!availLabel" class="g9 vm">请在右侧选择标签</span>
+          <el-tag
+            v-else
+            :color="availLabel.color"
+            closable
+            class="text-label vm"
+            disable-transitions
+            :title="availLabel.name"
+            :style="getStyle(availLabel)"
+            @close="closeLabel(availLabel)"
+          >
+            {{ sliceTag(availLabel.name) }}
+          </el-tag>
+        </div>
+        <span v-if="showCurrent">{{ current }}</span>
+        <div class="f1">
+          <div class="fr">
+            <el-button :disabled="!showPrev" type="text" @click="toPrev"
+              >上一篇(<i class="el-icon-back"></i>)</el-button
+            >
+            <el-button :disabled="!showNext" type="text" @click="toNext"
+              >下一篇(<i class="el-icon-right"></i>)</el-button
+            >
+            <el-popconfirm title="确认删除该文本？" @onConfirm="deleteFile">
+              <el-button slot="reference" :disabled="!showDelete" type="text" class="ml-10"
+                >删除</el-button
+              >
+            </el-popconfirm>
+          </div>
+        </div>
+      </div>
+      <div class="text">
+        <Exception v-if="!!showException" />
+        <div v-else-if="loading" class="flex flex-center g6" style="min-height: 80px;">
+          加载中...
+        </div>
+        <TextEditor v-else :txt="state.txt" class="text-annotate" />
+      </div>
+    </el-card>
+    <div v-if="fileId" class="action-bar mt-20 flex flex-end">
+      <el-button type="primary" :disabled="comfirmDisabled" @click="confirm">确认（C）</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, watch, computed } from '@vue/composition-api';
+
+import TextEditor from '@/components/textEditor';
+import Exception from '@/components/Exception';
+import { colorByLuminance } from '@/utils';
+
+export default {
+  name: 'TextClassifyWorkSpace',
+  components: {
+    TextEditor,
+    Exception,
+  },
+  props: {
+    activeTab: String,
+    txt: String,
+    availLabel: {
+      type: Object,
+      default: () => ({}),
+    },
+    countInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    pageInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    loading: Boolean,
+    deleteFile: Function,
+    closeLabel: Function,
+    toNext: Function,
+    toPrev: Function,
+    saving: Boolean,
+    changeActiveTab: Function,
+    fileId: [Number, String],
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      activeTab: props.activeTab || 'unfinished',
+      txt: props.txt || '',
+    });
+
+    const countInfoTxt = computed(() => ({
+      unfinished: `无标注信息（${props.countInfo.unfinished}）`,
+      finished: `有标注信息（${props.countInfo.finished}）`,
+    }));
+
+    // 确认是否可操作
+    const comfirmDisabled = computed(() => state.loading || props.saving || !props.fileId);
+
+    const percentage = computed(() => {
+      const total = props.countInfo.unfinished + props.countInfo.finished;
+      return total === 0 ? 0 : (props.countInfo.finished / total) * 100;
+    });
+
+    const progressTxt = computed(() => {
+      return `${props.countInfo.finished}/${props.countInfo.finished + props.countInfo.unfinished}`;
+    });
+
+    const sliceTag = (tagName) => (tagName.length < 12 ? tagName : `${tagName.slice(0, 12)}...`);
+
+    const getStyle = (item) => {
+      const color = colorByLuminance(item.color);
+      return {
+        color,
+        border: 'none',
+      };
+    };
+
+    const showCurrent = computed(() => props.pageInfo.total > 0);
+    const current = computed(() => `当前文本顺序：${props.pageInfo.current}`);
+    // 上一页，下一页
+    const showPrev = computed(() => props.pageInfo.current > 1);
+    const showNext = computed(() => props.pageInfo.current < props.pageInfo.total);
+    const showDelete = computed(() => props.pageInfo.total > 0);
+    const showException = computed(() => props.loading === false && !props.fileId);
+
+    const handlePanelClick = (tab) => {
+      props.changeActiveTab(tab);
+    };
+
+    // 每种类型实现 confirm
+    const confirm = () => {
+      if (comfirmDisabled.value) return;
+      // 导入分类标注内容
+      ctx.emit('confirm', {
+        annotation: props.availLabel ? [{ category_id: props.availLabel.id, score: 1 }] : null,
+      });
+    };
+
+    const keymap = computed(() => ({
+      c: confirm,
+    }));
+
+    watch(
+      () => props.txt,
+      (next) => {
+        state.txt = next;
+      }
+    );
+
+    watch(
+      () => props.activeTab,
+      (next) => {
+        state.activeTab = next;
+      }
+    );
+
+    return {
+      state,
+      showException,
+      showDelete,
+      getStyle,
+      showPrev,
+      showNext,
+      countInfoTxt,
+      percentage,
+      progressTxt,
+      handlePanelClick,
+      showCurrent,
+      current,
+      comfirmDisabled,
+      confirm,
+      keymap,
+      sliceTag,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.text-label {
+  max-width: 200px;
+
+  .el-icon-close {
+    color: inherit;
+  }
+}
+</style>
diff --git a/webapp/src/views/dataset/nlp/annotation/workspace/textSegmentation.vue b/webapp/src/views/dataset/nlp/annotation/workspace/textSegmentation.vue
new file mode 100644
index 0000000..5e91963
--- /dev/null
+++ b/webapp/src/views/dataset/nlp/annotation/workspace/textSegmentation.vue
@@ -0,0 +1,304 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div v-hotkey.stop="keymap">
+    <div class="flex flex-between">
+      <el-tabs :value="activeTab" class="eltabs-inlineblock" @tab-click="handlePanelClick">
+        <el-tab-pane :label="countInfoTxt.unfinished" name="unfinished" />
+        <el-tab-pane :label="countInfoTxt.finished" name="finished" />
+      </el-tabs>
+      <div class="flex flex-end f1">
+        <div class="ml-40 mr-10 my-auto">标注进度:</div>
+        <el-progress
+          :show-text="false"
+          :stroke-width="10"
+          :percentage="percentage"
+          class="my-auto"
+          style="width: 50%;"
+        ></el-progress>
+        <div class="my-auto ml-10">{{ progressTxt }}</div>
+      </div>
+    </div>
+    <el-card class="box-card" style="margin-top: 20px;" shadow="never">
+      <div slot="header" class="clearfix flex flex-between" style="line-height: 32px;">
+        <div v-if="fileId" class="f1">&nbsp;</div>
+        <span v-if="showCurrent">{{ current }}</span>
+        <div class="f1">
+          <div class="fr">
+            <el-button :disabled="!showPrev" type="text" @click="toPrev"
+              >上一篇(<i class="el-icon-back"></i>)</el-button
+            >
+            <el-button :disabled="!showNext" type="text" @click="toNext"
+              >下一篇(<i class="el-icon-right"></i>)</el-button
+            >
+            <el-popconfirm title="确认删除该文本？" @onConfirm="deleteFile">
+              <el-button slot="reference" :disabled="!showDelete" type="text" class="ml-10">
+                删除
+              </el-button>
+            </el-popconfirm>
+          </div>
+        </div>
+      </div>
+      <div class="text">
+        <Exception v-if="!!showException" />
+        <div v-else-if="loading" class="flex flex-center g6" style="min-height: 80px;">
+          加载中...
+        </div>
+        <TextEditor
+          v-else
+          ref="textRef"
+          :txt="state.txt"
+          class="text-annotate"
+          @mount="handleTextMount"
+        />
+      </div>
+    </el-card>
+    <div v-if="fileId" class="action-bar mt-20 flex flex-end">
+      <el-button type="primary" :disabled="comfirmDisabled" @click="confirm">确认（C）</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, watch, computed, ref, nextTick } from '@vue/composition-api';
+import Highlighter from 'web-highlighter';
+
+import TextEditor from '@/components/textEditor';
+import Exception from '@/components/Exception';
+import { colorByLuminance, removeBy } from '@/utils';
+import { hs2Json, json2Hs } from '../../util';
+
+export default {
+  name: 'TextSegmentationWorkSpace',
+  components: {
+    TextEditor,
+    Exception,
+  },
+  inheritAttrs: false,
+  props: {
+    activeTab: String,
+    txt: String,
+    countInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    pageInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    loading: Boolean,
+    deleteFile: Function,
+    toNext: Function,
+    toPrev: Function,
+    saving: Boolean,
+    changeActiveTab: Function,
+    fileId: [Number, String],
+    annotation: [Array],
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      activeTab: props.activeTab || 'unfinished',
+      txt: props.txt || '',
+      sources: [],
+    });
+
+    const textRef = ref(null);
+    const highlighter = ref(null);
+
+    const countInfoTxt = computed(() => ({
+      unfinished: `无标注信息（${props.countInfo.unfinished}）`,
+      finished: `有标注信息（${props.countInfo.finished}）`,
+    }));
+
+    // 确认是否可操作
+    const comfirmDisabled = computed(() => state.loading || props.saving || !props.fileId);
+
+    const percentage = computed(() => {
+      const total = props.countInfo.unfinished + props.countInfo.finished;
+      return total === 0 ? 0 : (props.countInfo.finished / total) * 100;
+    });
+
+    const progressTxt = computed(() => {
+      return `${props.countInfo.finished}/${props.countInfo.finished + props.countInfo.unfinished}`;
+    });
+
+    const getStyle = (item) => {
+      const color = colorByLuminance(item.color);
+      return {
+        color,
+        border: 'none',
+      };
+    };
+
+    const showCurrent = computed(() => props.pageInfo.total > 0);
+    const current = computed(() => `当前文本顺序：${props.pageInfo.current}`);
+    // 上一页，下一页
+    const showPrev = computed(() => props.pageInfo.current > 1);
+    const showNext = computed(() => props.pageInfo.current < props.pageInfo.total);
+    const showDelete = computed(() => props.pageInfo.total > 0);
+    const showException = computed(() => props.loading === false && !props.fileId);
+
+    const handlePanelClick = (tab) => {
+      props.changeActiveTab(tab);
+    };
+
+    const onCreate = ({ sources, type }) => {
+      sources.forEach((s) => {
+        highlighter.value.addClass('range-selected', s.id);
+      });
+      // TODO: 用户手动创建
+      if (type === 'from-input') {
+        const mergeLabelSource = sources.map((s) => ({
+          ...s,
+          extra: {
+            type,
+          },
+        }));
+        Object.assign(state, {
+          sources: state.sources.concat(mergeLabelSource),
+        });
+      }
+    };
+
+    // 删除高亮元素
+    const onHighlightClick = ({ id }) => {
+      highlighter.value.remove(id);
+      const next = removeBy(state.sources, (d) => d.id === id);
+      Object.assign(state, {
+        sources: next,
+      });
+    };
+
+    const runHook = (instance) => {
+      instance.hooks.Render.SelectedNodes.tap((id, selectedNodes) => {
+        // 不允许嵌套选中
+        if (selectedNodes.length > 1) return [];
+        // 过滤空选项
+        const next = selectedNodes.filter((n) => n.$node.textContent.trim());
+        if (next.length === 0) {
+          return [];
+        }
+        return next;
+      });
+    };
+
+    const createHighLighter = () => {
+      highlighter.value = new Highlighter({
+        $root: textRef.value.$el,
+        exceptSelectors: ['span'], // 不允许对已标注的文本进行拆分标注
+      });
+
+      highlighter.value
+        .on(Highlighter.event.CREATE, onCreate)
+        .on(Highlighter.event.CLICK, onHighlightClick);
+
+      // 生命周期
+      runHook(highlighter.value);
+
+      // 启动
+      highlighter.value.run();
+    };
+
+    // 反序列化，将存储的内容转化为 DOM 展示
+    const deSerialize = () => {
+      if (props.annotation) {
+        const sources = json2Hs(props.annotation);
+        // 将source 同步到 state
+        Object.assign(state, {
+          sources: state.sources.concat(sources),
+        });
+        sources.forEach((hs) => {
+          highlighter.value.fromStore(hs.startMeta, hs.endMeta, hs.text, hs.id, hs.extra);
+        });
+      }
+    };
+
+    const handleTextMount = () => {
+      nextTick(() => {
+        // 创建highlight 实例
+        createHighLighter();
+        deSerialize();
+      });
+    };
+
+    const reset = () => {
+      Object.assign(state, {
+        sources: [],
+      });
+    };
+
+    // 每种类型实现 confirm
+    const confirm = () => {
+      if (comfirmDisabled.value) return;
+      const annotation = state.sources.length ? hs2Json(state.sources) : null;
+      // 导入标注内容
+      ctx.emit('confirm', { annotation });
+    };
+
+    const keymap = computed(() => ({
+      c: confirm,
+    }));
+
+    watch(
+      () => props.txt,
+      (next) => {
+        state.txt = next;
+      }
+    );
+
+    watch(
+      () => props.fileId,
+      () => {
+        reset();
+      }
+    );
+
+    watch(
+      () => props.activeTab,
+      (next) => {
+        state.activeTab = next;
+      }
+    );
+
+    return {
+      state,
+      textRef,
+      showException,
+      showDelete,
+      getStyle,
+      showPrev,
+      showNext,
+      countInfoTxt,
+      percentage,
+      progressTxt,
+      handlePanelClick,
+      showCurrent,
+      current,
+      comfirmDisabled,
+      handleTextMount,
+      confirm,
+      keymap,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.text-label {
+  .el-icon-close {
+    color: inherit;
+  }
+}
+</style>
diff --git a/webapp/src/views/dataset/nlp/textClassify/action.js b/webapp/src/views/dataset/nlp/list/action.js
similarity index 62%
rename from webapp/src/views/dataset/nlp/textClassify/action.js
rename to webapp/src/views/dataset/nlp/list/action.js
index 2809b0a..4a322a5 100644
--- a/webapp/src/views/dataset/nlp/textClassify/action.js
+++ b/webapp/src/views/dataset/nlp/list/action.js
@@ -1,19 +1,19 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
- 
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
 export default {
   name: 'textAction',
   functional: true,
@@ -56,15 +56,15 @@ export default {
           // 删除按钮总会显示
           const showDeleteButton = true;
           const deleteButton = (
-            <el-button {...btnProps} onClick={() => doDelete([{id: row.id}])}>
+            <el-button {...btnProps} onClick={() => doDelete([{ id: row.id }])}>
               删除
             </el-button>
           );
 
           return (
             <span>
-              { showCheckButton && checkButton }
-              { showDeleteButton && deleteButton }
+              {showCheckButton && checkButton}
+              {showDeleteButton && deleteButton}
             </span>
           );
         },
diff --git a/webapp/src/views/dataset/nlp/list/index.vue b/webapp/src/views/dataset/nlp/list/index.vue
new file mode 100644
index 0000000..beb4494
--- /dev/null
+++ b/webapp/src/views/dataset/nlp/list/index.vue
@@ -0,0 +1,719 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div>
+    <UploadForm
+      action="fakeApi"
+      title="导入文本"
+      accept=".txt"
+      dataType="text"
+      :hash="true"
+      :visible="uploadDialogVisible"
+      :toggleVisible="handleClose"
+      :params="uploadParams"
+      @uploadSuccess="uploadSuccess"
+      @uploadError="uploadError"
+    />
+    <div class="classify-container flex">
+      <!--文件列表展示-->
+      <div class="text-list-container">
+        <div class="app-container">
+          <!--tabs页和工具栏-->
+          <div class="classify-tab">
+            <el-tabs :value="lastTabName" @tab-click="handleTabClick">
+              <el-tab-pane :label="countInfoTxt.unfinished" name="unfinished" />
+              <el-tab-pane :label="countInfoTxt.finished" name="finished" />
+            </el-tabs>
+            <SearchBox
+              ref="searchBox"
+              :key="lastTabName"
+              :formItems="formItems"
+              :handleFilter="handleFilter"
+              :initialValue="initialValue"
+              :popperAttrs="popperAttrs"
+            >
+              <el-button slot="trigger" type="text" style=" margin-bottom: 14px; margin-left: 30px;"
+                >筛选<i class="el-icon-arrow-down el-icon--right"
+              /></el-button>
+            </SearchBox>
+            <div class="classify-button flex flex-between flex-vertical-align">
+              <div class="row-left f1">
+                <el-input
+                  ref="inputRef"
+                  v-model="searchTxt"
+                  placeholder="查询文本"
+                  class="input-with-select"
+                  style="width: 60%;"
+                  @keyup.enter.native="crud.toQuery"
+                >
+                  <i slot="suffix" class="cp el-icon-search el-input__icon" @click="crud.toQuery" />
+                </el-input>
+              </div>
+              <div class="row-right">
+                <el-tooltip
+                  effect="dark"
+                  :content="isImporting ? '更新中' : '刷新'"
+                  placement="top"
+                  :open-delay="600"
+                >
+                  <el-button
+                    class="filter-item with-border"
+                    style="padding: 8px;"
+                    @click="crud.toQuery"
+                  >
+                    <i :class="refreshKlass"></i>
+                  </el-button>
+                </el-tooltip>
+                <el-button :disabled="disableImport" icon="el-icon-plus" @click="importFile">
+                  导入文件
+                </el-button>
+                <el-button icon="el-icon-right" class="ml-40" type="primary" @click="goDetail">
+                  去标注
+                </el-button>
+              </div>
+            </div>
+          </div>
+          <InfoAlert v-if="crud.selections.length > 0">
+            <div class="flex flex-between">
+              <div>已选 {{ crud.selections.length }} 项</div>
+              <div>
+                <el-button type="text" @click="cancelSelection">取消选择</el-button>
+                <el-button
+                  class="danger"
+                  type="text"
+                  :loading="crud.delAllLoading"
+                  @click="doDelete(crud.selections)"
+                >
+                  批量删除
+                </el-button>
+              </div>
+            </div>
+          </InfoAlert>
+          <el-table
+            ref="textTable"
+            v-loading="crud.loading"
+            :data="dataList"
+            highlight-current-row
+            @selection-change="crud.selectionChangeHandler"
+            @sort-change="crud.sortChange"
+          >
+            <el-table-column fixed type="selection" min-width="5%" />
+            <el-table-column
+              class-name="table-text"
+              prop="content"
+              label="文本摘要"
+              align="left"
+              min-width="50%"
+            />
+            <el-table-column prop="status" label="标注状态" align="left" min-width="10%">
+              <template slot-scope="scope">
+                <el-tag :style="getStatusStyle(scope.row)" :color="getStatus(scope.row).bgColor">
+                  {{ getStatus(scope.row).name }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="lastTabName === 'finished' && !!showLabel"
+              show-overflow-tooltip
+              prop="labelId"
+              label="标签"
+              align="left"
+              min-width="10%"
+            >
+              <template slot-scope="scope">
+                <el-tag
+                  class="vm dib ellipsis"
+                  :style="getStyle(scope.row)"
+                  :color="getColor(scope.row)"
+                >
+                  {{ getName(scope.row) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="lastTabName === 'finished' && !!enableAuto"
+              prop="prediction"
+              label="预测值"
+              min-width="10%"
+              sortable="custom"
+              align="left"
+            />
+            <Action
+              fixed="right"
+              min-width="15%"
+              align="left"
+              :showDetail="showDetail"
+              :doDelete="doDelete"
+            />
+          </el-table>
+          <!--分页组件-->
+          <el-pagination
+            :page-size.sync="crud.page.size"
+            :page-sizes="[10, 20, 50]"
+            :total="crud.page.total"
+            :current-page.sync="crud.page.current"
+            :style="`text-align:${crud.props.paginationAlign};`"
+            style="margin-top: 8px;"
+            layout="total, prev, pager, next, sizes"
+            @size-change="crud.sizeChangeHandler($event)"
+            @current-change="crud.pageChangeHandler"
+          />
+        </div>
+      </div>
+      <!--Label列表展示-->
+      <div class="label-list-container">
+        <div class="fixed-label-list">
+          <SideBar
+            :labels="labels"
+            :datasetInfo="datasetInfo"
+            :createLabel="createLabel"
+            :labelClickable="false"
+          />
+        </div>
+      </div>
+    </div>
+    <TextInfoModal
+      :key="modalId"
+      :visible="showTextModal"
+      :pageInfo="pageInfo"
+      :toNext="toNext"
+      :toPrev="toPrev"
+      :hanleChange="handleTextModalClose"
+      :hanleCancel="handleTextModalClose"
+      :goDetail="goDetail"
+      :deleteFile="deleteFile"
+      :crud="crud"
+    />
+  </div>
+</template>
+
+<script>
+import { Message } from 'element-ui';
+import { isNil, pick } from 'lodash';
+import cx from 'classnames';
+
+import { colorByLuminance, stripeHtmlTag, remove } from '@/utils';
+import {
+  detail,
+  createLabel as createLabelApi,
+  queryLabels as queryLabelsApi,
+  count,
+} from '@/api/preparation/dataset';
+import { del, submit } from '@/api/preparation/datafile';
+import { search } from '@/api/preparation/textData';
+import {
+  fileCodeMap,
+  getFileFromMinIO,
+  textStatusMap,
+  dataTypeCodeMap,
+  isStatus,
+  annotationCodeMap,
+} from '@/views/dataset/util';
+import CRUD, { presenter, header, crud } from '@crud/crud';
+import SideBar from '@/views/dataset/nlp/annotation/sidebar';
+import UploadForm from '@/components/UploadForm';
+import TextInfoModal from '@/views/dataset/components/textInfoModal';
+import InfoAlert from '@/components/InfoAlert';
+import SearchBox from '@/components/SearchBox';
+
+import Action from './action';
+
+const initialPageInfo = {
+  current: null,
+  size: 1,
+  total: 0,
+};
+
+export default {
+  name: 'TextList',
+  components: {
+    UploadForm,
+    TextInfoModal,
+    Action,
+    SideBar,
+    InfoAlert,
+    SearchBox,
+  },
+  cruds() {
+    const id = this.parent.$route.params.datasetId;
+    const crudObj = CRUD({
+      title: '文本分类',
+      crudMethod: { del, list: search },
+    });
+    crudObj.params = { datasetId: id, status: fileCodeMap.UNFINISHED };
+    crudObj.page.size = 10;
+    return crudObj;
+  },
+  mixins: [presenter(), header(), crud()],
+  data() {
+    return {
+      initialValue: {
+        annotateStatus: [''],
+        annotateType: [''],
+        labelId: [],
+      },
+      popperAttrs: {
+        placement: 'bottom',
+      },
+      formItemsUnfinish: [
+        {
+          label: '标注状态:',
+          prop: 'annotateStatus',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '未标注', value: 101 },
+            { label: '已标注', value: 302, disabled: true },
+          ],
+        },
+        {
+          label: '标注方式:',
+          prop: 'annotateType',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '手动标注', value: 104, disabled: true },
+            { label: '自动标注', value: 103, disabled: true },
+          ],
+        },
+      ],
+      formItemsFinish: [
+        {
+          label: '标注状态:',
+          prop: 'annotateStatus',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '未标注', value: 101, disabled: true },
+            { label: '已标注', value: 302 },
+          ],
+        },
+        {
+          label: '标注方式:',
+          prop: 'annotateType',
+          type: 'checkboxGroup',
+          options: [
+            { label: '不限', value: '' },
+            { label: '手动标注', value: 104 },
+            { label: '自动标注', value: 103 },
+          ],
+        },
+        {
+          label: '标签:',
+          prop: 'labelId',
+          type: 'select',
+          attrs: {
+            multiple: true,
+            clearable: true,
+            filterable: true,
+          },
+          options: [],
+        },
+      ],
+      dataList: [],
+      modalId: 0,
+      datasetId: 0,
+      datasetInfo: {}, // 数据库信息
+      uploadDialogVisible: false,
+      showTextModal: false,
+      lastTabName: 'unfinished', // 当前选中的tab页
+      crudStatusMap: {
+        unfinished: [fileCodeMap.UNFINISHED],
+        finished: [fileCodeMap.FINISHED],
+      },
+      categoryId2Name: {},
+      labels: [], // 可使用的标签
+      textStatusFilter: null,
+      textStatusMap,
+      pageInfo: initialPageInfo,
+      countInfo: {
+        unfinished: 0,
+        finished: 0,
+      },
+      searchTxt: '',
+    };
+  },
+  computed: {
+    formItems() {
+      return this.lastTabName === 'unfinished' ? this.formItemsUnfinish : this.formItemsFinish;
+    },
+    uploadParams() {
+      return {
+        datasetId: this.datasetId,
+        objectPath: `dataset/${this.datasetId}/origin`, // 对象存储路径
+      };
+    },
+    isNil() {
+      return isNil;
+    },
+
+    countInfoTxt() {
+      return {
+        unfinished: `无标注信息（${this.countInfo.unfinished}）`,
+        finished: `有标注信息（${this.countInfo.finished}）`,
+      };
+    },
+    isTable() {
+      return this.datasetInfo.dataType === dataTypeCodeMap.TABLE;
+    },
+    // 是否禁用文件导入
+    disableImport() {
+      if (this.lastTabName === 'finished') return true;
+      if (this.isTable && isStatus(this.datasetInfo, 'IMPORTING')) return true;
+      return false;
+    },
+    // 是否导入中
+    isImporting() {
+      return isStatus(this.datasetInfo, 'IMPORTING');
+    },
+    refreshKlass() {
+      return cx('el-icon-refresh', {
+        rotate: this.isImporting,
+      });
+    },
+    // 根据类型是否展示标签（文本分词不展示标签）
+    showLabel() {
+      return this.datasetInfo.annotateType === annotationCodeMap.TEXTCLASSIFY;
+    },
+    // TODO：目前仅文本分类支持自动标注，后续会增加
+    enableAuto() {
+      return this.datasetInfo.annotateType === annotationCodeMap.TEXTCLASSIFY;
+    },
+  },
+  watch: {
+    // eslint-disable-next-line func-names
+    datasetInfo(next) {
+      if (isStatus(next, 'IMPORTING')) {
+        setTimeout(this.queryDatasetInfo, 3000);
+      }
+    },
+  },
+  created() {
+    this.datasetId = parseInt(this.$route.params.datasetId, 10);
+    // 获取未标注和已标注的数量确定展示tab页
+    this.setCountInfo().then(() => {
+      if (this.countInfo.unfinished === 0 && this.countInfo.finished !== 0) {
+        this.lastTabName = 'finished';
+        this.crud.params.status = this.crudStatusMap[this.lastTabName];
+        this.crud.toQuery();
+      }
+    });
+
+    // 获取详情
+    this.queryDatasetInfo().then(this.updateLabels);
+  },
+  methods: {
+    [CRUD.HOOK.beforeRefresh]() {
+      this.crud.params = { ...this.crud.params, content: this.searchTxt };
+    },
+    [CRUD.HOOK.afterRefresh]() {
+      const { data } = this.crud;
+      this.dataList = data.map((d) => ({
+        ...d,
+        rawContent: d.content,
+        content: stripeHtmlTag(d.content),
+      }));
+      this.setCountInfo();
+    },
+    handleFilter(form) {
+      Object.assign(this.crud.params, form);
+      this.crud.refresh();
+    },
+    queryDatasetInfo() {
+      return detail(this.datasetId).then((res) => {
+        this.datasetInfo = res || {};
+      });
+    },
+    openUploadDialog() {
+      this.uploadDialogVisible = true;
+    },
+    handleClose() {
+      this.uploadDialogVisible = false;
+    },
+    getStyle(item) {
+      const sLabel = this.labels.find((d) => d.id === item.labelId) || null;
+      // 根据亮度来决定颜色
+      const color = colorByLuminance(sLabel?.color);
+      return {
+        color,
+        display: 'inline-block',
+        maxWidth: '100px',
+        minWidth: '60px',
+        textAlign: 'center',
+        border: 'unset',
+      };
+    },
+    getStatus(row) {
+      return textStatusMap[row.status] || {};
+    },
+    getStatusStyle(row) {
+      const status = this.getStatus(row);
+      const style = {
+        borderColor: status.bgColor,
+      };
+      return style;
+    },
+    getColor(item) {
+      return this.categoryId2Name[item.labelId]?.color || null;
+    },
+    getName(item) {
+      return this.categoryId2Name[item.labelId]?.name || '-';
+    },
+    importFile() {
+      if (this.isTable) {
+        // 表格方案
+        this.$router.push({
+          name: `TableImport`,
+          params: { datasetId: this.datasetId, annotateType: this.datasetInfo.annotateType },
+        });
+      } else {
+        this.openUploadDialog();
+      }
+    },
+    // 查询标签
+    async queryLabels(requestParams = {}) {
+      const labels = await queryLabelsApi(this.datasetId, requestParams);
+      const labelOptionsIndex = this.formItemsFinish.findIndex((d) => d.prop === 'labelId');
+      // 用于筛选功能，区分是否需要展示标签
+      if (this.showLabel) {
+        this.formItemsFinish[labelOptionsIndex].options = labels.map((item) => ({
+          label: item.name,
+          value: item.id,
+        }));
+      } else {
+        this.formItemsFinish = remove(this.formItemsFinish, labelOptionsIndex);
+      }
+
+      return labels || [];
+    },
+
+    handleTabClick(tab) {
+      const tabName = tab.name;
+      if (this.lastTabName === tabName) {
+        return;
+      }
+      // 切换tab页清除筛选条件
+      this.textStatusFilter = null;
+      this.crud.page.current = 1;
+      this.searchTxt = '';
+      this.crud.params = pick(this.crud.params, ['status', 'datasetId']);
+      this.crud.params = {
+        ...this.crud.params,
+        labelId: null,
+        content: '',
+        status: this.crudStatusMap[tabName],
+      };
+      this.lastTabName = tabName;
+      this.crud.refresh();
+      this.checkAll = false;
+    },
+
+    // 更新标签
+    async updateLabels() {
+      this.labels = await this.queryLabels();
+      this.categoryId2Name = this.labels.reduce(
+        (acc, item) =>
+          Object.assign(acc, {
+            [item.id]: {
+              name: item.name,
+              color: item.color,
+            },
+          }),
+        {}
+      );
+    },
+
+    // 新建标签
+    createLabel(labelParams = {}) {
+      return createLabelApi(this.datasetId, labelParams).then(() => {
+        this.updateLabels();
+        Message.success('标签创建成功');
+      });
+    },
+
+    async uploadSuccess(res) {
+      const files = getFileFromMinIO(res);
+      // 提交业务上传
+      if (files.length > 0) {
+        submit(this.datasetId, files).then(() => {
+          this.$message({
+            message: '上传文件成功',
+            type: 'success',
+          });
+          this.crud.toQuery();
+          this.setCountInfo();
+        });
+      }
+    },
+    uploadError(err) {
+      this.$message({
+        message: err.message || '上传文件失败',
+        type: 'error',
+      });
+    },
+    // 删除文件基类
+    deleteFile(datas = []) {
+      this.crud.delAllLoading = true;
+      const ids = datas.map((d) => ({ id: d }));
+      datas = datas.map((d) => d.id);
+      const params = {
+        fileIds: datas,
+        datasetIds: this.datasetId,
+      };
+      if (ids.length) {
+        return del(params)
+          .then(() => {
+            this.$message({
+              message: '删除文件成功',
+              type: 'success',
+            });
+            this.crud.toQuery();
+            // 更新统计
+            this.setCountInfo();
+          })
+          .finally(() => {
+            this.crud.delAllLoading = false;
+          });
+      }
+      return Promise.reject(new Error('文件不存在'));
+    },
+    doDelete(datas = []) {
+      const self = this;
+      this.$confirm(`确认删除选中的${datas.length}个文件?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => self.deleteFile(datas));
+    },
+    // 查看标注
+    goDetail() {
+      const query =
+        this.lastTabName === 'finished'
+          ? {
+              tab: 'finished',
+            }
+          : {};
+      this.$router.push({
+        name: 'TextAnnotation',
+        query,
+        params: { current: this.pageInfo.current, datasetId: this.datasetId },
+      });
+    },
+    async setCountInfo() {
+      const countInfo = await count(this.$route.params.datasetId, this.crud.params);
+      this.countInfo = countInfo;
+    },
+    // 当size 为1 重新生成页码的位置
+    sizeOfPage() {
+      return this.crud.page.size * (this.crud.page.current - 1);
+    },
+    reset() {
+      this.pageInfo = initialPageInfo;
+    },
+    // 显示查看文本详情框
+    showDetail(row, index) {
+      this.showTextModal = true;
+      this.pageInfo = {
+        ...this.crud.page,
+        current: this.sizeOfPage() + index + 1,
+      };
+    },
+    handleTextModalClose() {
+      this.modalId += 1;
+      this.showTextModal = false;
+      this.reset();
+    },
+    toNext() {
+      this.pageInfo = {
+        ...this.pageInfo,
+        current: Math.min(this.pageInfo.current + 1, this.pageInfo.total),
+      };
+    },
+    toPrev() {
+      this.pageInfo = {
+        ...this.pageInfo,
+        current: Math.max(this.pageInfo.current - 1, 1),
+      };
+    },
+    cancelSelection() {
+      this.$refs.textTable.clearSelection();
+      this.crud.selectionChangeHandler([]);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/styles/variables.scss';
+
+.classify-tab {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  margin-bottom: 10px;
+}
+
+.sorting-menu-trigger {
+  padding: 0;
+}
+
+.classify-tab .classify-button {
+  flex: 1;
+  margin: 13px 0 20px 100px;
+}
+
+.label-switch-tool {
+  margin-top: 25px;
+}
+
+.label-switch-tool .label-switch {
+  float: right;
+}
+
+.sidebar {
+  padding: 20px;
+  border-left: 1px solid $borderColor;
+}
+</style>
+
+<style lang="scss">
+.text-list-container {
+  flex: 1;
+}
+
+.label-list-container {
+  width: 20%;
+}
+
+.fixed-label-list {
+  position: fixed;
+  top: 50px;
+  width: 20%;
+  height: calc(100vh - 50px);
+  padding: 28px 28px 0;
+  margin-bottom: 33px;
+  overflow-y: auto;
+  background-color: #f2f2f2;
+}
+
+.table-text div {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+</style>
diff --git a/webapp/src/views/dataset/nlp/textClassify/index.vue b/webapp/src/views/dataset/nlp/textClassify/index.vue
deleted file mode 100644
index 38a66a3..0000000
--- a/webapp/src/views/dataset/nlp/textClassify/index.vue
+++ /dev/null
@@ -1,597 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-<template>
-  <div>
-    <UploadForm
-      action="fakeApi"
-      title="导入文本"
-      accept=".txt"
-      dataType="text"
-      :visible="uploadDialogVisible"
-      :toggleVisible="handleClose"
-      :params="uploadParams"
-      @uploadSuccess="uploadSuccess"
-      @uploadError="uploadError"
-    />
-    <div class="classify-container flex">
-      <!--文件列表展示-->
-      <div class="text-list-container">
-        <div class="app-container">
-          <!--tabs页和工具栏-->
-          <div class="classify-tab">
-            <el-tabs :value="lastTabName" @tab-click="handleTabClick">
-              <el-tab-pane :label="countInfoTxt.unfinished" name="unfinished" />
-              <el-tab-pane :label="countInfoTxt.finished" name="finished" />
-            </el-tabs>
-            <div class="classify-button flex flex-between flex-vertical-align">
-              <div class="row-left">
-                <el-button
-                  icon="el-icon-right"
-                  class="ml-40"
-                  type="primary"
-                  @click="goDetail"
-                >
-                  去标注
-                </el-button>
-                <el-button
-                  :disabled="lastTabName==='finished'"
-                  icon="el-icon-plus"
-                  @click="openUploadDialog"
-                >
-                  添加文本
-                </el-button>
-                <el-button
-                  type="danger"
-                  icon="el-icon-delete"
-                  :loading="crud.delAllLoading"
-                  :disabled="crud.selections.length === 0"
-                  @click="doDelete(crud.selections)"
-                >
-                  删除
-                </el-button>
-              </div>
-              <div class="row-right">
-                <label class="classify-select-tip item__label">已选 {{ crud.selections.length }} 条</label>
-              </div>
-            </div>
-          </div>
-          <el-table
-            ref="textTable"
-            v-loading="crud.loading"
-            :data="dataList"
-            highlight-current-row
-            @selection-change="crud.selectionChangeHandler"
-            @sort-change="crud.sortChange"
-          >
-            <el-table-column fixed type="selection" min-width="5%"/>
-            <el-table-column
-              class-name="table-text"
-              prop="abstract"
-              label="文本摘要"
-              align="left"
-              min-width="50%"
-            />
-            <TextStatus
-              prop="status"
-              min-width="10%"
-              label="标注状态"
-              align="left"
-              :statusList="statusList"
-              :filterByTextStatus="filterByTextStatus"
-              :textStatusFilter="textStatusFilter"
-            />
-            <el-table-column
-              v-if="lastTabName==='finished'"
-              show-overflow-tooltip
-              prop="labelId"
-              align="left"
-              min-width="10%"
-            >
-              <template slot="header">
-                <dropdown-header
-                  title="标签"
-                  :list="labelIdList"
-                  :filtered="!isNil(crud.params.labelId)"
-                  dropdownStyle="max-height: 400px; overflow-y: auto;"
-                  @command="cmd => filter('labelId', cmd)"
-                />
-              </template>
-              <template slot-scope="scope">
-                <el-tag 
-                  :style="getStyle(scope.row)" 
-                  :color="getColor(scope.row)"
-                >
-                  {{ getName(scope.row) }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-if="lastTabName==='finished'"
-              prop="prediction"
-              label="预测值"
-              min-width="10%"
-              sortable="custom"
-              align="left"
-            /> 
-            <Action
-              fixed="right"
-              min-width="15%"
-              align="left"
-              :showDetail="showDetail"
-              :doDelete="doDelete"
-            />
-          </el-table>
-          <!--分页组件-->
-          <el-pagination
-            :page-size.sync="crud.page.size"
-            :page-sizes="[10, 20, 50]"
-            :total="crud.page.total"
-            :current-page.sync="crud.page.current"
-            :style="`text-align:${crud.props.paginationAlign};`"
-            style="margin-top: 8px;"
-            layout="total, prev, pager, next, sizes"
-            @size-change="crud.sizeChangeHandler($event)"
-            @current-change="crud.pageChangeHandler"
-          />
-        </div>
-      </div>
-      <!--Label列表展示-->
-      <div class="label-list-container">
-        <div class="fixed-label-list">
-          <SideBar
-            :labels="labels"
-            :datasetInfo="datasetInfo"
-            :createLabel="createLabel"
-            :labelClickable="false"
-          />
-        </div>
-      </div>
-    </div>
-    <TextInfoModal
-      :key="modalId"
-      :visible="showTextModal"
-      :pageInfo="pageInfo"
-      :toNext="toNext"
-      :toPrev="toPrev"
-      :hanleChange="handleTextModalClose"
-      :hanleCancel="handleTextModalClose"
-      :goDetail="goDetail"
-      :deleteFile="deleteFile"
-      :crud="crud"
-    />
-  </div>
-</template>
-
-<script>
-import { Message } from "element-ui";
-import { isNil } from "lodash";
-
-import { getLabels } from "@/api/preparation/datalabel";
-import { colorByLuminance } from "@/utils";
-import { detail, createLabel as createLabelApi, queryLabels as queryLabelsApi } from "@/api/preparation/dataset";
-import { del, submit } from "@/api/preparation/datafile";
-import { list, count } from '@/api/preparation/textData';
-import { 
-  fileCodeMap, 
-  getImgFromMinIO, 
-  statusCodeMap, 
-  textStatusMap, 
-  textFinishedMap, 
-  textUnfinishedMap, 
-  transformFiles,
-  readTxt,
-} from "@/views/dataset/util";
-import CRUD, { presenter, header, crud } from '@crud/crud';
-import Action from '@/views/dataset/nlp/textClassify/action';
-import TextStatus from '@/views/dataset/nlp/textClassify/textStatus';
-import SideBar from '@/views/dataset/nlp/annotation/sidebar';
-import UploadForm from '@/components/UploadForm';
-import TextInfoModal from '@/views/dataset/components/textInfoModal';
-import DropdownHeader from '@/components/DropdownHeader';
-
-const initialPageInfo = {
-  current: null,
-  size: 1,
-  total: 0,
-};
-
-export default {
-  name: 'TextClassify',
-  components: { UploadForm, TextInfoModal, DropdownHeader, Action, TextStatus, SideBar },
-  cruds() {
-    const id = this.parent.$route.params.datasetId;
-    const crudObj = CRUD({
-      title: '文本分类',
-      crudMethod: { del, list },
-    });
-    crudObj.params = { 'datasetId': id, 'status': fileCodeMap.UNFINISHED };
-    crudObj.page.size = 10;
-    return crudObj;
-  },
-  mixins: [presenter(), header(), crud()],
-  data() {
-    return {
-      dataList: [],
-      modalId: 0,
-      datasetId: 0,
-      datasetInfo: {}, // 数据库信息
-      uploadDialogVisible: false,
-      showTextModal: false,
-      lastTabName: 'unfinished', // 当前选中的tab页
-      crudStatusMap: {
-        'unfinished': [fileCodeMap.UNFINISHED],
-        'finished': [fileCodeMap.FINISHED],
-      },
-      rawLabelData: [], // 显示的label
-      labelData: [], // 所有的label数据
-      categoryId2Name : {},
-      name2CategoryId : {},
-      labels: [], // 可使用的标签
-      selections:[], // 选择多的selection
-      textStatusFilter: null,
-      textStatusMap,
-      statusCodeMap,
-      pageInfo: initialPageInfo,
-      countInfo: {
-        unfinished: 0,
-        finished: 0,
-      },
-    };
-  },
-  computed: {
-    uploadParams() {
-      return {
-        datasetId: this.datasetId,
-        objectPath: `dataset/${this.datasetId}/origin`, // 对象存储路径
-      };
-    },
-    isNil() {
-      return isNil;
-    },
-    // 标注状态的可筛选项取决于当前tab，全部对应的值跟所在的tab页有关
-    statusList() {
-      let rawStatusList;
-      let statusList;
-      if(this.lastTabName === 'unfinished') {
-        rawStatusList = Object.keys(textUnfinishedMap).map(d => ({
-          label: textUnfinishedMap[d],
-          value: Number(d),
-        }));
-        statusList = [{ label: '全部', value: fileCodeMap.UNFINISHED }].concat(rawStatusList);
-      } else {
-        rawStatusList = Object.keys(textFinishedMap).map(d => ({
-          label: textFinishedMap[d],
-          value: Number(d),
-        }));
-        statusList = [{ label: '全部', value: fileCodeMap.FINISHED }].concat(rawStatusList);
-      }
-      return statusList;
-    },
-    labelIdList() {
-      const rawLabelIdList = this.labelData.map(item => ({
-        label: item.name,
-        value: Number(item.id),
-      }));
-      return [{ label: '全部', value: null }].concat(rawLabelIdList);
-    },
-    countInfoTxt() {
-      return {
-        unfinished: `无标注信息（${this.countInfo.unfinished}）`,
-        finished: `有标注信息（${this.countInfo.finished}）`,
-      };
-    },
-  },
-  watch: {
-    // eslint-disable-next-line
-    'crud.data': function(next) {
-      const self = this;
-      const promises = transformFiles(next).map(d => readTxt(d.url));
-      Promise.all(promises).then(res => {
-        self.dataList = next.map((d, index) => ({
-          ...d,
-          abstract: res[index],
-        }));
-      });
-
-    },
-  },
-  created() {
-    this.datasetId = parseInt(this.$route.params.datasetId, 10);
-    this.refreshLabel();
-    Promise.all([
-      list({ 'datasetId': this.datasetId, 'status': [fileCodeMap.UNFINISHED] }),
-      list({ 'datasetId': this.datasetId, 'status': [fileCodeMap.FINISHED] }),
-    ]).then(([unfinished, finished]) => {
-      if (unfinished.result.length === 0 && finished.result.length !== 0) {
-        this.lastTabName = 'finished';
-        this.crud.params.status = this.crudStatusMap[this.lastTabName];
-        this.crud.toQuery();
-      }
-    });
-
-    detail(this.datasetId).then(res =>{
-      this.datasetInfo = res || {};
-    });
-
-    // 更新统计信息
-    this.setCountInfo();
-
-    // 获取标签
-    this.queryLabels().then(res => {
-      this.labels = res;
-    });
-  },
-  methods: {
-    textStatusFilter2Type(filter) {
-      if (filter === 'all') return null;
-      return filter;
-    },
-    filterByTextStatus(command) {
-      if (command === this.textStatusFilter) {
-        return;
-      }
-      this.textStatusFilter = command;
-      this.crud.params.status = command;
-      this.crud.page.current = 1;
-      this.crud.refresh();
-    },
-    openUploadDialog() {
-      this.uploadDialogVisible = true;
-    },
-    handleClose() {
-      this.uploadDialogVisible = false;
-    },
-    refreshLabel() {
-      getLabels(this.datasetId).then((res) => {
-        this.rawLabelData = res;
-        this.rawLabelData.forEach((item) => {
-          this.categoryId2Name[item.id] = {
-            'name':item.name,
-            'color':item.color,
-          };
-          this.name2CategoryId[item.name] = item.id;
-        });
-        // 初始化设置 labelData
-        this.labelData = this.rawLabelData;
-      });
-    },
-    parseTextAnnotationType(row, column, cellValue = 0) {
-      return textStatusMap[cellValue];
-    },
-    filter(column, value) {
-      this[column] = value;
-      this.crud.params[column] = value;
-      this.crud.page.current = 1;
-      this.crud.toQuery();
-    },
-    getStyle(item) {
-      const sLabel = this.labels.find(d => d.id === item.labelId) || null;
-      // 根据亮度来决定颜色
-      const color = colorByLuminance(sLabel?.color);
-      return {
-        color,
-        display: 'inline-block',
-        width: 'auto',
-        minWidth: "60px",
-        textAlign: 'center',
-        border: 'unset',
-      };
-    },
-    getColor(item) {
-      return isNil(item.labelId) ? "" : this.categoryId2Name[item.labelId].color;
-    },
-    getName(item) {
-      return isNil(item.labelId) ? "" : this.categoryId2Name[item.labelId].name;
-    },
-    
-    // 查询标签
-    async queryLabels(requestParams = {}) {
-      const labels = await queryLabelsApi(this.datasetId, requestParams);
-      return labels || [];
-    },
-
-    handleTabClick(tab) {
-      const tabName = tab.name;
-      if (this.lastTabName === tabName) {
-        return;
-      }
-      // 切换tab页清除筛选条件
-      this.textStatusFilter = null;
-      this.crud.params.labelId = null;
-      this.crud.params.status = this.crudStatusMap[tabName];
-      this.lastTabName = tabName;
-      this.crud.refresh();
-      this.checkAll = false;
-    },
-
-    // 更新标签
-    async updateLabels() {
-      this.labels = await this.queryLabels();
-    },
-
-    // 新建标签
-    createLabel(labelParams = {}) {
-      return createLabelApi(this.datasetId, labelParams).then(() => {
-        this.updateLabels();
-        this.refreshLabel();
-        Message.success('标签创建成功');
-      });
-    },
-
-    async uploadSuccess(res) {
-      const files = getImgFromMinIO(res);
-      // 提交业务上传
-      if (files.length > 0) {
-        submit(this.datasetId, files).then(() => {
-          this.$message({
-            message: '上传文件成功',
-            type: 'success',
-          });
-          this.crud.toQuery();
-          this.setCountInfo();
-        });
-      }
-    },
-    uploadError(err) {
-      this.$message({
-        message: err.message || '上传文件失败',
-        type: 'error',
-      });
-    },
-    // 删除文件基类
-    deleteFile(datas = []){
-      this.crud.delAllLoading = true;
-      const ids = datas.map(d => ({ id: d }));
-      datas = datas.map(d => (d.id));
-      const params = {
-        fileIds: datas,
-        datasetIds: this.datasetId,
-      };
-      if (ids.length) {
-        return del(params).then(() => {
-          this.$message({
-            message: '删除文件成功',
-            type: 'success',
-          });
-          this.crud.toQuery();
-          // 更新统计
-          this.setCountInfo();
-        }).finally(() => {
-          this.crud.delAllLoading = false;
-        });
-      }
-      return Promise.reject(new Error('文件不存在'));
-    },
-    doDelete(datas = []) {
-      const self = this;
-      this.$confirm(`确认删除选中的${datas.length}个文件?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }).then(() => self.deleteFile(datas));
-    },
-    // 查看标注
-    goDetail() {
-      const query = this.lastTabName === 'finished' ? {
-        tab: 'finished',
-      } : {};
-      this.$router.push({
-        path: `/data/datasets/text/annotation/${this.datasetId}`,
-        query,
-      });
-    },
-    async setCountInfo() {
-      const countInfo = await count(this.$route.params.datasetId);
-      this.countInfo = countInfo;
-    },
-    // 当size 为1 重新生成页码的位置
-    sizeOfPage(){
-      return this.crud.page.size * (this.crud.page.current - 1);
-    },
-    reset(){
-      this.pageInfo = initialPageInfo;
-    },
-    // 显示查看文本详情框
-    showDetail(row, index) {
-      this.showTextModal = true;
-      this.pageInfo = {
-        ...this.crud.page,
-        current: this.sizeOfPage() + index + 1,
-      };
-    },
-    handleTextModalClose() {
-      this.modalId+=1;
-      this.showTextModal = false;
-      this.reset();
-    },
-    toNext() {
-      this.pageInfo = {
-        ...this.pageInfo,
-        current: Math.min(this.pageInfo.current + 1, this.pageInfo.total),
-      };
-    },
-    toPrev() {
-      this.pageInfo = {
-        ...this.pageInfo,
-        current: Math.max(this.pageInfo.current - 1, 1),
-      };
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "~@/assets/styles/variables.scss";
-
-.classify-tab {
-  display: flex;
-  align-items: center;
-  padding: 4px 0;
-  margin-bottom: 10px;
-}
-
-.sorting-menu-trigger {
-  padding: 0;
-}
-
-.classify-tab .classify-button {
-  flex: 1;
-  margin: 13px 80px 20px 100px;
-}
-
-.label-switch-tool {
-  margin-top: 25px;
-}
-
-.label-switch-tool .label-switch {
-  float: right;
-}
-
-.sidebar {
-  padding: 20px;
-  border-left: 1px solid $borderColor;
-}
-</style>
-
-<style lang="scss">
-.text-list-container {
-  flex: 1;
-}
-
-.label-list-container {
-  width: 20%;
-}
-
-.fixed-label-list {
-  position: fixed;
-  top: 50px;
-  width: 20%;
-  height: calc(100vh - 83px);
-  padding: 28px 28px 0;
-  margin-bottom: 33px;
-  overflow-y: auto;
-  background-color: #f2f2f2;
-}
-
-.table-text div {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-
-</style>
diff --git a/webapp/src/views/dataset/nlp/textClassify/textStatus.js b/webapp/src/views/dataset/nlp/textClassify/textStatus.js
deleted file mode 100644
index 2ca1e34..0000000
--- a/webapp/src/views/dataset/nlp/textClassify/textStatus.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-import { fileCodeMap, textStatusMap } from '../../util';
-
-export default {
-  name: 'TextStatus',
-  functional: true,
-  render(h, { data, props }) {
-    const { statusList, filterByTextStatus, textStatusFilter } = props;
-    const iconClass = ['el-icon-arrow-down', 'el-icon--right'];
-    const textClass = [fileCodeMap.UNFINISHED, fileCodeMap.FINISHED, null].includes(textStatusFilter) ? null : 'primary';
-    const columnProps = {
-      ...data,
-      scopedSlots: {
-        header: () => {
-          return (
-            <el-dropdown trigger='click' size='medium'>
-              <span>
-                <span {... { class: textClass } }>标注状态</span>
-                <i {... { class: iconClass } } />
-              </span>
-              <el-dropdown-menu slot='dropdown'>
-                {statusList.map(item => {
-                  return (
-                    <el-dropdown-item
-                      key={item.value}
-                      nativeOnClick={() => filterByTextStatus(item.value)}
-                    >
-                      {item.label}
-                    </el-dropdown-item>
-                  );
-                })}
-              </el-dropdown-menu>
-            </el-dropdown>
-          );
-        },
-        default: ({ row }) => {
-          const status = textStatusMap[row.status] || {};
-          const colorProps = (!status.type && status.bgColor) && {
-            props: {
-              color: status.bgColor,
-            },
-            style: {
-              color: status.color,
-              borderColor: status.bgColor,
-            },
-          };
-          return (
-            <el-tag type={status.type} {...colorProps}>{status.name}</el-tag>
-          );
-        },
-      },
-    };
-
-    return h('el-table-column', columnProps);
-  },
-};
diff --git a/webapp/src/views/dataset/nlp/util.js b/webapp/src/views/dataset/nlp/util.js
new file mode 100644
index 0000000..a9c219a
--- /dev/null
+++ b/webapp/src/views/dataset/nlp/util.js
@@ -0,0 +1,44 @@
+/* eslint-disable */
+
+// 参考来源：https://github.com/alienzhou/web-highlighter/blob/1b26fe5927/src/util/uuid.ts
+export function createUUID(a) {
+  return a
+    ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16)
+    : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/gu, createUUID);
+}
+
+// 将原始值（highlightSource）转化为 json
+// [{ startMeta: {parentIndex: 0, parentTagName: "PRE", textOffset: 64 }, endMeta: { parentIndex: 0, parentTagName: "PRE", textOffset: 82 }, id: 'xxx', text: 'text', __isHighlightSource: {} }]
+export const hs2Json = raw => {
+  return raw.map(d => {
+    const result = {
+      offset: [d.startMeta.textOffset, d.endMeta.textOffset],
+      text: d.text,
+    };
+    if (d.extra && d.extra.labelId) {
+      Object.assign(result, {
+        labelId: d.extra.labelId, // 对应的标签
+      });
+    }
+    return result;
+  });
+};
+
+export const json2Hs = arr => {
+  return arr.map(d => {
+    const res = {
+      startMeta: { parentIndex: 0, parentTagName: 'PRE', textOffset: d.offset[0] },
+      endMeta: { parentIndex: 0, parentTagName: 'PRE', textOffset: d.offset[1] },
+      id: createUUID(),
+      text: d.text,
+      __isHighlightSource: {},
+    };
+    if (d.labelId) {
+      res.extra = {
+        labelId: d.labelId,
+        type: 'from-store',
+      };
+    }
+    return res;
+  });
+};
diff --git a/webapp/src/views/dataset/style/common.scss b/webapp/src/views/dataset/style/common.scss
new file mode 100644
index 0000000..bcf508a
--- /dev/null
+++ b/webapp/src/views/dataset/style/common.scss
@@ -0,0 +1,61 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* =============================================================
+*/
+
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
+
+.image-select-item {
+  position: relative;
+  flex: 1;
+  max-width: 100px;
+  padding: 10px 10px 4px;
+  margin-right: 10px;
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid #ddd;
+
+  .image-title {
+    line-height: 28px;
+  }
+
+  span {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: none;
+
+    @include triangle(20px, 20px, $primaryColor, right-up);
+
+    i {
+      @include checkmark(6px, 12px, 2px, #fff);
+
+      position: absolute;
+      top: -2px;
+      line-height: 0;
+      color: #fff;
+      transform: scale(0.8) rotate(45deg);
+    }
+  }
+
+  &.is-active {
+    color: $primaryColor;
+    border-color: $primaryColor;
+
+    span {
+      display: block;
+    }
+  }
+}
diff --git a/webapp/src/views/dataset/style/list.scss b/webapp/src/views/dataset/style/list.scss
index 276435a..8232022 100644
--- a/webapp/src/views/dataset/style/list.scss
+++ b/webapp/src/views/dataset/style/list.scss
@@ -269,3 +269,16 @@
     }
   }
 }
+
+.action-button {
+  margin-left: 10px;
+}
+
+.el-dropdown-menu {
+  .action-button {
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+    text-align: left;
+  }
+}
diff --git a/webapp/src/views/dataset/tableImport/index.vue b/webapp/src/views/dataset/tableImport/index.vue
new file mode 100644
index 0000000..087e0cc
--- /dev/null
+++ b/webapp/src/views/dataset/tableImport/index.vue
@@ -0,0 +1,357 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="app-container greyBg">
+    <div class="wrapper fixed">
+      <div class="app-page-header">
+        <div class="app-page-header-title">导入表格</div>
+        <div class="app-page-header-content">
+          <div>支持 csv/xls 文件格式导入，文件大小不能超过 5M</div>
+          <div>文件预览时间和大小、网络相关，请耐心等待</div>
+          <div>表格上传完毕，需要进一步对表格进行解析、转换，请耐心等待</div>
+        </div>
+      </div>
+      <div class="app-page-container-content">
+        <el-card class="box-card" shadow="never">
+          <el-steps :active="state.active" finish-status="success" align-center>
+            <el-step title="上传文件"></el-step>
+            <el-step title="文件预览"></el-step>
+            <el-step title="文件转换"></el-step>
+          </el-steps>
+          <el-form
+            ref="tableForm"
+            :model="state.form"
+            :rules="rules"
+            label-width="100px"
+            class="stepForm"
+          >
+            <Uploader
+              v-if="state.active === 0"
+              :fileTypeList="fileTypeList"
+              :state="state"
+              :setForm="setForm"
+              :setState="setState"
+              :tableForm="tableForm"
+              :validateField="validateField"
+              :loading="state.loading"
+              @preview="handlePreview"
+            />
+            <div v-if="state.active === 1">
+              <Previewer
+                :data="tableData"
+                :columns="columns"
+                :checkList="state.checkList"
+                :form="state.form"
+                :showFilter="showFilter"
+                :setState="setState"
+                :prev="prev"
+                :loading="state.loading"
+                :onOk="uploadFile"
+                @change="handleCheckChange"
+              />
+              <UploadInline
+                ref="uploadRef"
+                hash
+                action="fakeApi"
+                :params="uploadParams"
+                class="dn"
+                @uploadSuccess="uploadSuccess"
+                @uploadError="uploadError"
+              />
+            </div>
+            <div v-if="state.active === 2">
+              <Result :directTo="directTo" :datasetId="datasetId" @finish="finish" />
+            </div>
+          </el-form>
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, onMounted, ref, computed } from '@vue/composition-api';
+import { zipObject, uniq } from 'lodash';
+import { Message } from 'element-ui';
+
+import UploadInline from '@/components/UploadForm/inline';
+import { csvReader, xlsReader } from '@/views/dataset/util/tableReader';
+import { detail } from '@/api/preparation/dataset';
+import { dataTypeCodeMap, getFileFromMinIO, annotationBy, isStatus } from '@/views/dataset/util';
+import { tableImport } from '@/api/preparation/datafile';
+import Uploader from './uploader';
+import Previewer from './previewer';
+import Result from './result';
+
+const annotationByCode = annotationBy('code');
+
+// eslint-disable-next-line
+const path = require('path');
+
+// 当超过阈值时，将过滤条件放到外部展示
+const MAX_COLUMN_LENGTH = 12;
+
+export default {
+  name: 'TableImport',
+  components: {
+    Uploader,
+    Previewer,
+    UploadInline,
+    Result,
+  },
+  setup(props, ctx) {
+    const { $route, $router } = ctx.root;
+    const { params = {} } = $route;
+    // 需要接收数据集 id 和标注类型两个参数
+    const { datasetId, annotateType } = params;
+    const tableForm = ref(null);
+    const uploadRef = ref(null);
+
+    const fileTypeList = ['csv', 'xls'];
+
+    const ruleSteps = [
+      {
+        fileType: { required: true, message: '请选择文件类型', trigger: 'change' },
+        file: { required: true, message: '请选择文件', trigger: 'change' },
+      },
+    ];
+
+    const state = reactive({
+      active: 0,
+      form: {
+        fileType: 'csv',
+        file: null,
+        excludeHeader: true, // 默认不展示表头
+      },
+      columns: [],
+      data: [],
+      checkList: [],
+      loading: false,
+      error: null,
+      datasetInfo: {},
+    });
+
+    const rules = computed(() => ruleSteps[state.active]);
+
+    // 展示过滤器
+    const showFilter = computed(() => state.columns.length > MAX_COLUMN_LENGTH);
+
+    // 上传参数
+    const uploadParams = computed(() => ({
+      objectPath: `dataset/${datasetId}/origin`,
+    }));
+
+    const setState = (params) => Object.assign(state, params);
+    const setForm = (params) =>
+      setState({
+        form: {
+          ...state.form,
+          ...params,
+        },
+      });
+
+    const validateField = (field) => {
+      tableForm.value.validateField(field);
+    };
+
+    // 返回第一步
+    const prev = () => {
+      setForm({ file: null });
+      setState({ active: 0, data: [], columns: [] });
+    };
+
+    // 上传文档
+    const uploadFile = () => {
+      if (state.checkList.length === 0) {
+        Message.warning('至少选择一列');
+        return;
+      }
+      setState({ loading: true });
+      uploadRef.value.uploadByFile(state.form.file);
+    };
+
+    const uploadSuccess = (res) => {
+      const filePath = getFileFromMinIO(res)[0].url;
+
+      const params = {
+        datasetId,
+        fileName: path.basename(filePath),
+        filePath,
+        excludeHeader: state.form.excludeHeader,
+        mergeColumn: state.checkList.map((d) => state.columns.findIndex((col) => col === d)),
+      };
+      tableImport(params)
+        .then(() => {
+          setState({ active: 2 });
+        })
+        .finally(() => {
+          setState({ loading: false });
+        });
+    };
+
+    const uploadError = (err) => {
+      console.error(err);
+      setState({ loading: false });
+      Message.error(err.message || '上传文件失败');
+    };
+
+    // 更新 checkbox 值
+    const handleCheckChange = (values) => {
+      setState({
+        checkList: values,
+      });
+    };
+
+    const handlePreview = (file, fileType) => {
+      setState({ loading: true });
+      const fileReader = fileType === 'csv' ? csvReader : xlsReader;
+      fileReader(file)
+        .then(({ data, columns }) => {
+          setState({
+            active: 1,
+            columns,
+            data,
+          });
+        })
+        .finally(() => {
+          setState({ loading: false });
+        });
+    };
+
+    // 重定向到结果页
+    const directTo = () => {
+      const urlPrefix = annotationByCode(annotateType, 'urlPrefix');
+      $router.replace({ path: `/data/datasets/${urlPrefix}/${datasetId}` });
+    };
+
+    const finish = (datasetInfo) => {
+      setState({ datasetInfo });
+    };
+
+    // 列字段
+    const columns = computed(() => {
+      return uniq(state.columns).map((col) => {
+        return {
+          prop: col,
+          label: col,
+        };
+      });
+    });
+
+    const processStatus = computed(() =>
+      state.active === 2 && !isStatus(state.datasetInfo, 'IMPORTING') ? 'success' : 'process'
+    );
+
+    const tableData = computed(() => {
+      const list = state.data.slice(0, 10).map((d) => zipObject(state.columns, d));
+      const footer = zipObject(state.columns, [
+        `预览数 ${Math.min(state.data.length, 10)} / 总行数 ${state.data.length}`,
+      ]);
+      return [...list, footer];
+    });
+
+    onMounted(async () => {
+      if (!datasetId) {
+        $router.push({ path: '/data/datasets' });
+        throw new Error('数据不合法');
+      }
+      try {
+        // 获取数据集信息
+        const datasetInfo = await detail(datasetId);
+        Object.assign(state, {
+          datasetInfo,
+        });
+      } catch (err) {
+        Object.assign(state, {
+          error: new Error('当前数据集不存在，请重新输入'),
+          pageLoading: false,
+        });
+        return;
+      }
+      // 校验数据类型是否为表格
+      if (state.datasetInfo.dataType !== dataTypeCodeMap.TABLE) {
+        $router.push({ path: '/data/datasets' });
+        throw new Error('不支持该标注类型');
+      }
+    });
+
+    return {
+      state,
+      rules,
+      prev,
+      uploadFile,
+      uploadParams,
+      uploadSuccess,
+      uploadError,
+      handleCheckChange,
+      datasetId,
+      fileTypeList,
+      validateField,
+      setForm,
+      setState,
+      handlePreview,
+      tableForm,
+      columns,
+      tableData,
+      uploadRef,
+      processStatus,
+      directTo,
+      showFilter,
+      finish,
+    };
+  },
+};
+</script>
+<style lang="scss">
+@import '@/assets/styles/mixin.scss';
+@import '../style/common.scss';
+
+.dataset-columnFilter {
+  max-width: 600px;
+
+  .el-checkbox {
+    width: 20%;
+    margin-right: 0;
+
+    .el-checkbox__label {
+      max-width: 100px;
+      line-height: 16px;
+      vertical-align: middle;
+
+      @include text-overflow;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.el-form-item__tip {
+  position: absolute;
+  top: 100%;
+  left: 0;
+}
+
+.stepForm {
+  margin: 40px auto 20px;
+
+  ::v-deep .fileIcon {
+    font-size: 36px;
+  }
+
+  ::v-deep .image-title {
+    font-size: 16px;
+  }
+}
+</style>
diff --git a/webapp/src/views/dataset/tableImport/previewer.vue b/webapp/src/views/dataset/tableImport/previewer.vue
new file mode 100644
index 0000000..2076693
--- /dev/null
+++ b/webapp/src/views/dataset/tableImport/previewer.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="previewer">
+    <div class="extraRow flex flex-between mb-10">
+      <el-checkbox v-model="form.excludeHeader">不展示表头</el-checkbox>
+      <SearchBox
+        v-if="showFilter"
+        ref="searchBox"
+        :formItems="filterItems"
+        :initialValue="state.initialValue"
+        :handleFilter="handleFilter"
+        label-width="0px"
+        klass="dataset-columnFilter"
+        :popperAttrs="popperAttrs"
+        @change="handleChange"
+      >
+        <el-button slot="trigger" type="text" class="mr-40 fr">
+          选择列<i class="el-icon-arrow-down el-icon--right" />
+        </el-button>
+      </SearchBox>
+    </div>
+    <div v-if="!showFilter" class="checkRow">
+      <el-checkbox-group v-model="state.checkList" class="flex" @change="handleCheckChange">
+        <el-checkbox v-for="item in formItems" :key="item.value" :label="item.value" class="f1">
+          选择该列
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <BaseTable
+      :columns="columns"
+      :data="data"
+      :span-method="span"
+      border
+      header-row-class-name="previewerHeaderRow"
+      :cell-class-name="getCellClass"
+    />
+    <div class="tc" style="margin-top: 25px;">
+      <el-button type="default" @click="prev">
+        上一步
+      </el-button>
+      <el-button type="primary" :loading="loading" @click="onOk">
+        下一步
+      </el-button>
+    </div>
+    <el-divider />
+    <div class="app-page-form-steps-desc">
+      <h3>说明</h3>
+      <h4>不展示表头</h4>
+      <p>
+        程序默认读取表格首行信息作为表头，在转存为文本过程中默认过滤表头信息，如果需要保留表头，可以取消勾选
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, watch } from '@vue/composition-api';
+import BaseTable from '@/components/BaseTable';
+import SearchBox from '@/components/SearchBox';
+
+export default {
+  name: 'PreviewerTable',
+  components: {
+    BaseTable,
+    SearchBox,
+  },
+  inheritAttrs: false,
+  props: {
+    data: Array,
+    columns: Array,
+    checkList: Array,
+    prev: Function,
+    onOk: Function,
+    loading: Boolean,
+    form: Object,
+    showFilter: Boolean,
+    setState: Function,
+  },
+  setup(props, ctx) {
+    const { setState } = props;
+    const state = reactive({
+      checkList: props.checkList || [],
+      initialValue: {
+        columns: [],
+      },
+    });
+
+    const popperAttrs = {
+      placement: 'left-end',
+    };
+
+    const formItems = props.columns.map((d) => ({
+      label: d.label,
+      value: d.prop,
+    }));
+
+    const filterItems = [
+      {
+        prop: 'columns',
+        type: 'checkboxGroup',
+        options: formItems,
+      },
+    ];
+
+    const handleFilter = (values) => {
+      setState({ checkList: values.columns });
+    };
+
+    const getCellClass = ({ column }) => {
+      return state.checkList.includes(column.label) ? 'highlight' : '';
+    };
+
+    // eslint-disable-next-line
+    const span = ({ rowIndex, columnIndex }) => {
+      // 预览最多 10 条项目
+      if (rowIndex === Math.min(10, props.data.length - 1)) {
+        // 展示第一列，并设置 span
+        if (columnIndex === 0) {
+          return [1, props.columns.length];
+        }
+        // 其他列不展示
+        return [0, 0];
+      }
+    };
+
+    const handleChange = (...params) => {
+      const [columns] = params;
+      setState({ checkList: columns });
+    };
+
+    const handleCheckChange = (values) => {
+      ctx.emit('change', values);
+    };
+
+    watch(
+      () => props.checkList,
+      (next) => {
+        state.checkList = next;
+      }
+    );
+
+    return {
+      state,
+      getCellClass,
+      popperAttrs,
+      formItems,
+      filterItems,
+      span,
+      handleCheckChange,
+      handleFilter,
+      handleChange,
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+@import '@/assets/styles/variables.scss';
+
+.previewer {
+  ::v-deep .el-table {
+    .el-table__body {
+      td.highlight {
+        font-weight: 500;
+        color: #000;
+      }
+
+      tbody .el-table__row:last-child {
+        background-color: $imageBg;
+
+        td {
+          font-weight: inherit;
+          color: inherit;
+          text-align: center;
+        }
+      }
+    }
+
+    .previewerHeaderRow th {
+      background-color: $imageBg;
+    }
+  }
+
+  .checkRow {
+    border: 1px solid $borderColorBase;
+    border-bottom: none;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+
+    .el-checkbox {
+      position: relative;
+      margin-right: 0;
+      line-height: 48px;
+      text-align: center;
+
+      &.is-checked {
+        background-color: $primaryPlainBgColor;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          content: '';
+          background-color: $primaryColor;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/webapp/src/views/dataset/tableImport/result.vue b/webapp/src/views/dataset/tableImport/result.vue
new file mode 100644
index 0000000..379618b
--- /dev/null
+++ b/webapp/src/views/dataset/tableImport/result.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="tc">
+    <i :class="klass" style="font-size: 72px;"></i>
+    <h3>{{ state.loading ? '表格导入成功，执行转换中' : '文件转换完成' }}</h3>
+    <div style="margin-top: 40px;">
+      <el-button type="primary" @click="backToList">返回列表</el-button>
+      <el-button type="default" :loading="state.loading" @click="directTo">{{
+        state.loading ? '文件处理中' : '查看详情'
+      }}</el-button>
+    </div>
+    <div class="app-result-content">
+      <i class="mr-10 primary el-icon-timer" />
+      <span>文件上传完毕后，需要对文件进行解析、转换，请耐心等待</span>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, watch, onMounted, computed } from '@vue/composition-api';
+import cx from 'classnames';
+import { detail } from '@/api/preparation/dataset';
+import { isStatus } from '@/views/dataset/util';
+
+export default {
+  name: 'ImportTableResult',
+  props: {
+    directTo: Function,
+    datasetId: [String, Number],
+  },
+  setup(props, ctx) {
+    const { datasetId } = props;
+    const { $router } = ctx.root;
+
+    const state = reactive({
+      datasetInfo: {},
+      loading: false,
+    });
+
+    const backToList = () => {
+      $router.push({ path: '/data/datasets' });
+    };
+
+    const queryDatasetInfo = async () => {
+      const datasetInfo = await detail(datasetId);
+      Object.assign(state, { datasetInfo });
+    };
+
+    const klass = computed(() =>
+      cx('success', {
+        'el-icon-time': state.loading === true,
+        'el-icon-el-icon-circle-check': state.loading === false,
+      })
+    );
+
+    onMounted(() => {
+      Object.assign(state, { loading: true });
+      queryDatasetInfo();
+    });
+
+    watch(
+      () => state.datasetInfo,
+      (next) => {
+        if (isStatus(next, 'IMPORTING')) {
+          setTimeout(queryDatasetInfo, 3000);
+        } else {
+          Object.assign(state, { loading: false });
+          ctx.emit('finish', next);
+        }
+      }
+    );
+
+    return {
+      backToList,
+      klass,
+      state,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/views/dataset/tableImport/uploader.vue b/webapp/src/views/dataset/tableImport/uploader.vue
new file mode 100644
index 0000000..e732727
--- /dev/null
+++ b/webapp/src/views/dataset/tableImport/uploader.vue
@@ -0,0 +1,112 @@
+<template>
+  <div style="width: 600px;">
+    <el-form-item label="文件类型" prop="fileType">
+      <div class="image-select flex flex-wrap">
+        <div
+          v-for="item in fileTypeList"
+          :key="item"
+          :class="getImageKlass(item)"
+          @click="selectFileType(item)"
+        >
+          <div class="image-title">{{ item }}</div>
+          <IconFont :type="item" class="fileIcon" />
+          <span>
+            <i class="check-icon" />
+          </span>
+        </div>
+      </div>
+      <el-input :value="state.form.fileType" class="dn" />
+      <div class="el-form-item__tip"><el-link>没有数据？查看并下载预置模板</el-link></div>
+    </el-form-item>
+    <el-form-item label="上传文件" prop="file">
+      <upload-inline
+        :key="state.form.fileType"
+        ref="fileUploadForm"
+        action="fakeApi"
+        v-bind="uploadOptions"
+        :on-remove="fileRemove"
+        @fileChange="fileChange"
+      />
+    </el-form-item>
+    <div style="margin: 25px 0 0 100px;">
+      <el-button type="primary" :loading="loading" @click="preview">
+        下一步
+      </el-button>
+    </div>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+import { computed, ref } from '@vue/composition-api';
+import cx from 'classnames';
+
+import UploadInline from '@/components/UploadForm/inline';
+import { tableUploadProps } from '@/views/dataset/util';
+
+export default {
+  name: 'UploaderTable',
+  components: {
+    UploadInline,
+  },
+  props: {
+    fileTypeList: Array,
+    state: Object,
+    setState: Function,
+    setForm: Function,
+    tableForm: Object,
+    validateField: Function,
+    loading: Boolean,
+  },
+  setup(props, ctx) {
+    const { setForm, validateField } = props;
+    const fileUploadForm = ref(null);
+
+    const getImageKlass = (item) =>
+      cx(`image-select-item item-${item}`, {
+        'is-active': item === props.state.form.fileType,
+      });
+
+    const selectFileType = (item) => {
+      if (item === props.state.form.fileType) return;
+      setForm({ fileType: item, file: null });
+    };
+
+    const preview = () => {
+      props.tableForm.validate((isValid) => {
+        if (!isValid) return;
+        ctx.emit('preview', props.state.form.file.raw, props.state.form.fileType);
+      });
+    };
+
+    const fileChange = (file) => {
+      setForm({ file });
+      Vue.nextTick(() => {
+        validateField('file');
+      });
+    };
+
+    const fileRemove = () => {
+      setForm({ file: null });
+    };
+
+    const uploadOptions = computed(() => {
+      const accept = props.state.form.fileType === 'csv' ? '.csv' : '.xls,.xlsx';
+      return {
+        ...tableUploadProps,
+        accept,
+        hash: true,
+      };
+    });
+
+    return {
+      uploadOptions,
+      getImageKlass,
+      selectFileType,
+      preview,
+      fileChange,
+      fileRemove,
+      fileUploadForm,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/views/dataset/util.js b/webapp/src/views/dataset/util.js
deleted file mode 100644
index ac3fd85..0000000
--- a/webapp/src/views/dataset/util.js
+++ /dev/null
@@ -1,390 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-import { parseBbox, flatBbox, generateUuid, promisifyFileReader } from '@/utils';
-import { bucketName, bucketHost } from '@/utils/minIO';
-
-const jschardet = require("jschardet");
-
-// 解析 annotation 信息
-export const parseAnnotation = (annotationStr, labels) => {
-  let result = [];
-  try {
-    const annotation = JSON.parse(annotationStr);
-    result = annotation.map(d => {
-      return {
-        id: d.id || generateUuid(),
-        name: d.name || '',
-        data: {
-          score: d.score,
-          bbox: parseBbox(d.bbox),
-          track_id: d.track_id,
-          categoryId: d.category_id,
-          color: (labels.find(label => label.id === d.category_id) || {}).color || '#000',
-        },
-      };
-    });
-  } catch (err) {
-    console.error(`解析 annotation 错误`, err);
-  }
-
-  return result;
-};
-
-// 将 annotation 生成可拖拽的形式
-export const withExtent = annotations => {
-  return annotations.map(d => ({
-    ...d,
-    data: {
-      ...d.data,
-      extent: {
-        x0: d.data.bbox.x,
-        y0: d.data.bbox.y,
-        x1: d.data.bbox.x + d.data.bbox.width,
-        y1: d.data.bbox.y + d.data.bbox.height,
-      },
-    },
-  }));
-};
-
-// 将annotations 生成字符串
-export const stringifyAnnotations = (annotations) => {
-  const resultList = annotations.map(d => {
-    const { id, data, name = '' } = d;
-    const res = {
-      id: id || generateUuid(),
-      name,
-      area: 0,
-      iscrowd: 0,
-      segmentation: [[]],
-      bbox: flatBbox(data.bbox),
-      category_id: data.categoryId,
-      score: data.score,
-    };
-    if (data.track_id) {
-      res.track_id = data.track_id;
-    }
-    return res;
-  });
-  let resultString = '';
-  try {
-    resultString = JSON.stringify(resultList);
-  } catch (err) {
-    console.error('解析标注失败', err);
-  }
-  return resultString;
-};
-
-// 根据文件信息返回结果
-export const buildUrlItem = d => ({
-  url: `${bucketName}/${d.data.objectName}`,
-  ...(d.data.meta || {}), // 附加的信息，目前只包括 width, height
-});
-
-// 解析 minIO 返回的图片
-const buildImgUrl = (list = []) => {
-  return list.map(buildUrlItem);
-};
-
-// 解析minIO 返回的文本
-const buildTextUrl = (list = []) => {
-  return list.map(res => ({
-    url: `${bucketName}/${res.data.objectName}`,
-    ...(res.data.meta || {}),
-  }));
-};
-
-// 对文件进行自定义转换
-export const withDimensionFile = (result, file) => {
-  return new Promise((resolve) => {
-    const reader = new FileReader();
-    reader.addEventListener("load", () => {
-      const img = new Image();
-      img.onload = () => resolve({
-        ...result,
-        data: {
-          ...result.data,
-          meta: {
-            width: img.width,
-            height: img.height,
-          },
-        },
-      });
-      img.src = reader.result;
-    }, false);
-
-    reader.readAsDataURL(file.raw);
-  });
-};
-
-export const getImgFromMinIO = (res) => {
-  return buildImgUrl(res);
-};
-
-export const getTextFromMinIO = (res) => {
-  return buildTextUrl(res);
-};
-
-const defaultTransform = d => ({
-  id: d.id,
-  url: `${bucketHost}/${d.url}`,
-  datasetId: d.datasetId,
-});
-
-// 生成完成的图片链接
-export const getFullFileUrl = d => `${bucketHost}/${d.url}`;
-
-// 转化文件
-export const transformFiles = (rawFiles, callback) => {
-  return rawFiles.reduce((arr, cur) => {
-    let res = defaultTransform(cur);
-    if (typeof callback === 'function') {
-      res = { ...res, ...callback(cur) };
-    }
-    return arr.concat(res);
-  }, []);
-};
-
-// 转换单个文件
-export const transformFile = (rawFile, callback) => {
-  let res = defaultTransform(rawFile);
-  if (typeof callback === 'function') {
-    res = { ...res, ...callback(rawFile) };
-  }
-  return res;
-};
-
-// deprecated
-// 获取文件信息
-async function checkImg (file){
-  const fileUrl = getFullFileUrl(file);
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => resolve({
-      width: img.width,
-      height: img.height,
-      ...file,
-    });
-    img.onerror = (err) => reject(err);
-
-    img.src = fileUrl;
-  });
-}
-
-// deprecated
-// 上传文件之前加一层转换
-export const withDimensionFiles = async(files) => {
-  return Promise.all(files.map(file => checkImg(file)));
-};
-
-// 目标跟踪视频上传参数
-export const trackUploadProps = {
-  acceptSize: 1024,
-  accept: '.mp4,.avi,.mkv,.mov,.webm,.wmv',
-  listType: 'text',
-  limit: 1,
-  multiple: false,
-  showFileCount: false,
-};
-
-// context 配置
-export const labelsSymbol = Symbol('labels');
-export const enhanceSymbol = Symbol('enhance');
-
-// 数据集类型
-export const dataTypeMap = {
-  0: '图片',
-  1: '视频',
-  2: '文本',
-};
-
-export const dataTypeCodeMap = {
-  'IMAGE': 0,
-  'VIDEO': 1,
-  'TEXT': 2,
-};
-
-// 存储用户选择数据集场景（视觉/文本场景：0，医学场景：1）
-export const cacheDatasetType = (type) => localStorage.setItem('datasetListType', type);
-
-export const getDatasetType = () => {
-  let datasetListType;
-  try {
-    datasetListType = JSON.parse(localStorage.getItem('datasetListType'));
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-  return datasetListType;
-};
-
-// 文件状态
-export const fileTypeEnum = {
-  0: { label: '全部', abbr: '全部' },
-  101: { label: '未标注', abbr: '未标注' },
-  102: { label: '手动标注中', abbr: '手动标注中' },
-  103: { label: '自动标注完成', abbr: '自动完成' },
-  104: { label: '手动标注完成', abbr: '手动完成' },
-  105: { label: '未识别', abbr: '未识别'},
-  201: { label: '目标跟踪完成', abbr: '跟踪完成' },
-  301: { label: '未完成', abbr: '未完成'},
-  302: { label: '已完成', abbr: '已完成'},
-};
-export const fileCodeMap = {
-  'ALL': 0,
-  'UNANNOTATED': 101,
-  'MANUAL_ANNOTATING': 102,
-  'AUTO_ANNOTATED': 103,
-  'MANUAL_ANNOTATED': 104,
-  'UNRECOGNIZED': 105,
-  'TRACK_SUCCEED': 201,
-  'UNFINISHED': 301,
-  'FINISHED': 302,
-};
-
-export const annotationCodeMap = {
-  'ANNOTATE': 1,
-  'CLASSIFY': 2,
-  'TRACK': 5,
-  'TEXTCLASSIFY': 6,
-};
-
-export const annotationMap = {
-  1: { name: '目标检测', urlPrefix: 'annotate', component: 'AnnotateDataset' },
-  2: { name: '图像分类', urlPrefix: 'classify', component: 'Classify' },
-  // 3: { name: '行为分析', urlPrefix: 'analysis' },
-  // 4: { name: '异常检测', urlPrefix: 'exception' },
-  5: { name: '目标跟踪', urlPrefix: 'track', component: 'TrackDataset' },
-  6: { name: '文本分类', urlPrefix: 'textclassify', component: 'TextClassify'},
-};
-
-// 数据类型和标注类型的对应关系
-export const dataTypeAnnotateTypeMap = new Map()
-  .set(dataTypeCodeMap.VIDEO, annotationCodeMap.TRACK)
-  .set(dataTypeCodeMap.TEXT, annotationCodeMap.TEXTCLASSIFY);
-
-// 数据集状态
-export const datasetStatusMap = {
-  101: { name: '未标注', type: 'info' },
-  102: { name: '标注中', type: 'warning' },
-  103: { name: '自动标注中', type: 'danger' },
-  104: { name: '自动标注完成', type: '' },
-  105: { name: '标注完成', type: 'success' },
-  201: { name: '目标跟踪中', bgColor: '#409EFF', color: '#fff' },
-  202: { name: '目标跟踪完成', bgColor: '#409EFF', color: '#fff' },
-  203: { name: '目标跟踪失败', bgColor: '#409EFF', color: '#fff' },
-  301: { name: '未采样', bgColor: '#a7a7a7', color: '#fff' },
-  302: { name: '采样中', bgColor: '#606266', color: '#fff' },
-  303: { name: '采样失败', bgColor: '#606266', color: '#fff' },
-  401: { name: '数据增强中', bgColor: '#1890ff', color: '#fff' },
-  402: { name: '导入中', bgColor: '#606266', color: '#fff' },
-};
-export const statusCodeMap = {
-  101: 'UNANNOTATED', // 未标注
-  102: 'ANNOTATING',
-  103: 'AUTO_ANNOTATING',
-  104: 'AUTO_ANNOTATED',
-  105: 'ANNOTATED',
-  201: 'TRACKING',
-  202: 'TRACK_SUCCEED',
-  203: 'TRACK_FAILED',
-  301: 'UNSAMPLED',
-  302: 'SAMPLING',
-  303: 'SAMPLE_FAILED',
-  401: 'ENHANCING',
-  402: 'IMPORTING',
-};
-
-// 文本数据集状态
-export const textStatusMap = {
-  101: { name: '未标注', 'color': '#FFFFFF'},
-  103: { name: '自动标注完成', 'color': '#468CFF' },
-  104: { name: '手动标注完成', 'color': '#FF9943' },
-  105: { name: '未识别', 'color': '#FFFFFF'},
-};
-
-export const textFinishedMap = {
-  103: '自动标注完成',
-  104: '手动标注完成',
-};
-
-export const textUnfinishedMap = {
-  101: '未标注',
-  105: '未识别',
-};
-
-// 标注精度
-export const annotationProgressMap = {
-  finished: '已完成',
-  unfinished: '未完成',
-  autoFinished: '自动标注完成',
-  finishAutoTrack: '目标跟踪完成',
-  annotationNotDistinguishFile: '未识别',
-};
-
-export const decompressProgressMap = {
-  0: '等待中',
-  1: '解压中',
-  2: '解压完成',
-  3: '解压失败',
-};
-
-export const publishStateMap = {
-  4: 'PUBLISHING',
-};
-
-// 发布中
-export const isPublishDataset = row => publishStateMap[row.dataConversion] === 'PUBLISHING';
-
-// 数据增强类型
-export const dataEnhanceMap = {
-  1: '',
-  2: 'success',
-  3: 'info',
-  4: 'warning',
-};
-
-// 根据value取key
-export const findKey = (value, data, compare = (a, b) => a === b) =>
-{
-  return Object.keys(data).find(k => compare(data[k], value));
-};
-
-// TODO: 覆盖更多 case? 
-const charsetMap = {
-  'gbk': ['windows-1253'],
-  'utf-8': ['ascii', 'windows-1252'],
-};
-
-// 读取文本文件，解决中文文本字符编码乱码
-export const readTxt = async (url, encoding) => {
-  const result = await fetch(url);
-  const blob = await result.blob();
-  const txt = await blob.text();
-
-  const chardet = jschardet.detect(txt);
-  let nextEncoding;
-  if(chardet.encoding) {
-    for(const [key, arr] of Object.entries(charsetMap)) {
-      if(arr.includes(chardet.encoding)) {
-        nextEncoding = key;
-        break;
-      }
-    }
-  }
-  const text = await promisifyFileReader(blob, encoding || nextEncoding || 'utf-8');
-  return text;
-};
diff --git a/webapp/src/views/dataset/util/index.js b/webapp/src/views/dataset/util/index.js
new file mode 100644
index 0000000..d5ab31b
--- /dev/null
+++ b/webapp/src/views/dataset/util/index.js
@@ -0,0 +1,583 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { parseBbox, flatBbox, generateUuid, pos2Array, rawArr2Pos } from '@/utils';
+import { isNil, pick } from 'lodash';
+import { bucketName, bucketHost } from '@/utils/minIO';
+
+const assert = require('assert');
+
+// 标注默认颜色/填充色
+export const defaultColor = 'rgba(102, 181, 245, 1)';
+export const defaultFill = 'rgba(102, 181, 245, 0.1)';
+
+// 将 annotation 生成可拖拽的形式
+export const withExtent = (annotations) => {
+  return annotations.map((d) => ({
+    ...d,
+    data: {
+      ...d.data,
+      extent: {
+        x0: d.data.bbox.x,
+        y0: d.data.bbox.y,
+        x1: d.data.bbox.x + d.data.bbox.width,
+        y1: d.data.bbox.y + d.data.bbox.height,
+      },
+    },
+  }));
+};
+
+// TODO: 解析 annotation 信息
+export const parseAnnotation = (annotationStr, labels) => {
+  let result = [];
+  let isBbox = false;
+  try {
+    const annotation = JSON.parse(annotationStr);
+    result = annotation.map((d) => {
+      const data = {
+        score: d.score,
+        bbox: parseBbox(d.bbox),
+        categoryId: d.category_id,
+        color: (labels.find((label) => label.id === d.category_id) || {}).color || '#000',
+      };
+      if (d.segmentation) {
+        data.points = d.segmentation.map(rawArr2Pos);
+      }
+      if (d.track_id) {
+        data.track_id = d.track_id;
+      }
+      if (d.bbox) {
+        data.bbox = parseBbox(d.bbox);
+        isBbox = true;
+      }
+
+      return {
+        id: d.id || generateUuid(),
+        name: d.name || '',
+        data,
+      };
+    });
+  } catch (err) {
+    console.error(`解析 annotation 错误`, err);
+  }
+
+  return isBbox ? withExtent(result) : result;
+};
+
+// TODO: 将annotations 生成字符串
+export const stringifyAnnotations = (annotations) => {
+  const resultList = annotations.map((d) => {
+    const { id, data = {}, name = '' } = d;
+    const res = {
+      id: id || generateUuid(),
+      name,
+      category_id: data.categoryId,
+      score: data.score,
+    };
+    // 分割
+    if (!isNil(data.points)) {
+      res.segmentation = data.points.map(pos2Array);
+    }
+    // 检测
+    if (!isNil(data.bbox)) {
+      res.bbox = flatBbox(data.bbox);
+    }
+    // 跟踪
+    if (data.track_id) {
+      res.track_id = data.track_id;
+    }
+    return res;
+  });
+  let resultString = '';
+  try {
+    resultString = JSON.stringify(resultList);
+  } catch (err) {
+    console.error('解析标注失败', err);
+  }
+  return resultString;
+};
+
+// 根据文件信息返回结果
+export const buildUrlItem = (d) => ({
+  url: `${bucketName}/${d.data.objectName}`,
+  ...(d.data.meta || {}), // 附加的信息，图片包括 width, height
+});
+
+// 解析 minIO 返回的图片
+const buildFileUrl = (list = []) => {
+  return list.map(buildUrlItem);
+};
+
+// 对文件进行自定义转换
+export const withDimensionFile = (result, file) => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.addEventListener(
+      'load',
+      () => {
+        const img = new Image();
+        img.onload = () =>
+          resolve({
+            ...result,
+            data: {
+              ...result.data,
+              meta: {
+                width: img.width,
+                height: img.height,
+              },
+            },
+          });
+        img.src = reader.result;
+      },
+      false
+    );
+
+    reader.readAsDataURL(file.raw);
+  });
+};
+
+export const getFileFromMinIO = (res) => {
+  return buildFileUrl(res);
+};
+
+const defaultTransform = (d) => ({
+  id: d.id,
+  url: `${bucketHost}/${d.url}`,
+  datasetId: d.datasetId,
+});
+
+// 生成完成的图片链接
+export const getFullFileUrl = (d) => `${bucketHost}/${d.url}`;
+
+// 转化文件
+export const transformFiles = (rawFiles, callback) => {
+  return rawFiles.reduce((arr, cur) => {
+    let res = defaultTransform(cur);
+    if (typeof callback === 'function') {
+      res = { ...res, ...callback(cur) };
+    }
+    return arr.concat(res);
+  }, []);
+};
+
+// 转换单个文件
+export const transformFile = (rawFile, callback) => {
+  let res = defaultTransform(rawFile);
+  if (typeof callback === 'function') {
+    res = { ...res, ...callback(rawFile) };
+  }
+  return res;
+};
+
+// deprecated
+// 获取文件信息
+async function checkImg(file) {
+  const fileUrl = getFullFileUrl(file);
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () =>
+      resolve({
+        width: img.width,
+        height: img.height,
+        ...file,
+      });
+    img.onerror = (err) => reject(err);
+
+    img.src = fileUrl;
+  });
+}
+
+// deprecated
+// 上传文件之前加一层转换
+export const withDimensionFiles = async (files) => {
+  return Promise.all(files.map((file) => checkImg(file)));
+};
+
+// 单文件上传参数
+export const singleUploadProps = {
+  listType: 'text',
+  limit: 1,
+  multiple: false,
+  showFileCount: false,
+};
+
+export const trackUploadProps = {
+  ...singleUploadProps,
+  acceptSize: 1024,
+  accept: '.mp4,.avi,.mkv,.mov,.webm,.wmv',
+};
+
+export const tableUploadProps = {
+  ...singleUploadProps,
+  acceptSize: 5,
+  accept: '.csv,.xls,.xlsx',
+};
+
+// context 配置
+export const labelsSymbol = Symbol('labels');
+export const enhanceSymbol = Symbol('enhance');
+
+// 数据集组别
+export const datasetCategoryMap = {
+  REGULAR: 0,
+  PRESET: 2,
+};
+
+export const isPresetDataset = (code) => {
+  if (Number.isNaN(Number(code))) {
+    return false;
+  }
+  return Number(code) === datasetCategoryMap.PRESET;
+};
+
+// 数据集类型
+export const dataTypeMap = {
+  0: '图片',
+  1: '视频',
+  2: '文本',
+  3: '表格',
+  4: '音频',
+  100: '自定义',
+};
+
+export const dataTypeCodeMap = {
+  IMAGE: 0,
+  VIDEO: 1,
+  TEXT: 2,
+  TABLE: 3,
+  AUDIO: 4,
+  CUSTOM: 100,
+};
+
+// 标注类型码
+export const annotationCodeMap = {
+  ANNOTATE: 1,
+  CLASSIFY: 2,
+  TRACK: 5,
+  TEXTCLASSIFY: 6,
+  TEXTSEGMENTATION: 9,
+  SEGMENTATION: 7,
+  AUDIOCLASSIFY: 8,
+  SPEECHRECOGNITION: 11,
+  CUSTOM: 100,
+};
+
+// 标签组
+export const labelGroupTypeMap = {
+  VISUAL: { label: '视觉', value: 0 },
+  TEXT: { label: '文本', value: 1 },
+  TABLE: { label: '表格', value: 2 },
+  AUDIO: { label: '音频', value: 4 },
+};
+
+// 将对象转为数组
+export const transformMapToList = (raw) => {
+  return Object.keys(raw).map((key) => ({
+    label: dataTypeMap[key],
+    value: key,
+    disabled: false,
+  }));
+};
+
+// 存储用户选择数据集场景（视觉/文本场景：0，医学场景：1）
+export const cacheDatasetType = (type) => localStorage.setItem('datasetListType', type);
+
+export const getDatasetType = () => {
+  let datasetListType;
+  try {
+    datasetListType = JSON.parse(localStorage.getItem('datasetListType'));
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+  return datasetListType;
+};
+
+// 文件状态
+export const fileTypeEnum = {
+  0: { label: '全部', abbr: '全部' },
+  101: { label: '未标注', abbr: '未标注' },
+  102: { label: '手动标注中', abbr: '手动标注中' },
+  103: { label: '自动标注完成', abbr: '自动完成' },
+  104: { label: '手动标注完成', abbr: '手动完成' },
+  105: { label: '未识别', abbr: '未识别' },
+  201: { label: '目标跟踪完成', abbr: '跟踪完成' },
+  301: { label: '未完成', abbr: '未完成' },
+  302: { label: '已完成', abbr: '已完成' },
+};
+export const fileCodeMap = {
+  ALL: 0,
+  UNANNOTATED: 101,
+  MANUAL_ANNOTATING: 102,
+  AUTO_ANNOTATED: 103,
+  MANUAL_ANNOTATED: 104,
+  UNRECOGNIZED: 105,
+  TRACK_SUCCEED: 201,
+  UNFINISHED: 301,
+  FINISHED: 302,
+};
+
+// 自动标注白名单
+const { ANNOTATE, CLASSIFY, TRACK, TEXTCLASSIFY } = annotationCodeMap;
+export const annotationWhitelist = {
+  auto: [ANNOTATE, CLASSIFY, TRACK, TEXTCLASSIFY], // 自动标注按钮数据类型白名单
+  reAuto: [ANNOTATE, CLASSIFY, TRACK], // 重新自动标注数据类型白名单
+};
+
+// TODO：key 值暂时未用到
+export const annotationMap = {
+  101: {
+    name: '图像分类',
+    type: 'imageClassify',
+    urlPrefix: 'classify',
+    component: 'Classify',
+    code: 2,
+  },
+  102: {
+    name: '目标检测',
+    type: 'targetDetection',
+    urlPrefix: 'annotate',
+    component: 'AnnotateDataset',
+    code: 1,
+  },
+  103: {
+    name: '语义分割',
+    type: 'segmentation',
+    urlPrefix: 'segmentation',
+    component: 'Segmentation',
+    code: 7,
+  },
+  201: {
+    name: '目标跟踪',
+    type: 'objectTracking',
+    urlPrefix: 'track',
+    component: 'TrackDataset',
+    code: 5,
+  },
+  301: {
+    name: '文本分类',
+    type: 'textClassify',
+    urlPrefix: 'text/list',
+    component: 'TextClassify',
+    code: 6,
+  },
+  302: {
+    name: '中文分词',
+    type: 'textSegmentation',
+    urlPrefix: 'text/list',
+    component: 'TextSegmentation',
+    code: 9,
+  },
+  303: { name: '命名实体识别', type: 'ner', urlPrefix: 'text/list', component: 'NER', code: 10 },
+  401: {
+    name: '音频分类',
+    type: 'audioClassify',
+    urlPrefix: 'audio/list',
+    component: 'AudioClassify',
+    code: 8,
+  },
+  402: {
+    name: '语音识别',
+    type: 'speechRecognition',
+    urlPrefix: 'audio/list',
+    component: 'SpeechRecognition',
+    code: 11,
+  },
+  10001: { name: '自定义', type: 'custom', urlPrefix: 'custom', component: 'Custom', code: 100 },
+};
+
+// 数据类型: 标注类型 1对多
+const dataAnnotationMap = {
+  0: [101, 102, 103], // 图像
+  1: [201], // 视频
+  2: [301, 302, 303], // 文本
+  3: [301, 302, 303], // 表格
+  4: [401, 402], // 音频
+  100: [10001], // 自定义数据类型：标注类型
+};
+
+// 对数据类型：标注类型扩展，获取对应的数据code
+export const extDataAnnotationByCode = (dataType) => {
+  const annotionCodeList = dataAnnotationMap[dataType];
+  assert(annotionCodeList, '数据类型不支持');
+  return annotionCodeList.map((d) => annotationMap[d].code);
+};
+
+// 根据 code 编码放回标注类型
+export const annotationBy = (valueBy) => (value, key) => {
+  const filterItems = Object.values(annotationMap).filter((d) => d[valueBy] === value);
+  // 区分类型（是否唯一）
+  if (valueBy === 'code') {
+    const item = filterItems[0];
+    if (isNil(item)) return item;
+    return key ? item[key] || '' : item;
+  }
+  // 基于数据类型获取内容
+  if (valueBy === 'dataType') {
+    const dataTypeKey = Object.keys(dataAnnotationMap).find((d) => Number(d) === value);
+    if (dataTypeKey) {
+      const items = [];
+      const dataTypeValues = dataAnnotationMap[dataTypeKey];
+      for (const [key, value] of Object.entries(annotationMap)) {
+        if (dataTypeValues.includes(Number(key))) {
+          items.push(value);
+        }
+      }
+      return items;
+    }
+  }
+  return key ? filterItems.map((d) => d[key] || '') : filterItems;
+};
+
+export const annotationList = Object.keys(annotationMap).map((d) => ({
+  label: annotationMap[d].name,
+  value: annotationMap[d].code,
+}));
+
+// 数据集状态
+export const datasetStatusMap = {
+  101: { name: '未标注', status: 'UNANNOTATED', type: 'info' },
+  102: { name: '标注中', status: 'ANNOTATING', type: 'warning' },
+  103: { name: '自动标注中', status: 'AUTO_ANNOTATING', type: 'danger', progressColor: '#52C41A' },
+  104: { name: '自动标注完成', status: 'AUTO_ANNOTATED', type: '' },
+  105: { name: '标注完成', status: 'ANNOTATED', type: 'success' },
+  201: { name: '目标跟踪中', status: 'TRACKING', bgColor: '#409EFF', color: '#fff' },
+  202: { name: '目标跟踪完成', status: 'TRACK_SUCCEED', bgColor: '#409EFF', color: '#fff' },
+  203: { name: '目标跟踪失败', status: 'TRACK_FAILED', bgColor: '#409EFF', color: '#fff' },
+  301: { name: '未采样', status: 'UNSAMPLED', bgColor: '#a7a7a7', color: '#fff' },
+  302: {
+    name: '采样中',
+    status: 'SAMPLING',
+    progressColor: '#606266',
+    bgColor: '#606266',
+    color: '#fff',
+  },
+  303: { name: '采样失败', status: 'SAMPLE_FAILED', bgColor: '#606266', color: '#fff' },
+  401: { name: '数据增强中', status: 'ENHANCING', bgColor: '#1890ff', color: '#fff' },
+  402: {
+    name: '导入中',
+    status: 'IMPORTING',
+    progressColor: '#606266',
+    bgColor: '#606266',
+    color: '#fff',
+  },
+};
+
+// 筛选常见的标注类型
+export const rankDatasetStatusMap = pick(datasetStatusMap, [101, 102, 104, 105, 202]);
+
+export const isStatus = (row, code) => datasetStatusMap[row.status]?.status === code;
+
+export const isIncludeStatus = (row, codeArr) =>
+  codeArr.includes(datasetStatusMap[row.status]?.status);
+
+// 是否展示标签组
+export const enableLabelGroup = (code) =>
+  ![
+    annotationCodeMap.TEXTSEGMENTATION,
+    annotationCodeMap.SPEECHRECOGNITION,
+    annotationCodeMap.CUSTOM,
+  ].includes(code);
+
+// 转换OFRecord只支持图像分类
+export const showOfRecord = (code) => annotationCodeMap.CLASSIFY === code;
+
+// 文本数据集状态
+export const textStatusMap = {
+  101: { name: '未标注', color: '#FFFFFF' },
+  103: { name: '自动标注完成', color: '#468CFF' },
+  104: { name: '手动标注完成', color: '#FF9943' },
+  105: { name: '未识别', color: '#FFFFFF' },
+};
+
+export const textFinishedMap = {
+  103: '自动标注完成',
+  104: '手动标注完成',
+};
+
+export const textUnfinishedMap = {
+  101: '未标注',
+  105: '未识别',
+};
+
+// 标注精度
+export const annotationProgressMap = {
+  finished: '已完成',
+  unfinished: '未完成',
+  autoFinished: '自动标注完成',
+  finishAutoTrack: '目标跟踪完成',
+  annotationNotDistinguishFile: '未识别',
+};
+
+export const decompressProgressMap = {
+  0: '等待中',
+  1: '解压中',
+  2: '解压完成',
+  3: '解压失败',
+};
+
+export const publishStateMap = {
+  4: 'PUBLISHING',
+};
+
+// 发布中
+export const isPublishDataset = (row) => publishStateMap[row.dataConversion] === 'PUBLISHING';
+
+// 自定义数据类型的数据集
+export const isCustomDataset = (row) => annotationCodeMap.CUSTOM === row.annotateType;
+
+// 数据增强类型
+export const dataEnhanceMap = {
+  1: '',
+  2: 'success',
+  3: 'info',
+  4: 'warning',
+};
+
+// 根据value取key
+export const findKey = (value, data, compare = (a, b) => a === b) => {
+  return Object.keys(data).find((k) => compare(data[k], value));
+};
+
+// 根据扩展名来确定文件类型
+export const getFileType = (ext) => {
+  let fileType = ext;
+  const imgReg = {
+    reg: /^(jpg|jpeg|bmp|png)$/,
+    result: 'img',
+  };
+  const radioReg = {
+    reg: /^(mp3|wav|wma|aac)$/,
+    result: 'radio',
+  };
+  const videoReg = {
+    reg: /^(mp4|avi|mkv|mov|webm|wmv)$/,
+    result: 'video',
+  };
+  for (const r of [imgReg, radioReg, videoReg]) {
+    if (r.reg.test(ext)) {
+      fileType = r.result;
+      break;
+    }
+  }
+  return fileType;
+};
+
+// 根据扩展名返回对应的图标 其他返回通用file图标
+export const getIcon = (ext) => {
+  const reg = /^(mp4|avi|mkv|mov|wmv|bmp|jpeg|jpg|png|txt|zip|dir|mp3)$/;
+  return reg.test(ext) ? ext : 'file';
+};
diff --git a/webapp/src/views/dataset/util/tableReader.js b/webapp/src/views/dataset/util/tableReader.js
new file mode 100644
index 0000000..324afeb
--- /dev/null
+++ b/webapp/src/views/dataset/util/tableReader.js
@@ -0,0 +1,51 @@
+import PapaParse from 'papaparse';
+import { read, utils } from 'xlsx';
+import { promisifyFileReader } from '@/utils';
+
+export const csvReader = (file) => {
+  return promisifyFileReader(file, 'utf-8').then((raw) => {
+    const { data } = PapaParse.parse(raw);
+    const columns = data[0];
+    const parsed = data.slice(1);
+    return { data: parsed, columns };
+  });
+};
+
+function get_header_row(sheet) {
+  const headers = [];
+  // sheet['!ref']表示所有单元格的范围，例如从A1到F8则记录为 A1:F8
+  const range = utils.decode_range(sheet['!ref']);
+  // 从第一行开始
+  const R = range.s.r;
+  // 按列进行数据遍历
+  for (let C = range.s.c; C <= range.e.c; C += 1) {
+    // 查找第一行中的单元格
+    const cell = sheet[utils.encode_cell({ c: C, r: R })];
+    if (cell && cell.t) {
+      const hdr = utils.format_cell(cell);
+      headers.push(hdr);
+    }
+  }
+  return headers;
+}
+
+export const xlsReader = (file) => {
+  const reader = new FileReader();
+  return new Promise((resolve, reject) => {
+    reader.onload = (e) => {
+      const bytes = e.target.result;
+      const workbook = read(bytes, { type: 'binary' });
+      // 获取第一个 sheet
+      const wsname = workbook.SheetNames[0];
+      const ws = workbook.Sheets[wsname];
+      const data = utils.sheet_to_json(ws, { header: 1 });
+      // 获取列信息
+      const columns = get_header_row(ws);
+      resolve({ data: data.slice(1), columns });
+    };
+    reader.onerror = (e) => {
+      reject(new Error(e));
+    };
+    reader.readAsBinaryString(file);
+  });
+};
diff --git a/webapp/src/views/dataset/version/actions.vue b/webapp/src/views/dataset/version/actions.vue
index c715a2d..93c8323 100644
--- a/webapp/src/views/dataset/version/actions.vue
+++ b/webapp/src/views/dataset/version/actions.vue
@@ -1,27 +1,23 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="info-table-action-cell">
     <el-button v-if="!isCurrent" type="text" @click="setCurrent">设置为当前版本</el-button>
-    <el-popover
-      placement="top"
-      width="200"
-      trigger="click"
-    >
+    <el-popover placement="top" width="200" trigger="click">
       <div>
         <TableTooltip
           :keys="labels"
@@ -33,35 +29,56 @@
       </div>
       <el-button slot="reference" type="text">详情</el-button>
     </el-popover>
-    <el-button v-if="isCurrent && !publishing" type="text" @click="gotoDetail">查看标注</el-button>
-    <el-popconfirm
-      v-if="!isCurrent"
-      popper-class="reannotate-popconfirm"
-      title="确定删除这个版本吗？"
-      @onConfirm="deleteItem"
+    <el-button v-if="isCurrent && !publishing && !isCustom" type="text" @click="gotoDetail"
+      >查看标注</el-button
     >
-      <el-button slot="reference" type="text">删除</el-button>
-    </el-popconfirm>
-    <el-button v-if="!publishing" v-click-once type="text" @click="download(row)">
-      导出
-    </el-button>
-    <el-tooltip v-else content="文件生成中，请稍后" placement="top" :open-delay="400">
-      <el-button class="disabled-button" type="text">
-        导出
+    <el-button v-if="isPreset" type="text" @click="convert(row)">生成预置数据集</el-button>
+    <el-dropdown placement="bottom">
+      <el-button type="text" style="margin-left: 10px;" @click.stop="() => {}">
+        更多<i class="el-icon-arrow-down el-icon--right" />
       </el-button>
-    </el-tooltip>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-if="!isCurrent" @click.native="deleteItem">
+          <el-button type="text">删除</el-button>
+        </el-dropdown-item>
+        <el-dropdown-item v-click-once :disabled="publishing" @click.native="download(row)">
+          <el-button v-if="!publishing" type="text">
+            导出
+          </el-button>
+          <el-tooltip v-else content="文件生成中，请稍后" placement="top" :open-delay="400">
+            <el-button class="disabled-button" type="text">
+              导出
+            </el-button>
+          </el-tooltip>
+        </el-dropdown-item>
+        <el-dropdown-item
+          v-if="!isOfRecord && showOfRecord(row.annotateType)"
+          @click.native="onShiftOfRecord"
+        >
+          <el-button type="text">转换OFRecord</el-button>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
   </div>
 </template>
 
 <script>
 import { computed } from '@vue/composition-api';
-import { Message } from 'element-ui';
+import { Message, MessageBox } from 'element-ui';
 
 import { toFixed, downloadZipFromObjectPath } from '@/utils';
-import { datasetStatusMap, annotationMap, isPublishDataset } from '@/views/dataset/util';
-import { toggleVersion, deleteVersion } from '@/api/preparation/dataset';
+import {
+  datasetStatusMap,
+  isPublishDataset,
+  annotationBy,
+  dataTypeCodeMap,
+  showOfRecord,
+} from '@/views/dataset/util';
+import { toggleVersion, deleteVersion, shiftOfRecord } from '@/api/preparation/dataset';
 import { TableTooltip } from '@/hooks/tooltip';
 
+const annotationByCode = annotationBy('code');
+
 export default {
   name: 'Actions',
   components: {
@@ -73,14 +90,18 @@ export default {
       default: () => ({}),
     },
     actions: Object,
+    showConvert: Function,
   },
   setup(props, ctx) {
-    const { actions } = props;
+    const { actions, showConvert } = props;
     const { $router } = ctx.root;
-    
+
     // 发布中
     const publishing = computed(() => isPublishDataset(props.row));
     const isCurrent = computed(() => !!props.row.isCurrent);
+    const isPreset = computed(() => props.row.presetFlag);
+    const isOfRecord = computed(() => props.row.isOfRecord);
+    const isCustom = computed(() => props.row.dataType === dataTypeCodeMap.CUSTOM);
     const title = computed(() => `${props.row.name}(${props.row.versionName})`);
 
     const calculate = (vo = {}) => {
@@ -94,14 +115,18 @@ export default {
     const progressCount = props.row.progressVO ? calculate(props.row.progressVO) : '--';
 
     const list = {
-      status: { label: `状\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0态`, value: datasetStatusMap[props.row.status].name },
+      status: {
+        label: `状\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0态`,
+        value: datasetStatusMap[props.row.status].name,
+      },
       fileCount: { label: '文件数量', value: props.row.fileCount },
       progressVO: { label: '标注进度', value: progressCount },
     };
 
     const gotoDetail = () => {
-      const {annotateType} = props.row;
-      $router.push({ path: `/data/datasets/${annotationMap[annotateType].urlPrefix}/${props.row.datasetId}` });
+      const { annotateType } = props.row;
+      const urlPrefix = annotationByCode(annotateType, 'urlPrefix');
+      $router.push({ path: `/data/datasets/${urlPrefix}/${props.row.datasetId}` });
     };
 
     // 设置为当前版本
@@ -116,26 +141,46 @@ export default {
     };
 
     const deleteItem = () => {
-      deleteVersion({
-        datasetId: props.row.datasetId,
-        versionName: props.row.versionName,
+      MessageBox.confirm('是否要删除此版本?', '请确认', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
       }).then(() => {
-        actions.refresh();
-        Message.success('删除版本成功');
+        deleteVersion({
+          datasetId: props.row.datasetId,
+          versionName: props.row.versionName,
+        }).then(() => {
+          actions.refresh();
+          Message.success('删除版本成功');
+        });
       });
     };
 
     const download = (row) => {
       const prefixUrl = `dataset/${row.datasetId}/versionFile/${row.versionName}`;
-      return downloadZipFromObjectPath(
-        prefixUrl,
-        `${row.datasetId}_${row.versionName}.zip`,
-        {
-          fileName: file => (file.name.replace(`${prefixUrl}/`, '')),
-          filter: result => result.filter(item => {
-            return ['annotation', 'origin'].some(str => item.name.startsWith(`${prefixUrl}/${str}`));
+      return downloadZipFromObjectPath(prefixUrl, `${row.datasetId}_${row.versionName}.zip`, {
+        fileName: (file) => file.name.replace(`${prefixUrl}/`, ''),
+        filter: (result) =>
+          result.filter((item) => {
+            return ['annotation', 'origin'].some((str) =>
+              item.name.startsWith(`${prefixUrl}/${str}`)
+            );
           }),
-        });
+      });
+    };
+
+    const convert = (row) => {
+      return showConvert(row);
+    };
+
+    const onShiftOfRecord = () => {
+      shiftOfRecord({
+        datasetId: props.row.datasetId,
+        versionName: props.row.versionName,
+      }).then(() => {
+        actions.refresh();
+        Message.success('开始生成OFRecord');
+      });
     };
 
     const valueAccessor = (key, idx, data) => data[key].value || '--';
@@ -144,15 +189,21 @@ export default {
     return {
       publishing,
       isCurrent,
+      isPreset,
+      isCustom,
+      isOfRecord,
       title,
       labels: Object.keys(list),
       list,
       gotoDetail,
       deleteItem,
       setCurrent,
+      convert,
       keyAccessor,
       valueAccessor,
       download,
+      onShiftOfRecord,
+      showOfRecord,
     };
   },
 };
diff --git a/webapp/src/views/dataset/version/convert.vue b/webapp/src/views/dataset/version/convert.vue
new file mode 100644
index 0000000..648448b
--- /dev/null
+++ b/webapp/src/views/dataset/version/convert.vue
@@ -0,0 +1,97 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <el-form ref="form" :model="state.model" :rules="rules" label-width="100px">
+    <el-form-item label="数据集名称" prop="name">
+      <el-input v-model="state.model.name" />
+    </el-form-item>
+    <el-form-item label="版本号" prop="versionName">
+      <el-input disabled :value="state.model.versionName" />
+    </el-form-item>
+    <el-form-item label="数据集描述" prop="versionNote">
+      <el-input
+        v-model="state.model.versionNote"
+        type="textarea"
+        placeholder="数据集描述长度不能超过100字"
+        maxlength="100"
+        rows="3"
+        show-word-limit
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { pick } from 'lodash';
+
+import { reactive, ref, watch } from '@vue/composition-api';
+import { validateName } from '@/utils/validate';
+import { convertPreset } from '@/api/preparation/dataset';
+
+export default {
+  name: 'Convert',
+  props: {
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const form = ref(null);
+    const rules = {
+      name: [
+        { required: true, message: '请输入预置数据集名称', trigger: ['change', 'blur'] },
+        { validator: validateName, trigger: ['blur'] },
+      ],
+      remark: [{ required: false, message: '请输入数据集描述信息', trigger: 'blur' }],
+    };
+
+    const defaultModel = pick(props.row, ['datasetId', 'name', 'versionName', 'versionNote']);
+
+    const state = reactive({
+      model: { ...defaultModel },
+    });
+
+    const doConvert = () => {
+      return convertPreset(form.value.model);
+    };
+
+    const resetModel = () => {
+      Object.assign(state, {
+        model: { ...defaultModel },
+      });
+    };
+
+    watch(
+      () => props.row,
+      (next) => {
+        Object.assign(state, {
+          model: pick(next, ['datasetId', 'name', 'versionName', 'versionNote']),
+        });
+      }
+    );
+
+    return {
+      rules,
+      state,
+      form,
+      doConvert,
+      resetModel,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/views/dataset/version/index.vue b/webapp/src/views/dataset/version/index.vue
index e8fdbf6..136cfc3 100644
--- a/webapp/src/views/dataset/version/index.vue
+++ b/webapp/src/views/dataset/version/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
@@ -23,53 +23,113 @@
       :params="queryParams"
       :actionRef="actionRefFn"
     />
+    <BaseModal
+      :visible="state.modal.show"
+      :loading="state.modal.loading"
+      title="生成预置数据集"
+      @change="handleCancel"
+      @ok="handleConvert"
+    >
+      <Convert ref="convertForm" :row="state.modal.row" />
+    </BaseModal>
   </div>
 </template>
 
 <script>
-import { createElement, ref } from '@vue/composition-api';
+import { h, ref, reactive } from '@vue/composition-api';
 import InfoTable from '@/components/InfoTable';
+import BaseModal from '@/components/BaseModal';
+import { getConvertInfo } from '@/api/preparation/dataset';
+import { Message, MessageBox } from 'element-ui';
 
 import api from '@/utils/request';
+import { API_MODULE_NAME } from '@/config';
 import { parseTime } from '@/utils';
 import Actions from './actions';
-import { dataTypeMap, annotationMap } from '../util';
+import Convert from './convert';
+import { dataTypeMap, annotationBy } from '../util';
+
+const annotationByCode = annotationBy('code');
 
 export default {
   name: 'DatasetVersion',
   components: {
     InfoTable,
+    BaseModal,
+    Convert,
   },
   setup(props, ctx) {
     const { $route } = ctx.root;
-    const { params = {}} = $route;
+    const { params = {} } = $route;
     const actionRef = ref(null);
+    const convertForm = ref(null);
+    const state = reactive({
+      modal: {
+        show: false,
+        loading: false,
+        row: null,
+      },
+    });
+
+    const showConvert = (row) => {
+      Object.assign(state, {
+        modal: {
+          show: true,
+          row,
+        },
+      });
+    };
 
     const columns = [
       { prop: 'datasetId', label: 'ID', minWidth: 100, sortable: true },
       { prop: 'name', label: '名称', minWidth: 160 },
-      { prop: 'dataType', label: '数据类型', minWidth: 100, render: ({ row }) => {
-        return dataTypeMap[row.dataType];
-      } },
-      { prop: 'annotateType', label: '标注类型', minWidth: 100, render: ({ row }) => {
-        return annotationMap[row.annotateType].name;
-      } },
-      { prop: 'isCurrent', label: '是否为当前版本', minWidth: 120, render: ({ row }) => {
-        return row.isCurrent ? '是' : '否';
-      } },
+      {
+        prop: 'dataType',
+        label: '数据类型',
+        minWidth: 100,
+        render: ({ row }) => {
+          return dataTypeMap[row.dataType];
+        },
+      },
+      {
+        prop: 'annotateType',
+        label: '标注类型',
+        minWidth: 100,
+        render: ({ row }) => annotationByCode(row.annotateType, 'name'),
+      },
+      {
+        prop: 'isCurrent',
+        label: '是否为当前版本',
+        minWidth: 120,
+        render: ({ row }) => {
+          return row.isCurrent ? '是' : '否';
+        },
+      },
       { prop: 'versionName', label: '版本号', minWidth: 100, sortable: true },
-      { prop: 'createTime', label: '创建时间', minWidth: 150, sortable: true, render: ({ row }) => parseTime(row.createTime) },
+      {
+        prop: 'createTime',
+        label: '创建时间',
+        minWidth: 150,
+        sortable: true,
+        render: ({ row }) => parseTime(row.createTime),
+      },
       { prop: 'versionNote', label: '版本描述' },
-      { label: '操作', minWidth: 240, align: 'left', render: ({ row }, actions) => {
-        return [
-          createElement(Actions, {
-            props: {
-              row,
-              actions,
-            },
-          }),
-        ];
-      } },
+      {
+        label: '操作',
+        minWidth: 240,
+        align: 'left',
+        render: ({ row }, actions) => {
+          return [
+            h(Actions, {
+              props: {
+                row,
+                actions,
+                showConvert,
+              },
+            }),
+          ];
+        },
+      },
     ];
 
     const queryParams = {
@@ -77,17 +137,78 @@ export default {
     };
 
     const request = (options) => {
-      return api(`api/data/datasets/versions/`, {
+      return api(`/${API_MODULE_NAME.DATA}/datasets/versions/`, {
         params: options,
       });
     };
 
+    const handleCancel = () => {
+      Object.assign(state, {
+        modal: {
+          show: false,
+          loading: false,
+          row: null,
+        },
+      });
+    };
+
+    const doConvert = () => {
+      convertForm.value
+        .doConvert()
+        .then(() => {
+          Object.assign(state, {
+            modal: {
+              show: false,
+              loading: false,
+              row: null,
+            },
+          });
+          Message.success('生成预置数据集成功', 500);
+          convertForm.value.resetModel();
+        })
+        .catch((err) => {
+          state.modal.loading = false;
+          Message.error(err.message, 1000);
+        });
+    };
+
+    const checkConvert = () => {
+      getConvertInfo(state.modal.row.datasetId).then((res) => {
+        if (res) {
+          MessageBox.confirm(
+            '该操作将覆盖当前数据集已有的转预置版本，可能会影响正在使用的训练任务，继续请确认',
+            '提示',
+            { distinguishCancelAndClose: true }
+          )
+            .then(() => {
+              doConvert();
+            })
+            .catch(() => {
+              state.modal.loading = false;
+            });
+        } else {
+          doConvert();
+        }
+      });
+    };
+
+    const handleConvert = () => {
+      Object.assign(state, {
+        modal: { ...state.modal, loading: true },
+      });
+      checkConvert();
+    };
+
     return {
       parseTime,
       request,
       queryParams,
       columns,
+      state,
       actionRefFn: () => actionRef,
+      convertForm,
+      handleCancel,
+      handleConvert,
     };
   },
 };
diff --git a/webapp/src/views/development/components/CreateDialog.vue b/webapp/src/views/development/components/CreateDialog.vue
index ffccc2c..cdedbdb 100644
--- a/webapp/src/views/development/components/CreateDialog.vue
+++ b/webapp/src/views/development/components/CreateDialog.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <BaseModal
@@ -22,41 +22,40 @@
     width="800px"
     @open="onDialogOpen"
     @close="onDialogClose"
-    @cancel="showDialog=false"
+    @cancel="showDialog = false"
     @ok="onSubmit"
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-form-item label="名称" prop="noteBookName">
-        <el-input id="noteBookName" v-model="form.noteBookName" class="input" maxlength="30" style="width: 600px;" show-word-limit placeholder="请输入notebook名称" />
+        <el-input
+          id="noteBookName"
+          v-model="form.noteBookName"
+          class="input"
+          maxlength="30"
+          style="width: 600px;"
+          show-word-limit
+          placeholder="请输入 Notebook 名称"
+        />
       </el-form-item>
-      <el-form-item label="描述" prop="description">
-        <el-input id="description" v-model="form.description" type="textarea" maxlength="255" show-word-limit style="width: 600px;" />
-      </el-form-item>
-      <el-form-item
-        label="开发环境"
-        prop="k8sImageName"
-      >
+      <el-form-item label="开发环境" prop="k8sImageName">
         <el-select
           id="imageName"
           v-model="form.imageName"
           placeholder="请选择镜像"
-          style="width: 190px;"
+          style="width: 200px;"
           clearable
+          filterable
           @change="getHarborImages"
         >
-          <el-option
-            v-for="item in harborProjectList"
-            :key="item"
-            :label="item"
-            :value="item"
-          />
+          <el-option v-for="item in harborProjectList" :key="item" :label="item" :value="item" />
         </el-select>
         <el-select
           id="k8sImageName"
           v-model="form.k8sImageName"
           placeholder="请选择镜像版本"
-          style="width: 305px;"
+          style="width: 200px;"
           clearable
+          filterable
           @change="validateField('k8sImageName')"
         >
           <el-option
@@ -67,28 +66,86 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="类型" prop="deviceType">
-        <el-radio-group id="deviceType" v-model="form.deviceType" @change="onDeviceChange">
-          <el-radio-button v-for="(item,index) in deviceOptions" :key="index" :label="item">{{ item==='GPU'?'CPU + GPU':item }}</el-radio-button>
+      <el-form-item ref="dataSourceId" label="数据集" prop="dataSourceId">
+        <InfoSelect
+          v-model="form.dataSourceId"
+          style="display: inline-block;"
+          width="200px"
+          placeholder="请选择数据集"
+          :dataSource="datasetIdList"
+          value-key="id"
+          label-key="name"
+          @change="onDatasetChange"
+        />
+        <InfoSelect
+          v-model="form.dataSourcePath"
+          style="display: inline-block;"
+          width="200px"
+          placeholder="请选择数据集版本"
+          :dataSource="datasetVersionList"
+          value-key="versionUrl"
+          label-key="versionName"
+        />
+      </el-form-item>
+      <el-form-item label="类型" prop="resourcesPoolType">
+        <el-radio-group
+          id="resourcesPoolType"
+          v-model="form.resourcesPoolType"
+          @change="onDeviceChange"
+        >
+          <el-radio border :label="0" class="mr-0 w-150">CPU</el-radio>
+          <el-radio border :label="1" class="w-150">GPU</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="规格">
-        {{ defaultSpec | formatModel }}
+      <el-form-item label="节点规格" prop="resourcesPoolSpecs">
+        <el-select v-model="form.resourcesPoolSpecs" placeholder="请选择节点规格" filterable>
+          <el-option
+            v-for="specs in specsList"
+            :key="specs.id"
+            :label="specs.specsName"
+            :value="specs.specsName"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input
+          id="description"
+          v-model="form.description"
+          type="textarea"
+          maxlength="255"
+          show-word-limit
+          style="width: 600px;"
+        />
       </el-form-item>
     </el-form>
   </BaseModal>
 </template>
 
 <script>
-import { validateNameWithHyphen } from '@/utils';
+import { validateNameWithHyphen, RESOURCES_MODULE_ENUM } from '@/utils';
 import BaseModal from '@/components/BaseModal';
-import { getModels, add as addNotebook } from '@/api/development/notebook';
+import InfoSelect from '@/components/InfoSelect';
+import { getPublishedDatasets, getDatasetVersions } from '@/api/preparation/dataset';
+import { add as addNotebook } from '@/api/development/notebook';
+import { list as getSpecsNames } from '@/api/system/resources';
 import { getImageNameList, getImageTagList } from '@/api/trainingImage/index';
 import { IMAGE_PROJECT_TYPE } from '@/views/trainingJob/utils';
 
+const defaultForm = {
+  noteBookName: null,
+  description: null,
+  k8sImageName: null,
+  imageName: null,
+  resourcesPoolType: 0,
+  diskMemNum: null,
+  dataSourceId: null,
+  dataSourcePath: null,
+  resourcesPoolSpecs: null,
+};
+
 export default {
   name: 'CreateDialog',
-  components: { BaseModal },
+  components: { BaseModal, InfoSelect },
   filters: {
     formatModel(item) {
       if (!item) {
@@ -101,15 +158,7 @@ export default {
   data() {
     return {
       showDialog: false,
-      form: {
-        noteBookName: null,
-        description: null,
-        harborProject: null,
-        k8sImageName: null,
-        imageName: null,
-        deviceType: null,
-        diskMemNum: null,
-      },
+      form: { ...defaultForm },
       rules: {
         noteBookName: [
           { required: true, message: '请输入名称', trigger: 'blur' },
@@ -118,24 +167,17 @@ export default {
           { max: 30, message: '长度不超过30个字符', trigger: ['blur', 'change'] },
         ],
         k8sImageName: [{ required: true, message: '请选择镜像', trigger: 'blur' }],
-        dataSourcePath: [{ required: true, message: '请选择数据集', trigger: 'blur' }],
-        deviceType: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+        resourcesPoolType: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+        resourcesPoolSpecs: [{ required: true, message: '请选择节点规格', trigger: 'change' }],
       },
-      projectOptions: [],
       harborProjectList: [],
       harborImageList: [],
-      deviceOptions: [],
-      modelTypeMap: {},
-      defaultSpecOptions: {},
-      defaultSpec: null,
+      datasetIdList: [],
+      datasetVersionList: [],
+      specsList: [],
       btnDisabled: false,
     };
   },
-  computed: {
-    modelOptions() {
-      return this.modelTypeMap[this.form.deviceType] || [];
-    },
-  },
   methods: {
     showThis() {
       this.showDialog = true;
@@ -144,27 +186,43 @@ export default {
       this.getHarborProjects().then(() => {
         this.resetProject();
       });
-      this.getModels();
+      this.getDataset();
+      this.onDeviceChange();
     },
     onDialogClose() {
-      this.imageOptions = [];
-      this.form.harborProject = null;
-      this.form.k8sImageName = null;
+      this.form = { ...defaultForm };
       this.$refs.form.resetFields();
     },
-    onDeviceChange() {
-      this.defaultSpec = this.defaultSpecOptions[this.form.deviceType];
+    async onDeviceChange() {
+      this.specsList = (
+        await getSpecsNames({
+          module: RESOURCES_MODULE_ENUM.NOTEBOOK,
+          resourcesPoolType: this.form.resourcesPoolType,
+          current: 1,
+          size: 500,
+        })
+      ).result;
+      if (this.specsList.length) {
+        // 默认选择第一个节点
+        this.form.resourcesPoolSpecs = this.specsList[0].specsName;
+      }
     },
     async getHarborProjects() {
       this.harborProjectList = await getImageNameList({ projectType: IMAGE_PROJECT_TYPE.NOTEBOOK });
-      if (this.form.imageName && !this.harborProjectList.some(project => project === this.form.imageName)) {
+      if (
+        this.form.imageName &&
+        !this.harborProjectList.some((project) => project === this.form.imageName)
+      ) {
         this.$message.warning('原有的镜像名称不存在，请重新选择');
         this.form.imageName = null;
         this.form.k8sImageName = null;
         return;
       }
-      this.form.imageName && await this.getHarborImages(true);
-      if (this.form.imageTag && !this.harborImageList.some(image => image.imageTag === this.form.imageTag)) {
+      this.form.imageName && (await this.getHarborImages(true));
+      if (
+        this.form.imageTag &&
+        !this.harborImageList.some((image) => image.imageTag === this.form.imageTag)
+      ) {
         this.$message.warning('原有的镜像版本不存在，请重新选择');
         this.form.k8sImageName = null;
       }
@@ -175,12 +233,14 @@ export default {
       }
       if (!this.form.imageName) {
         this.harborImageList = [];
-        return;
+        return Promise.reject();
       }
-      return getImageTagList({ imageName: this.form.imageName, projectType: IMAGE_PROJECT_TYPE.NOTEBOOK })
-        .then(res => {
-          this.harborImageList = res;
-        });
+      return getImageTagList({
+        imageName: this.form.imageName,
+        projectType: IMAGE_PROJECT_TYPE.NOTEBOOK,
+      }).then((res) => {
+        this.harborImageList = res;
+      });
     },
     // 镜像项目为空时选择默认项目
     resetProject() {
@@ -194,69 +254,80 @@ export default {
         this.getHarborImages();
       }
     },
-    getModels() {
-      getModels()
-        .then(res => {
-          this.deviceOptions = [];
-          this.modelTypeMap = res;
-          for (const key in res) {
-            if (Object.prototype.hasOwnProperty.call(res, key)) {
-              this.deviceOptions.push(key);
-            }
-            for (const item of res[key]) {
-              if (item.defaultStatus) {
-                this.defaultSpecOptions[key] = item;
-              }
-            }
-          }
-          this.form.deviceType = this.deviceOptions[0] || null;
-          this.form.diskMemNum = this.modelOptions[0]?.diskMemNum || 1;
-          this.defaultSpec = this.defaultSpecOptions[this.form.deviceType];
-        });
+
+    async getDatasetVersion(dataSourceId, keepValue = false) {
+      this.datasetVersionList = await getDatasetVersions(dataSourceId);
+
+      if (keepValue && this.form.dataSourcePath) {
+        const version = this.datasetVersionList.find(
+          (version) => version.versionUrl === this.form.dataSourcePath
+        );
+        if (!version) {
+          this.form.dataSourcePath = null;
+          this.$message.warning('原有数据集版本不存在，请重新选择');
+        }
+      }
+    },
+
+    async getDataset(keepValue = false) {
+      this.datasetIdList = (await getPublishedDatasets({ size: 1000 })).result;
+
+      if (!keepValue || this.form.dataSourceId) {
+        this.form.dataSourcePath = null;
+      } else {
+        const dataset = this.datasetIdList.find((dataset) => dataset.id === this.form.dataSourceId);
+        if (!dataset) {
+          this.$message.warning('原有数据集不存在，请重新选择');
+          this.form.dataSourceId = this.form.dataSourcePath = null;
+          return;
+        }
+        this.getDatasetVersion(dataset.id, true);
+      }
     },
+
+    onDatasetChange(dataSourceId) {
+      this.form.dataSourcePath = null;
+      this.datasetVersionList = [];
+      if (!dataSourceId) return;
+      this.getDatasetVersion(dataSourceId);
+    },
+
     validateField(field) {
       this.$refs.form.validateField(field);
     },
     onSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          const { cpuNum, gpuNum, memNum } = this.defaultSpec;
           this.btnDisabled = true;
-          addNotebook({
-            noteBookName: this.form.noteBookName,
-            description: this.form.description,
-            k8sImageName: this.form.k8sImageName,
-            imageName: this.form.imageName,
-            dataSourceName: this.form.dataSourceName,
-            dataSourcePath: this.form.dataSourcePath,
-            cpuNum,
-            gpuNum,
-            memNum,
-            diskMemNum: this.form.diskMemNum,
-          })
+          const selectedSpecs = this.specsList.find(
+            (specs) => specs.specsName === this.form.resourcesPoolSpecs
+          );
+          if (selectedSpecs) {
+            const { cpuNum, gpuNum, memNum, workspaceRequest } = selectedSpecs;
+            Object.assign(this.form, { cpuNum, gpuNum, memNum, diskMemNum: workspaceRequest });
+          }
+          addNotebook(this.form)
             .then(() => {
               this.$emit('on-add');
               this.$message({
                 message: '创建成功',
                 type: 'success',
               });
-               this.btnDisabled = false;
+              this.btnDisabled = false;
               this.showDialog = false;
-              this.form.imageName = this.form.k8sImageName = null;
             })
-            .catch(err => {
+            .catch((err) => {
               this.btnDisabled = false;
               this.$message({
                 message: err.message,
                 type: 'error',
               });
             });
-        } else {
-          return false;
+          return true;
         }
+        return false;
       });
     },
   },
 };
-
 </script>
diff --git a/webapp/src/views/development/components/NotebookDetail.vue b/webapp/src/views/development/components/NotebookDetail.vue
index 4e42e38..1bdd29b 100644
--- a/webapp/src/views/development/components/NotebookDetail.vue
+++ b/webapp/src/views/development/components/NotebookDetail.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div style="margin-top: 40px; overflow: auto;">
@@ -42,12 +42,20 @@
         <div class="text">{{ notebookStatus[itemObj.status] }}</div>
       </el-col>
     </el-row>
-    <el-row class="row" style="height: auto;">
+    <el-row class="row">
       <el-col :span="5">
         <div class="label">开发环境</div>
       </el-col>
       <el-col :span="19">
-        <div class="text" style="height: auto;">{{ itemObj.k8sImageName.split('jupyterlab:')[1] || '--' }}</div>
+        <div class="text">{{ itemObj.k8sImageName.split('jupyterlab:')[1] || '--' }}</div>
+      </el-col>
+    </el-row>
+    <el-row class="row">
+      <el-col :span="5">
+        <div class="label">挂载数据集</div>
+      </el-col>
+      <el-col :span="19">
+        <div class="text">{{ datasetContent }}</div>
       </el-col>
     </el-row>
     <el-row class="row">
@@ -67,13 +75,19 @@
       </el-col>
     </el-row>
     <!--参数信息-->
-    <div class="title">规格参数</div>
+    <div class="title">
+      规格参数
+      <el-tooltip effect="dark" placement="right">
+        <div slot="content">规格参数单位换算: 1Mi = 1024 x 1024B</div>
+        <i class="el-icon-question" />
+      </el-tooltip>
+    </div>
     <el-row class="row">
       <el-col :span="5">
         <div class="label">CPU</div>
       </el-col>
       <el-col :span="19">
-        <div class="text">{{ itemObj.cpuNum }} Cores</div>
+        <div class="text">{{ itemObj.cpuNum }} 核</div>
       </el-col>
     </el-row>
     <el-row class="row">
@@ -81,7 +95,7 @@
         <div class="label">内存</div>
       </el-col>
       <el-col :span="19">
-        <div class="text">{{ itemObj.memNum }} GB</div>
+        <div class="text">{{ itemObj.memNum }} Mi</div>
       </el-col>
     </el-row>
     <el-row class="row">
@@ -89,7 +103,7 @@
         <div class="label">GPU</div>
       </el-col>
       <el-col :span="19">
-        <div class="text">{{ itemObj.gpuNum }} Cores</div>
+        <div class="text">{{ itemObj.gpuNum }} 核</div>
       </el-col>
     </el-row>
     <el-row class="row">
@@ -97,7 +111,7 @@
         <div class="label">存储</div>
       </el-col>
       <el-col :span="19">
-        <div class="text">{{ itemObj.diskMemNum }} GB</div>
+        <div class="text">{{ itemObj.diskMemNum }} Mi</div>
       </el-col>
     </el-row>
   </div>
@@ -118,6 +132,19 @@ export default {
       default: () => {},
     },
   },
+  computed: {
+    datasetContent() {
+      const { dataSourceName, dataSourcePath } = this.itemObj;
+      if (dataSourceName && dataSourcePath) {
+        const dataSourceVersion = dataSourcePath.substring(
+          dataSourcePath.lastIndexOf('/') + 1,
+          dataSourcePath.length
+        );
+        return `${dataSourceName}:${dataSourceVersion}`;
+      }
+      return null;
+    },
+  },
   methods: {
     parseTime,
   },
@@ -171,4 +198,3 @@ export default {
   border: #ccc solid 1px;
 }
 </style>
-
diff --git a/webapp/src/views/development/notebook.vue b/webapp/src/views/development/notebook.vue
index 44e3bd6..a3b0ed5 100644
--- a/webapp/src/views/development/notebook.vue
+++ b/webapp/src/views/development/notebook.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
@@ -45,15 +45,17 @@
     </div>
     <create-dialog ref="create" @on-add="onAdded" />
     <!--右边侧边栏-->
-    <el-drawer
-      :visible.sync="drawer"
-      :with-header="false"
-      size="33%"
-    >
+    <el-drawer :visible.sync="drawer" :with-header="false" size="33%">
       <notebook-detail :itemObj="selectedItemObj" :notebookStatus="notebookStatus" />
     </el-drawer>
     <!--表格渲染-->
-    <el-table ref="table" v-loading="statusOptions.length===0 || crud.loading" :data="crud.data" highlight-current-row @row-click="onRowClick">
+    <el-table
+      ref="table"
+      v-loading="statusOptions.length === 0 || crud.loading"
+      :data="crud.data"
+      highlight-current-row
+      @row-click="onRowClick"
+    >
       <el-table-column prop="noteBookName" label="名称" />
       <el-table-column prop="cpuNum" label="规格">
         <template slot-scope="scope">
@@ -61,7 +63,7 @@
         </template>
       </el-table-column>
       <el-table-column prop="description" label="描述" />
-      <el-table-column prop="status" label="状态" width="100">
+      <el-table-column prop="status" label="状态" width="150">
         <template #header>
           <dropdown-header
             title="状态"
@@ -71,8 +73,22 @@
           />
         </template>
         <template slot-scope="scope">
-          <el-tag v-if="!(scope.row.status==0 && !scope.row.url)" :type="getTagType(scope.row.status)" effect="plain">{{ notebookStatus[scope.row.status] }} </el-tag>
-          <el-tag v-if="(scope.row.status==0 && !scope.row.url)" :type="getTagType(3)" effect="plain">{{ notebookStatus[3] }} </el-tag>
+          <el-tag
+            v-if="!(scope.row.status == 0 && !scope.row.url)"
+            :type="getTagType(scope.row.status)"
+            effect="plain"
+            >{{ notebookStatus[scope.row.status] }}
+          </el-tag>
+          <el-tag
+            v-if="scope.row.status == 0 && !scope.row.url"
+            :type="getTagType(3)"
+            effect="plain"
+            >{{ notebookStatus[3] }}
+          </el-tag>
+          <msg-popover
+            :status-detail="scope.row.statusDetail"
+            :show="showMessage(scope.row.status)"
+          />
         </template>
       </el-table-column>
       <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="160">
@@ -82,14 +98,51 @@
       </el-table-column>
       <el-table-column label="操作" width="200" fixed="right">
         <template slot-scope="scope">
-          <el-button v-if="scope.row.status === 1" :id="`start_`+scope.$index" type="text" @click.stop="doStart(scope.row)">启动</el-button>
-          <el-button v-if="scope.row.status === 1" :id="`delete_`+scope.$index" type="text" @click.stop="doDelete(scope.row)">删除</el-button>
-          <el-button v-if="scope.row.status === 0 && scope.row.url" :id="`open_`+scope.$index" type="text" @click.stop="doOpen(scope.row)">
+          <el-button
+            v-if="scope.row.status === 1"
+            :id="`start_` + scope.$index"
+            type="text"
+            @click.stop="doStart(scope.row)"
+            >启动</el-button
+          >
+          <el-button
+            v-if="scope.row.status === 1"
+            :id="`delete_` + scope.$index"
+            type="text"
+            @click.stop="doDelete(scope.row)"
+            >删除</el-button
+          >
+          <el-button
+            v-if="scope.row.status === 0 && scope.row.url"
+            :id="`open_` + scope.$index"
+            type="text"
+            @click.stop="doOpen(scope.row)"
+          >
             打开<IconFont type="externallink" />
           </el-button>
-          <el-button v-if="scope.row.status === 0 && scope.row.url" :id="`stop_`+scope.$index" type="text" @click.stop="doStop(scope.row)">停止</el-button>
-          <el-button v-if="((scope.row.status === 0 && scope.row.url) || scope.row.status === 1) && !scope.row.algorithmId" :id="`save_`+scope.$index" type="text" @click.stop="doSave(scope.row)">保存算法</el-button>
-          <i v-if="[3, 4, 5].includes(scope.row.status) || (scope.row.status === 0 && !scope.row.url)" class="el-icon-loading" />
+          <el-button
+            v-if="scope.row.status === 0 && scope.row.url"
+            :id="`stop_` + scope.$index"
+            type="text"
+            @click.stop="doStop(scope.row)"
+            >停止</el-button
+          >
+          <el-button
+            v-if="
+              ((scope.row.status === 0 && scope.row.url) || scope.row.status === 1) &&
+                !scope.row.algorithmId
+            "
+            :id="`save_` + scope.$index"
+            type="text"
+            @click.stop="doSave(scope.row)"
+            >保存算法</el-button
+          >
+          <i
+            v-if="
+              [3, 4, 5].includes(scope.row.status) || (scope.row.status === 0 && !scope.row.url)
+            "
+            class="el-icon-loading"
+          />
         </template>
       </el-table-column>
     </el-table>
@@ -105,6 +158,7 @@ import { debounce } from 'throttle-debounce';
 import notebookApi, { detail, getStatus, start, stop, open } from '@/api/development/notebook';
 import { add as addAlgorithm } from '@/api/algorithm/algorithm';
 import DropdownHeader from '@/components/DropdownHeader';
+import MsgPopover from '@/components/MsgPopover';
 import CRUD, { presenter, header, crud } from '@crud/crud';
 import rrOperation from '@crud/RR.operation';
 import cdOperation from '@crud/CD.operation';
@@ -119,7 +173,15 @@ const defaultQuery = {
 
 export default {
   name: 'Notebook',
-  components: { pagination, rrOperation, cdOperation, DropdownHeader, CreateDialog, NotebookDetail },
+  components: {
+    pagination,
+    rrOperation,
+    cdOperation,
+    DropdownHeader,
+    CreateDialog,
+    NotebookDetail,
+    MsgPopover,
+  },
   cruds() {
     return CRUD({
       title: 'Notebook',
@@ -140,7 +202,6 @@ export default {
     return {
       statusOptions: [],
       notebookStatus: {},
-      deleteCount: 0,
       drawer: false,
       selectedItemObj: {},
       pollingCount: 0,
@@ -151,12 +212,14 @@ export default {
   },
   computed: {
     notebookStatusList() {
-      return [{ label: '全部', value: null }].concat(this.statusOptions.map(status => {
-        return {
-          label: status.statusName,
-          value: status.statusCode,
-        };
-      }));
+      return [{ label: '全部', value: null }].concat(
+        this.statusOptions.map((status) => {
+          return {
+            label: status.statusName,
+            value: status.statusCode,
+          };
+        })
+      );
     },
   },
   mounted() {
@@ -177,29 +240,25 @@ export default {
     [CRUD.HOOK.afterRefresh]() {
       this.checkStatus();
     },
-    [CRUD.HOOK.afterDelete]() {
-      this.deleteCount = 5;
-    },
     getNotebookStatus() {
-      getStatus()
-        .then((res) => {
-          this.statusOptions = res;
-          res.forEach(item => {
-            this.notebookStatus[item.statusCode] = item.statusName;
-          });
-          this.crud.refresh();
+      getStatus().then((res) => {
+        this.statusOptions = res;
+        res.forEach((item) => {
+          this.notebookStatus[item.statusCode] = item.statusName;
         });
+        this.crud.refresh();
+      });
     },
     filterByStatus(status) {
       this.localQuery.status = status;
       this.crud.toQuery();
     },
     checkStatus() {
-      // 删除操作5s内 或 有进行中的状态需要刷新列表
-      if (this.deleteCount > 0) {
-        this.deleteCount -= 1;
-        this.refetch();
-      } else if (this.crud.data.some(item => [3, 4, 5].includes(item.status) || (item.status === 0 && !item.url))) {
+      if (
+        this.crud.data.some(
+          (item) => [3, 4, 5].includes(item.status) || (item.status === 0 && !item.url)
+        )
+      ) {
         this.detailRefetch();
       }
     },
@@ -209,30 +268,40 @@ export default {
         return;
       }
       const res = await detail(idList);
-      this.pollingCount +=1;
+      this.pollingCount += 1;
       for (const item of res) {
-        if (![0, 3, 4, 5].includes(item.status) || (item.status === 0 && item.url)) { // 如果变成了运行中的状态，需要判断url是否有值
+        if (![0, 3, 4, 5].includes(item.status) || (item.status === 0 && item.url)) {
+          // 如果变成了运行中的状态，需要判断url是否有值
           const ele = this.crud.data.find((d) => {
             return d.id === item.id;
           });
           ele.status = item.status;
           ele.updateTime = item.updateTime;
           ele.url = item.url;
-          // 当变成云心中且有url时，自动打开url
-          if(item.status === 0 && item.url){
+          // 当变成运行中且有url时，自动打开url
+          if (item.status === 0 && item.url) {
             window.open(item.url, '_blank');
           }
         }
       }
-      if (this.crud.data.some(item => [3, 4, 5].includes(item.status)) || this.crud.data.some(item => (item.status === 0 && !item.url))) {
+      if (res.length < idList.length) {
+        this.crud.refresh();
+        return;
+      }
+      if (
+        this.crud.data.some((item) => [3, 4, 5].includes(item.status)) ||
+        this.crud.data.some((item) => item.status === 0 && !item.url)
+      ) {
         this.ct = setTimeout(() => {
-          if (this.pollingCount < 200) { // 400s超时，超时不作提示
+          if (this.pollingCount < 200) {
+            // 400s超时，超时不作提示
             this.detailRefetch();
           }
         }, 2000);
       }
     },
-    checkPollingIds() { // 得到需要轮询的id，状态345，状态0但是没有url
+    checkPollingIds() {
+      // 得到需要轮询的id，状态345，状态0但是没有url
       const idList = [];
       for (const item of this.crud.data) {
         if ([3, 4, 5].includes(item.status) || (item.status === 0 && !item.url)) {
@@ -244,14 +313,22 @@ export default {
     getTagType(status) {
       // 0运行，1停止, 2删除, 3启动中，4停止中，5删除中，6运行异常（暂未启用）
       switch (status) {
-        case 0: return 'success';
-        case 1: return 'danger';
-        case 2: return 'danger';
-        case 3: return 'info';
-        case 4: return 'info';
-        case 5: return 'info';
-        case 6: return 'danger';
-        default: return '';
+        case 0:
+          return 'success';
+        case 1:
+          return 'danger';
+        case 2:
+          return 'danger';
+        case 3:
+          return 'info';
+        case 4:
+          return 'info';
+        case 5:
+          return 'info';
+        case 6:
+          return 'danger';
+        default:
+          return '';
       }
     },
     [CRUD.HOOK.beforeRefresh]() {
@@ -277,26 +354,23 @@ export default {
     },
     // start
     doStart(row) {
-      start({ noteBookId: row.id })
-        .then(() => {
-          this.crud.refresh();
-        });
+      start({ noteBookId: row.id }).then(() => {
+        this.crud.refresh();
+      });
     },
     // stop
     doStop(row) {
-      this.$confirm('此操作将停止该环境, 是否继续?', '请确认')
-        .then(async() => {
-          await stop({ noteBookId: row.id });
-          this.crud.refresh();
-        });
+      this.$confirm('此操作将停止该环境, 是否继续?', '请确认').then(async () => {
+        await stop({ noteBookId: row.id });
+        this.crud.refresh();
+      });
     },
     // open
     doOpen(row) {
-      open(row.id)
-        .then(res => {
-          window.open(res);
-          this.crud.refresh();
-        });
+      open(row.id).then((res) => {
+        window.open(res);
+        this.crud.refresh();
+      });
     },
     async doSave(row) {
       const param = {
@@ -312,10 +386,13 @@ export default {
       });
     },
     doDelete(row) {
-      this.$confirm('此操作将删除该环境, 是否继续?', '请确认')
-        .then(async() => {
-          this.crud.doDelete(row);
-        });
+      this.$confirm('此操作将删除该环境, 是否继续?', '请确认').then(async () => {
+        this.crud.doDelete(row);
+      });
+    },
+
+    showMessage(status) {
+      return [3, 6].includes(status);
     },
   },
 };
diff --git a/webapp/src/views/home/imagePublic.vue b/webapp/src/views/home/imagePublic.vue
index ecac7a8..465b1b3 100644
--- a/webapp/src/views/home/imagePublic.vue
+++ b/webapp/src/views/home/imagePublic.vue
@@ -1,28 +1,28 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="public">
     <el-popover placement="top" trigger="hover" content="敬请期待" popper-class="w100">
       <div slot="reference" @mouseenter="hover = false" @mouseleave="hover = true">
-        <img v-if="hover" :src="base">
-        <img v-else :src="hoverurl">
+        <img v-if="hover" :src="base" />
+        <img v-else :src="hoverurl" />
       </div>
     </el-popover>
-    <span class="hover-tit" :style="hoverColor">{{title}}</span>
+    <span class="hover-tit" :style="hoverColor">{{ title }}</span>
   </div>
 </template>
 
@@ -85,4 +85,4 @@ export default {
     transition: all 0.5s;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/home/index.vue b/webapp/src/views/home/index.vue
index 27f1994..c14e9e5 100644
--- a/webapp/src/views/home/index.vue
+++ b/webapp/src/views/home/index.vue
@@ -1,36 +1,42 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="index-content">
     <div class="index-header">
       <div class="index-logo">
-        <img src="@/assets/images/dubhe-logo.svg" width="60" alt="logo">
+        <img src="@/assets/images/dubhe-logo.svg" width="60" alt="logo" />
       </div>
       <div class="index-avatar">
-        <img :src="user.avatar" :alt="user.nickName" :title="user.nickName" class="user-avatar">
+        <img :src="user.avatar" :alt="user.nickName" :title="user.nickName" class="user-avatar" />
       </div>
     </div>
     <div class="index-plate">
       <div class="index-posi">
-        <img src="@/assets/images/home/bg-quan.png" style="position: absolute; top: 20%; left: 12%; width: 3vw;">
-        <img src="@/assets/images/home/bg-quan.png" style="position: absolute; top: 0; right: 7%; width: 3vw;">
-        <img src="@/assets/images/home/circle.png" class="plate">
+        <img
+          src="@/assets/images/home/bg-quan.png"
+          style="position: absolute; top: 20%; left: 12%; width: 3vw;"
+        />
+        <img
+          src="@/assets/images/home/bg-quan.png"
+          style="position: absolute; top: 0; right: 7%; width: 3vw;"
+        />
+        <img src="@/assets/images/home/circle.png" class="plate" />
         <image-public
-          v-for="(item,index) in imageList"
+          v-for="(item, index) in imageList"
           :key="index"
           class="yuanshi"
           :class="transition ? item.class : ''"
@@ -43,18 +49,20 @@
             placement="top"
             content="炼知平台是由模型知识驱动的深度学习定制平台。平台内置了丰富的预训练模型库和多属性模型关系图谱，覆盖分类、分割、深度估计等常见视觉任务，并通过灵活可配的知识重组技术为用户提供简单易用的模型定制能力。"
             width="240"
-            trigger="hover">
-            <img slot="reference" src="@/assets/images/home/icon-model.png">
+            trigger="hover"
+          >
+            <img slot="reference" src="@/assets/images/home/icon-model.png" />
           </el-popover>
           <span class="title">模型炼知框架</span>
         </div>
         <div class="image-model yuanshi" :class="transition ? 'image-depth' : ''" @click="openDL">
           <el-popover
             placement="top"
-            content="深度学习平台面向AI模型生产的生命周期，提供了包括数据处理(数据集管理、智能标注和数据增强)、模型开发、模型训练和模型管理等功能，方便用户一站式构建AI算法。"
+            content="深度学习平台面向AI模型生产的生命周期，提供了包括数据处理(数据集管理、智能标注和数据增强)、算法开发、模型训练和模型管理等功能，方便用户一站式构建AI算法。"
             width="240"
-            trigger="hover">
-            <img slot="reference" src="@/assets/images/home/icon-deep.png">
+            trigger="hover"
+          >
+            <img slot="reference" src="@/assets/images/home/icon-deep.png" />
           </el-popover>
           <span class="title">深度学习框架</span>
         </div>
@@ -63,7 +71,7 @@
         <div style="width: 100%; height: 100%; background: #fff; opacity: 0.8;"></div>
       </div>
       <div class="plate-center">
-        <img src="@/assets/images/home/zhongjian .png">
+        <img src="@/assets/images/home/zhongjian .png" />
       </div>
     </div>
   </div>
@@ -126,14 +134,12 @@ export default {
     };
   },
   computed: {
-    ...mapGetters([
-      'user',
-    ]),
+    ...mapGetters(['user']),
   },
   mounted() {
     this.timer = setTimeout(() => {
       this.transition = true;
-    },500);
+    }, 500);
     this.$once('hook:beforeDestroy', () => {
       clearTimeout(this.timer);
       this.timer = null;
@@ -327,7 +333,12 @@ export default {
 }
 
 @keyframes yuanpan {
-  from { transform: rotate(180deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(180deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/labelGroup/dynamicField.vue b/webapp/src/views/labelGroup/dynamicField.vue
index cfffb4c..7403130 100644
--- a/webapp/src/views/labelGroup/dynamicField.vue
+++ b/webapp/src/views/labelGroup/dynamicField.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
@@ -33,14 +33,18 @@
             placeholder="选择或新建标签"
             :dataSource="activeLabels"
             valueKey="id"
-            labelKey='name'
+            labelKey="name"
             default-first-option
             filterable
             allow-create
             :disabled="!editAble && isOriginList(list[index])"
-            @change="params => handleChange(key, params)"
+            @change="(params) => handleChange(key, params)"
           />
-          <el-input v-model="list[index].name" :disabled="!editAble && isOriginList(list[index])" class='dn'></el-input>
+          <el-input
+            v-model="list[index].name"
+            :disabled="!editAble && isOriginList(list[index])"
+            class="dn"
+          ></el-input>
         </div>
         <!-- 非视觉标签组不需要下拉菜单 -->
         <el-input
@@ -50,26 +54,30 @@
           style="width: 200px; margin-right: 10px;"
           :disabled="!editAble && isOriginList(list[index])"
         />
-        <el-color-picker v-model="list[index].color" :disabled="!editAble && isOriginList(list[index])" size="small" />
+        <el-color-picker
+          v-model="list[index].color"
+          :disabled="!editAble && isOriginList(list[index])"
+          size="small"
+        />
         <span style="width: 50px; margin-left: 10px; line-height: 32px;">
-          <i 
+          <i
             v-if="keys.length > 1 && addAble"
             class="el-icon-remove-outline vm cp"
             :class="!editAble && isOriginList(list[index]) ? 'disabled' : ''"
             style="font-size: 20px;"
             @click.prevent="remove(key)"
           />
-          <i 
-            v-if="index === (keys.length - 1) && addAble" 
+          <i
+            v-if="index === keys.length - 1 && addAble"
             class="el-icon-circle-plus-outline vm cp"
             :class="!addAble ? 'disabled' : ''"
-            style="font-size: 20px;" 
+            style="font-size: 20px;"
             @click="add"
           />
         </span>
       </div>
       <div v-else class="flex">
-        <el-input v-model="list[index].name" style="width: 200px; margin-right: 10px;" disabled/>
+        <el-input v-model="list[index].name" style="width: 200px; margin-right: 10px;" disabled />
         <el-color-picker v-model="list[index].color" disabled size="small" />
       </div>
     </el-form-item>
@@ -79,58 +87,58 @@
 import InfoSelect from '@/components/InfoSelect';
 import { validateLabel } from '@/utils/validate';
 
-  export default {
-    name: 'DynamicField',
-    components: {
-      InfoSelect,
+export default {
+  name: 'DynamicField',
+  components: {
+    InfoSelect,
+  },
+  props: {
+    actionType: String,
+    list: {
+      type: Array,
+      deafault: () => [],
     },
-    props: {
-      actionType: String,
-      list: {
-        
-        deafault: () => ([]),
-      },
-      labelGroupType: {
-        type: Number,
-        default: 0,
-      },
-      activeLabels: {
-        type: Array,
-        deafault: () => ([]),
-      },
-      originList: {
-        type: Array,
-        deafault: () => ([]),
-      },
-      keys: {
-        type: Array,
-        deafault: () => ([]),
-      },
-      remove: Function,
-      add: Function,
-      handleChange: Function,
-      validateDuplicate: Function,
+    labelGroupType: {
+      type: Number,
+      default: 0,
     },
-    setup(props) {
-      const rules = [
-        { validator: validateLabel, trigger: ['change', 'blur'] },
-        { validator: props.validateDuplicate, trigger: ['change', 'blur'] },
-      ];
-      // 可以添加
-      const addAble = ['create', 'edit'].includes(props.actionType);
-      const editAble = props.actionType === 'create';
+    activeLabels: {
+      type: Array,
+      deafault: () => [],
+    },
+    originList: {
+      type: Array,
+      deafault: () => [],
+    },
+    keys: {
+      type: Array,
+      deafault: () => [],
+    },
+    remove: Function,
+    add: Function,
+    handleChange: Function,
+    validateDuplicate: Function,
+  },
+  setup(props) {
+    const rules = [
+      { validator: validateLabel, trigger: ['change', 'blur'] },
+      { validator: props.validateDuplicate, trigger: ['change', 'blur'] },
+    ];
+    // 可以添加
+    const addAble = ['create', 'edit'].includes(props.actionType);
+    const editAble = props.actionType === 'create';
 
-      const isOriginList = item => {
-        const isOrigin = props.originList.findIndex(d => d.id === item.id) > -1;
-        return isOrigin;
-      };
+    const isOriginList = (item) => {
+      const isOrigin = props.originList.findIndex((d) => d.id === item.id) > -1;
+      return isOrigin;
+    };
 
-      return {
-        rules,
-        editAble,
-        addAble,
-        isOriginList,
-      };
-    },
-  };
-</script>
\ No newline at end of file
+    return {
+      rules,
+      editAble,
+      addAble,
+      isOriginList,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/views/labelGroup/index.vue b/webapp/src/views/labelGroup/index.vue
index 1b60e1b..2e18e27 100644
--- a/webapp/src/views/labelGroup/index.vue
+++ b/webapp/src/views/labelGroup/index.vue
@@ -1,52 +1,61 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
     <div class="head-container">
-      <cdOperation :addProps="operationProps" :delProps="operationProps">
-        <el-button 
-          slot="left" 
-          class="filter-item" 
+      <cdOperation :addProps="operationProps">
+        <el-button
+          slot="left"
+          class="filter-item"
           type="primary"
           icon="el-icon-plus"
-          round 
+          round
           @click="doCreate"
         >
           创建标签组
         </el-button>
         <span slot="right">
-          <el-input 
-            v-model="query.name" 
-            placeholder="输入名称或ID查询标签组" 
+          <el-input
+            v-model="query.name"
+            placeholder="输入名称或ID查询标签组"
             style="width: 200px;"
             class="filter-item"
-            @keyup.enter.native="crud.toQuery" 
+            @keyup.enter.native="crud.toQuery"
           />
           <rrOperation @resetQuery="onResetQuery" />
         </span>
       </cdOperation>
     </div>
     <div class="mb-10 flex flex-between">
-      <el-tabs :value="activePanelLabelGroup" class="eltabs-inlineblock" @tab-click="handlePanelClick">
+      <el-tabs
+        :value="activePanelLabelGroup"
+        class="eltabs-inlineblock"
+        @tab-click="handlePanelClick"
+      >
         <el-tab-pane label="我的标签组" name="0" />
         <el-tab-pane label="预置标签组" name="1" />
       </el-tabs>
       <div>
-        <el-button class="filter-item with-border" style="padding: 8px;" icon="el-icon-refresh" @click="onResetFresh"/>
+        <el-button
+          class="filter-item with-border"
+          style="padding: 8px;"
+          icon="el-icon-refresh"
+          @click="onResetFresh"
+        />
       </div>
     </div>
     <!--表格渲染-->
@@ -65,35 +74,32 @@
         show-overflow-tooltip
         prop="name"
         label="名称"
-        min-width="160"
+        min-width="148"
         align="left"
         class-name="dataset-name-col"
       >
         <template slot-scope="scope">
-          <el-link class="mr-10 name-col" @click="goDetail(scope.row)">{{ scope.row.name }}</el-link>
+          <el-link class="mr-10 name-col" type="primary" @click="goDetail(scope.row)">{{
+            scope.row.name
+          }}</el-link>
         </template>
       </el-table-column>
       <el-table-column
         prop="labelGroupType"
         :formatter="parseLabelGroupType"
         min-width="80"
-        align='left'
+        align="left"
       >
         <template slot="header">
           <dropdown-header
             title="类型"
             :list="labelGroupTypeList"
             :filtered="!isNil(labelGroupType)"
-            @command="cmd => filter('labelGroupType', cmd)"
+            @command="(cmd) => filter('labelGroupType', cmd)"
           />
         </template>
-      </el-table-column>  
-      <el-table-column
-        prop="count"
-        min-width="80"
-        label="标签数量"
-        align="left"
-      />
+      </el-table-column>
+      <el-table-column prop="count" min-width="80" label="标签数量" align="left" />
       <el-table-column
         prop="updateTime"
         min-width="160"
@@ -124,8 +130,9 @@
         :goDetail="goDetail"
         :doEdit="doEdit"
         :doFork="showFork"
+        :doConvert="doConvert"
       />
-    </el-table>    
+    </el-table>
     <!--分页组件-->
     <el-pagination
       :page-size.sync="crud.page.size"
@@ -149,11 +156,8 @@
         <el-form-item label="名称" prop="name">
           <el-input v-model="forkForm.name" placeholder="标签组名称不能超过50字" maxlength="50" />
         </el-form-item>
-        <el-form-item label="类型" prop="labelGroupType" >
-          <el-input
-            v-model="labelGroupTypeMap[forkForm.labelGroupType]"
-            disabled
-          />
+        <el-form-item label="类型" prop="labelGroupType">
+          <el-input v-model="forkLabelGroupType" disabled />
         </el-form-item>
         <el-form-item label="描述" prop="remark">
           <el-input
@@ -183,7 +187,11 @@
 import { isNil } from 'lodash';
 import { mapState } from 'vuex';
 
-import crudLabelGroup, { copy as LabelGroupFork, getLabelGroupDetail } from '@/api/preparation/labelGroup';
+import crudLabelGroup, {
+  copy as LabelGroupFork,
+  getLabelGroupDetail,
+  convertPreset,
+} from '@/api/preparation/labelGroup';
 import CRUD, { presenter, header, form, crud } from '@crud/crud';
 import rrOperation from '@crud/RR.operation';
 import cdOperation from '@crud/CD.operation';
@@ -191,12 +199,12 @@ import cdOperation from '@crud/CD.operation';
 import { formatDateTime } from '@/utils';
 import { validateName } from '@/utils/validate';
 import store from '@/store';
+import { labelGroupTypeMap } from '@/views/dataset/util';
 
 import DropdownHeader from '@/components/DropdownHeader';
 import BaseModal from '@/components/BaseModal';
-import { labelGroupTypeMap } from './util';
 import LabelGroupAction from './labelGroupAction';
-import "@/views/dataset/style/list.scss";
+import '@/views/dataset/style/list.scss';
 
 const defaultForm = {
   id: null,
@@ -215,6 +223,7 @@ export default {
     LabelGroupAction,
     DropdownHeader,
   },
+
   cruds() {
     return CRUD({
       title: '标签组管理',
@@ -225,7 +234,9 @@ export default {
       queryOnPresenterCreated: false,
     });
   },
+
   mixins: [presenter(), header(), form(defaultForm), crud()],
+
   data() {
     return {
       forkVisible: false, // fork对话框
@@ -236,7 +247,7 @@ export default {
         showOkLoading: false,
         type: null,
       },
-      forkForm : {
+      forkForm: {
         id: null,
         name: null,
         labels: null,
@@ -250,24 +261,24 @@ export default {
           { validator: validateName, trigger: ['change', 'blur'] },
         ],
         labelGroupType: [
-          {required: true, message: '请选择标签组类型', trigger: ['change', 'blur'] },
-        ],
-        remark: [
-          { required: false, message: '请输入标签组描述信息', trigger: 'blur' },
+          { required: true, message: '请选择标签组类型', trigger: ['change', 'blur'] },
         ],
+        remark: [{ required: false, message: '请输入标签组描述信息', trigger: 'blur' }],
       },
-      labelGroupTypeMap,
     };
   },
+
   computed: {
     ...mapState({
-      activePanelLabelGroup: state => {
+      activePanelLabelGroup: (state) => {
         return String(state.dataset.activePanelLabelGroup);
       },
     }),
+
     isNil() {
       return isNil;
     },
+
     localQuery() {
       return {
         type: this.activePanelLabelGroup || 0,
@@ -275,21 +286,23 @@ export default {
     },
 
     labelGroupTypeList() {
-      const rawLabelGroupTypeList = Object.keys(labelGroupTypeMap).map(d => ({
-        label: labelGroupTypeMap[d],
-        value: Number(d),
-      }));
-      return [{ label: '全部', value: null }].concat(rawLabelGroupTypeList);
+      return [{ label: '全部', value: null }].concat(Object.values(labelGroupTypeMap));
     },
 
     // 区分预置标签组和普通便签组操作权限
     operationProps() {
       return Number(this.activePanelLabelGroup) === 1 ? { disabled: true } : undefined;
     },
+
+    forkLabelGroupType() {
+      return this.getLabelGroupLabel(this.forkForm.labelGroupType);
+    },
   },
+
   created() {
     this.crud.toQuery();
   },
+
   mounted() {
     if (this.$route.params.type === 'add') {
       setTimeout(() => {
@@ -300,8 +313,14 @@ export default {
 
   methods: {
     [CRUD.HOOK.beforeRefresh]() {
-      this.crud.query = { ...this.query, ...this.localQuery};
+      this.crud.query = { ...this.query, ...this.localQuery };
+    },
+
+    // 根据值获取标签值
+    getLabelGroupLabel(value) {
+      return (Object.values(labelGroupTypeMap).find((d) => d.value === value) || {}).label;
     },
+
     onResetQuery() {
       // 重置查询条件
       this.query = {};
@@ -313,10 +332,12 @@ export default {
       // 重置表格的排序和筛选条件
       this.$refs.table.clearSort();
     },
+
     onResetFresh() {
       this.onResetQuery();
       this.crud.refresh();
     },
+
     handlePanelClick(tab) {
       this.onResetQuery();
       store.dispatch('dataset/togglePanelLabelGroup', Number(tab.name));
@@ -326,15 +347,16 @@ export default {
       this.crud.refresh();
     },
     formatDate(row, column, cellValue) {
-      if(isNil(cellValue)){
+      if (isNil(cellValue)) {
         return cellValue;
       }
       return formatDateTime(cellValue);
     },
 
     parseLabelGroupType(row, column, cellValue = 0) {
-      return labelGroupTypeMap[cellValue];
+      return this.getLabelGroupLabel(cellValue);
     },
+
     filter(column, value) {
       this[column] = value;
       this.crud.params[column] = value;
@@ -346,7 +368,8 @@ export default {
       this.$router.push({
         path: `/data/labelgroup/create`,
       });
-    }, 
+    },
+
     // 查看标签组详情
     goDetail(row) {
       this.$router.push({
@@ -356,6 +379,7 @@ export default {
         },
       });
     },
+
     // 编辑标签组
     doEdit(row) {
       this.$router.push({
@@ -365,10 +389,31 @@ export default {
         },
       });
     },
+
+    // 转为预置标签组
+    doConvert(row) {
+      convertPreset({ labelGroupId: row.id })
+        .then(() => {
+          this.$message({
+            message: '成功转为预置标签组',
+            type: 'success',
+          });
+        })
+        .catch((e) => {
+          this.$message({
+            message: e.message || '转为预置标签组失败',
+            type: 'error',
+          });
+        });
+      setTimeout(() => {
+        this.onResetFresh();
+      }, 500);
+    },
+
     // 显示fork对话框
     showFork(row) {
       this.showActionModal(row, 'fork');
-      getLabelGroupDetail(row.id).then(res => {
+      getLabelGroupDetail(row.id).then((res) => {
         Object.assign(this.forkForm, {
           name: res.name,
           remark: res.remark,
@@ -379,9 +424,11 @@ export default {
         });
       });
     },
+
     handleCancel() {
       this.resetActionModal();
     },
+
     handleFork() {
       LabelGroupFork(this.forkForm);
       this.resetActionModal();
@@ -398,6 +445,7 @@ export default {
         type,
       };
     },
+
     resetActionModal() {
       this.actionModal = {
         show: false,
diff --git a/webapp/src/views/labelGroup/labelGroupAction.js b/webapp/src/views/labelGroup/labelGroupAction.js
index 0db523e..e8272f0 100644
--- a/webapp/src/views/labelGroup/labelGroupAction.js
+++ b/webapp/src/views/labelGroup/labelGroupAction.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export default {
   name: 'LabelGroupAction',
@@ -21,18 +21,17 @@ export default {
     goDetail: Function,
     doEdit: Function,
     doFork: Function,
+    doConvert: Function,
   },
   render(h, { data, props }) {
-    const { doFork, goDetail, doEdit } = props;
+    const { doFork, goDetail, doEdit, doConvert } = props;
     const columnProps = {
       ...data,
       scopedSlots: {
         header: () => {
-          return (
-            <span>操作</span>
-          );
+          return <span>操作</span>;
         },
-        default: ({ row } ) => {
+        default: ({ row }) => {
           const btnProps = {
             props: {
               type: 'text',
@@ -43,7 +42,7 @@ export default {
               marginRight: '10px',
             },
           };
-          
+
           // 查看详情按钮
           const checkButton = (
             <el-button {...btnProps} onClick={() => goDetail(row)}>
@@ -66,18 +65,27 @@ export default {
               复制
             </el-button>
           );
-          
-          // 预置标签组只具备查看标签功能 
+
+          let showConvert = true;
+          const convertButton = (
+            <el-button {...btnProps} onClick={() => doConvert(row)}>
+              设为预置
+            </el-button>
+          );
+
+          // 预置标签组只具备查看标签功能
           if (row.type === 1) {
             showEditButton = false;
             showForkButton = false;
-          };
-   
+            showConvert = false;
+          }
+
           return (
             <span>
               {checkButton}
               {showEditButton && editButton}
               {showForkButton && forkButton}
+              {showConvert && convertButton}
             </span>
           );
         },
diff --git a/webapp/src/views/labelGroup/labelGroupForm.vue b/webapp/src/views/labelGroup/labelGroupForm.vue
index 8a9daaa..ce04561 100644
--- a/webapp/src/views/labelGroup/labelGroupForm.vue
+++ b/webapp/src/views/labelGroup/labelGroupForm.vue
@@ -1,37 +1,37 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div v-loading="state.loading" class="app-container" style="width: 600px; margin-top: 28px;">
     <el-form ref="formRef" :model="state.createForm" :rules="rules" label-width="100px">
       <el-form-item label="名称" prop="name">
-        <el-input 
-          v-model="state.createForm.name" 
-          placeholder="标签组名称不能超过50字" 
-          maxlength="50" 
+        <el-input
+          v-model="state.createForm.name"
+          placeholder="标签组名称不能超过50字"
+          maxlength="50"
           show-word-limit
-          :disabled="state.actionType === 'detail'" 
+          :disabled="state.actionType === 'detail'"
         />
       </el-form-item>
-      <el-form-item label="类型" prop="labelGroupType" >
+      <el-form-item label="类型" prop="labelGroupType">
         <InfoSelect
           v-model="state.createForm.labelGroupType"
           placeholder="类型"
           :dataSource="labelGroupTypeList"
-          :disabled="['detail','edit'].includes(state.actionType)"
+          :disabled="['detail', 'edit'].includes(state.actionType)"
           @change="handleLabelGroupTypeChange"
         />
       </el-form-item>
@@ -45,21 +45,24 @@
           show-word-limit
           :disabled="state.actionType === 'detail'"
         />
-      </el-form-item>   
+      </el-form-item>
       <el-form-item label="创建方式">
-        <el-tabs :value="state.addWay" class='labels-edit-wrapper' type="border-card" :before-leave="beforeLeave" @tab-click="handleClick">
+        <el-tabs
+          :value="state.addWay"
+          class="labels-edit-wrapper"
+          type="border-card"
+          :before-leave="beforeLeave"
+          @tab-click="handleClick"
+        >
           <el-tab-pane label="自定义标签组" name="custom" class="dynamic-field">
             <Exception v-if="state.createForm.labels.length === 0" />
             <div v-else>
               <div v-if="state.groupType === 1">
-                <el-tag v-for="label in state.originList" :key="label.id" class="mr-10">{{ label.name }}</el-tag>
+                <el-tag v-for="label in state.originList" :key="label.id" class="mr-10">{{
+                  label.name
+                }}</el-tag>
               </div>
-              <el-form
-                v-else
-                ref="customFormRef"
-                :model="state.createForm" 
-                label-width="100px"
-              >
+              <el-form v-else ref="customFormRef" :model="state.createForm" label-width="100px">
                 <DynamicField
                   :list="state.createForm.labels"
                   :labelGroupType="state.createForm.labelGroupType"
@@ -75,15 +78,14 @@
               </el-form>
             </div>
           </el-tab-pane>
-          <el-tab-pane label="编辑标签组" name="edit" class='labelgroup-editor'>
-            <prism-editor
+          <el-tab-pane label="编辑标签组" name="edit" class="code-editor">
+            <Editor
               ref="editorRef"
-              v-model="state.codeContent" 
+              v-model="state.codeContent"
               :readonly="state.actionType === 'detail'"
-              class="min-height-100 max-height-400" 
-              :highlight="highlighter"
+              @change="handleCodeChange"
             />
-            <span class='icon-wrapper' @click="beautify">
+            <span class="icon-wrapper" @click="beautify">
               <IconFont type="beauty" class="format" />
             </span>
           </el-tab-pane>
@@ -98,7 +100,6 @@
                 :acceptSize="0"
                 :multiple="false"
                 :showFileCount="false"
-                :hash="false"
                 @uploadError="uploadError"
               />
             </div>
@@ -116,6 +117,17 @@
           </div>
           <div v-else-if="state.addWay === 'upload'">
             <div>1. 请按照格式要求提交 json 格式标签文件</div>
+            <div>
+              2. 格式参考
+              <a
+                target="_blank"
+                :href="
+                  `${VUE_APP_DOCS_URL}module/dataset/dataset-util/#21-%E6%A0%87%E7%AD%BE%E6%96%87%E4%BB%B6`
+                "
+              >
+                标签组模版文件
+              </a>
+            </div>
           </div>
         </div>
       </el-form-item>
@@ -133,32 +145,29 @@ import { Message, MessageBox } from 'element-ui';
 import { pick, uniqBy } from 'lodash';
 
 import Beautify from 'js-beautify';
-import { PrismEditor } from 'vue-prism-editor';
-import 'vue-prism-editor/dist/prismeditor.min.css'; 
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
 
+import Editor from '@/components/editor';
 import Exception from '@/components/Exception';
-import UploadInline from "@/components/UploadForm/inline";
+import UploadInline from '@/components/UploadForm/inline';
 import { remove, replace, duplicate } from '@/utils';
+import { labelGroupTypeMap } from '@/views/dataset/util';
 import { validateName, validateLabelsUtil } from '@/utils/validate';
 import { getAutoLabels } from '@/api/preparation/datalabel';
-import { add, edit, getLabelGroupDetail, importLabelGroup } from "@/api/preparation/labelGroup";
+import { add, edit, getLabelGroupDetail, importLabelGroup } from '@/api/preparation/labelGroup';
 import InfoSelect from '@/components/InfoSelect';
 import DynamicField from './dynamicField';
-import { labelGroupTypeMap } from './util';
-
-import 'prismjs/themes/prism-tomorrow.css';
 
 const defaultColor = '#FFFFFF';
 
-const initialLabels = [{"name":"","color": defaultColor}, {"name":"","color":"#000000"}];
+const initialLabels = [
+  { name: '', color: defaultColor },
+  { name: '', color: '#000000' },
+];
 
 export default {
   name: 'LabelGroupForm',
   components: {
-    PrismEditor,
+    Editor,
     DynamicField,
     UploadInline,
     Exception,
@@ -178,9 +187,9 @@ export default {
     };
 
     const txtMap = {
-      create: "确认创建",
-      edit: "确认编辑",
-      detail: "返回",
+      create: '确认创建',
+      edit: '确认编辑',
+      detail: '返回',
     };
 
     const operateTypeMap = {
@@ -196,16 +205,16 @@ export default {
         { validator: validateName, trigger: ['change', 'blur'] },
       ],
       labelGroupType: [
-        {required: true, message: '请选择标签组类型', trigger: ['change', 'blur'] },
+        { required: true, message: '请选择标签组类型', trigger: ['change', 'blur'] },
       ],
     };
 
     const buildModel = (record, options) => {
-      return { ...record, ...options};
+      return { ...record, ...options };
     };
 
     // 生成 keys
-    const setKeys = labels => labels.map((label, index) => index);
+    const setKeys = (labels) => labels.map((label, index) => index);
 
     // 页面类型
     const actionType = routeMap[$route.name] || 'create';
@@ -226,18 +235,20 @@ export default {
         labels: initialLabels,
         name: '',
         labelGroupType: undefined,
-        remark: "",
+        remark: '',
         type: 0,
       },
       codeContent: JSON.stringify(initialLabels),
       customForm: {
-        labels: [{
-          name: '',
-          color: defaultColor,
-        }],
+        labels: [
+          {
+            name: '',
+            color: defaultColor,
+          },
+        ],
       },
-      addWay: "custom", // 默认创建类型为自定义
-      cancelText: "取消",
+      addWay: 'custom', // 默认创建类型为自定义
+      cancelText: '取消',
       errmsg: '',
       loading: false, // 加载详情
     });
@@ -245,7 +256,12 @@ export default {
     const submitTxt = txtMap[state.actionType];
 
     // 获取 key 值索引
-    const getIndex = (index) => state.keys.findIndex(key => key === index);
+    const getIndex = (index) => state.keys.findIndex((key) => key === index);
+
+    // 根据值获取标签值
+    const getLabelGroupLabel = (value) => {
+      return (Object.values(labelGroupTypeMap).find((d) => d.value === value) || {}).label;
+    };
 
     const setCode = (code) => {
       Object.assign(state, {
@@ -253,19 +269,24 @@ export default {
       });
     };
 
+    const handleCodeChange = (value) => {
+      setCode(value);
+    };
+
     const beautify = () => {
       // 编辑器内容
-      const code = editorRef.value.value;
+      const code = editorRef.value.getValue();
       const formated = Beautify(code);
       setCode(formated);
     };
 
-    const uploadError = () => {
-
+    const uploadError = (err) => {
+      Message.error('上传失败', err.message || err);
+      console.error(err);
     };
 
     const goBack = () => {
-      $router.push({path: "/data/labelgroup"});
+      $router.push({ path: '/data/labelgroup' });
     };
 
     // 更新
@@ -278,12 +299,7 @@ export default {
       });
     };
 
-    const labelGroupTypeList = computed(() => {
-      return Object.keys(labelGroupTypeMap).map(d => ({
-        label: labelGroupTypeMap[d],
-        value: Number(d),
-      }));
-    });
+    const labelGroupTypeList = Object.values(labelGroupTypeMap);
 
     const handleLabelGroupTypeChange = () => {
       Object.assign(state, {
@@ -292,7 +308,7 @@ export default {
           labels: initialLabels,
         },
       });
-      getAutoLabels(state.createForm.labelGroupType).then(res => {
+      getAutoLabels(state.createForm.labelGroupType).then((res) => {
         Object.assign(state, {
           activeLabels: res,
           systemLabels: res,
@@ -307,7 +323,7 @@ export default {
       };
 
       const requestResource = params.id ? edit : add;
-      const message =  params.id ? '标签组编辑成功' : '标签组创建成功';
+      const message = params.id ? '标签组编辑成功' : '标签组创建成功';
 
       requestResource(nextParams).then(() => {
         Message.success({
@@ -319,17 +335,17 @@ export default {
     };
 
     const handleSubmit = () => {
-      if(actionType === 'detail') {
+      if (actionType === 'detail') {
         goBack();
         return;
       }
 
-      formRef.value.validate(validWrapper => {
+      formRef.value.validate((validWrapper) => {
         if (validWrapper) {
-          switch(state.addWay) {
+          switch (state.addWay) {
             // 自定标签组
             case 'custom':
-              customFormRef.value.validate(isValid => {
+              customFormRef.value.validate((isValid) => {
                 if (isValid) {
                   const params = {
                     ...state.createForm,
@@ -343,16 +359,16 @@ export default {
             case 'edit':
               try {
                 let errMsg = '';
-                const code = JSON.parse(editorRef.value.value);
-                if(Array.isArray(code) && code.length) {
-                  for(const d of code) {
-                    if(validateLabelsUtil(d) !== '') {
+                const code = JSON.parse(editorRef.value.getValue());
+                if (Array.isArray(code) && code.length) {
+                  for (const d of code) {
+                    if (validateLabelsUtil(d) !== '') {
                       errMsg = validateLabelsUtil(d);
                       break;
                     }
                   }
                 }
-                if(errMsg) {
+                if (errMsg) {
                   Message.error(errMsg);
                   return;
                 }
@@ -362,7 +378,7 @@ export default {
                   operateType: 2,
                 };
                 handleLabelGroupRequest(editParams);
-              } catch(err) {
+              } catch (err) {
                 console.error(err);
                 throw err;
               }
@@ -370,7 +386,7 @@ export default {
             case 'upload': {
               const { uploadFiles } = uploadFormRef.value.formRef?.$refs.uploader || {};
               const { name, remark, labelGroupType } = state.createForm;
-              
+
               const formData = new FormData();
               formData.append('name', name);
               formData.append('remark', remark);
@@ -395,34 +411,33 @@ export default {
     };
 
     const beforeLeave = (activeName, oldActiveName) => {
-      if(activeName === oldActiveName) return false;
-      if(oldActiveName === 'upload') {
+      if (activeName === oldActiveName) return false;
+      if (oldActiveName === 'upload') {
         const { uploadFiles } = uploadFormRef.value.formRef?.$refs.uploader || {};
-        if(uploadFiles.length) {
-          return MessageBox.confirm('标注文件已提交，确认切换？')
-            .catch(() => {
-              state.addWay = 'upload';
-              return Promise.reject();
-            });
+        if (uploadFiles.length) {
+          return MessageBox.confirm('标注文件已提交，确认切换？').catch(() => {
+            state.addWay = 'upload';
+            return Promise.reject();
+          });
         }
         return true;
       }
       return true;
     };
 
-    // 
+    //
     const handleClick = (tab) => {
-      if(state.addWay === tab.name) return;
+      if (state.addWay === tab.name) return;
       // 切换到编辑模式
       if (tab.name === 'edit') {
         // 从自定义编辑切换过去
-        if(state.addWay === 'custom') {
+        if (state.addWay === 'custom') {
           state.codeContent = JSON.stringify(state.createForm.labels);
         }
-      } else if (tab.name === 'custom'){
-        if(state.addWay === 'edit') {
+      } else if (tab.name === 'custom') {
+        if (state.addWay === 'edit') {
           try {
-            const nextLabels = JSON.parse(editorRef.value.value);
+            const nextLabels = JSON.parse(editorRef.value.getValue());
             Object.assign(state, {
               createForm: {
                 ...state.createForm,
@@ -431,7 +446,7 @@ export default {
               keys: setKeys(nextLabels),
               counter: Math.max(state.counter, nextLabels.length - 1),
             });
-          } catch(err) {
+          } catch (err) {
             Message.error('编辑格式不合法');
             return;
           }
@@ -440,10 +455,6 @@ export default {
       state.addWay = tab.name;
     };
 
-    const highlighter = (code) => {
-      return highlight(code, languages.js);
-    };
-
     const addLabel = (row) => {
       state.createForm.labels.push(row);
       const nextKeys = state.keys.concat(state.counter + 1);
@@ -463,15 +474,15 @@ export default {
 
     // 用户自定义创建标签
     const createCustomLabel = (name, index) => {
-      const updateLabel = {name, color: defaultColor};
+      const updateLabel = { name, color: defaultColor };
       updateCreateForm({
         labels: replace(state.createForm.labels, index, updateLabel),
       });
     };
 
     const validateDuplicate = (rule, value, callback) => {
-      const isDuplicate = duplicate(state.createForm.labels, d => {
-        if(!value.id) return false;
+      const isDuplicate = duplicate(state.createForm.labels, (d) => {
+        if (!value.id) return false;
         return d.id === value.id;
       });
       if (isDuplicate) {
@@ -483,14 +494,16 @@ export default {
 
     const handleLabelChange = (key, value) => {
       const index = getIndex(key);
-      
+
       // 每次触发错误表单项验证
-      const errorFields = customFormRef.value.fields.filter(d => d.validateState === 'error').map(d => d.prop);
+      const errorFields = customFormRef.value.fields
+        .filter((d) => d.validateState === 'error')
+        .map((d) => d.prop);
       customFormRef.value.validateField(errorFields);
       // 判断是新建还是选择标签
-      const editLabel = state.systemLabels.find(d => d.id === value);
+      const editLabel = state.systemLabels.find((d) => d.id === value);
       // 选择已有标签
-      if(editLabel) {
+      if (editLabel) {
         const updateLabel = pick(editLabel, ['name', 'id', 'color']);
         Object.assign(state, {
           createForm: {
@@ -511,7 +524,7 @@ export default {
       const index = getIndex(k);
 
       Object.assign(state, {
-        keys: state.keys.filter(key => key !== k),
+        keys: state.keys.filter((key) => key !== k),
         createForm: {
           ...state.createForm,
           labels: remove(state.createForm.labels, index),
@@ -521,54 +534,61 @@ export default {
 
     const setLoading = (loading) => {
       Object.assign(state, {
-          loading,
-        });
+        loading,
+      });
     };
 
-    const labelGroupType = computed(() => labelGroupTypeMap[state.groupType]) || undefined;
+    const labelGroupType = computed(() => getLabelGroupLabel(state.groupType)) || undefined;
 
     onMounted(() => {
       // 异常判断
-      if(actionType !== 'create') {
-        if(!state.id) {
+      if (actionType !== 'create') {
+        if (!state.id) {
           $router.push({ path: '/data/labelgroup' });
           throw new Error('当前标签组 id 不存在');
         }
         setLoading(true);
         // 查询数据集详情
-        getLabelGroupDetail(state.id).then(async (res) => {
-          // 当编辑模式，且数据为空时需要提供默认数据
-          const labels = res.labels.length === 0 && actionType === 'edit' ? initialLabels : res.labels;
-          const restProps = state.actionType === 'detail' ? {
-            groupType: res.type || 0,
-          } : {};
-          const autoLabels = await getAutoLabels(res.labelGroupType);
-          Object.assign(state, {
-            activeLabels: autoLabels,
-            systemLabels: autoLabels,
-          });
-          Object.assign(state, {
-            createForm: {
-              ...state.createForm,
-              ...res,
-              labels,
-            },
-            addWay: operateTypeMap[res.operateType] || 'custom',
-            activeLabels: uniqBy(state.activeLabels.concat(res.labels), 'id'),
-            originList: res.labels.slice(),
-            keys: setKeys(labels),
-            counter: Math.max(state.counter, labels.length - 1),
-            codeContent: JSON.stringify(res.labels),
-            ...restProps,
+        getLabelGroupDetail(state.id)
+          .then(async (res) => {
+            // 当编辑模式，且数据为空时需要提供默认数据
+            const labels =
+              res.labels.length === 0 && actionType === 'edit' ? initialLabels : res.labels;
+            const restProps =
+              state.actionType === 'detail'
+                ? {
+                    groupType: res.type || 0,
+                  }
+                : {};
+            const autoLabels = await getAutoLabels(res.labelGroupType);
+            Object.assign(state, {
+              activeLabels: autoLabels,
+              systemLabels: autoLabels,
+            });
+            Object.assign(state, {
+              createForm: {
+                ...state.createForm,
+                ...res,
+                labels,
+              },
+              addWay: operateTypeMap[res.operateType] || 'custom',
+              activeLabels: uniqBy(state.activeLabels.concat(res.labels), 'id'),
+              originList: res.labels.slice(),
+              keys: setKeys(labels),
+              counter: Math.max(state.counter, labels.length - 1),
+              codeContent: JSON.stringify(res.labels),
+              ...restProps,
+            });
+          })
+          .finally(() => {
+            setLoading(false);
           });
-        }).finally(() => {
-          setLoading(false);
-        });
       }
     });
 
     return {
       rules,
+      VUE_APP_DOCS_URL: process.env.VUE_APP_DOCS_URL,
       state,
       submitTxt,
       beautify,
@@ -579,7 +599,6 @@ export default {
       goBack,
       handleClick,
       handleSubmit,
-      highlighter,
       removeLabel,
       addRow,
       handleLabelChange,
@@ -589,96 +608,63 @@ export default {
       labelGroupType,
       labelGroupTypeList,
       handleLabelGroupTypeChange,
+      handleCodeChange,
     };
   },
 };
 </script>
 
-<style lang="scss">
-  @import '@/assets/styles/variables.scss';
-
-  .min-height-100 {
-    min-height: 100px;
-  }
-
-  .height-400 {
-    height: 400px;
-  }
+<style lang="scss" scoped>
+@import '@/assets/styles/variables.scss';
 
-  .max-height-400 {
-    max-height: 400px;
+.labels-edit-wrapper {
+  .code-editor {
+    font-size: 18px;
   }
 
-  .field-extra {
-    font-size: 14px;
-    line-height: 1.5;
-    color: $infoColor;
+  ::v-deep .icon-wrapper {
+    position: absolute;
+    top: -10px;
+    right: 10px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    color: $commonTextColor;
+    text-align: center;
+    cursor: pointer;
+    border: 1px solid $borderColor;
+    border-radius: 50%;
+    transition: 200ms ease;
+
+    &:hover {
+      color: #333;
+    }
   }
 
-  .labelgroup-editor {
-    position: relative;
-    padding: 5px;
-    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
-    font-size: 18px;
-    line-height: 1.5;
-    color: black;
-    background: white;
+  .format {
+    font-size: 20px;
   }
 
-  .prism-editor__textarea:focus {
-    outline: none;
+  .el-tabs__content {
+    padding-right: 0;
   }
 
-  .labels-edit-wrapper {
-    .icon-wrapper {
-      position: absolute;
-      top: -10px;
-      right: 10px;
-      width: 32px;
-      height: 32px;
-      line-height: 32px;
-      color: $commonTextColor;
-      text-align: center;
-      cursor: pointer;
-      border: 1px solid $borderColor;
-      border-radius: 50%;
-      transition: 200ms ease;
-
-      &:hover {
-        color: #333;
-      }
-    }
-
-    .format {
-      font-size: 20px;
-    }
-
-    .disabled {
-      color: $infoColor;
-      pointer-events: none;
-      cursor: not-allowed;
-    }
-
-    .el-tabs__content {
-      padding-right: 0;
-    }
+  .dynamic-field {
+    min-height: 100px;
+    max-height: 400px;
+    overflow: auto;
 
-    .dynamic-field {
+    .exception {
       min-height: 100px;
-      max-height: 400px;
-      overflow: auto;
-
-      .exception {
-        min-height: 100px;
-      }
-
-      .el-form-item {
-        margin-bottom: 20px;
-      }
     }
 
-    .upload-tab {
-      max-width: 80%;
+    ::v-deep .el-form-item {
+      margin-bottom: 20px;
     }
   }
-</style>
\ No newline at end of file
+
+  .upload-tab {
+    max-width: 80%;
+  }
+}
+</style>
diff --git a/webapp/src/views/labelGroup/util.js b/webapp/src/views/labelGroup/util.js
deleted file mode 100644
index 31edffb..0000000
--- a/webapp/src/views/labelGroup/util.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
-
-export const labelGroupTypeMap = {
-    0: '视觉',
-    1: '文本',
-};
-
-export const labelGroupTypeCodeMap = {
-  'VISUAL': 0,
-  'TEXT': 1,
-};
\ No newline at end of file
diff --git a/webapp/src/views/login.vue b/webapp/src/views/login.vue
index 16e8bc3..497b6b5 100644
--- a/webapp/src/views/login.vue
+++ b/webapp/src/views/login.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div style="height: 100%;">
@@ -58,14 +58,25 @@
             <i slot="prefix" class="el-input__icon el-icon-circle-check" />
           </el-input>
           <div class="login-code">
-            <img v-show="codeUrl" :src="codeUrl" alt="刷新验证码" @click="getCode">
+            <img v-show="codeUrl" :src="codeUrl" alt="刷新验证码" @click="getCode" />
           </div>
         </el-form-item>
         <el-form-item>
           <div class="clearfix">
             <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
-            <el-button type="text" style="float: right;" @click="$router.replace({ path: '/resetpassword' })">找回密码</el-button>
-            <el-button type="text" style="float: right; margin-right: 10px;" @click="$router.replace({ path: '/register' })">免费注册</el-button>
+            <el-button
+              type="text"
+              style="float: right;"
+              @click="$router.replace({ path: '/resetpassword' })"
+              >找回密码</el-button
+            >
+            <el-button
+              v-if="loginConfig.allowRegister"
+              type="text"
+              style="float: right; margin-right: 10px;"
+              @click="$router.replace({ path: '/register' })"
+              >免费注册</el-button
+            >
           </div>
           <el-button
             :loading="loading"
@@ -88,6 +99,7 @@ import Cookies from 'js-cookie';
 
 import { getCodeImg } from '@/api/auth';
 import LoginPublic from '@/components/LoginPublic';
+import { loginConfig } from '@/config';
 
 export default {
   name: 'Login',
@@ -96,6 +108,7 @@ export default {
   },
   data() {
     return {
+      loginConfig,
       codeUrl: '',
       loginForm: {
         username: '',
@@ -105,12 +118,8 @@ export default {
         uuid: '',
       },
       loginRules: {
-        username: [
-          { required: true, trigger: 'blur', message: '用户名不能为空' },
-        ],
-        password: [
-          { required: true, trigger: 'blur', message: '密码不能为空' },
-        ],
+        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
+        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
         code: [{ required: true, trigger: 'change', message: '验证码不能为空' }],
       },
       loading: false,
@@ -122,7 +131,7 @@ export default {
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
+      getCodeImg().then((res) => {
         this.codeUrl = res.img;
         this.loginForm.uuid = res.uuid;
       });
@@ -131,7 +140,7 @@ export default {
       this.loginForm.username = Cookies.get('username') || '';
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
@@ -143,16 +152,16 @@ export default {
             .dispatch('Login', this.loginForm)
             .then(() => {
               this.loading = false;
-              this.$router.push({ path: '/home' });
+              this.$router.push({ path: '/' });
             })
-            .catch(err => {
+            .catch((err) => {
               this.$message.error(err.message);
               this.loading = false;
               this.getCode();
             });
-        } else {
-          return false;
+          return true;
         }
+        return false;
       });
     },
   },
diff --git a/webapp/src/views/model/components/addModelDialog.vue b/webapp/src/views/model/components/addModelDialog.vue
index 5ef7f5f..d798172 100644
--- a/webapp/src/views/model/components/addModelDialog.vue
+++ b/webapp/src/views/model/components/addModelDialog.vue
@@ -1,229 +1,151 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <!--模型管理页面-保存模型Dialog-->
-  <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="visible" title="创建模型" width="800px" @open="onDialogOpen" @close="onDialogClose">
-    <!--step-->
-    <el-steps :active="step" finish-status="success" style="width: 300px; margin-right: auto; margin-left: auto;">
+  <el-dialog
+    append-to-body
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    :title="dialogTitle"
+    width="800px"
+    destroy-on-close
+    @close="onDialogClose"
+  >
+    <el-steps :active="step" finish-status="success" class="steps">
       <el-step title="创建模型" />
-      <el-step title="上传版本" />
+      <el-step v-if="!isAtlas" title="上传版本" />
+      <el-step v-else title="模型打包" />
     </el-steps>
-    <!--step==1-->
-    <template v-if="step===0">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="margin-top: 20px;">
-        <el-form-item label="模型名称" prop="name">
-          <el-input
-            v-model.trim="form.name"
-            style="width: 300px;"
-            maxlength="15"
-            placeholder="请输入模型名称"
-            show-word-limit
-          />
-        </el-form-item>
-        <el-form-item label="框架" prop="frameType">
-          <el-select v-model="form.frameType" placeholder="请选择框架" style="width: 400px;">
-            <el-option
-              v-for="item in dict.frame_type"
-              :key="item.value"
-              :value="item.value"
-              :label="item.label"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="模型格式" prop="modelType">
-          <el-select v-model="form.modelType" placeholder="请选择模型格式" style="width: 400px;">
-            <el-option
-              v-for="item in dict.model_type"
-              :key="item.value"
-              :value="item.value"
-              :label="item.label"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="模型类别" prop="modelClassName">
-          <el-select
-            v-model="form.modelClassName"
-            placeholder="请选择或输入模型类别"
-            filterable
-            allow-create
-            style="width: 400px;"
-            @change="onAlgorithmUsageChange"
-          >
-            <el-option
-              v-for="item in algorithmUsageList"
-              :key="item.id"
-              :label="item.auxInfo"
-              :value="item.auxInfo"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="模型描述" prop="modelDescription">
-          <el-input v-model="form.modelDescription" type="textarea" placeholder="请输入模型描述" maxlength="255" show-word-limit style="width: 500px;" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
-        <el-button type="primary" @click="doAddModel">下一步</el-button>
-      </div>
+    <!-- step 0: 填写表单 -->
+    <template v-if="step === 0">
+      <CreateModelForm ref="form" :type="createModelType" @loadingChange="onLoadingChange" />
     </template>
-    <!--step==2-->
-    <template v-if="step==1">
-      <el-form v-if="visible" ref="form2" :model="form2" :rules="rules" label-width="100px">
+    <!-- step 1: 上传模型 -->
+    <template v-if="step === 1 && !isAtlas">
+      <el-form ref="modelVersionForm" :model="modelVersionForm" :rules="rules" label-width="100px">
         <el-form-item label="模型名称">
-          <div>{{ form.name }}</div>
+          <div>{{ modelName }}</div>
         </el-form-item>
         <el-form-item ref="modelAddress" label="模型上传" prop="modelAddress">
-          <upload-inline
-            v-if="refreshFlag"
-            action="fakeApi"
-            accept=".zip,.pb,.h5,.ckpt,.pkl,.pth,.weight,.caffemodel,.pt"
-            :acceptSize="modelConfig.uploadFileAcceptSize"
-            :acceptSizeFormat="uploadSizeFomatter"
-            list-type="text"
-            :limit="1"
-            :multiple="false"
-            :show-file-count="false"
-            :params="uploadParams"
-            :auto-upload="true"
-            :filters="uploadFilters"
-            :onRemove="handleRemove"
-            @uploadStart="uploadStart"
-            @uploadSuccess="uploadSuccess"
-            @uploadError="uploadError"
-          />
-          <upload-progress 
-            v-if="uploading" 
-            :progress="progress" 
-            :color="customColors" 
-            :status="status" 
-            :size="size" 
-            @onSetProgress="onSetProgress"
+          <ModelUploader
+            :model-type="modelType"
+            @loadingChange="onLoadingChange"
+            @modelAddressChange="onModelAddressChange"
           />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="visible = false;step=0;">下次再传</el-button>
-        <el-button type="primary" :disabled="loading" @click="doAddVersion">确定上传</el-button>
-      </div>
     </template>
+    <!-- step 1: 模型打包 -->
+    <template v-if="step === 1 && isAtlas">
+      <PackageForm ref="packageForm" />
+    </template>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="onCancelClick">{{ cancelText }}</el-button>
+      <el-button type="primary" :loading="confirmLoading" @click="onConfirmClick">{{
+        confirmText
+      }}</el-button>
+    </div>
   </el-dialog>
 </template>
 
 <script>
 import { add as addVersion } from '@/api/model/modelVersion';
-import { add as addModel } from '@/api/model/model';
-import { list as getAlgorithmUsages, add as addAlgorithmUsage } from '@/api/algorithm/algorithmUsage';
-import UploadInline from '@/components/UploadForm/inline';
-import UploadProgress from '@/components/UploadProgress';
-import { getUniqueId, validateNameWithHyphen, uploadSizeFomatter, invalidFileNameChar } from '@/utils';
-import { modelConfig } from '@/config';
+import { add as addModel, packageAtlasModel } from '@/api/model/model';
 
-const defaultForm = {
-  name: null,
-  frameType: null,
-  modelType: null,
-  modelClassName: null,
-  modelDescription: null,
-};
+import CreateModelForm from './createModelForm';
+import PackageForm from './packageForm';
+import ModelUploader from './modelUploader';
 
-const defaultForm2 = {
+const defaultVersionForm = {
   parentId: null,
   modelAddress: null,
-  modelSource: 0,
+  modelSource: 0, // 用户上传
 };
 
 export default {
   name: 'AddModelDialog',
-  dicts: ['model_type', 'frame_type'],
-  components: { UploadInline, UploadProgress },
+  components: { CreateModelForm, PackageForm, ModelUploader },
+  props: {
+    createModelType: {
+      // Custom - 我的模型; Atlas - 炼知模型
+      type: String,
+      default: 'Custom',
+    },
+  },
   data() {
     return {
       visible: false,
-      form: { ...defaultForm},
-      form2: { ...defaultForm2},
+      modelName: null, // 上传模型版本时展示的模型名称
+      modelType: null, // 上传模型版本时用于后缀限制
+      modelVersionForm: { ...defaultVersionForm },
       rules: {
-        parentId: [
-          { required: true, message: '请选择模型', trigger: 'blur' },
-        ],
-        name: [
-          { required: true, message: '请输入模型名称', trigger: 'blur' },
-          { max: 20, message: '长度在20个字符以内', trigger: 'blur' },
-          {
-            validator: validateNameWithHyphen,
-            trigger: ['blur', 'change'],
-          },
-        ],
-        frameType: [
-          { required: true, message: '请选择模型框架', trigger: 'blur' },
-        ],
-        modelType: [
-          { required: true, message: '请选择模型格式', trigger: 'blur' },
-        ],
-        modelClassName: [
-          { required: true, message: '请输入模型类别', trigger: ['blur', 'change'] },
-        ],
-        modelDescription: [
-          { required: true, message: '请输入模型描述', trigger: 'blur' },
-          { max: 255, message: '长度在255个字符以内', trigger: 'blur' },
-        ],
+        parentId: [{ required: true, message: '请选择模型', trigger: 'blur' }],
         modelAddress: [
           { required: true, message: '请上传有效的模型', trigger: ['blur', 'manual'] },
         ],
       },
       step: 0,
-      uploadParams: {
-        objectPath: null, // 对象存储路径
-      },
-      algorithmUsageList: [],
-      refreshFlag: true,
-      uploading: false,
-      submitting: false,
-      size: 0,
-      progress: 0,
-      customColors: [
-        {color: '#909399', percentage: 40},
-        {color: '#e6a23c', percentage: 80},
-        {color: '#67c23a', percentage: 100},
-      ],
-      uploadFilters: [invalidFileNameChar],
-      modelConfig,
+      packageSubmitting: false,
+      loading: false,
     };
   },
   computed: {
-    status() {
-      return this.progress === 100 ? 'success' : null;
+    isAtlas() {
+      return this.createModelType === 'Atlas';
     },
-    user() {
-      return this.$store.getters.user;
+    dialogTitle() {
+      if (this.isAtlas) {
+        return '上传炼知模型';
+      }
+      return '上传模型';
+    },
+    cancelText() {
+      switch (this.step) {
+        case 0:
+          return '取消';
+        case 1:
+          if (this.isAtlas) {
+            return '暂不打包';
+          }
+          return '下次再传';
+        default:
+          return '取消';
+      }
+    },
+    confirmText() {
+      switch (this.step) {
+        case 0:
+          return '下一步';
+        case 1:
+          if (this.isAtlas) {
+            return '确定';
+          }
+          return '确定上传';
+        default:
+          return '确定';
+      }
     },
-    loading() {
-      return this.uploading || this.submitting;
+    confirmLoading() {
+      return this.loading || this.packageSubmitting;
     },
   },
   methods: {
     show() {
-      this.refreshFlag = false;
       this.visible = true;
-      this.$nextTick(() => {
-        this.refreshFlag = true;
-      });
-    },
-    onDialogOpen() {
-      this.getAlgorithmUsages();
     },
     onDialogClose() {
       this.reset();
@@ -231,70 +153,72 @@ export default {
       this.submitting = false;
       this.$emit('addDone', true);
     },
-    reset() {
+    onCancelClick() {
+      this.visible = false;
       this.step = 0;
-      this.form = { ...defaultForm};
-      this.form2 = { ...defaultForm2};
-      setTimeout(() => {
-        this.$refs.form && this.$refs.form.clearValidate();
-        this.$refs.form2 && this.$refs.form2.clearValidate();
-      }, 0);
     },
-    // handle
-    onAlgorithmUsageChange(value) {
-      const usage = this.algorithmUsageList.find(usage => usage.auxInfo === value);
-      if (!usage) {
-        this.createAlgorithmUsage(value);
+    onConfirmClick() {
+      if (this.step === 0) {
+        this.addModel();
+      } else if (this.step === 1) {
+        this.confirmStep2();
       }
     },
-    handleRemove() {
-      this.uploading = false;
-      this.form2.modelAddress = null;
-      this.$refs.modelAddress.validate('manual');
-    },
-    uploadStart(files) {
-      this.updateImagePath();
-      [ this.uploading, this.size, this.progress ] = [ true, files.size, 0 ];
+    reset() {
+      this.step = 0;
+      this.$refs.form && this.$refs.form.reset();
+      this.modelVersionForm = { ...defaultVersionForm };
+      this.$nextTick(() => {
+        this.$refs.modelVersionForm && this.$refs.modelVersionForm.clearValidate();
+      });
     },
-    onSetProgress(val) {
-      this.progress += val;
+
+    // handle
+    onLoadingChange(loading) {
+      this.loading = loading;
     },
-    uploadSuccess(res) {
-      this.progress = 100;
-      setTimeout(() => {
-        this.uploading = false;
-      }, 1000);
-      this.form2.modelAddress = res[0].data.objectName;
+    onModelAddressChange(modelAddress) {
+      this.modelVersionForm.modelAddress = modelAddress;
       this.$refs.modelAddress.validate('manual');
     },
-    uploadError() {
-      this.uploading = false;
-      this.$message({
-        message: '上传文件失败',
-        type: 'error',
-      });
-    },
     // op
-    doAddModel() {
-      this.$refs.form.validate(async valid => {
-        if (valid) {
-          const params = { ...this.form};
-          const res = await addModel(params);
-          this.form2.parentId = res.id;
-          this.step = 1;
-          this.$message({
-            message: '模型新建成功',
-            type: 'success',
-          });
+    addModel() {
+      this.$refs.form.validate(async (form) => {
+        this.onLoadingChange(true);
+        const res = await addModel(form).finally(() => {
+          this.onLoadingChange(false);
+        });
+        const modelId = res.id;
+        this.modelName = form.name;
+        this.modelType = form.modelType;
+        this.modelVersionForm.parentId = modelId;
+        this.$message({
+          message: '模型新建成功',
+          type: 'success',
+        });
+        this.step = 1;
+
+        // 创建炼知模型需要 initForm
+        if (this.isAtlas) {
+          this.$nextTick(() => this.$refs.packageForm.initForm(modelId));
         }
       });
     },
-    doAddVersion() {
-      this.$refs.form2.validate(async valid => {
+    confirmStep2() {
+      if (this.isAtlas) {
+        this.packageModel();
+        return;
+      }
+      this.addVersion();
+    },
+    addVersion() {
+      this.$refs.modelVersionForm.validate(async (valid) => {
         if (valid) {
-          this.submitting = true;
-          const params = { ...this.form2};
-          await addVersion(params).finally(() => { this.submitting = false; });
+          this.onLoadingChange(true);
+          const params = { ...this.modelVersionForm };
+          await addVersion(params).finally(() => {
+            this.onLoadingChange(false);
+          });
           this.visible = false;
           this.$message({
             message: '模型版本上传成功',
@@ -303,24 +227,26 @@ export default {
         }
       });
     },
-    getAlgorithmUsages() {
-      const params = {
-        isContainDefault: true,
-        current: 1,
-        size: 1000,
-      };
-      getAlgorithmUsages(params).then(res => {
-        this.algorithmUsageList = res.result;
+    packageModel() {
+      this.$refs.packageForm.validate((form) => {
+        this.packageSubmitting = true;
+        packageAtlasModel(form)
+          .then(() => {
+            this.visible = false;
+            this.$message.success('模型打包成功');
+          })
+          .finally(() => {
+            this.packageSubmitting = false;
+          });
       });
     },
-    async createAlgorithmUsage(auxInfo) {
-      await addAlgorithmUsage({ auxInfo });
-      this.getAlgorithmUsages();
-    },
-    updateImagePath() {
-      this.uploadParams.objectPath = `upload-temp/${this.user.id}/${getUniqueId()}`;
-    },
-    uploadSizeFomatter,
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.steps {
+  width: 300px;
+  margin: 0 auto 20px;
+}
+</style>
diff --git a/webapp/src/views/model/components/createModelForm.vue b/webapp/src/views/model/components/createModelForm.vue
new file mode 100644
index 0000000..8a511ee
--- /dev/null
+++ b/webapp/src/views/model/components/createModelForm.vue
@@ -0,0 +1,253 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+    <el-form-item label="模型名称" prop="name">
+      <el-input
+        v-model.trim="form.name"
+        style="width: 300px;"
+        maxlength="32"
+        placeholder="请输入模型名称"
+        show-word-limit
+      />
+    </el-form-item>
+    <el-form-item label="框架" prop="frameType">
+      <el-select
+        v-model="form.frameType"
+        placeholder="请选择框架"
+        style="width: 400px;"
+        :disabled="isAtlas"
+        filterable
+        @change="onFrameTypeChange"
+      >
+        <el-option
+          v-for="item in dict.frame_type"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+        />
+      </el-select>
+      <el-tooltip
+        v-if="isAtlas"
+        content="模型炼知暂只支持 Pytorch 框架的模型"
+        effect="dark"
+        placement="top"
+        class="model-uploader-tooltip"
+      >
+        <i class="el-icon-warning-outline primary f18 v-text-top" />
+      </el-tooltip>
+    </el-form-item>
+    <el-form-item label="模型格式" prop="modelType">
+      <el-select
+        v-model="form.modelType"
+        placeholder="请选择模型格式"
+        style="width: 400px;"
+        :disabled="isAtlas"
+        filterable
+      >
+        <el-option
+          v-for="item in modelTypeList"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="模型类别" prop="modelClassName">
+      <el-select
+        v-model="form.modelClassName"
+        placeholder="请选择或输入模型类别"
+        filterable
+        allow-create
+        style="width: 400px;"
+        @change="onAlgorithmUsageChange"
+      >
+        <el-option
+          v-for="item in algorithmUsageList"
+          :key="item.id"
+          :label="item.auxInfo"
+          :value="item.auxInfo"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="模型描述" prop="modelDescription">
+      <el-input
+        v-model="form.modelDescription"
+        type="textarea"
+        placeholder="请输入模型描述"
+        maxlength="255"
+        show-word-limit
+        style="width: 500px;"
+      />
+    </el-form-item>
+    <!-- 上传模型炼知表单时，直接在表单中进行模型上传 -->
+    <template v-if="isAtlas">
+      <el-form-item ref="modelAddress" label="模型上传" prop="modelAddress">
+        <ModelUploader :type="type" v-on="$listeners" @modelAddressChange="onModelAddressChange" />
+      </el-form-item>
+    </template>
+  </el-form>
+</template>
+
+<script>
+import {
+  list as getAlgorithmUsages,
+  add as addAlgorithmUsage,
+} from '@/api/algorithm/algorithmUsage';
+import { validateNameWithHyphen, MODEL_RESOURCE_ENUM } from '@/utils';
+import { getModelTypeMap } from '@/api/model/model';
+
+import ModelUploader from './modelUploader';
+import { atlasFrameTypeList, atlasModelTypeList } from '../util';
+
+const defaultForm = {
+  name: null,
+  frameType: null,
+  modelType: null, // 模型格式
+  modelClassName: null, // 模型类别（用途）
+  modelDescription: null,
+  modelAddress: null, // 创建炼知模型时需要传递
+  modelResource: null, // 创建炼知模型时需要传递
+};
+
+export default {
+  name: 'CreateModelForm',
+  dicts: ['model_type', 'frame_type'],
+  components: {
+    ModelUploader,
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'Custom',
+    },
+  },
+  data() {
+    return {
+      algorithmUsageList: [],
+
+      form: { ...defaultForm },
+      rules: {
+        name: [
+          { required: true, message: '请输入模型名称', trigger: 'blur' },
+          { max: 32, message: '长度在32个字符以内', trigger: 'blur' },
+          {
+            validator: validateNameWithHyphen,
+            trigger: ['blur', 'change'],
+          },
+        ],
+        frameType: [{ required: true, message: '请选择模型框架', trigger: 'blur' }],
+        modelType: [{ required: true, message: '请选择模型格式', trigger: 'blur' }],
+        modelClassName: [
+          { required: true, message: '请输入模型类别', trigger: ['blur', 'change'] },
+        ],
+        modelDescription: [{ max: 255, message: '长度在255个字符以内', trigger: 'blur' }],
+        modelAddress: [
+          { required: true, message: '请上传有效的模型', trigger: ['blur', 'manual'] },
+        ],
+      },
+      modelTypeMap: {},
+    };
+  },
+  computed: {
+    isAtlas() {
+      return this.type === 'Atlas';
+    },
+    modelTypeList() {
+      if (!this.form.frameType || !this.modelTypeMap[this.form.frameType]) {
+        return this.dict.model_type;
+      }
+      return this.dict.model_type.filter((type) =>
+        this.modelTypeMap[this.form.frameType].includes(+type.value)
+      );
+    },
+  },
+  created() {
+    this.getAlgorithmUsages();
+    this.getModelTypeMap();
+
+    if (this.isAtlas) {
+      // 炼知模型使用默认值，目前只支持 Pytorch
+      this.form.frameType = atlasFrameTypeList[0].value;
+      this.form.modelType = atlasModelTypeList[0].value;
+    }
+  },
+  methods: {
+    // form functions
+    validate(resolve, reject) {
+      let valid = true;
+      this.$refs.form.validate((isValid) => {
+        valid = valid && isValid;
+      });
+      if (valid) {
+        this.form.modelResource = this.isAtlas
+          ? MODEL_RESOURCE_ENUM.ATLAS
+          : MODEL_RESOURCE_ENUM.CUSTOM;
+        if (typeof resolve === 'function') {
+          return resolve(this.form);
+        }
+        return true;
+      }
+      if (typeof reject === 'function') {
+        return reject(this.form);
+      }
+      return false;
+    },
+    reset() {
+      this.form = { ...defaultForm };
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate();
+      });
+    },
+
+    getAlgorithmUsages() {
+      const params = {
+        isContainDefault: true,
+        current: 1,
+        size: 1000,
+      };
+      getAlgorithmUsages(params).then((res) => {
+        this.algorithmUsageList = res.result;
+      });
+    },
+    async createAlgorithmUsage(auxInfo) {
+      await addAlgorithmUsage({ auxInfo });
+      this.getAlgorithmUsages();
+    },
+    onAlgorithmUsageChange(value) {
+      const usage = this.algorithmUsageList.find((usage) => usage.auxInfo === value);
+      if (!usage) {
+        this.createAlgorithmUsage(value);
+      }
+    },
+    onModelAddressChange(modelAddress) {
+      this.form.modelAddress = modelAddress;
+      this.$refs.modelAddress.validate('manual');
+    },
+
+    // 获取模型框架 —— 模型格式匹配关系
+    async getModelTypeMap() {
+      this.modelTypeMap = await getModelTypeMap();
+    },
+
+    // 模型框架
+    onFrameTypeChange() {
+      this.form.modelType = null;
+    },
+  },
+};
+</script>
diff --git a/webapp/src/views/model/components/modelUploader.vue b/webapp/src/views/model/components/modelUploader.vue
new file mode 100644
index 0000000..6c5173e
--- /dev/null
+++ b/webapp/src/views/model/components/modelUploader.vue
@@ -0,0 +1,156 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="model-uploader-container">
+    <upload-inline
+      action="fakeApi"
+      :accept="accept"
+      :acceptSize="modelConfig.uploadFileAcceptSize"
+      :acceptSizeFormat="uploadSizeFomatter"
+      list-type="text"
+      :limit="1"
+      :multiple="false"
+      :show-file-count="false"
+      :params="uploadParams"
+      :auto-upload="true"
+      :filters="uploadFilters"
+      :onRemove="onRemove"
+      @uploadStart="uploadStart"
+      @uploadSuccess="uploadSuccess"
+      @uploadError="uploadError"
+    />
+    <upload-progress
+      v-if="loading"
+      :progress="progress"
+      :color="customColors"
+      :status="status"
+      :size="size"
+      @onSetProgress="onSetProgress"
+    />
+  </div>
+</template>
+
+<script>
+import UploadInline from '@/components/UploadForm/inline';
+import UploadProgress from '@/components/UploadProgress';
+import { modelConfig } from '@/config';
+import { getUniqueId, uploadSizeFomatter, invalidFileNameChar } from '@/utils';
+import { getModelSuffix } from '@/api/model/model';
+
+export default {
+  name: 'ModelUploader',
+  components: { UploadInline, UploadProgress },
+  props: {
+    type: {
+      type: String,
+      default: 'Custom',
+    },
+    modelType: String,
+  },
+  data() {
+    return {
+      modelConfig,
+      uploadParams: {
+        objectPath: null, // 对象存储路径
+      },
+      loading: false,
+      size: 0,
+      progress: 0,
+      // TODO: 进度条的颜色可以考虑提取公共默认值
+      customColors: [
+        { color: '#909399', percentage: 40 },
+        { color: '#e6a23c', percentage: 80 },
+        { color: '#67c23a', percentage: 100 },
+      ],
+      uploadFilters: [invalidFileNameChar],
+      modelSuffixMap: {}, // 模型后缀信息
+    };
+  },
+  computed: {
+    status() {
+      return this.progress === 100 ? 'success' : null;
+    },
+    user() {
+      return this.$store.getters.user;
+    },
+    isAtlas() {
+      return this.type === 'Atlas';
+    },
+    accept() {
+      if (this.isAtlas) {
+        return '.pth';
+      }
+      if (this.modelType) {
+        if (this.modelSuffixMap[this.modelType]) {
+          return `.zip,${this.modelSuffixMap[this.modelType]}`;
+        }
+        return '.zip';
+      }
+      return '.zip,.pb,.h5,.ckpt,.pkl,.pth,.weight,.caffemodel,.pt';
+    },
+  },
+  watch: {
+    loading(loading) {
+      this.$emit('loadingChange', loading);
+    },
+  },
+  created() {
+    this.updatePath();
+    if (!this.isAtlas) {
+      this.getModelSuffix();
+    }
+  },
+  methods: {
+    uploadSizeFomatter,
+
+    updatePath() {
+      this.uploadParams.objectPath = `upload-temp/${this.user.id}/${getUniqueId()}`;
+    },
+    async getModelSuffix() {
+      this.modelSuffixMap = await getModelSuffix({ modelType: this.modelType });
+    },
+
+    onRemove() {
+      this.loading = false;
+      this.$emit('modelAddressChange', null);
+    },
+    uploadStart(files) {
+      this.updatePath();
+      [this.loading, this.size, this.progress] = [true, files.size, 0];
+      this.$emit('uploadStart');
+    },
+    onSetProgress(val) {
+      this.progress += val;
+    },
+    uploadSuccess(res) {
+      this.progress = 100;
+      setTimeout(() => {
+        this.loading = false;
+      }, 1000);
+      this.$emit('modelAddressChange', res[0].data.objectName);
+    },
+    uploadError() {
+      this.loading = false;
+      this.$message({
+        message: '上传文件失败',
+        type: 'error',
+      });
+      this.$emit('uploadError');
+    },
+  },
+};
+</script>
diff --git a/webapp/src/views/model/components/packageForm.vue b/webapp/src/views/model/components/packageForm.vue
new file mode 100644
index 0000000..da2fbe8
--- /dev/null
+++ b/webapp/src/views/model/components/packageForm.vue
@@ -0,0 +1,221 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+    <el-form-item ref="entryName" label="入口函数" prop="entryName">
+      <el-select
+        v-model="form.entryName"
+        placeholder="请选择入口函数"
+        filterable
+        @change="validateField('entryName')"
+      >
+        <el-option
+          v-for="item in dict.entry_name"
+          :key="item.id"
+          :value="item.value"
+          :label="item.label"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="Readme" prop="readme">
+      <el-input
+        v-model="form.readme"
+        type="textarea"
+        placeholder="请输入模型描述"
+        maxlength="255"
+        :rows="4"
+        show-word-limit
+      />
+    </el-form-item>
+    <el-divider content-position="left">Metadata</el-divider>
+    <el-form-item label="模型名称" prop="name">
+      <el-input v-model.trim="form.name" placeholder="请输入模型名称" />
+    </el-form-item>
+    <el-form-item label="数据集名称" prop="dataset">
+      <el-input v-model.trim="form.dataset" placeholder="请输入数据集名称" />
+    </el-form-item>
+    <el-form-item ref="task" label="任务类型" prop="task">
+      <el-select
+        v-model="form.task"
+        placeholder="请选择任务类型"
+        filterable
+        @change="validateField('task')"
+      >
+        <el-option
+          v-for="item in dict.atlas_task"
+          :key="item.id"
+          :value="item.value"
+          :label="item.label"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="模型地址" prop="url">
+      <el-input v-model.trim="form.url" placeholder="请输入模型地址" />
+    </el-form-item>
+    <el-divider content-position="left">输入</el-divider>
+    <el-form-item label="图像尺寸" prop="size">
+      <el-input v-model.number="form.size" placeholder="请输入图像尺寸" class="w-200" />
+    </el-form-item>
+    <el-form-item label="均一化范围" prop="range" class="is-required">
+      <el-input v-model.trim="form.range" placeholder="请输入均一化范围" class="w-200" />
+    </el-form-item>
+    <el-form-item label="色彩空间" prop="space">
+      <el-input v-model.trim="form.space" disabled placeholder="请输入色彩空间" class="w-200" />
+      <el-tooltip effect="dark" content="炼知模型仅支持 RGB 格式的数据集" placement="top">
+        <i class="el-icon-warning-outline primary f18 v-text-top" />
+      </el-tooltip>
+    </el-form-item>
+    <el-divider content-position="left">归一化</el-divider>
+    <el-form-item label="均值" prop="mean" class="is-required">
+      <el-input v-model.trim="form.mean" placeholder="请输入均值" class="w-200" />
+    </el-form-item>
+    <el-form-item label="方差" prop="std" class="is-required">
+      <el-input v-model.trim="form.std" placeholder="请输入方差" class="w-200" />
+    </el-form-item>
+    <el-divider content-position="left">Entry Args</el-divider>
+    <el-form-item label="预训练模型" prop="entryPretrained">
+      <el-switch v-model="form.entryPretrained" />
+    </el-form-item>
+    <el-form-item label="分类数量" prop="entryNumClasses">
+      <el-input v-model.number="form.entryNumClasses" placeholder="请输入分类数量" class="w-200" />
+    </el-form-item>
+    <el-divider content-position="left">Other Metadata</el-divider>
+    <el-form-item label="分类数量" prop="otherNumClasses">
+      <el-input v-model.number="form.otherNumClasses" placeholder="请输入分类数量" class="w-200" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { generateNumArrValidator } from '../util';
+
+const defaultForm = {
+  id: null,
+  entryName: null,
+  readme: null, // 模型描述
+  name: null, // 模型名称
+  dataset: null, // 数据集名称
+  task: null, // 任务类型
+  url: null, // 模型地址
+  size: '224', // 图像尺寸
+  range: '[0, 1]', // 均一化范围
+  space: 'rgb', // 色彩空间
+  mean: '[0.485, 0.456, 0.406]', // 均值
+  std: '[0.229, 0.224, 0.225]', // 方差
+  entryPretrained: true, // 是否为预训练模型
+  entryNumClasses: null, // 分类数量
+  otherNumClasses: null, // OtherMetadata 里的分类数量
+};
+
+export default {
+  name: 'PackageForm',
+  dicts: ['entry_name', 'atlas_task'],
+  data() {
+    return {
+      form: { ...defaultForm },
+      rules: {
+        entryName: [{ required: true, message: '请选择入口函数', trigger: 'manual' }],
+        name: [{ required: true, message: '请输入模型名称', trigger: ['blur', 'change'] }],
+        dataset: [{ required: true, message: '请输入数据集名称', trigger: ['blur', 'change'] }],
+        task: [{ required: true, message: '请选择任务类型', trigger: 'manual' }],
+        url: [{ required: true, message: '请输入模型地址', trigger: ['blur', 'change'] }],
+        size: [{ required: true, message: '请输入图像尺寸', trigger: ['blur', 'change'] }],
+        range: [
+          {
+            validator: generateNumArrValidator({
+              count: 2,
+              min: 0,
+              max: 1,
+              emptyMsg: '请输入均一化范围',
+            }),
+            trigger: 'blur',
+          },
+        ],
+        space: [{ required: true, message: '请输入色彩空间', trigger: ['blur', 'change'] }],
+        mean: [
+          {
+            validator: generateNumArrValidator({ count: 3, emptyMsg: '请输入均值' }),
+            trigger: 'blur',
+          },
+        ],
+        std: [
+          {
+            validator: generateNumArrValidator({ count: 3, emptyMsg: '请输入方差' }),
+            trigger: 'blur',
+          },
+        ],
+        entryPretrained: [
+          { required: true, message: '请选择是否为预训练模型', trigger: ['blur', 'change'] },
+        ],
+        entryNumClasses: [
+          { required: true, message: '请输入分类数量', trigger: ['blur', 'change'] },
+        ],
+        otherNumClasses: [
+          { required: true, message: '请输入分类数量', trigger: ['blur', 'change'] },
+        ],
+      },
+    };
+  },
+  methods: {
+    initForm(id) {
+      // 该表单只获取 id 值，无需编辑
+      this.form.id = id;
+    },
+    resetForm() {
+      this.form = { ...defaultForm };
+      this.$nextTick(() => {
+        this.clearValidate();
+      });
+    },
+    validate(resolve, reject) {
+      let valid = true;
+      this.$refs.form.validate((isValid) => {
+        valid = valid && isValid;
+      });
+
+      if (valid) {
+        const data = { ...this.form };
+        // 把数组字符串解析为数组，JSON 有效性在表单校验时进行
+        data.range = JSON.parse(data.range);
+        data.mean = JSON.parse(data.mean);
+        data.std = JSON.parse(data.std);
+        resolve && resolve(data);
+      } else {
+        reject && reject(this.form);
+      }
+    },
+    validateField(field) {
+      this.$refs[field].validate('manual');
+    },
+    clearValidate() {
+      this.$refs.form.clearValidate();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep.el-divider--horizontal {
+  margin-top: 40px;
+}
+
+::v-deep.el-divider__text.is-left {
+  left: -20px;
+  font-size: 20px;
+  font-weight: bold;
+}
+</style>
diff --git a/webapp/src/views/model/index.vue b/webapp/src/views/model/index.vue
index 789cb32..379558f 100644
--- a/webapp/src/views/model/index.vue
+++ b/webapp/src/views/model/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
@@ -26,15 +26,17 @@
             type="primary"
             icon="el-icon-plus"
             round
+            :disabled="isPreset"
             @click="toAdd"
-          >创建模型</el-button>
+            >上传模型</el-button
+          >
         </span>
         <span class="cd-opts-right">
           <el-input
             id="queryName"
             v-model="query.name"
             clearable
-            placeholder="请输入模型名称或ID"
+            :placeholder="queryPlaceholder"
             class="filter-item"
             style="width: 200px;"
             @keyup.enter.native="crud.toQuery"
@@ -43,15 +45,16 @@
         </span>
       </div>
       <div>
-        <el-tabs v-model="active" class="eltabs-inlineblock" @tab-click="crud.toQuery">
-          <el-tab-pane id="tab_0" label="我的模型" name="0" />
-          <el-tab-pane id="tab_1" label="预训练模型" name="1" />
-          <el-tab-pane id="tab_2" label="炼知模型" name="2" />
+        <el-tabs v-model="active" class="eltabs-inlineblock" @tab-click="onTabClick">
+          <el-tab-pane id="tab_0" label="我的模型" :name="String(MODEL_RESOURCE_ENUM.CUSTOM)" />
+          <el-tab-pane id="tab_1" label="预训练模型" :name="String(MODEL_RESOURCE_ENUM.PRESET)" />
+          <el-tab-pane id="tab_2" label="炼知模型" :name="String(MODEL_RESOURCE_ENUM.ATLAS)" />
         </el-tabs>
       </div>
     </div>
     <!--表格渲染-->
     <el-table
+      v-if="showTable"
       ref="table"
       v-loading="crud.loading"
       :data="crud.data"
@@ -59,16 +62,20 @@
       @selection-change="crud.selectionChangeHandler"
       @sort-change="crud.sortChange"
     >
-      <el-table-column prop="id" label="ID" width="80" sortable="custom" />
+      <el-table-column v-if="!isPreset" prop="id" label="ID" width="80" sortable="custom" />
       <el-table-column prop="name" label="模型名称" min-width="180px" />
       <el-table-column prop="frameType" label="框架名称" min-width="150px">
-        <template slot-scope="scope">{{ dict.label.frame_type[scope.row.frameType]|| "--" }}</template>
+        <template slot-scope="scope">{{
+          dict.label.frame_type[scope.row.frameType] || '--'
+        }}</template>
       </el-table-column>
       <el-table-column prop="modelType" label="模型格式" min-width="150px">
-        <template slot-scope="scope">{{ dict.label.model_type[scope.row.modelType]|| "--" }}</template>
+        <template slot-scope="scope">{{
+          dict.label.model_type[scope.row.modelType] || '--'
+        }}</template>
       </el-table-column>
       <el-table-column prop="modelClassName" label="模型类别" min-width="150px">
-        <template slot-scope="scope">{{ scope.row.modelClassName || "--" }}</template>
+        <template slot-scope="scope">{{ scope.row.modelClassName || '--' }}</template>
       </el-table-column>
       <el-table-column
         prop="modelDescription"
@@ -76,13 +83,12 @@
         min-width="300px"
         show-overflow-tooltip
       />
-      <el-table-column v-if="isCustom" prop="versionNum" label="版本" width="80">
+      <el-table-column v-if="isCustom" prop="version" label="版本" width="80">
         <template slot-scope="scope">
-          <a
-            v-if="scope.row.versionNum"
-            @click="goVersion(scope.row.id, scope.row.name)"
-          >{{ scope.row.versionNum }}</a>
-          <span v-if="!scope.row.versionNum">--</span>
+          <a v-if="scope.row.version" @click="goVersion(scope.row.id, scope.row.name)">{{
+            scope.row.version
+          }}</a>
+          <span v-if="!scope.row.version">--</span>
         </template>
       </el-table-column>
       <el-table-column prop="updateTime" label="更新时间" width="160" sortable="custom">
@@ -94,61 +100,71 @@
         <template slot-scope="scope">
           <el-button
             v-if="isCustom"
-            :id="`goVersion_`+scope.$index"
+            :id="`goVersion_` + scope.$index"
             type="text"
             @click="goVersion(scope.row.id, scope.row.name)"
-          >历史版本</el-button>
+            >历史版本</el-button
+          >
           <el-tooltip
             :disabled="!!scope.row.modelAddress"
             effect="dark"
             content="暂无版本"
             placement="top"
           >
-            <span :class="{'ml-10 mr-10': isCustom}">
+            <span :class="{ 'ml-10 mr-10': isCustom }">
               <el-button
-                :id="`doDownload_`+scope.$index"
+                :id="`doDownload_` + scope.$index"
                 :disabled="!scope.row.modelAddress"
                 type="text"
                 @click="doDownload(scope.row)"
-              >下载</el-button>
+                >下载</el-button
+              >
             </span>
           </el-tooltip>
           <el-button
             v-if="isCustom"
-            :id="`doEdit_`+scope.$index"
+            :id="`doEdit_` + scope.$index"
             type="text"
             @click="doEdit(scope.row)"
-          >编辑</el-button>
+            >编辑</el-button
+          >
           <el-button
-            v-if="isCustom"
-            :id="`doDelete_`+scope.$index"
+            v-if="isAtlas && scope.row.packaged === ALTAS_MODEL_PACKAGE_ENUM.UNPACKAGED"
+            type="text"
+            @click="doPack(scope.row.id)"
+            >打包</el-button
+          >
+          <el-tooltip
+            v-if="isPreset"
+            content="该模型不支持部署"
+            placement="top"
+            :disabled="scope.row.servingModel"
+          >
+            <el-dropdown>
+              <el-button
+                type="text"
+                style="margin-left: 10px;"
+                :disabled="!scope.row.servingModel"
+                @click.stop="() => {}"
+                >部署<i class="el-icon-arrow-down el-icon--right" />
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="doServing(scope.row, 'onlineServing')">
+                  <el-button type="text">在线服务</el-button>
+                </el-dropdown-item>
+                <el-dropdown-item @click.native="doServing(scope.row, 'batchServing')">
+                  <el-button type="text">批量部署</el-button>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-tooltip>
+          <el-button
+            v-if="isCustom || isAtlas || isAdmin"
+            :id="`doDelete_` + scope.$index"
             type="text"
             @click="doDelete(scope.row.id)"
-          >删除</el-button>
-          <el-dropdown v-if="isPreset">
-            <el-button
-              type="text"
-              style="margin-left: 10px;"
-              @click.stop="()=>{}"
-            >部署<i class="el-icon-arrow-down el-icon--right" />
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item
-                @click.native="doServing(scope.row, 'onlineServing')"
-              >
-                <el-button
-                  type="text"
-                >在线服务</el-button>
-              </el-dropdown-item>
-              <el-dropdown-item
-                @click.native="doServing(scope.row, 'batchServing')"
-              >
-                <el-button
-                  type="text"
-                >批量部署</el-button>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -171,7 +187,7 @@
             id="name"
             v-model.trim="form.name"
             style="width: 300px;"
-            maxlength="15"
+            maxlength="32"
             placeholder="请输入模型名称"
             show-word-limit
           />
@@ -182,6 +198,8 @@
             v-model="form.frameType"
             placeholder="请选择框架"
             style="width: 300px;"
+            filterable
+            @change="onFrameTypeChange"
           >
             <el-option
               v-for="item in dict.frame_type"
@@ -197,9 +215,10 @@
             v-model="form.modelType"
             placeholder="请选择模型格式"
             style="width: 300px;"
+            filterable
           >
             <el-option
-              v-for="item in dict.model_type"
+              v-for="item in modelTypeList"
               :key="item.value"
               :value="item.value"
               :label="item.label"
@@ -238,12 +257,25 @@
       </el-form>
     </BaseModal>
     <!--多步骤新增dialog-->
-    <add-model-dialog ref="addModel" @addDone="addDone" />
+    <add-model-dialog ref="addModel" :create-model-type="createModelType" @addDone="addDone" />
+    <BaseModal
+      title="炼知模型打包"
+      :visible.sync="packageVisible"
+      width="800px;"
+      :loading="packageSubmitting"
+      @ok="onPackageConfirm"
+      @cancel="onPackageCancel"
+      @close="onPackageClose"
+    >
+      <PackageForm ref="packageForm" />
+    </BaseModal>
   </div>
 </template>
 
 <script>
-import crudModel, { del } from '@/api/model/model';
+import { mapGetters } from 'vuex';
+
+import crudModel, { del, packageAtlasModel, getModelTypeMap } from '@/api/model/model';
 import {
   list as getAlgorithmUsages,
   add as addAlgorithmUsage,
@@ -252,8 +284,14 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud';
 import BaseModal from '@/components/BaseModal';
 import rrOperation from '@crud/RR.operation';
 import pagination from '@crud/Pagination';
-import { downloadZipFromObjectPath, validateNameWithHyphen } from '@/utils';
+import {
+  validateNameWithHyphen,
+  downloadZipFromObjectPath,
+  MODEL_RESOURCE_ENUM,
+  ALTAS_MODEL_PACKAGE_ENUM,
+} from '@/utils';
 import AddModelDialog from './components/addModelDialog';
+import PackageForm from './components/packageForm';
 
 const defaultForm = {
   name: null,
@@ -262,17 +300,24 @@ const defaultForm = {
   modelClassName: null,
   modelDescription: null,
 };
+
 export default {
   name: 'Model',
   dicts: ['model_type', 'frame_type'],
-  components: { BaseModal, pagination, rrOperation, AddModelDialog },
+  components: {
+    BaseModal,
+    pagination,
+    rrOperation,
+    AddModelDialog,
+    PackageForm,
+  },
   cruds() {
     return CRUD({
       title: '模型',
       crudMethod: { ...crudModel },
       props: {
         optText: {
-          add: '创建模型',
+          add: '上传模型',
         },
       },
       optShow: {
@@ -283,21 +328,20 @@ export default {
   mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
     return {
+      MODEL_RESOURCE_ENUM,
+      ALTAS_MODEL_PACKAGE_ENUM,
+
       rules: {
         name: [
           { required: true, message: '请输入模型名称', trigger: 'blur' },
-          { max: 20, message: '长度在 20 个字符以内', trigger: 'blur' },
+          { max: 32, message: '长度在 32 个字符以内', trigger: 'blur' },
           {
             validator: validateNameWithHyphen,
             trigger: ['blur', 'change'],
           },
         ],
-        frameType: [
-          { required: true, message: '请选择模型框架', trigger: 'blur' },
-        ],
-        modelType: [
-          { required: true, message: '请选择模型格式', trigger: 'blur' },
-        ],
+        frameType: [{ required: true, message: '请选择模型框架', trigger: 'blur' }],
+        modelType: [{ required: true, message: '请选择模型格式', trigger: 'blur' }],
         modelClassName: [
           {
             required: true,
@@ -305,24 +349,51 @@ export default {
             trigger: ['blur', 'change'],
           },
         ],
-        modelDescription: [
-          { required: true, message: '请输入模型描述', trigger: 'blur' },
-          { max: 255, message: '长度在255个字符以内', trigger: 'blur' },
-        ],
+        modelDescription: [{ max: 255, message: '长度在255个字符以内', trigger: 'blur' }],
       },
       algorithmUsageList: [],
-      active: '0',
+      active: String(MODEL_RESOURCE_ENUM.CUSTOM),
+      showTable: true,
+
+      packageVisible: false, // 炼知模型打包弹窗
+      packageSubmitting: false,
+      modelTypeMap: {},
     };
   },
   computed: {
+    ...mapGetters(['isAdmin']),
     isCustom() {
-      return this.active === '0';
+      return this.active === String(MODEL_RESOURCE_ENUM.CUSTOM);
     },
     isPreset() {
-      return this.active === '1';
+      return this.active === String(MODEL_RESOURCE_ENUM.PRESET);
+    },
+    isAtlas() {
+      return this.active === String(MODEL_RESOURCE_ENUM.ATLAS);
+    },
+    createModelType() {
+      if (this.isCustom) {
+        return 'Custom';
+      }
+      if (this.isAtlas) {
+        return 'Atlas';
+      }
+      return null;
+    },
+    queryPlaceholder() {
+      return `请输入模型名称${this.isPreset ? '' : '或ID'}`;
+    },
+    modelTypeList() {
+      if (!this.form.frameType || !this.modelTypeMap[this.form.frameType]) {
+        return this.dict.model_type;
+      }
+      return this.dict.model_type.filter((type) =>
+        this.modelTypeMap[this.form.frameType].includes(+type.value)
+      );
     },
   },
   mounted() {
+    this.getModelTypeMap();
     if (this.$route.params?.type === 'add') {
       setTimeout(() => {
         this.crud.toAdd();
@@ -336,7 +407,7 @@ export default {
         current: 1,
         size: 1000,
       };
-      getAlgorithmUsages(params).then(res => {
+      getAlgorithmUsages(params).then((res) => {
         this.algorithmUsageList = res.result;
       });
     },
@@ -345,13 +416,21 @@ export default {
       this.getAlgorithmUsages();
     },
     // handle
+    onTabClick() {
+      this.query.name = undefined;
+      this.crud.toQuery();
+
+      // 切换 tab 时需要让表格重新渲染
+      this.showTable = false;
+      this.$nextTick(() => {
+        this.showTable = true;
+      });
+    },
     onDialogOpen() {
       this.getAlgorithmUsages();
     },
     onAlgorithmUsageChange(value) {
-      const usageRes = this.algorithmUsageList.find(
-        usage => usage.auxInfo === value,
-      );
+      const usageRes = this.algorithmUsageList.find((usage) => usage.auxInfo === value);
       if (!usageRes) {
         this.createAlgorithmUsage(value);
       }
@@ -362,6 +441,37 @@ export default {
     addDone() {
       this.crud.refresh();
     },
+
+    // 获取模型框架 —— 模型格式匹配关系
+    async getModelTypeMap() {
+      this.modelTypeMap = await getModelTypeMap();
+    },
+
+    // 模型框架
+    onFrameTypeChange() {
+      this.form.modelType = null;
+    },
+
+    onPackageConfirm() {
+      this.$refs.packageForm.validate((form) => {
+        this.packageSubmitting = true;
+        packageAtlasModel(form)
+          .then(() => {
+            this.packageVisible = false;
+            this.$message.success('模型打包成功');
+          })
+          .finally(() => {
+            this.packageSubmitting = false;
+          });
+      });
+    },
+    onPackageCancel() {
+      this.packageVisible = false;
+    },
+    onPackageClose() {
+      this.$refs.packageForm.resetForm();
+    },
+
     // link
     goVersion(id, name, type = 'detail') {
       this.$router.push({ path: '/model/version', query: { id, name, type } });
@@ -373,38 +483,52 @@ export default {
       item.modelType = String(item.modelType);
       this.crud.toEdit(item);
     },
+    doPack(id) {
+      this.packageVisible = true;
+      this.$nextTick(() => {
+        this.$refs.packageForm.initForm(id);
+      });
+    },
     doDelete(id) {
-      this.$confirm('此操作将永久删除该模型, 是否继续?', '请确认').then(
-        async () => {
-          const params = {
-            ids: [id],
-          };
-          await del(params);
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-          });
-          this.crud.refresh();
-        },
-      );
+      this.$confirm('此操作将永久删除该模型, 是否继续?', '请确认').then(async () => {
+        const params = {
+          ids: [id],
+        };
+        await del(params);
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+        });
+        this.crud.refresh();
+      });
     },
     doDownload(row) {
-      const { name, versionNum, modelAddress } = row;
-      const msg = this.isCustom
-        ? `此操作将下载 ${name} 模型的 ${versionNum} 版本, 是否继续?`
-        : `此操作将下载预训练模型 ${name}, 是否继续?`;
+      const { name, version, modelAddress } = row;
+      let msg;
+      switch (this.active) {
+        case String(MODEL_RESOURCE_ENUM.CUSTOM):
+          msg = `此操作将下载 ${name} 模型的 ${version} 版本, 是否继续?`;
+          break;
+        case String(MODEL_RESOURCE_ENUM.PRESET):
+          msg = `此操作将下载预训练模型 ${name}, 是否继续?`;
+          break;
+        case String(MODEL_RESOURCE_ENUM.ATLAS):
+          msg = `此操作将下载炼知模型 ${name}, 是否继续?`;
+          break;
+        default:
+          msg = `此操作将下载模型 ${name}, 是否继续?`;
+          break;
+      }
       this.$confirm(msg, '请确认').then(
         () => {
-          const url = /^\//.test(modelAddress)
-            ? modelAddress
-            : `/${modelAddress}`;
+          const url = /^\//.test(modelAddress) ? modelAddress : `/${modelAddress}`;
           downloadZipFromObjectPath(url, 'model.zip');
           this.$message({
             message: '请查看下载文件',
             type: 'success',
           });
         },
-        () => {},
+        () => {}
       );
     },
     doServing(model, type) {
diff --git a/webapp/src/views/model/util.js b/webapp/src/views/model/util.js
new file mode 100644
index 0000000..5d8269f
--- /dev/null
+++ b/webapp/src/views/model/util.js
@@ -0,0 +1,50 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+export function generateNumArrValidator({ count, min, max, emptyMsg }) {
+  return function numberArrayValidater(rule, value, callback) {
+    if (!value) {
+      return callback(new Error(emptyMsg || '值不能为空'));
+    }
+    try {
+      const arr = JSON.parse(value);
+      if (arr.length !== count) {
+        return callback(new Error(`数组需要有 ${count} 个成员`));
+      }
+      if (min !== undefined && arr.find((value) => value < min)) {
+        return callback(new Error(`数组成员不能小于 ${min}`));
+      }
+      if (max !== undefined && arr.find((value) => value > max)) {
+        return callback(new Error(`数组成员不能大于 ${max}`));
+      }
+      return callback();
+    } catch {
+      return callback(new Error('不是有效的 JSON 数组'));
+    }
+  };
+}
+
+// 模型炼知暂只支持 PyTorch 模型，暂固定于前端
+export const atlasFrameTypeList = [{ label: 'PyTorch', value: '3' }];
+
+// 模型炼知暂只支持 PyTorch 模型，暂固定于前端
+export const atlasModelTypeList = [{ label: 'PyTorch PTH', value: '8' }];
+
+// TensorFlow 框架类型字典值，用于由前端判断是否支持模型转换
+export const TF_FRAME_TYPE = 2;
+
+// SavedModel 模型格式字典值，用于由前端判断是否支持模型转换
+export const SAVED_MODEL_MODEL_TYPE = 1;
diff --git a/webapp/src/views/model/version.vue b/webapp/src/views/model/version.vue
index 199aed0..554f7ad 100644
--- a/webapp/src/views/model/version.vue
+++ b/webapp/src/views/model/version.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
@@ -29,9 +29,11 @@
       @selection-change="crud.selectionChangeHandler"
     >
       <el-table-column prop="id" label="ID" />
-      <el-table-column prop="versionNum" label="版本" />
+      <el-table-column prop="version" label="版本" />
       <el-table-column prop="modelSource" label="模型来源">
-        <template slot-scope="scope">{{ dict.label.model_source[scope.row.modelSource]||'--' }}</template>
+        <template slot-scope="scope">{{
+          dict.label.model_source[scope.row.modelSource] || '--'
+        }}</template>
       </el-table-column>
       <el-table-column prop="modelAddress" label="模型地址" width="400px" />
       <el-table-column prop="createTime" label="创建时间" width="160">
@@ -42,35 +44,51 @@
       <el-table-column label="操作" fixed="right">
         <template slot-scope="scope">
           <el-button
-            :id="`doDownload_`+scope.$index"
+            :id="`doDownload_` + scope.$index"
             type="text"
-            @click="doDownload(scope.row.parentId, scope.row.versionNum, scope.row.modelAddress)"
-          >下载</el-button>
-          <el-dropdown>
-            <el-button
-              type="text"
-              style="margin-left: 10px;"
-              @click.stop="()=>{}"
-            >部署<i class="el-icon-arrow-down el-icon--right" />
+            @click="doDownload(scope.row.parentId, scope.row.version, scope.row.modelAddress)"
+            >下载</el-button
+          >
+          <el-tooltip content="该模型不支持部署" placement="top" :disabled="scope.row.servingModel">
+            <el-dropdown>
+              <el-button
+                type="text"
+                style="margin-left: 10px;"
+                :disabled="!scope.row.servingModel"
+                @click.stop="() => {}"
+                >部署<i class="el-icon-arrow-down el-icon--right" />
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="doServing(scope.row, 'onlineServing')">
+                  <el-button type="text">在线服务</el-button>
+                </el-dropdown-item>
+                <el-dropdown-item @click.native="doServing(scope.row, 'batchServing')">
+                  <el-button type="text">批量服务</el-button>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-tooltip>
+          <el-button v-if="isAdmin" type="text" @click="doConvert(scope.row)">转预置</el-button>
+          <el-button
+            v-if="!allowFormatConvert"
+            :id="`doDelete` + scope.$index"
+            type="text"
+            @click="doDelete(scope.row.id)"
+            >删除</el-button
+          >
+          <el-dropdown v-else>
+            <el-button type="text" style="margin-left: 10px;" @click.stop="() => {}">
+              更多<i class="el-icon-arrow-down el-icon--right" />
             </el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item
-                @click.native="doServing(scope.row, 'onlineServing')"
-              >
-                <el-button
-                  type="text"
-                >在线服务</el-button>
+              <el-dropdown-item @click.native="doFormatConvert(scope.row)">
+                <el-button type="text">格式转换</el-button>
               </el-dropdown-item>
-              <el-dropdown-item
-                @click.native="doServing(scope.row, 'batchServing')"
-              >
-                <el-button
-                  type="text"
-                >批量部署</el-button>
+              <el-dropdown-item @click.native="doDelete(scope.row.id)">
+                <el-button type="text">删除</el-button>
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
-          <el-button :id="`doDelete`+scope.$index" type="text" @click="doDelete(scope.row.id)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -84,6 +102,7 @@
       :loading="crud.status.cu === 2"
       :disabled="loading"
       width="800px"
+      @open="onDialogOpen"
       @close="onDialogClose"
       @cancel="crud.cancelCU"
       @ok="onSubmit"
@@ -97,7 +116,7 @@
             v-if="refreshFlag"
             ref="upload"
             action="fakeApi"
-            accept=".zip,.pb,.h5,.ckpt,.pkl,.pth,.weight,.caffemodel,.pt"
+            :accept="acceptModelSuffix"
             :acceptSize="modelConfig.uploadFileAcceptSize"
             :acceptSizeFormat="uploadSizeFomatter"
             list-type="text"
@@ -112,40 +131,77 @@
             @uploadSuccess="uploadSuccess"
             @uploadError="uploadError"
           />
-          <upload-progress 
-            v-if="loading" 
-            :progress="progress" 
-            :color="customColors" 
-            :status="status" 
-            :size="size" 
+          <upload-progress
+            v-if="loading"
+            :progress="progress"
+            :color="customColors"
+            :status="status"
+            :size="size"
             @onSetProgress="onSetProgress"
           />
         </el-form-item>
       </el-form>
     </BaseModal>
+    <!-- 转预置表单 -->
+    <BaseModal
+      :visible.sync="convertVisible"
+      title="转为预置模型"
+      :loading="convertLoading"
+      width="800px"
+      @close="onConvertDialogClose"
+      @cancel="convertVisible = false"
+      @ok="onConvertDialogSubmit"
+    >
+      <BaseForm
+        ref="convertForm"
+        :form-items="convertFormItems"
+        :model="convertForm"
+        :rules="convertRules"
+        label-width="100px"
+      />
+    </BaseModal>
   </div>
 </template>
 
 <script>
-import crudModelVersion, { del } from '@/api/model/modelVersion';
+import { mapGetters } from 'vuex';
+
+import { getModelById, getModelSuffix } from '@/api/model/model';
+import crudModelVersion, { del, convertPreset, formatConvert } from '@/api/model/modelVersion';
 import CRUD, { presenter, header, form, crud } from '@crud/crud';
 import BaseModal from '@/components/BaseModal';
+import BaseForm from '@/components/BaseForm';
 import cdOperation from '@crud/CD.operation';
 import pagination from '@crud/Pagination';
 import UploadInline from '@/components/UploadForm/inline';
 import UploadProgress from '@/components/UploadProgress';
-import { getUniqueId, downloadZipFromObjectPath, uploadSizeFomatter, invalidFileNameChar } from '@/utils';
+import {
+  getUniqueId,
+  downloadZipFromObjectPath,
+  uploadSizeFomatter,
+  invalidFileNameChar,
+  validateNameWithHyphen,
+} from '@/utils';
 import { modelConfig } from '@/config';
 
+import { TF_FRAME_TYPE, SAVED_MODEL_MODEL_TYPE } from './util';
+
 const defaultForm = {
   parentId: null,
   modelAddress: null,
   modelSource: 0,
 };
+
+const defaultConvertForm = {
+  id: null,
+  name: null,
+  modelDescription: null,
+};
+
 export default {
   name: 'ModelVersion',
   dicts: ['model_source'],
-  components: { BaseModal, pagination, cdOperation, UploadInline, UploadProgress },
+  components: { BaseModal, BaseForm, pagination, cdOperation, UploadInline, UploadProgress },
   cruds() {
     return CRUD({
       title: '模型版本管理',
@@ -165,12 +221,11 @@ export default {
   data() {
     return {
       modelId: null,
-      modelName: null,
+      model: {}, // 模型信息
+      modelSuffixMap: {}, // 模型后缀信息
       actionType: '',
       rules: {
-        modelAddress: [
-          { required: true, message: '请上传有效的模型', trigger: 'manual' },
-        ],
+        modelAddress: [{ required: true, message: '请上传有效的模型', trigger: 'manual' }],
       },
       uploadParams: {
         objectPath: null, // 对象存储路径
@@ -180,33 +235,89 @@ export default {
       progress: 0,
       size: 0,
       customColors: [
-        {color: '#909399', percentage: 40},
-        {color: '#e6a23c', percentage: 80},
-        {color: '#67c23a', percentage: 100},
+        { color: '#909399', percentage: 40 },
+        { color: '#e6a23c', percentage: 80 },
+        { color: '#67c23a', percentage: 100 },
       ],
       uploadFilters: [invalidFileNameChar],
       modelConfig,
+
+      convertVisible: false, // 转预置弹窗
+      convertLoading: false, // 转预置 Loading
+      convertForm: { ...defaultConvertForm }, // 转预置表单
+      convertFormItems: [
+        {
+          prop: 'name',
+          label: '模型名称',
+          class: 'w-300',
+          placeholder: '请输入模型名称',
+        },
+        {
+          prop: 'modelDescription',
+          label: '模型描述',
+          class: 'w-500',
+          inputType: 'textarea',
+          showWordLimit: true,
+          placeholder: '请输入模型描述',
+        },
+      ],
+      convertRules: {
+        name: [
+          { required: true, message: '请输入模型名称', trigger: 'blur' },
+          { max: 32, message: '长度在32个字符以内', trigger: 'blur' },
+          {
+            validator: validateNameWithHyphen,
+            trigger: ['blur', 'change'],
+          },
+        ],
+        modelDescription: [{ max: 255, message: '长度在255个字符以内', trigger: 'blur' }],
+      },
+
+      notifyInstance: null,
     };
   },
   computed: {
+    ...mapGetters(['user', 'isAdmin']),
     status() {
       return this.progress === 100 ? 'success' : null;
     },
-    user() {
-      return this.$store.getters.user;
+    modelName() {
+      return this.model.name;
+    },
+    acceptModelSuffix() {
+      if (this.modelSuffixMap[this.model.modelType]) {
+        return `.zip,${this.modelSuffixMap[this.model.modelType]}`;
+      }
+      return '.zip';
+    },
+    allowFormatConvert() {
+      return (
+        this.model.frameType === TF_FRAME_TYPE && this.model.modelType === SAVED_MODEL_MODEL_TYPE
+      );
     },
   },
-  mounted() {
-    this.modelId = this.$route.query.id;
-    this.modelName = this.$route.query.name;
-    this.actionType = this.$route.query.type;
-    this.crud.query.parentId = this.modelId;
-    if (this.actionType === 'add') {
-      this.crud.toAdd();
+  created() {
+    const { id, type } = this.$route.query;
+    this.initPage(id, type);
+  },
+  beforeDestroy() {
+    if (this.notifyInstance) {
+      this.notifyInstance.close();
+      this.notifyInstance = null;
     }
-    this.crud.refresh();
   },
   methods: {
+    // 更新界面模型 ID
+    initPage(parentId, type = 'detail') {
+      this.modelId = parentId;
+      this.getModelById();
+      this.actionType = type;
+      this.crud.query.parentId = parentId;
+      if (this.actionType === 'add') {
+        this.crud.toAdd();
+      }
+      this.crud.refresh();
+    },
     // handle
     handleRemove() {
       this.loading = false;
@@ -215,7 +326,7 @@ export default {
     },
     uploadStart(files) {
       this.updateImagePath();
-      [ this.loading, this.size, this.progress ] = [ true, files.size, 0 ];
+      [this.loading, this.size, this.progress] = [true, files.size, 0];
     },
     onSetProgress(val) {
       this.progress += val;
@@ -235,10 +346,25 @@ export default {
         type: 'error',
       });
     },
+    onDialogOpen() {
+      this.getModelSuffix();
+    },
     onDialogClose() {
       this.$refs.upload.formRef.reset();
       this.loading = false;
     },
+    onConvertDialogClose() {
+      this.convertForm = { ...defaultConvertForm };
+    },
+    onConvertDialogSubmit() {
+      this.$refs.convertForm.validate(async (form) => {
+        this.convertLoading = true;
+        await convertPreset(form).finally(() => {
+          this.convertLoading = false;
+        });
+        this.convertVisible = false;
+      });
+    },
     onSubmit() {
       this.form.parentId = this.modelId;
       this.crud.submitCU();
@@ -255,32 +381,30 @@ export default {
     },
     // op
     doDelete(id) {
-      this.$confirm('此操作将永久删除该模型, 是否继续?', '请确认').then(
-        async () => {
-          const params = {
-            ids: [id],
-          };
-          await del(params);
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-          });
-          this.crud.refresh();
-        },
-      );
+      this.$confirm('此操作将永久删除该模型, 是否继续?', '请确认').then(async () => {
+        const params = {
+          ids: [id],
+        };
+        await del(params);
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+        });
+        this.crud.refresh();
+      });
     },
-    doDownload(parentId, versionNum, filepath) {
-      const msg = `此操作将下载${this.modelName}模型的${versionNum}版本, 是否继续?`;
-      this.$confirm(msg, "请确认").then(
+    doDownload(parentId, version, filepath) {
+      const msg = `此操作将下载${this.modelName}模型的${version}版本, 是否继续?`;
+      this.$confirm(msg, '请确认').then(
         () => {
           const url = /^\//.test(filepath) ? filepath : `/${filepath}`;
-          downloadZipFromObjectPath(url, "model.zip");
+          downloadZipFromObjectPath(url, 'model.zip');
           this.$message({
             message: '请查看下载文件',
             type: 'success',
           });
         },
-        () => {},
+        () => {}
       );
     },
     doServing(model, type) {
@@ -290,12 +414,82 @@ export default {
         params: {
           from: 'model',
           modelId: model.parentId,
+          modelBranchId: model.id,
           modelAddress: model.modelAddress,
           modelResource: 0,
         },
       });
     },
+    doConvert(model) {
+      this.convertVisible = true;
+      Object.assign(this.convertForm, {
+        id: model.id,
+        name: model.name,
+        modelDescription: model.modelDescription,
+      });
+    },
     uploadSizeFomatter,
+
+    // 获取模型信息
+    async getModelById() {
+      this.model = await getModelById(this.modelId);
+    },
+    // 获取模型格式对应后缀
+    async getModelSuffix() {
+      this.modelSuffixMap = await getModelSuffix({ modelType: this.model.modelType });
+    },
+    // 模型格式转换
+    doFormatConvert({ id, name, version }) {
+      const msg = `该操作将把模型 ${name}-${version} 转换为 ONNX 格式，同时生成一个新的模型记录和版本，不会覆盖当前模型`;
+      this.$confirm(msg, '模型转换确认').then(() => {
+        this.notifyInstance = this.$notify({
+          title: '模型转换中',
+          message: '正在进行模型转换，请稍等',
+          iconClass: 'el-icon-loading',
+          duration: 0,
+          showClose: false,
+        });
+        formatConvert(id)
+          .then((res) => {
+            // 如果实例存在，说明还在当前页面，则跳转至转换后模型详情页
+            if (this.notifyInstance) {
+              this.notifyInstance.close();
+              this.$router.push({
+                name: 'ModelVersion',
+                query: {
+                  id: res.id,
+                },
+              });
+              this.$notify({
+                title: '模型转换成功',
+                message: '模型转换已完成，已切换至转换后模型页面',
+                type: 'success',
+                duration: 0,
+              });
+              this.initPage(res.id);
+            } else {
+              this.$notify({
+                title: '模型转换成功',
+                message: '模型转换已完成，请前往模型管理查看',
+                type: 'success',
+                duration: 0,
+              });
+            }
+          })
+          .catch((error) => {
+            this.notifyInstance && this.notifyInstance.close();
+            this.$notify({
+              title: '模型转换失败',
+              message: error.message,
+              type: 'error',
+              duration: 0,
+            });
+          })
+          .finally(() => {
+            this.notifyInstance && (this.notifyInstance = null);
+          });
+      });
+    },
   },
 };
 </script>
diff --git a/webapp/src/views/modelOptimize/components/builtInForm.vue b/webapp/src/views/modelOptimize/components/builtInForm.vue
index 6b3deaf..08e33d6 100644
--- a/webapp/src/views/modelOptimize/components/builtInForm.vue
+++ b/webapp/src/views/modelOptimize/components/builtInForm.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
@@ -22,6 +22,7 @@
         placeholder="请选择模型"
         value-key="model"
         clearable
+        filterable
         @change="onOptimizeModelChange"
       >
         <el-option
@@ -51,11 +52,7 @@
       </el-select>
     </el-form-item>
     <el-form-item ref="algorithmPath" label="优化算法" prop="algorithmPath">
-      <el-select
-        v-model="form.algorithmType"
-        clearable
-        @change="onAlgorithmTypeChange"
-      >
+      <el-select v-model="form.algorithmType" clearable filterable @change="onAlgorithmTypeChange">
         <el-option
           v-for="item in algorithmTypeList"
           :key="item.type"
@@ -67,6 +64,7 @@
         v-model="selectedOptimizeAlgorithm"
         value-key="algorithm"
         clearable
+        filterable
         @change="onOptimizeAlgoritmhChange"
       >
         <el-option
@@ -83,11 +81,13 @@
 <script>
 import { isNil } from 'lodash';
 
-import { getBuiltInModel, getOptimizeAlgorithms, getOptimizeDatasets } from '@/api/modelOptimize/optimize';
-
 import {
-  OPTIMIZE_ALGORITHM_TYPE_MAP,
-} from '../util';
+  getBuiltInModel,
+  getOptimizeAlgorithms,
+  getOptimizeDatasets,
+} from '@/api/modelOptimize/optimize';
+
+import { OPTIMIZE_ALGORITHM_TYPE_MAP } from '../util';
 
 const defaultForm = {
   modelName: null, // 内置模型名
@@ -121,8 +121,8 @@ export default {
   },
   computed: {
     algorithmTypeList() {
-      const types = new Set(this.optimizeAlgorithmList.map(algorithm => algorithm.type));
-      return Array.from(types).map(type => {
+      const types = new Set(this.optimizeAlgorithmList.map((algorithm) => algorithm.type));
+      return Array.from(types).map((type) => {
         return {
           type,
           name: OPTIMIZE_ALGORITHM_TYPE_MAP[type],
@@ -151,7 +151,9 @@ export default {
   },
   methods: {
     init(form, matchData) {
-      Object.keys(this.form).forEach(key => { !isNil(form[key]) && (this.form[key] = form[key]); });
+      Object.keys(this.form).forEach((key) => {
+        !isNil(form[key]) && (this.form[key] = form[key]);
+      });
       this.getDatas(matchData);
     },
     reset() {
@@ -167,7 +169,9 @@ export default {
       this.builtInModelList = await getBuiltInModel(this.optimizeParams);
 
       if (matchData) {
-        this.selectedOptimizeModel = this.builtInModelList.find(model => model.model === this.form.modelName);
+        this.selectedOptimizeModel = this.builtInModelList.find(
+          (model) => model.model === this.form.modelName
+        );
         if (!this.selectedOptimizeModel) {
           this.$message.warning('原内置模型不存在，请重新选择');
           this.form.modelName = null;
@@ -178,7 +182,9 @@ export default {
       this.optimizeDatasetList = await getOptimizeDatasets(this.optimizeParams);
 
       if (matchData) {
-        this.selectedOptimizeDataset = this.optimizeDatasetList.find(dataset => dataset.dataset === this.form.datasetName);
+        this.selectedOptimizeDataset = this.optimizeDatasetList.find(
+          (dataset) => dataset.dataset === this.form.datasetName
+        );
         if (!this.selectedOptimizeDataset) {
           this.$message.warning('原内置数据集不存在，请重新选择');
           this.form.datasetName = this.form.datasetPath = null;
@@ -189,7 +195,9 @@ export default {
       this.optimizeAlgorithmList = await getOptimizeAlgorithms(this.optimizeParams);
 
       if (matchData) {
-        this.selectedOptimizeAlgorithm = this.optimizeAlgorithmList.find(algorithm => algorithm.algorithm === this.form.algorithmName);
+        this.selectedOptimizeAlgorithm = this.optimizeAlgorithmList.find(
+          (algorithm) => algorithm.algorithm === this.form.algorithmName
+        );
         if (!this.selectedOptimizeAlgorithm) {
           this.$message.warning('原内置优化算法不存在，请重新选择');
           this.form.algorithmName = this.form.algorithmPath = null;
diff --git a/webapp/src/views/modelOptimize/components/customizeForm.vue b/webapp/src/views/modelOptimize/components/customizeForm.vue
index 31ba51e..d402bec 100644
--- a/webapp/src/views/modelOptimize/components/customizeForm.vue
+++ b/webapp/src/views/modelOptimize/components/customizeForm.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
@@ -21,6 +21,7 @@
         v-model="form.modelId"
         placeholder="请选择模型"
         clearable
+        filterable
         @change="onModelChange"
       >
         <el-option
@@ -34,12 +35,13 @@
         v-model="form.modelAddress"
         placeholder="请选择模型版本"
         clearable
+        filterable
         @change="onModelVersionChange"
       >
         <el-option
           v-for="item in modelVersionList"
           :key="item.id"
-          :label="item.versionNum"
+          :label="item.version"
           :value="item.modelAddress"
         />
       </el-select>
@@ -62,12 +64,7 @@
         clearable
         @change="onDatasetChange"
       >
-        <el-option
-          v-for="item in datasetList"
-          :key="item.id"
-          :value="item"
-          :label="item.name"
-        />
+        <el-option v-for="item in datasetList" :key="item.id" :value="item" :label="item.name" />
       </el-select>
       <QuickUploadPopover
         form-label="数据集名称"
@@ -76,20 +73,9 @@
       />
     </el-form-item>
     <el-form-item label="算法来源" class="is-required">
-      <el-radio-group
-        v-model="isBuiltInAlgorithm"
-        @change="onBuiltInAlgorithmChange"
-      >
-        <el-radio
-          border
-          :label="false"
-          class="mr-0 w-200"
-        >我的算法</el-radio>
-        <el-radio
-          border
-          :label="true"
-          class="w-200"
-        >内置算法</el-radio>
+      <el-radio-group v-model="isBuiltInAlgorithm" @change="onBuiltInAlgorithmChange">
+        <el-radio border :label="false" class="mr-0 w-200">我的算法</el-radio>
+        <el-radio border :label="true" class="w-200">内置算法</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item ref="algorithmPath" label="优化算法" prop="algorithmPath">
@@ -97,6 +83,7 @@
         v-model="selectedAlgorithm"
         value-key="algorithmName"
         clearable
+        filterable
         placeholder="请选择您使用的算法代码"
         @change="onAlgorithmChange"
       >
@@ -107,15 +94,10 @@
           :label="item.algorithmName"
         />
       </el-select>
-      <el-checkbox
-        v-model="form.editAlgorithm"
-      >编辑算法</el-checkbox>
+      <el-checkbox v-model="form.editAlgorithm">编辑算法</el-checkbox>
     </el-form-item>
     <el-form-item ref="command" label="运行命令" prop="command">
-      <el-input
-        v-model="form.command"
-        placeholder="例如：python run.py 或 bash run.sh"
-      />
+      <el-input v-model="form.command" placeholder="例如：python run.py 或 bash run.sh" />
     </el-form-item>
     <!--运行参数-->
     <run-param-form
@@ -137,22 +119,25 @@
 <script>
 import { isNil } from 'lodash';
 
-import { getModelByResource } from '@/api/model/model';
+import { getModelByResource, addOptimizeModel as addCustomizeModel } from '@/api/model/model';
 import { list as getAlgorithms } from '@/api/algorithm/algorithm';
 import { list as getModelVersions } from '@/api/model/modelVersion';
-import { getOptimizeAlgorithms, getCustomizeDatasets, addCustomizeDatasets, addCustomizeModel } from '@/api/modelOptimize/optimize';
+import {
+  getOptimizeAlgorithms,
+  getCustomizeDatasets,
+  addCustomizeDatasets,
+} from '@/api/modelOptimize/optimize';
 
 import RunParamForm from '@/components/Training/runParamForm';
 import QuickUploadPopover from './quickUploadPopover';
 
-import {
-  OPTIIMZE_ALGORITHM_USAGE_NAME,
-} from '../util';
+import { OPTIIMZE_ALGORITHM_USAGE_NAME } from '../util';
 
 const defaultForm = {
   // 我的优化使用 modelId 和 modelAddress 来记录模型和版本
   modelId: null, // 用于标记模型
   modelAddress: null, // 用于标记模型版本
+  modelBranchId: null, // 模型版本 ID
   datasetId: null, // 我的优化使用 datasetId 作为数据主键
   datasetName: null, // 数据集名
   datasetPath: null, // 数据集路径
@@ -181,10 +166,10 @@ export default {
     return {
       customizeModelList: [],
       modelVersionList: [],
-      
+
       datasetList: [],
       selectedDataset: null,
-      
+
       isBuiltInAlgorithm: false,
       algorithmList: [],
       selectedAlgorithm: null,
@@ -197,7 +182,7 @@ export default {
   computed: {
     preview() {
       let str = this.form.command;
-      for(const key of Object.keys(this.paramsObj)) {
+      for (const key of Object.keys(this.paramsObj)) {
         str += ` --${key}=${this.paramsObj[key]}`;
       }
       if (this.form.modelAddress) {
@@ -222,7 +207,9 @@ export default {
   },
   methods: {
     init(form, matchData) {
-      Object.keys(this.form).forEach(key => { !isNil(form[key]) && (this.form[key] = form[key]); });
+      Object.keys(this.form).forEach((key) => {
+        !isNil(form[key]) && (this.form[key] = form[key]);
+      });
 
       // 如果没有算法 ID，但是有算法路径，说明使用了内置算法
       this.isBuiltInAlgorithm = isNil(this.form.algorithmId) && !isNil(this.form.algorithmPath);
@@ -236,7 +223,7 @@ export default {
       this.modelVersionList = [];
       this.paramsObj = {};
       this.isBuiltInAlgorithm = false;
-      
+
       this.getCustomizeModels();
       this.getDatasets();
       this.getAlgorithms(this.isBuiltInAlgorithm);
@@ -265,10 +252,9 @@ export default {
       this.customizeModelList = await getModelByResource(0);
 
       if (matchData) {
-
-        if (!this.customizeModelList.find(model => model.id === this.form.modelId)) {
+        if (!this.customizeModelList.find((model) => model.id === this.form.modelId)) {
           this.$message.warning('原模型不存在，请重新选择');
-          this.form.modelId = this.form.modelAddress = null;
+          this.form.modelId = this.form.modelAddress = this.form.modelBranchId = null;
           return;
         }
         this.getModelVersions(this.form.modelId, matchData);
@@ -277,16 +263,21 @@ export default {
     async getModelVersions(modelId, matchData) {
       this.modelVersionList = (await getModelVersions({ parentId: modelId })).result;
 
-      if (matchData && !this.modelVersionList.find(model => model.modelAddress === this.form.modelAddress)) {
+      if (
+        matchData &&
+        !this.modelVersionList.find((model) => model.modelAddress === this.form.modelAddress)
+      ) {
         this.$message.warning('原模型版本不存在，请重新选择');
-        this.form.modelAddress = null;
+        this.form.modelAddress = this.form.modelBranchId = null;
       }
     },
     async getDatasets(matchData) {
       this.datasetList = await getCustomizeDatasets();
 
       if (matchData) {
-        this.selectedDataset = this.datasetList.find(dataset => dataset.id === this.form.datasetId);
+        this.selectedDataset = this.datasetList.find(
+          (dataset) => dataset.id === this.form.datasetId
+        );
         if (!this.selectedDataset) {
           this.$message.warning('原内置数据集不存在，请重新选择');
           this.form.datasetId = this.form.datasetName = this.form.datasetPath = null;
@@ -302,7 +293,7 @@ export default {
     },
     async getBuiltInAlgorithms(matchData) {
       // 获取数据后进行统一化操作
-      this.algorithmList = (await getOptimizeAlgorithms()).map(algorithm => {
+      this.algorithmList = (await getOptimizeAlgorithms()).map((algorithm) => {
         return {
           type: algorithm.type,
           algorithmName: algorithm.algorithm,
@@ -311,7 +302,9 @@ export default {
       });
 
       if (matchData) {
-        this.selectedAlgorithm = this.algorithmList.find(algorithm => algorithm.algorithmName === this.form.algorithmName);
+        this.selectedAlgorithm = this.algorithmList.find(
+          (algorithm) => algorithm.algorithmName === this.form.algorithmName
+        );
         if (!this.selectedAlgorithm) {
           this.$message.warning('原内置优化算法不存在，请重新选择');
           this.form.algorithmName = this.form.algorithmPath = null;
@@ -319,24 +312,28 @@ export default {
       }
     },
     async getCustomizeAlgorithms(matchData) {
-      this.algorithmList = (await getAlgorithms({
-        current: 1,
-        size: 1000,
-        algorithmSource: 1, // 我的算法
-        algorithmUsage: OPTIIMZE_ALGORITHM_USAGE_NAME,
-      })).result;
+      this.algorithmList = (
+        await getAlgorithms({
+          current: 1,
+          size: 1000,
+          algorithmSource: 1, // 我的算法
+          algorithmUsage: OPTIIMZE_ALGORITHM_USAGE_NAME,
+        })
+      ).result;
 
       if (matchData) {
-        this.selectedAlgorithm =  this.algorithmList.find(algorithm => algorithm.id === this.form.algorithmId);
+        this.selectedAlgorithm = this.algorithmList.find(
+          (algorithm) => algorithm.id === this.form.algorithmId
+        );
         if (!this.selectedAlgorithm) {
           this.$message.warning('原优化算法不存在，请重新选择');
           this.form.algorithmId = this.form.algorithmName = this.form.algorithmPath = null;
         }
       }
     },
-    
+
     async onModelChange(modelId) {
-      this.form.modelAddress = null;
+      this.form.modelAddress = this.modelBranchId = null;
       // 删除模型时不请求版本列表
       if (modelId) {
         await this.getModelVersions(modelId);
@@ -344,7 +341,9 @@ export default {
         this.modelVersionList = [];
       }
     },
-    onModelVersionChange() {
+    onModelVersionChange(modelAddress) {
+      const model = this.modelVersionList.find((model) => model.modelAddress === modelAddress);
+      model && (this.form.modelBranchId = model.id);
       this.$nextTick(() => this.validateField('modelAddress'));
     },
     onDatasetChange(dataset) {
@@ -389,8 +388,9 @@ export default {
       this.customizeModelList.unshift(data);
       this.form.modelId = data.id;
       await this.onModelChange(this.form.modelId);
-      if(this.modelVersionList.length > 0) {
+      if (this.modelVersionList.length > 0) {
         this.form.modelAddress = this.modelVersionList[0].modelAddress;
+        this.form.modelBranchId = this.modelVersionList[0].id;
         this.onModelVersionChange();
       }
     },
diff --git a/webapp/src/views/modelOptimize/components/optimizeForm.vue b/webapp/src/views/modelOptimize/components/optimizeForm.vue
index ae43962..f635777 100644
--- a/webapp/src/views/modelOptimize/components/optimizeForm.vue
+++ b/webapp/src/views/modelOptimize/components/optimizeForm.vue
@@ -1,26 +1,21 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-  <el-form
-    ref="form"
-    :model="form"
-    :rules="rules"
-    label-width="100px"
-  >
+  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
     <el-form-item label="任务名称" prop="name">
       <el-input ref="nameInput" v-model.trim="form.name" maxlength="32" show-word-limit />
     </el-form-item>
@@ -33,35 +28,17 @@
         show-word-limit
       />
     </el-form-item>
-    <el-form-item
-      label="优化类型"
-      prop="isBuiltIn"
-    >
-      <el-radio-group
-        v-model="form.isBuiltIn"
-        @change="onModelBuiltInChange"
-      >
-        <el-radio
-          border
-          :label="true"
-          class="mr-0 w-200"
-        >内置优化</el-radio>
-        <el-radio
-          border
-          :label="false"
-          class="w-200"
-        >我的优化</el-radio>
+    <el-form-item label="优化类型" prop="isBuiltIn">
+      <el-radio-group v-model="form.isBuiltIn" @change="onModelBuiltInChange">
+        <el-radio border :label="true" class="mr-0 w-200">内置优化</el-radio>
+        <el-radio border :label="false" class="w-200">我的优化</el-radio>
       </el-radio-group>
     </el-form-item>
-    <BuiltInForm
-      v-if="isBuiltIn"
-      ref="builtInForm"
-      @change="form => assignForm(form)"
-    />
+    <BuiltInForm v-if="isBuiltIn" ref="builtInForm" @change="(form) => assignForm(form)" />
     <CustomizeForm
       v-else
       ref="customizeForm"
-      @change="form => assignForm(form)"
+      @change="(form) => assignForm(form)"
       @toBottom="onToBottom"
     />
   </el-form>
@@ -80,10 +57,11 @@ const defaultForm = {
   name: null,
   description: null,
   isBuiltIn: true,
-  
+
   modelId: null, // 用于标记模型
   modelName: null, // 内置模型名
   modelAddress: null, // 我的模型路径
+  modelBranchId: null, // 我的模型版本 ID
 
   datasetId: null, // 我的优化使用 datasetId 作为数据主键
   datasetName: null, // 数据集名
@@ -184,14 +162,16 @@ export default {
     initForm(originForm) {
       // 获取初始表单对象或空对象作为初始表单
       const form = originForm || Object.create(null);
-      
+
       // 根据表单的字段，将初始表单的对应字段赋值到表单上，若字段不存在则使用默认值
-      Object.keys(this.form).forEach(key => { !isNil(form[key]) && (this.form[key] = form[key]); });
+      Object.keys(this.form).forEach((key) => {
+        !isNil(form[key]) && (this.form[key] = form[key]);
+      });
       this.$nextTick(() => {
         if (this.isBuiltIn) {
-          this.$refs.builtInForm.init(this.form, (originForm !== undefined && this.isBuiltIn));
+          this.$refs.builtInForm.init(this.form, originForm !== undefined && this.isBuiltIn);
         } else {
-          this.$refs.customizeForm.init(this.form, (originForm !== undefined && !this.isBuiltIn));
+          this.$refs.customizeForm.init(this.form, originForm !== undefined && !this.isBuiltIn);
         }
       });
 
@@ -216,13 +196,13 @@ export default {
       } else {
         Object.assign(this.form, this.$refs.customizeForm.form);
       }
-      
-      this.$refs.form.validate(isValid => {
+
+      this.$refs.form.validate((isValid) => {
         valid = valid && isValid;
       });
 
       if (!this.isBuiltIn) {
-        this.$refs.customizeForm.validate(isValid => {
+        this.$refs.customizeForm.validate((isValid) => {
           valid = valid && isValid;
         });
       }
diff --git a/webapp/src/views/modelOptimize/components/optimizeResult.vue b/webapp/src/views/modelOptimize/components/optimizeResult.vue
index ae6206a..77841f3 100644
--- a/webapp/src/views/modelOptimize/components/optimizeResult.vue
+++ b/webapp/src/views/modelOptimize/components/optimizeResult.vue
@@ -1,61 +1,47 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="result-wrapper">
     <p v-if="!result || !result.length">该模型实例目前没有优化结果。</p>
     <div v-else>
-      <el-table
-        :data="result"
-        stripe
-      >
-        <el-table-column
-          label=""
-          align="right"
-          width="100px"
-        >
+      <el-table :data="result" stripe>
+        <el-table-column label="" align="right" width="100px">
           <template slot-scope="scope">
             <span>{{ RESULT_NAME_MAP[scope.row.name] }}</span>
           </template>
         </el-table-column>
-        <el-table-column
-          label="整体性能"
-        >
+        <el-table-column label="整体性能">
           <template slot-scope="scope">
             <span :class="getDiffClass(scope.row)">{{ getDiff(scope.row) }}</span>
           </template>
         </el-table-column>
-        <el-table-column
-          label="优化前"
-        >
+        <el-table-column label="优化前">
           <template slot-scope="scope">
             <span>{{ Math.round(scope.row.before) + scope.row.unit }}</span>
           </template>
         </el-table-column>
-        <el-table-column
-          label="优化后"
-        >
+        <el-table-column label="优化后">
           <template slot-scope="scope">
             <span>{{ Math.round(scope.row.after) + scope.row.unit }}</span>
           </template>
         </el-table-column>
       </el-table>
       <div class="sample-wrapper">
-        <span class="sample promoteSample" />提升
-        <span class="sample declineSample" />下降
+        <span class="sample promoteSample" />提升 <span class="sample declineSample" />下降
       </div>
     </div>
   </div>
@@ -69,7 +55,7 @@ export default {
   props: {
     result: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
   },
   data() {
diff --git a/webapp/src/views/modelOptimize/components/quickUploadPopover.vue b/webapp/src/views/modelOptimize/components/quickUploadPopover.vue
index 0a666d1..a15d6c4 100644
--- a/webapp/src/views/modelOptimize/components/quickUploadPopover.vue
+++ b/webapp/src/views/modelOptimize/components/quickUploadPopover.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <el-popover
@@ -23,12 +23,7 @@
     :width="popoverWidth"
     @hide="onHide"
   >
-    <el-form
-      ref="form"
-      :model="form"
-      :rules="rules"
-      label-width="100px"
-    >
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-form-item :label="formLabel" prop="name">
         <el-input v-model.trim="form.name" type="text" style="width: 250px;" />
       </el-form-item>
@@ -44,7 +39,6 @@
           :params="uploadParams"
           :show-file-count="false"
           :auto-upload="true"
-          :hash="false"
           :filters="uploadFilters"
           :limit="1"
           :on-remove="onFileRemove"
@@ -52,33 +46,40 @@
           @uploadSuccess="uploadSuccess"
           @uploadError="uploadError"
         />
-        <upload-progress 
-          v-if="uploading" 
-          :progress="progress" 
-          :color="customColors" 
-          :status="status" 
-          :size="size" 
+        <upload-progress
+          v-if="uploading"
+          :progress="progress"
+          :color="customColors"
+          :status="status"
+          :size="size"
           @onSetProgress="onSetProgress"
         />
       </el-form-item>
     </el-form>
     <div style="margin: 0; text-align: right;">
       <el-button size="mini" type="text" @click="onCancel">取消</el-button>
-      <el-button type="primary" size="mini" :loading="submitting" @click="onFilesUpload">上传</el-button>
+      <el-button type="primary" size="mini" :loading="submitting" @click="onFilesUpload"
+        >上传</el-button
+      >
     </div>
     <el-button slot="reference">上传</el-button>
   </el-popover>
 </template>
 
 <script>
-import { getUniqueId, validateNameWithHyphen, uploadSizeFomatter, invalidFileNameChar } from '@/utils';
+import {
+  getUniqueId,
+  validateNameWithHyphen,
+  uploadSizeFomatter,
+  invalidFileNameChar,
+} from '@/utils';
 import UploadProgress from '@/components/UploadProgress';
 import UploadInline from '@/components/UploadForm/inline';
 
 export default {
   name: 'QuickUploadPopover',
   components: { UploadInline, UploadProgress },
-  props:{
+  props: {
     formLabel: {
       type: String,
       default: '模型上传',
@@ -117,9 +118,7 @@ export default {
           { max: 32, message: '长度在 32 个字符以内', trigger: 'blur' },
           { validator: validateNameWithHyphen, trigger: ['blur', 'change'] },
         ],
-        path: [
-          { required: true, message: '请输入文件路径', trigger: ['blur', 'manual'] },
-        ],
+        path: [{ required: true, message: '请输入文件路径', trigger: ['blur', 'manual'] }],
       },
 
       uploadParams: {
@@ -128,9 +127,9 @@ export default {
       progress: 0,
       size: 0,
       customColors: [
-        {color: '#909399', percentage: 40},
-        {color: '#e6a23c', percentage: 80},
-        {color: '#67c23a', percentage: 100},
+        { color: '#909399', percentage: 40 },
+        { color: '#e6a23c', percentage: 80 },
+        { color: '#67c23a', percentage: 100 },
       ],
       uploadFilters: [invalidFileNameChar],
       uploading: false,
@@ -157,7 +156,7 @@ export default {
     },
     uploadStart(files) {
       this.updatePath();
-      [ this.uploading, this.size, this.progress ] = [ true, files.size, 0 ];
+      [this.uploading, this.size, this.progress] = [true, files.size, 0];
     },
     onSetProgress(val) {
       this.progress += val;
@@ -181,17 +180,23 @@ export default {
       this.uploadParams.objectPath = `upload-temp/${this.user.id}/${getUniqueId()}`;
     },
 
-    onFilesUpload(){
+    onFilesUpload() {
       // 如果表单已经在提交了，就不做处理
-      if (this.submitting) { return; }
+      if (this.submitting) {
+        return;
+      }
       // 对基础表单进行验证
-      this.$refs.form.validate(valid => {
+      this.$refs.form.validate((valid) => {
         if (valid) {
           this.submitting = true;
-          this.uploadApi(this.form).then((res) => {
-            this.$emit('success', res);
-            this.visible = false;
-          }).finally(() => { this.submitting = false; });
+          this.uploadApi(this.form)
+            .then((res) => {
+              this.$emit('success', res);
+              this.visible = false;
+            })
+            .finally(() => {
+              this.submitting = false;
+            });
         }
       });
     },
diff --git a/webapp/src/views/modelOptimize/components/recordDetail.vue b/webapp/src/views/modelOptimize/components/recordDetail.vue
index 99c8a4b..6224638 100644
--- a/webapp/src/views/modelOptimize/components/recordDetail.vue
+++ b/webapp/src/views/modelOptimize/components/recordDetail.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="optimize-record-detail">
@@ -53,10 +53,7 @@
     <div class="row">
       <div class="label my-auto">优化结果下载</div>
       <div class="text">
-        <el-button
-          :disabled="downloadModelDisabled"
-          @click="onDownloadModel"
-        >下载</el-button>
+        <el-button :disabled="downloadModelDisabled" @click="onDownloadModel">下载</el-button>
       </div>
     </div>
   </div>
@@ -83,7 +80,7 @@ export default {
   computed: {
     paramsDisplay() {
       const paramsList = convertMapToList(this.record.params);
-      return paramsList.map(param => `--${param.key}=${param.value}`).join(', ');
+      return paramsList.map((param) => `--${param.key}=${param.value}`).join(', ');
     },
     downloadModelDisabled() {
       return this.record.status !== OPTIMIZE_STATUS_ENUM.FINISHED || !this.record.outputModelDir;
@@ -91,7 +88,10 @@ export default {
   },
   methods: {
     onDownloadModel() {
-      downloadZipFromObjectPath(this.record.outputModelDir, `${this.record.taskName}-${this.record.id}.zip`);
+      downloadZipFromObjectPath(
+        this.record.outputModelDir,
+        `${this.record.taskName}-${this.record.id}.zip`
+      );
       this.$message({
         message: '请查看下载文件',
         type: 'success',
diff --git a/webapp/src/views/modelOptimize/index.vue b/webapp/src/views/modelOptimize/index.vue
index ebaf7e6..34391d1 100644
--- a/webapp/src/views/modelOptimize/index.vue
+++ b/webapp/src/views/modelOptimize/index.vue
@@ -1,33 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <cdOperation
-        linkType="custom"
-        @to-add="doAdd"
-      >
-        <el-form
-          slot="right"
-          :inline="true"
-          :model="localQuery"
-          class="flex flex-end flex-wrap"
-        >
+      <cdOperation linkType="custom" @to-add="doAdd">
+        <el-form slot="right" :inline="true" :model="localQuery" class="flex flex-end flex-wrap">
           <el-form-item>
             <el-input
               v-model="localQuery.name"
@@ -63,25 +55,12 @@
       highlight-current-row
       @sort-change="crud.sortChange"
     >
-      <el-table-column
-        prop="id"
-        label="ID"
-        sortable="custom"
-        width="80px"
-        fixed
-      />
-      <el-table-column
-        prop="name"
-        label="任务名称"
-        min-width="120px"
-        show-overflow-tooltip
-        fixed
-      >
+      <el-table-column prop="id" label="ID" sortable="custom" width="80px" fixed />
+      <el-table-column prop="name" label="任务名称" min-width="120px" show-overflow-tooltip fixed>
         <template slot-scope="scope">
-          <el-link
-            class="name-col"
-            @click="goRecord(scope.row.id)"
-          >{{ scope.row.name }}</el-link>
+          <el-link class="name-col" type="primary" @click="goRecord(scope.row.id)">{{
+            scope.row.name
+          }}</el-link>
         </template>
       </el-table-column>
       <el-table-column
@@ -90,49 +69,20 @@
         min-width="180px"
         show-overflow-tooltip
       />
-      <el-table-column
-        prop="modelName"
-        label="模型名称"
-        min-width="120px"
-      />
-      <el-table-column
-        prop="algorithmName"
-        label="优化算法"
-        min-width="180px"
-      />
-      <el-table-column
-        prop="updateTime"
-        label="更新时间"
-        sortable="custom"
-        min-width="160px"
-      >
+      <el-table-column prop="modelName" label="模型名称" min-width="120px" />
+      <el-table-column prop="algorithmName" label="优化算法" min-width="180px" />
+      <el-table-column prop="updateTime" label="更新时间" sortable="custom" min-width="160px">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.updateTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        label="操作"
-        width="250px"
-        fixed="right"
-      >
+      <el-table-column label="操作" width="250px" fixed="right">
         <template slot-scope="scope">
           <!--所有状态都有 -->
-          <el-button
-            type="text"
-            @click.stop="doEdit(scope.row)"
-          >编辑</el-button>
-          <el-button
-            type="text"
-            @click.stop="doSubmit(scope.row.id)"
-          >提交</el-button>
-          <el-button
-            type="text"
-            @click.stop="doFork(scope.row)"
-          >Fork</el-button>
-          <el-button
-            type="text"
-            @click.stop="doDelete(scope.row.id)"
-          >删除</el-button>
+          <el-button type="text" @click.stop="doEdit(scope.row)">编辑</el-button>
+          <el-button type="text" @click.stop="doSubmit(scope.row.id)">提交</el-button>
+          <el-button type="text" @click.stop="doFork(scope.row)">Fork</el-button>
+          <el-button type="text" @click.stop="doDelete(scope.row.id)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -149,10 +99,7 @@
       @cancel="onDialogCancel"
       @ok="onSubmitForm"
     >
-      <OptimizeForm
-        ref="form"
-        class="create-form"
-      />
+      <OptimizeForm ref="form" class="create-form" />
     </BaseModal>
   </div>
 </template>
@@ -160,7 +107,14 @@
 <script>
 import { mapActions } from 'vuex';
 
-import { list, add, edit, getOptimizeAlgorithms, submit, del as deleteTask } from '@/api/modelOptimize/optimize';
+import {
+  list,
+  add,
+  edit,
+  getOptimizeAlgorithms,
+  submit,
+  del as deleteTask,
+} from '@/api/modelOptimize/optimize';
 import CRUD, { presenter, header, crud } from '@crud/crud';
 import { Constant } from '@/utils';
 import BaseModal from '@/components/BaseModal';
@@ -214,7 +168,7 @@ export default {
 
       formVisible: false, // 表单 Dialog 是否可见
       submitting: false, // 表单提交状态
-      
+
       defaultSort: {}, // 进入页面是保留表格排序状态
     };
   },
@@ -227,11 +181,11 @@ export default {
   beforeRouteEnter(to, from, next) {
     // 如果不是从记录页返回到列表页的，页码重置为 1
     if (!['ModelOptRecord'].includes(from.name)) {
-      next(vm => vm.pageEnter(false));
+      next((vm) => vm.pageEnter(false));
       return;
     }
     // 从记录页返回时保留页码和排序状态
-    next(vm => vm.pageEnter(true));
+    next((vm) => vm.pageEnter(true));
   },
   beforeDestroy() {
     this.stopOpenNotebook();
@@ -240,7 +194,7 @@ export default {
     // 获取优化算法
     this.optimizeAlgorithms = await getOptimizeAlgorithms();
 
-    const {actionType} = this.$route.params;
+    const { actionType } = this.$route.params;
 
     if (actionType === 'add') {
       const form = {};
@@ -260,7 +214,11 @@ export default {
 
     pageEnter(keepPageInfos) {
       if (keepPageInfos) {
-        const { page, sort: { sort, order }, query } = this.lastPageInfo;
+        const {
+          page,
+          sort: { sort, order },
+          query,
+        } = this.lastPageInfo;
         this.crud.page.current = page;
         // 修改 table 的排序信息
         this.defaultSort = { prop: sort, order: Constant.tableSortMap2Element[order] };
@@ -273,7 +231,7 @@ export default {
       this.crud.refresh();
     },
     goRecord(id) {
-      this.$router.push({ path: '/model/optimize/record', query: { taskId: id }});
+      this.$router.push({ path: '/model/optimize/record', query: { taskId: id } });
     },
     filter(column, value) {
       this.localQuery[column] = value;
@@ -300,26 +258,24 @@ export default {
     },
 
     doDelete(id) {
-      this.$confirm('此操作将删除该任务, 是否继续?', '请确认')
-        .then(async() => {
-          await deleteTask({ id });
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-          });
-          this.crud.refresh();
+      this.$confirm('此操作将删除该任务, 是否继续?', '请确认').then(async () => {
+        await deleteTask({ id });
+        this.$message({
+          message: '删除成功',
+          type: 'success',
         });
+        this.crud.refresh();
+      });
     },
     doSubmit(id) {
-      this.$confirm('请确认是否提交任务?', '请确认')
-        .then(async() => {
-          await submit({ id });
-          this.$message({
-            message: '提交成功',
-            type: 'success',
-          });
-          this.$router.push({ name: 'ModelOptRecord', query: { taskId: id }});
+      this.$confirm('请确认是否提交任务?', '请确认').then(async () => {
+        await submit({ id });
+        this.$message({
+          message: '提交成功',
+          type: 'success',
         });
+        this.$router.push({ name: 'ModelOptRecord', query: { taskId: id } });
+      });
     },
     // hooks
     [CRUD.HOOK.beforeRefresh]() {
@@ -343,24 +299,30 @@ export default {
     },
     onSubmitForm() {
       // 如果表单已经在提交了，就不做处理
-      if (this.submitting) { return; }
+      if (this.submitting) {
+        return;
+      }
       // 对基础表单进行验证
-      this.$refs.form.validate(form => {
+      this.$refs.form.validate((form) => {
         const func = this.formType === 'edit' ? edit : add;
         if (func) {
           this.submitting = true;
-          func(form).then(res => {
-            this.formVisible = false;
-            this.crud.refresh();
-            
-            if (form.editAlgorithm) {
-              if (res) {
-                this.editAlgorithm(res.algorithmId, res.algorithmPath);
-              } else {
-                this.$message.warning('没有返回算法信息，无法在线编辑');
+          func(form)
+            .then((res) => {
+              this.formVisible = false;
+              this.crud.refresh();
+
+              if (form.editAlgorithm) {
+                if (res) {
+                  this.editAlgorithm(res.algorithmId, res.algorithmPath);
+                } else {
+                  this.$message.warning('没有返回算法信息，无法在线编辑');
+                }
               }
-            }
-          }).finally(() => { this.submitting = false; });
+            })
+            .finally(() => {
+              this.submitting = false;
+            });
         }
       });
     },
diff --git a/webapp/src/views/modelOptimize/record.vue b/webapp/src/views/modelOptimize/record.vue
index d1f4a08..099c783 100644
--- a/webapp/src/views/modelOptimize/record.vue
+++ b/webapp/src/views/modelOptimize/record.vue
@@ -1,30 +1,25 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
       <cdOperation>
-        <el-form
-          slot="right"
-          :inline="true"
-          :model="localQuery"
-          class="flex flex-end flex-wrap"
-        >
+        <el-form slot="right" :inline="true" :model="localQuery" class="flex flex-end flex-wrap">
           <el-form-item label="提交时间">
             <el-date-picker
               v-model="localQuery.createTime"
@@ -49,12 +44,7 @@
       highlight-current-row
       @row-click="onRowClick"
     >
-      <el-table-column
-        prop="id"
-        label="执行ID"
-        width="80px"
-        fixed
-      />
+      <el-table-column prop="id" label="执行ID" width="80px" fixed />
       <el-table-column
         prop="taskName"
         label="任务名称"
@@ -62,117 +52,90 @@
         show-overflow-tooltip
         fixed
       />
-      <el-table-column
-        prop="algorithmName"
-        label="优化算法"
-        min-width="180px"
-      />
-      <el-table-column
-        prop="status"
-        label="任务状态"
-        min-width="100px"
-      >
+      <el-table-column prop="algorithmName" label="优化算法" min-width="180px" />
+      <el-table-column prop="status" label="任务状态" min-width="120px">
         <template #header>
           <dropdown-header
             title="任务状态"
             :list="statusList"
             :filtered="Boolean(localQuery.status)"
-            @command="cmd => filter('status', cmd)"
+            @command="(cmd) => filter('status', cmd)"
           />
         </template>
         <template slot-scope="scope">
-          <el-tag
-            :type="OPTIMIZE_STATUS_MAP[scope.row.status].tagMap"
-            effect="plain"
-          >{{ OPTIMIZE_STATUS_MAP[scope.row.status].name }}</el-tag>
+          <el-tag :type="OPTIMIZE_STATUS_MAP[scope.row.status].tagMap" effect="plain">{{
+            OPTIMIZE_STATUS_MAP[scope.row.status].name
+          }}</el-tag>
+          <msg-popover
+            :status-detail="scope.row.statusDetail"
+            :show="showMessage(scope.row.status)"
+          />
         </template>
       </el-table-column>
-      <el-table-column
-        prop="startTime"
-        label="提交时间"
-        min-width="160px"
-      >
+      <el-table-column prop="startTime" label="提交时间" min-width="160px">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) || '--' }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="startTime"
-        label="开始时间"
-        min-width="160px"
-      >
+      <el-table-column prop="startTime" label="开始时间" min-width="160px">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.startTime) || '--' }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="endTime"
-        label="完成时间"
-        min-width="160px"
-      >
+      <el-table-column prop="endTime" label="完成时间" min-width="160px">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.endTime) || '--' }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        label="操作"
-        width="250px"
-        fixed="right"
-      >
+      <el-table-column label="操作" width="250px" fixed="right">
         <template slot-scope="scope">
           <el-button
             v-if="needPoll(scope.row.status)"
             type="text"
             @click.stop="doCancel(scope.row.id)"
-          >取消</el-button>
+            >取消</el-button
+          >
           <el-button
             v-if="canResubmit(scope.row.status)"
             type="text"
             @click.stop="doResubmit(scope.row.id)"
-          >重新提交</el-button>
+            >重新提交</el-button
+          >
           <span v-if="isFinished(scope.row.status)">
             <el-button
               v-if="isFinished(scope.row.status)"
               type="text"
               @click.stop="doDownload(scope.row)"
-            >下载</el-button>
+              >下载</el-button
+            >
             <el-button
               v-if="isFinished(scope.row.status)"
               type="text"
               @click.stop="showResult(scope.row)"
-            >优化结果</el-button>
+              >优化结果</el-button
+            >
             <el-dropdown>
-              <el-button type="text" style="margin-left: 10px;" @click.stop="()=>{}">
+              <el-button type="text" style="margin-left: 10px;" @click.stop="() => {}">
                 更多<i class="el-icon-arrow-down el-icon--right" />
               </el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  @click.native="showLog(scope.row)"
-                >
-                  <el-button
-                    type="text"
-                  >日志</el-button>
+                <el-dropdown-item @click.native="showLog(scope.row)">
+                  <el-button type="text">日志</el-button>
                 </el-dropdown-item>
-                <el-dropdown-item
-                  @click.native="doDelete(scope.row.id)"
-                >
-                  <el-button
-                    type="text"
-                  >删除</el-button>
+                <el-dropdown-item @click.native="doDelete(scope.row.id)">
+                  <el-button type="text">删除</el-button>
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </span>
           <span v-else class="ml-10">
-            <el-button
-              type="text"
-              @click.stop="showLog(scope.row)"
-            >日志</el-button>
+            <el-button type="text" @click.stop="showLog(scope.row)">日志</el-button>
             <el-button
               type="text"
               :disabled="!canDelete(scope.row.status)"
               @click.stop="doDelete(scope.row.id)"
-            >删除</el-button>
+              >删除</el-button
+            >
           </span>
         </template>
       </el-table-column>
@@ -187,9 +150,7 @@
       class="less-padding"
       @close="onResultDialogClose"
     >
-      <OptimizeResult
-        :result="selectedInstance.optResult"
-      />
+      <OptimizeResult :result="selectedInstance.optResult" />
       <div slot="footer" class="dialog-footer">
         <el-button @click="closeResultDialog">关闭</el-button>
         <el-button
@@ -197,21 +158,17 @@
           :loading="openNotebookLoading"
           type="primary"
           @click="onEditAlgorithm"
-        >修改模型算法</el-button>
+          >修改模型算法</el-button
+        >
         <el-button type="primary" @click="saveModel">保存优化后模型</el-button>
       </div>
     </BaseModal>
     <!-- 日志 Dialog -->
-    <BaseModal
-      :visible.sync="logVisible"
-      destroy-on-close
-      title="日志"
-      width="1000px"
-    >
+    <BaseModal :visible.sync="logVisible" destroy-on-close title="日志" width="1000px">
       <PodLogContainer
         v-if="selectedInstance.podName"
         ref="logContainer"
-        :pod-name="selectedInstance.podName"
+        :pod="selectedInstance"
         class="log-wrapper"
       />
       <div v-else>该实例没有 podName, 无法查看日志</div>
@@ -230,10 +187,7 @@
         <OptimizeRecordDetail :record="selectedInstance" />
       </div>
     </el-drawer>
-    <save-model-dialog
-      ref="saveModel"
-      type="optimize"
-    />
+    <save-model-dialog ref="saveModel" type="optimize" />
   </div>
 </template>
 
@@ -253,14 +207,26 @@ import BaseModal from '@/components/BaseModal';
 import DropdownHeader from '@/components/DropdownHeader';
 import SaveModelDialog from '@/components/Training/saveModelDialog';
 import PodLogContainer from '@/components/LogContainer/podLogContainer';
+import MsgPopover from '@/components/MsgPopover';
 
-import { list, del as deleteInstance, getInstance, cancel, resubmit } from '@/api/modelOptimize/record';
+import {
+  list,
+  del as deleteInstance,
+  getInstance,
+  cancel,
+  resubmit,
+} from '@/api/modelOptimize/record';
 import { getOptimizeAlgorithms } from '@/api/modelOptimize/optimize';
 import { getPodLog } from '@/api/system/pod';
 
 import OptimizeResult from './components/optimizeResult';
 import OptimizeRecordDetail from './components/recordDetail';
-import { OPTIMIZE_STATUS_ENUM, OPTIMIZE_STATUS_MAP, RESULT_NAME_MAP, RESULT_STATUS_MAP } from './util';
+import {
+  OPTIMIZE_STATUS_ENUM,
+  OPTIMIZE_STATUS_MAP,
+  RESULT_NAME_MAP,
+  RESULT_STATUS_MAP,
+} from './util';
 
 const defaultQuery = {
   status: null,
@@ -279,6 +245,7 @@ export default {
     OptimizeResult,
     OptimizeRecordDetail,
     PodLogContainer,
+    MsgPopover,
   },
   cruds() {
     return CRUD({
@@ -318,9 +285,11 @@ export default {
     allAlgorithmList() {
       let arr = [{ label: '全部', value: null }];
       for (const key in this.optimizeAlgorithms) {
-        arr = arr.concat(this.optimizeAlgorithms[key].map(item => {
-          return { label: item, value: item };
-        }));
+        arr = arr.concat(
+          this.optimizeAlgorithms[key].map((item) => {
+            return { label: item, value: item };
+          })
+        );
       }
       return arr;
     },
@@ -350,11 +319,18 @@ export default {
       return status === OPTIMIZE_STATUS_ENUM.FINISHED;
     },
     canResubmit(status) {
-      return [OPTIMIZE_STATUS_ENUM.FINISHED, OPTIMIZE_STATUS_ENUM.CANCELED, OPTIMIZE_STATUS_ENUM.FAILED].includes(status);
+      return [
+        OPTIMIZE_STATUS_ENUM.FINISHED,
+        OPTIMIZE_STATUS_ENUM.CANCELED,
+        OPTIMIZE_STATUS_ENUM.FAILED,
+      ].includes(status);
     },
     canDelete(status) {
       return ![OPTIMIZE_STATUS_ENUM.WAITING, OPTIMIZE_STATUS_ENUM.RUNNING].includes(status);
     },
+    showMessage(status) {
+      return [OPTIMIZE_STATUS_ENUM.WAITING, OPTIMIZE_STATUS_ENUM.FAILED].includes(status);
+    },
 
     showLog(inst) {
       this.selectedInstance = inst;
@@ -395,44 +371,43 @@ export default {
       }
     },
     async doCancel(id) {
-      this.$confirm('此操作将取消该任务实例的执行, 是否继续?', '请确认')
-        .then(async() => {
-          await cancel({ id });
-          this.$message({
-            message: '取消成功',
-            type: 'success',
-          });
-          this.crud.refresh();
+      this.$confirm('此操作将取消该任务实例的执行, 是否继续?', '请确认').then(async () => {
+        await cancel({ id });
+        this.$message({
+          message: '取消成功',
+          type: 'success',
         });
+        this.crud.refresh();
+      });
     },
     doResubmit(id) {
-      this.$confirm('此操作将重新提交该任务的实例, 是否继续?', '重新提交')
-        .then(async() => {
-          await resubmit({ id });
-          this.$message({
-            message: '提交成功',
-            type: 'success',
-          });
-          this.crud.refresh();
+      this.$confirm('此操作将重新提交该任务的实例, 是否继续?', '重新提交').then(async () => {
+        await resubmit({ id });
+        this.$message({
+          message: '提交成功',
+          type: 'success',
         });
+        this.crud.refresh();
+      });
     },
     doDownload(instance) {
-      downloadZipFromObjectPath(instance.outputModelDir, `${instance.taskName}-${nanoid(4)}.zip`, { flat: true });
+      downloadZipFromObjectPath(instance.outputModelDir, `${instance.taskName}-${nanoid(4)}.zip`, {
+        flat: true,
+      });
       this.$message({
         message: '请查看下载文件',
         type: 'success',
       });
     },
     doDelete(id) {
-      this.$confirm('此操作将删除该执行记录, 是否继续?', '请确认')
-        .then(async() => {
-          await deleteInstance({ id });
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-          });
-          this.crud.refresh();
+      this.$confirm('此操作将删除该执行记录, 是否继续?', '请确认').then(async () => {
+        await deleteInstance({ id });
+        this.$message({
+          message: '删除成功',
+          type: 'success',
         });
+        this.crud.refresh();
+      });
     },
     onResetQuery() {
       this.localQuery = { ...this.defaultQuery };
@@ -453,7 +428,7 @@ export default {
     },
     [CRUD.HOOK.afterRefresh]() {
       // 同时只会有一条状态为 未完成/进行中 的实例
-      const unfinished = this.crud.data.find(inst => this.needPoll(inst.status));
+      const unfinished = this.crud.data.find((inst) => this.needPoll(inst.status));
       if (this.keepPoll && unfinished) {
         setTimeout(() => {
           this.getDetailDebounce(unfinished);
@@ -472,7 +447,8 @@ export default {
         this.$message.warning('该实例没有算法ID');
         return;
       }
-      const algorithmCodeDir = this.selectedInstance.algorithmCodeDir || this.selectedInstance.algorithmPath;
+      const algorithmCodeDir =
+        this.selectedInstance.algorithmCodeDir || this.selectedInstance.algorithmPath;
       if (!algorithmCodeDir) {
         this.$message.warning('该实例没有算法路径');
         return;
diff --git a/webapp/src/views/modelOptimize/util.js b/webapp/src/views/modelOptimize/util.js
index 61afa80..ed35c54 100644
--- a/webapp/src/views/modelOptimize/util.js
+++ b/webapp/src/views/modelOptimize/util.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 // 内置算法分类
 export const OPTIMIZE_ALGORITHM_TYPE_ENUM = {
@@ -36,7 +36,7 @@ export const OPTIMIZE_STATUS_ENUM = {
 };
 
 export const OPTIMIZE_STATUS_MAP = {
-  [OPTIMIZE_STATUS_ENUM.WAITING]: { name: '等待中' },
+  [OPTIMIZE_STATUS_ENUM.WAITING]: { name: '待处理' },
   [OPTIMIZE_STATUS_ENUM.RUNNING]: { name: '进行中' },
   [OPTIMIZE_STATUS_ENUM.FINISHED]: { name: '已完成', tagMap: 'success' },
   [OPTIMIZE_STATUS_ENUM.CANCELED]: { name: '已取消', tagMap: 'info' },
@@ -46,9 +46,9 @@ export const OPTIMIZE_STATUS_MAP = {
 export const OPTIIMZE_ALGORITHM_USAGE_NAME = '模型优化';
 
 export const RESULT_NAME_MAP = {
-  'accuracy': '准确度',
-  'reasoningTime': '推理速度',
-  'modelSize': '模型大小',
+  accuracy: '准确度',
+  reasoningTime: '推理速度',
+  modelSize: '模型大小',
 };
 
 export const RESULT_STATUS_ENUM = {
diff --git a/webapp/src/views/register.vue b/webapp/src/views/register.vue
index 9e2f166..1c992c4 100644
--- a/webapp/src/views/register.vue
+++ b/webapp/src/views/register.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div style="height: 100%;">
@@ -21,7 +21,7 @@
         ref="registerForm"
         :model="registerForm"
         :rules="registerRules"
-        label-width="25%"
+        label-width="26%"
         class="register-form"
       >
         <h2 class="register-title">之江天枢人工智能开源平台</h2>
@@ -36,16 +36,22 @@
         </el-form-item>
         <el-form-item label="性别" prop="sex">
           <el-radio-group v-model="registerForm.sex">
-            <el-radio label="男">男</el-radio>
-            <el-radio label="女">女</el-radio>
+            <el-radio :label="1">男</el-radio>
+            <el-radio :label="0">女</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="邮箱" prop="email">
           <el-input v-model="registerForm.email" auto-complete="on" placeholder="请输入邮箱" />
         </el-form-item>
-        <el-form-item label="验证码" prop="code">
+        <el-form-item label="邮箱验证码" prop="code">
           <el-input v-model="registerForm.code" style="width: 50%;" placeholder="请输入验证码" />
-          <el-button :loading="codeLoading" style="width: 48%;" :disabled="isDisabled" @click="sendCode">{{ buttonName }}</el-button>
+          <el-button
+            :loading="codeLoading"
+            style="width: 48%; padding: 8px 0;"
+            :disabled="isDisabled"
+            @click="sendCode"
+            >{{ buttonName }}</el-button
+          >
         </el-form-item>
         <el-form-item label="密码" prop="password">
           <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" />
@@ -53,18 +59,40 @@
         <el-form-item label="确认密码" prop="pass">
           <el-input v-model="registerForm.pass" type="password" placeholder="请再次输入密码" />
         </el-form-item>
-        <el-button type="primary" size="medium" style="width: 100%;" @click="submitForm('registerForm')">注册</el-button>
-        <div class="go-login fr">已有账号?<el-button type="text" @click="$router.replace({ path: '/login' })">去登录</el-button> </div>
+        <el-button
+          type="primary"
+          size="medium"
+          style="width: 100%;"
+          @click="submitForm('registerForm')"
+          >注册</el-button
+        >
+        <div class="go-login fr">
+          已有账号?<el-button type="text" @click="$router.replace({ path: '/login' })"
+            >去登录</el-button
+          >
+        </div>
       </el-form>
     </login-public>
   </div>
 </template>
 
 <script>
-import { validateName, validateAccount } from '@/utils/validate';
+import { validateName, validateAccount, validEmail } from '@/utils/validate';
 import { encrypt } from '@/utils/rsaEncrypt';
 import { getCodeBySentEmail, registerUser } from '@/api/auth';
 import LoginPublic from '@/components/LoginPublic';
+import { loginConfig } from '@/config';
+
+const defaultForm = {
+  username: '',
+  phone: '',
+  nickName: '',
+  email: '',
+  code: '',
+  password: '',
+  sex: 1,
+  pass: '',
+};
 
 export default {
   name: 'Register',
@@ -82,18 +110,11 @@ export default {
       }
     };
     return {
-      buttonName: '发送验证码', isDisabled: false, time: 60,
+      buttonName: '发送邮箱验证码',
+      isDisabled: false,
+      time: 60,
       codeLoading: false,
-      registerForm: {
-        username: '',
-        phone: '',
-        nickName: '',
-        email: '',
-        code: '',
-        password: '',
-        sex: '',
-        pass: '',
-      },
+      registerForm: { ...defaultForm },
       registerRules: {
         username: [
           { required: true, message: '请输入用户名', trigger: 'blur' },
@@ -105,15 +126,21 @@ export default {
         ],
         email: [
           { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-          { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
+          {
+            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
+            message: '请输入正确的邮箱地址',
+            trigger: ['blur', 'change'],
+          },
         ],
         phone: [
           { required: true, message: '请输入手机号码', trigger: 'blur' },
-          { pattern: /^1\d{10}$/, message: '请输入正确的11位手机号码', trigger: ['blur', 'change'] },
-        ],
-        sex: [
-          { required: true, message: '请选择性别', trigger: 'change' },
+          {
+            pattern: /^1\d{10}$/,
+            message: '请输入正确的11位手机号码',
+            trigger: ['blur', 'change'],
+          },
         ],
+        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
         code: [{ required: true, trigger: 'change', message: '验证码不能为空' }],
         password: [
           { required: true, trigger: 'blur', message: '密码不能为空' },
@@ -127,41 +154,53 @@ export default {
       loading: false,
     };
   },
+  beforeRouteEnter(to, from, next) {
+    if (!loginConfig.allowRegister) {
+      next('/login');
+      return;
+    }
+    next();
+  },
   methods: {
     sendCode() {
+      if (!validEmail(this.registerForm.email)) {
+        this.$message.warning('请先输入正确邮箱地址');
+        return;
+      }
       this.codeLoading = true;
       this.buttonName = '发送中';
       const codeData = {
         email: this.registerForm.email,
         type: 1,
       };
-      getCodeBySentEmail(codeData).then(() => {
-        this.$message({
-          showClose: true,
-          message: '发送成功，验证码有效期5分钟',
-          type: 'success',
-        });
-        this.codeLoading = false;
-        this.isDisabled = true;
-        this.buttonName = `${this.time -= 1  }秒`;
-        this.timer = window.setInterval(() => {
-          this.buttonName = `${this.time  }秒`;
-          this.time -= 1;
-          if (this.time < 0) {
-            this.buttonName = '重新发送';
-            this.time = 60;
-            this.isDisabled = false;
-            window.clearInterval(this.timer);
-          }
-        }, 1000);
-      }).catch(err => {
-        this.resetForm();
-        this.codeLoading = false;
-        this.$message({
-          message: err.message,
-          type: 'error',
+      getCodeBySentEmail(codeData)
+        .then(() => {
+          this.$message({
+            showClose: true,
+            message: '发送成功，验证码有效期5分钟',
+            type: 'success',
+          });
+          this.codeLoading = false;
+          this.isDisabled = true;
+          this.buttonName = `${(this.time -= 1)}秒`;
+          this.timer = window.setInterval(() => {
+            this.buttonName = `${this.time}秒`;
+            this.time -= 1;
+            if (this.time < 0) {
+              this.buttonName = '重新发送';
+              this.time = 60;
+              this.isDisabled = false;
+              window.clearInterval(this.timer);
+            }
+          }, 1000);
+        })
+        .catch((err) => {
+          this.codeLoading = false;
+          this.$message({
+            message: err.message,
+            type: 'error',
+          });
         });
-      });
     },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
@@ -173,27 +212,29 @@ export default {
             email: this.registerForm.email,
             code: this.registerForm.code,
             password: encrypt(this.registerForm.password),
-            sex: this.registerForm.sex === '男' ? 1 : 0,
+            sex: this.registerForm.sex,
           };
-          registerUser(formData).then(() => {
-            this.loading = false;
-            this.resetForm();
-            this.$notify({
-              title: '注册成功',
-              type: 'success',
-              duration: 1500,
+          registerUser(formData)
+            .then(() => {
+              this.loading = false;
+              this.resetForm();
+              this.$notify({
+                title: '注册成功',
+                type: 'success',
+                duration: 1500,
+              });
+              this.$router.replace({ path: '/login' });
+            })
+            .catch((err) => {
+              this.loading = false;
+              this.$message({
+                message: err.message,
+                type: 'error',
+              });
             });
-            this.$router.replace({ path: '/login' });
-          }).catch(err => {
-            this.loading = false;
-            this.$message({
-              message: err.message,
-              type: 'error',
-            });
-          });
-        } else {
-          return false;
+          return true;
         }
+        return false;
       });
     },
     resetForm() {
@@ -203,16 +244,7 @@ export default {
       this.time = 60;
       this.buttonName = '发送验证码';
       this.isDisabled = false;
-      this.registerForm = {
-        username: '',
-        phone: '',
-        nickName: '',
-        email: '',
-        code: '',
-        password: '',
-        sex: '',
-        pass: '',
-      };
+      this.registerForm = { ...defaultForm };
     },
   },
 };
diff --git a/webapp/src/views/resetpassword.vue b/webapp/src/views/resetpassword.vue
index ee29bd4..1691495 100644
--- a/webapp/src/views/resetpassword.vue
+++ b/webapp/src/views/resetpassword.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div style="height: 100%;">
@@ -35,7 +35,13 @@
           <el-input v-model="registerForm.code" style="width: 57%;" placeholder="请输入邮箱验证码">
             <i slot="prefix" class="el-input__icon el-icon-circle-check" />
           </el-input>
-          <el-button :loading="codeLoading" style="width: 41%;" :disabled="isDisabled" @click="sendCode">{{ buttonName }}</el-button>
+          <el-button
+            :loading="codeLoading"
+            style="width: 41%;"
+            :disabled="isDisabled"
+            @click="sendCode"
+            >{{ buttonName }}</el-button
+          >
         </el-form-item>
         <el-form-item prop="password">
           <el-input v-model="registerForm.password" type="password" placeholder="请输入您的新密码">
@@ -48,8 +54,16 @@
           </el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" size="medium" style="width: 100%;" @click="submitForm('registerForm')">修改密码</el-button>
-          <el-button type="text" class="fr" @click="$router.replace({ path: '/login' })">返回登录</el-button>
+          <el-button
+            type="primary"
+            size="medium"
+            style="width: 100%;"
+            @click="submitForm('registerForm')"
+            >修改密码</el-button
+          >
+          <el-button type="text" class="fr" @click="$router.replace({ path: '/login' })"
+            >返回登录</el-button
+          >
         </el-form-item>
       </el-form>
     </login-public>
@@ -77,7 +91,9 @@ export default {
       }
     };
     return {
-      buttonName: '发送验证码', isDisabled: false, time: 60,
+      buttonName: '发送验证码',
+      isDisabled: false,
+      time: 60,
       codeLoading: false,
       registerForm: {
         username: '',
@@ -92,7 +108,11 @@ export default {
       registerRules: {
         email: [
           { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-          { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
+          {
+            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
+            message: '请输入正确的邮箱地址',
+            trigger: ['blur', 'change'],
+          },
         ],
         code: [{ required: true, trigger: 'change', message: '验证码不能为空' }],
         password: [
@@ -115,33 +135,35 @@ export default {
         email: this.registerForm.email,
         type: 4,
       };
-      getCodeBySentEmail(codeData).then(() => {
-        this.$message({
-          showClose: true,
-          message: '发送成功，验证码有效期5分钟',
-          type: 'success',
-        });
-        this.codeLoading = false;
-        this.isDisabled = true;
-        this.buttonName = `${this.time -= 1  }秒`;
-        this.timer = window.setInterval(() => {
-          this.buttonName = `${this.time  }秒`;
-          this.time -= 1;
-          if (this.time < 0) {
-            this.buttonName = '重新发送';
-            this.time = 60;
-            this.isDisabled = false;
-            window.clearInterval(this.timer);
-          }
-        }, 1000);
-      }).catch(err => {
-        this.resetForm();
-        this.codeLoading = false;
-        this.$message({
-          message: err.message,
-          type: 'error',
+      getCodeBySentEmail(codeData)
+        .then(() => {
+          this.$message({
+            showClose: true,
+            message: '发送成功，验证码有效期5分钟',
+            type: 'success',
+          });
+          this.codeLoading = false;
+          this.isDisabled = true;
+          this.buttonName = `${(this.time -= 1)}秒`;
+          this.timer = window.setInterval(() => {
+            this.buttonName = `${this.time}秒`;
+            this.time -= 1;
+            if (this.time < 0) {
+              this.buttonName = '重新发送';
+              this.time = 60;
+              this.isDisabled = false;
+              window.clearInterval(this.timer);
+            }
+          }, 1000);
+        })
+        .catch((err) => {
+          this.resetForm();
+          this.codeLoading = false;
+          this.$message({
+            message: err.message,
+            type: 'error',
+          });
         });
-      });
     },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
@@ -151,25 +173,27 @@ export default {
             code: this.registerForm.code,
             password: encrypt(this.registerForm.password),
           };
-          resetPassword(formData).then(() => {
-            this.loading = false;
-            this.resetForm();
-            this.$notify({
-              title: '密码修改成功',
-              type: 'success',
-              duration: 1500,
-            });
-            this.$router.replace({ path: '/login' });
-          }).catch(err => {
-            this.loading = false;
-            this.$message({
-              message: err.message,
-              type: 'error',
+          resetPassword(formData)
+            .then(() => {
+              this.loading = false;
+              this.resetForm();
+              this.$notify({
+                title: '密码修改成功',
+                type: 'success',
+                duration: 1500,
+              });
+              this.$router.replace({ path: '/login' });
+            })
+            .catch((err) => {
+              this.loading = false;
+              this.$message({
+                message: err.message,
+                type: 'error',
+              });
             });
-          });
-        } else {
-          return false;
+          return true;
         }
+        return false;
       });
     },
     resetForm() {
diff --git a/webapp/src/views/system/authCode/components/authCodeForm.vue b/webapp/src/views/system/authCode/components/authCodeForm.vue
new file mode 100644
index 0000000..8766e44
--- /dev/null
+++ b/webapp/src/views/system/authCode/components/authCodeForm.vue
@@ -0,0 +1,174 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+    <el-form-item label="权限组名称" prop="authCode">
+      <el-input
+        v-model.trim="form.authCode"
+        placeholder="请输入权限组名称"
+        maxlength="32"
+        show-word-limit
+        class="w-200"
+      />
+    </el-form-item>
+    <el-form-item label="描述" prop="description">
+      <el-input
+        id="description"
+        v-model="form.description"
+        type="textarea"
+        :rows="3"
+        placeholder="请输入描述"
+        maxlength="255"
+        show-word-limit
+        class="w-500"
+      />
+    </el-form-item>
+    <el-divider />
+    <el-form-item label="权限选择" class="is-required" :error="permissionErrorMsg">
+      <el-tree
+        ref="permissionTreeRef"
+        :data="permissionList"
+        show-checkbox
+        node-key="id"
+        style="margin-top: 3px;"
+        @check="onPermissonCheck"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { computed, nextTick, reactive, ref, toRefs } from '@vue/composition-api';
+
+import { getPermissionTree } from '@/api/system/permission';
+import { checkLeafNode, validateNameWithHyphen } from '@/utils';
+
+export default {
+  name: 'AuthCodeForm',
+  setup() {
+    // refs
+    const formRef = ref(null);
+    const permissionTreeRef = ref(null);
+
+    const state = reactive({
+      permissionList: [],
+      permissionValid: true,
+    });
+
+    // form
+    const defaultForm = {
+      id: null,
+      authCode: null,
+      description: null,
+      permissions: [],
+    };
+    const form = reactive({ ...defaultForm });
+    const rules = {
+      authCode: [
+        { required: true, message: '请输入权限组名称', trigger: 'blur' },
+        { max: 32, message: '长度在32个字符以内', trigger: 'blur' },
+        {
+          validator: validateNameWithHyphen,
+          trigger: ['blur', 'change'],
+        },
+      ],
+      description: [{ max: 255, message: '长度在255个字符以内', trigger: 'blur' }],
+    };
+
+    // 权限数据
+    const getPermissions = async () => {
+      state.permissionList = await getPermissionTree();
+    };
+    const permissionLeafNodeIdList = computed(() => {
+      return checkLeafNode(state.permissionList, []).map((p) => p.id);
+    });
+    // 校验是否勾选权限，并给 form 赋值
+    const validatePermission = () => {
+      form.permissions = permissionTreeRef.value
+        .getCheckedKeys()
+        .concat(permissionTreeRef.value.getHalfCheckedKeys());
+      state.permissionValid = form.permissions.length > 0;
+      return state.permissionValid;
+    };
+    const permissionErrorMsg = computed(() => {
+      if (state.permissionValid) return null;
+      return '至少选择一个操作权限';
+    });
+    const onPermissonCheck = () => {
+      validatePermission();
+    };
+
+    const initForm = (originForm = {}) => {
+      Object.keys(form).forEach((key) => {
+        form[key] = originForm[key] || defaultForm[key];
+      });
+      nextTick(async () => {
+        await getPermissions();
+        permissionTreeRef.value.setCheckedKeys(
+          form.permissions
+            .map((p) => p.id)
+            .filter((p) => permissionLeafNodeIdList.value.includes(p))
+        );
+      });
+    };
+    const validate = (resolve, reject) => {
+      formRef.value.validate((isValid) => {
+        const valid = validatePermission() && isValid;
+        if (valid) {
+          if (typeof resolve === 'function') {
+            return resolve(form);
+          }
+          return true;
+        }
+        if (typeof reject === 'function') {
+          return reject(form);
+        }
+        return false;
+      });
+    };
+    const clearValidate = () => {
+      formRef.value.clearValidate();
+    };
+    const resetForm = () => {
+      initForm();
+      clearValidate();
+    };
+
+    // created
+    getPermissions();
+
+    return {
+      formRef,
+      permissionTreeRef,
+      ...toRefs(state),
+
+      form,
+      rules,
+
+      permissionErrorMsg,
+      onPermissonCheck,
+
+      initForm,
+      validate,
+      clearValidate,
+      resetForm,
+
+      permissionLeafNodeIdList,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/views/system/authCode/components/permissionForm.vue b/webapp/src/views/system/authCode/components/permissionForm.vue
new file mode 100644
index 0000000..b23246b
--- /dev/null
+++ b/webapp/src/views/system/authCode/components/permissionForm.vue
@@ -0,0 +1,193 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+    <BaseForm
+      v-for="(permission, index) in form.permissions"
+      ref="permissionFormRefs"
+      :key="permission._id"
+      inline
+      label-width="100px"
+      :form-items="permissionFormItems(index)"
+      :model="permission"
+      :rules="permissionRules"
+    />
+    <el-divider class="mt-0" />
+    <el-form-item ref="pidRef" prop="pid" label="上级权限">
+      <TreeSelect
+        v-model="form.pid"
+        :default-expand-level="1"
+        :clearable="false"
+        :searchable="false"
+        :options="permissions"
+        placeholder="选择上级权限"
+        @select="validatePid()"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+/* eslint-disable no-plusplus */
+
+import { nextTick, reactive, ref, toRefs } from '@vue/composition-api';
+import TreeSelect from '@riophae/vue-treeselect';
+import '@riophae/vue-treeselect/dist/vue-treeselect.css';
+import { isNil } from 'lodash';
+
+import { getPermissionTree } from '@/api/system/permission';
+import BaseForm from '@/components/BaseForm';
+
+import { getPermissionFormItems, permissionRules } from '../utils';
+
+export default {
+  name: 'PermissionForm',
+  components: {
+    TreeSelect,
+    BaseForm,
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'add',
+    },
+  },
+  setup(props) {
+    const state = reactive({
+      permissions: [],
+    });
+
+    const getPermissions = async () => {
+      const data = await getPermissionTree();
+      state.permissions = [
+        {
+          id: 0,
+          label: '根权限',
+          children: data,
+        },
+      ];
+    };
+
+    const formRef = ref(null);
+    const permissionFormRefs = ref(null);
+    const pidRef = ref(null);
+
+    const defaultForm = {
+      id: null,
+      permissions: [],
+      pid: null,
+    };
+    const defaultPermission = {
+      name: null,
+      permission: null,
+      _id: null, // 渲染用唯一 key
+    };
+    let _id = 1;
+
+    const form = reactive({ ...defaultForm, permissions: [] });
+
+    const addPermission = () => {
+      form.permissions.push({ ...defaultPermission, _id: _id++ });
+    };
+    const removePermission = (index) => {
+      form.permissions.splice(index, 1);
+    };
+    const permissionFormItems = (index) => {
+      return getPermissionFormItems({
+        addPermission,
+        removePermission,
+        index,
+        length: form.permissions.length,
+        formType: props.type,
+      });
+    };
+
+    const rules = {
+      pid: [{ required: true, message: '请选择上级权限', trigger: 'manual' }],
+    };
+
+    const initForm = (originForm = {}) => {
+      Object.keys(form).forEach((key) => {
+        form[key] = isNil(originForm[key]) ? defaultForm[key] : originForm[key];
+      });
+      form.permissions = [];
+      form.permissions.push({
+        name: originForm.name,
+        permission: originForm.permission,
+        _id: _id++,
+      });
+      if (!form.permissions.length) {
+        addPermission();
+      }
+      getPermissions();
+    };
+    const validate = (resolve, reject) => {
+      formRef.value.validate((isValid) => {
+        let valid = isValid;
+        permissionFormRefs.value.forEach((ref) => {
+          valid = ref.validate() && valid;
+        });
+        if (valid) {
+          if (typeof resolve === 'function') {
+            return resolve(form);
+          }
+          return true;
+        }
+        if (typeof reject === 'function') {
+          return reject(form);
+        }
+        return false;
+      });
+    };
+    const clearValidate = () => {
+      formRef.value.clearValidate();
+    };
+    const resetForm = () => {
+      initForm();
+      clearValidate();
+    };
+    const validatePid = () => {
+      // vue-treeSelect 组件会先触发 select 事件，再通过双向绑定修改值，因此需要延迟校验
+      nextTick(() => {
+        pidRef.value.validate('manual');
+      });
+    };
+
+    return {
+      ...toRefs(state),
+
+      formRef,
+      permissionFormRefs,
+      pidRef,
+
+      form,
+      rules,
+
+      initForm,
+      validate,
+      clearValidate,
+      resetForm,
+      validatePid,
+      addPermission,
+      removePermission,
+
+      permissionFormItems,
+      permissionRules,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/views/system/authCode/index.vue b/webapp/src/views/system/authCode/index.vue
new file mode 100644
index 0000000..5b0837f
--- /dev/null
+++ b/webapp/src/views/system/authCode/index.vue
@@ -0,0 +1,456 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="app-container">
+    <ProTableHeader
+      :form-items="queryFormItems"
+      :show-create="showCreate"
+      :create-title="createTitle"
+      :form-model="queryFormModel"
+      @create="doAdd"
+    />
+    <el-tabs v-model="activeTab" class="eltabs-inlineblock" @tab-click="onTabClick">
+      <el-tab-pane label="权限组管理" name="authCode" />
+      <el-tab-pane label="权限管理" name="permission" />
+    </el-tabs>
+    <BaseTable
+      v-if="isAuthCode"
+      :loading="tableLoading"
+      :data="authCodeList"
+      :columns="authCodeColumns"
+      @sort-change="onSortChange"
+    />
+    <!-- TODO: BaseTable 无法实现树结构加载？ -->
+    <el-table
+      v-if="isPermission"
+      :data="permissionList"
+      row-key="id"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      highlight-current-row
+    >
+      <el-table-column prop="name" label="权限名称" />
+      <el-table-column prop="permission" label="权限标识" />
+      <el-table-column prop="updateTime" label="修改时间" min-width="160px">
+        <template #default="scope">
+          {{ parseTime(scope.row.updateTime) }}
+        </template>
+      </el-table-column>
+      <el-table-column v-if="!isProduction" label="操作" width="370px">
+        <template #default="scope">
+          <el-button
+            v-if="hasPermission('system:permission:edit')"
+            type="text"
+            @click="doEdit(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            v-if="hasPermission('system:permission:delete')"
+            type="text"
+            @click="doDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 权限管理使用树结构展示，无分页信息 -->
+    <el-pagination
+      v-if="isAuthCode"
+      v-bind="authCodePageAttr"
+      style="margin-top: 8px; text-align: center;"
+      @size-change="onSizeChange"
+      @current-change="onCurrentChange"
+    />
+    <!-- 表单弹窗 -->
+    <BaseModal
+      :visible.sync="formVisible"
+      :title="formTitle"
+      :loading="formSubmitting"
+      width="900px"
+      @cancel="formVisible = false"
+      @ok="onFormConfirm"
+      @close="onFormClose"
+    >
+      <AuthCodeForm v-if="isAuthCode" ref="formRef" />
+      <PermissionForm v-if="isPermission" ref="formRef" :type="formType" />
+    </BaseModal>
+  </div>
+</template>
+
+<script>
+import { computed, nextTick, reactive, ref, toRefs } from '@vue/composition-api';
+import { Message, MessageBox } from 'element-ui';
+import { isNil } from 'lodash';
+
+import ProTableHeader from '@/components/ProTable/header';
+import BaseTable from '@/components/BaseTable';
+import BaseModal from '@/components/BaseModal';
+import {
+  list as listAuthCode,
+  add as addAuthCode,
+  edit as editAuthCode,
+  del as delAuthCode,
+} from '@/api/system/authCode';
+import {
+  list as listPermission,
+  add as addPermission,
+  edit as editPermission,
+  del as delPermission,
+} from '@/api/system/permission';
+import { usePagination, useSort } from '@/hooks';
+import { Constant, parseTime, hasPermission } from '@/utils';
+
+import { getAuthCodeColumns, getQueryFormItems } from './utils';
+import AuthCodeForm from './components/authCodeForm';
+import PermissionForm from './components/permissionForm';
+
+export default {
+  name: 'AuthCode',
+  components: {
+    ProTableHeader,
+    BaseTable,
+    BaseModal,
+    AuthCodeForm,
+    PermissionForm,
+  },
+  setup() {
+    const state = reactive({
+      activeTab: 'authCode', // 激活的 tab 页
+
+      formVisible: false,
+      formSubmitting: false,
+      formType: 'add', // add/edit
+
+      authCodeList: [],
+      permissionList: [],
+
+      tableLoading: false,
+      queryFormModel: { keyword: undefined },
+    });
+
+    // refs
+    const proTableRef = ref(null);
+    const formRef = ref(null);
+
+    // base computed
+    const isAuthCode = computed(() => {
+      return state.activeTab === 'authCode';
+    });
+    const isPermission = computed(() => {
+      return state.activeTab === 'permission';
+    });
+    // 是否为生产环境
+    const isProduction = computed(() => {
+      return process.env.NODE_ENV === 'production';
+    });
+
+    // 分页信息
+    const {
+      mergedPageAttrs: authCodePageAttr,
+      pagination: authCodePagination,
+      setPagination: setAuthCodePagination,
+    } = usePagination();
+
+    // 排序信息
+    const { sortInfo: authCodeSortInfo, setSort: setAuthCodeSort } = useSort();
+
+    // 表格数据
+    const refreshAuthCode = async (queryObj = {}) => {
+      const { currentPage: current, pageSize: size } = authCodePagination;
+      state.tableLoading = true;
+      const { page, result } = await listAuthCode({
+        current,
+        size,
+        ...authCodeSortInfo,
+        ...state.queryFormModel,
+        ...queryObj,
+      }).finally(() => {
+        state.tableLoading = false;
+      });
+      // 如果当前非第一页，且总数据量已经小于或等于上一页能展示的所有数据，那么重新请求上一页的数据
+      if (page.current > 1 && page.total <= page.size * (page.current - 1)) {
+        refreshAuthCode({ current: current - 1 });
+        return;
+      }
+      setAuthCodePagination(page);
+      state.authCodeList = result;
+    };
+    const refreshPermission = async (queryObj = {}) => {
+      state.tableLoading = true;
+      const { result } = await listPermission({
+        ...state.queryFormModel,
+        ...queryObj,
+      }).finally(() => {
+        state.tableLoading = false;
+      });
+      state.permissionList = result;
+    };
+    const refresh = (queryObj = {}) => {
+      if (isAuthCode.value) {
+        return refreshAuthCode(queryObj);
+      }
+      if (isPermission.value) {
+        return refreshPermission(queryObj);
+      }
+      return Promise.reject();
+    };
+    const queryAuthCode = () => {
+      setAuthCodePagination({ current: 1 });
+      refreshAuthCode();
+    };
+    const queryPermission = () => {
+      refreshPermission();
+    };
+    const query = () => {
+      Object.keys(state.queryFormModel).forEach((key) => {
+        if (isNil(state.queryFormModel[key]) || state.queryFormModel[key] === '') {
+          state.queryFormModel[key] = undefined;
+        }
+      });
+      if (isAuthCode.value) {
+        return queryAuthCode();
+      }
+      if (isPermission.value) {
+        return queryPermission();
+      }
+      return Promise.reject();
+    };
+    const resetQuery = () => {
+      state.queryFormModel = { keyword: undefined };
+      query();
+    };
+
+    // 表单信息
+    const formTitle = computed(() => {
+      let formType;
+      let dataType;
+      switch (state.formType) {
+        case 'edit':
+          formType = '编辑';
+          break;
+        case 'add':
+        default:
+          formType = '创建';
+      }
+      switch (state.activeTab) {
+        case 'permission':
+          dataType = '权限';
+          break;
+        case 'authCode':
+        default:
+          dataType = '权限组';
+      }
+      return `${formType}${dataType}`;
+    });
+
+    const onFormConfirm = () => {
+      formRef.value.validate((form) => {
+        let submitFn;
+        let submitType;
+        let dataType;
+        if (state.activeTab === 'authCode') {
+          dataType = '权限组';
+          switch (state.formType) {
+            case 'edit':
+              submitFn = editAuthCode;
+              submitType = '修改';
+              break;
+            case 'add':
+            default:
+              submitFn = addAuthCode;
+              submitType = '创建';
+          }
+        } else if (state.activeTab === 'permission') {
+          dataType = '权限';
+          switch (state.formType) {
+            case 'edit':
+              submitFn = editPermission;
+              submitType = '修改';
+              break;
+            case 'add':
+            default:
+              submitFn = addPermission;
+              submitType = '创建';
+          }
+        } else {
+          return;
+        }
+
+        state.formSubmitting = true;
+        submitFn(form)
+          .then(() => {
+            Message.success(`${submitType}${dataType}成功`);
+            state.formVisible = false;
+            query();
+          })
+          .finally(() => {
+            state.formSubmitting = false;
+          });
+      });
+    };
+    const onFormClose = () => {
+      formRef.value.resetForm();
+    };
+
+    // 头部信息
+    const showCreate = computed(() => {
+      switch (state.activeTab) {
+        case 'authCode':
+          return hasPermission('system:authCode:create');
+        case 'permission':
+          return hasPermission('system:permission:create') && !isProduction.value;
+        default:
+          return true;
+      }
+    });
+    const createTitle = computed(() => {
+      switch (state.activeTab) {
+        case 'permission':
+          return '创建权限';
+        case 'authCode':
+        default:
+          return '创建权限组';
+      }
+    });
+
+    // 页面信息
+    const doAdd = () => {
+      state.formType = 'add';
+      state.formVisible = true;
+      nextTick(() => {
+        formRef.value.initForm();
+      });
+    };
+    const doEdit = (row) => {
+      state.formType = 'edit';
+      state.formVisible = true;
+      nextTick(() => {
+        formRef.value.initForm(row);
+      });
+    };
+    const doDelete = (row) => {
+      let delFn;
+      let deleteMsg;
+      switch (state.activeTab) {
+        case 'permission':
+          if (row.children) {
+            deleteMsg = '此操作将删除该权限及其所有下级权限';
+          } else {
+            deleteMsg = '此操作将删除该权限';
+          }
+          delFn = delPermission;
+          break;
+        case 'authCode':
+        default:
+          deleteMsg = '此操作将删除该权限组';
+          delFn = delAuthCode;
+          break;
+      }
+      MessageBox.confirm(deleteMsg, '请确认').then(() => {
+        delFn([row.id]).then(() => {
+          Message.success('删除成功');
+          refresh();
+        });
+      });
+    };
+    const authCodeColumns = computed(() => {
+      return getAuthCodeColumns({
+        doEdit,
+        doDelete,
+      });
+    });
+    const queryFormItems = computed(() => {
+      return getQueryFormItems({
+        activeTab: state.activeTab,
+        query,
+        resetQuery,
+      });
+    });
+    const onTabClick = () => {
+      resetQuery();
+    };
+    const onSortChange = ({ prop, order }) => {
+      const sort = {
+        sort: order && prop,
+        order: order && Constant.tableSortMap[order],
+      };
+      switch (state.activeTab) {
+        case 'authCode':
+          setAuthCodeSort(sort);
+          break;
+        // no default
+      }
+      query();
+    };
+    const onSizeChange = (size) => {
+      switch (state.activeTab) {
+        case 'authCode':
+          setAuthCodePagination({
+            size,
+            current: 1,
+          });
+          refreshAuthCode();
+          break;
+        // no default
+      }
+    };
+    const onCurrentChange = (current) => {
+      switch (state.activeTab) {
+        case 'authCode':
+          setAuthCodePagination({
+            current,
+          });
+          refreshAuthCode();
+          break;
+        // no default
+      }
+    };
+
+    query();
+
+    return {
+      parseTime,
+      hasPermission,
+      ...toRefs(state),
+      proTableRef,
+      formRef,
+      isAuthCode,
+      isPermission,
+      isProduction,
+
+      // 分页
+      authCodePageAttr,
+
+      showCreate,
+      createTitle,
+      authCodeColumns,
+      queryFormItems,
+      onSortChange,
+      onSizeChange,
+      onCurrentChange,
+
+      doAdd,
+      onTabClick,
+      doEdit,
+      doDelete,
+
+      formTitle,
+      onFormConfirm,
+      onFormClose,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/views/system/authCode/utils.js b/webapp/src/views/system/authCode/utils.js
new file mode 100644
index 0000000..0f228ea
--- /dev/null
+++ b/webapp/src/views/system/authCode/utils.js
@@ -0,0 +1,154 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { validateNameWithHyphen, getRegValidator, hasPermission } from '@/utils';
+
+// 获取权限组表格列定义
+export function getAuthCodeColumns({ doEdit, doDelete }) {
+  return [
+    {
+      label: 'ID',
+      prop: 'id',
+      width: 80,
+      sortable: 'custom',
+    },
+    {
+      label: '名称',
+      prop: 'authCode',
+    },
+    {
+      label: '描述',
+      prop: 'description',
+      minWidth: '200px',
+    },
+    {
+      label: '修改时间',
+      prop: 'updateTime',
+      type: 'time',
+      minWidth: '160px',
+      sortable: 'custom',
+    },
+    {
+      label: '操作',
+      type: 'operation',
+      width: '370px',
+      operations: [
+        {
+          label: '编辑',
+          func: doEdit,
+          hide: !hasPermission('system:authCode:edit'),
+        },
+        {
+          label: '删除',
+          func: doDelete,
+          hide: !hasPermission('system:authCode:delete'),
+        },
+      ],
+    },
+  ];
+}
+
+// 搜索表单项
+export function getQueryFormItems({ activeTab, query, resetQuery }) {
+  let placeholder;
+  switch (activeTab) {
+    case 'permission':
+      placeholder = '请输入权限名称或权限码';
+      break;
+    case 'authCode':
+    default:
+      placeholder = '请输入权限组名称或 ID';
+  }
+  return [
+    {
+      prop: 'keyword',
+      placeholder,
+      class: 'w-300',
+      change: query,
+    },
+    {
+      type: 'button',
+      btnText: '重置',
+      func: resetQuery,
+    },
+    {
+      type: 'button',
+      btnText: '搜索',
+      btnType: 'primary',
+      func: query,
+    },
+  ];
+}
+
+// 权限表单项
+export function getPermissionFormItems({
+  addPermission,
+  removePermission,
+  index,
+  length,
+  formType,
+}) {
+  const isEdit = formType === 'edit';
+  return [
+    {
+      prop: 'name',
+      label: '权限名称',
+      placeholder: '请输入权限名称',
+      class: 'w-200',
+    },
+    {
+      prop: 'permission',
+      label: '权限标识',
+      placeholder: '请输入权限标识',
+      class: 'w-300',
+    },
+    {
+      type: 'button',
+      btnType: 'primary',
+      circle: true,
+      hidden: index !== length - 1 || isEdit, // 只有最后一组数据展示添加按钮; 编辑模式不能增减权限数量
+      func: () => addPermission(index),
+      icon: 'el-icon-plus',
+      size: 'mini',
+    },
+    {
+      type: 'button',
+      btnType: 'danger',
+      circle: true,
+      hidden: length === 1 || isEdit, // 当只有一组数据时不展示删除按钮; 编辑模式不能增减权限数量
+      func: () => removePermission(index),
+      icon: 'el-icon-minus',
+      size: 'mini',
+    },
+  ];
+}
+
+// 权限表单规则
+export const permissionRules = {
+  name: [
+    { required: true, message: '请输入权限名称', trigger: 'blur' },
+    {
+      validator: validateNameWithHyphen,
+      trigger: ['blur', 'change'],
+    },
+  ],
+  permission: [
+    {
+      validator: getRegValidator(/^[\w:]+$/, '仅支持字母、数字、下划线和英文冒号'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+};
diff --git a/webapp/src/views/system/dict/dictDetail.vue b/webapp/src/views/system/dict/dictDetail.vue
index c74609a..0590169 100644
--- a/webapp/src/views/system/dict/dictDetail.vue
+++ b/webapp/src/views/system/dict/dictDetail.vue
@@ -1,18 +1,9 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div>
@@ -39,16 +30,23 @@
       </el-form>
     </BaseModal>
     <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row @selection-change="crud.selectionChangeHandler">
-      <!-- <el-table-column label="所属字典">
-        {{ dictName }}
-      </el-table-column> -->
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      :data="crud.data"
+      highlight-current-row
+      @selection-change="crud.selectionChangeHandler"
+    >
       <el-table-column prop="label" label="字典标签" />
       <el-table-column prop="value" label="字典值" />
       <el-table-column prop="sort" label="排序" />
       <el-table-column label="操作" width="120" fixed="right">
         <template slot-scope="scope">
-          <udOperation :data="scope.row" />
+          <udOperation
+            :data="scope.row"
+            :show-edit="hasPermission('system:dictDetail:edit')"
+            :show-delete="hasPermission('system:dictDetail:delete')"
+          />
         </template>
       </el-table-column>
     </el-table>
@@ -63,6 +61,7 @@ import pagination from '@crud/Pagination';
 import udOperation from '@crud/UD.operation';
 import crudDictDetail from '@/api/system/dictDetail';
 import BaseModal from '@/components/BaseModal';
+import { hasPermission } from '@/utils';
 
 const defaultForm = { id: null, label: null, value: null };
 
@@ -70,7 +69,10 @@ export default {
   components: { pagination, udOperation, BaseModal },
   cruds() {
     return [
-      CRUD({ title: '字典详情', query: { dictId: null }, sort: ['sort,asc', 'id,desc'],
+      CRUD({
+        title: '字典详情',
+        query: { dictId: null },
+        sort: ['sort,asc', 'id,desc'],
         crudMethod: { ...crudDictDetail },
         optShow: {
           reset: false,
@@ -83,25 +85,22 @@ export default {
     presenter(),
     header(),
     form(function id() {
-      return {dictId: this.dictId,
-        sort: this.crud.data.length + 1, ...defaultForm};
-    })],
+      return { dictId: this.dictId, sort: this.crud.data.length + 1, ...defaultForm };
+    }),
+  ],
   data() {
     return {
       dictId: null,
       dictName: '',
       rules: {
-        label: [
-          { required: true, message: '请输入字典标签', trigger: 'blur' },
-        ],
-        value: [
-          { required: true, message: '请输入字典值', trigger: 'blur' },
-        ],
-        sort: [
-          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' },
-        ],
+        label: [{ required: true, message: '请输入字典标签', trigger: 'blur' }],
+        value: [{ required: true, message: '请输入字典值', trigger: 'blur' }],
+        sort: [{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }],
       },
     };
   },
+  methods: {
+    hasPermission,
+  },
 };
 </script>
diff --git a/webapp/src/views/system/dict/index.vue b/webapp/src/views/system/dict/index.vue
index 1cd4dfb..e532d75 100644
--- a/webapp/src/views/system/dict/index.vue
+++ b/webapp/src/views/system/dict/index.vue
@@ -1,18 +1,9 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div class="app-container">
@@ -44,7 +35,14 @@
             <cdOperation>
               <span slot="right">
                 <!-- 搜索 -->
-                <el-input v-model="query.blurry" clearable placeholder="输入关键词搜索" style="width: 150px;" class="filter-item" @change="crud.toQuery" />
+                <el-input
+                  v-model="query.blurry"
+                  clearable
+                  placeholder="输入关键词搜索"
+                  style="width: 150px;"
+                  class="filter-item"
+                  @change="crud.toQuery"
+                />
                 <rrOperation />
               </span>
             </cdOperation>
@@ -67,8 +65,17 @@
             </el-table-column>
             <el-table-column label="操作" width="200" fixed="right">
               <template slot-scope="scope">
-                <udOperation :data="scope.row" />
-                <el-button type="text" style="margin-left: 10px;" @click="handleCurrentChange(scope.row, scope.$index)">查看详情</el-button>
+                <udOperation
+                  :data="scope.row"
+                  :show-edit="hasPermission('system:dict:edit')"
+                  :show-delete="hasPermission('system:dict:delete')"
+                />
+                <el-button
+                  type="text"
+                  style="margin-left: 10px;"
+                  @click="handleCurrentChange(scope.row, scope.$index)"
+                  >查看详情</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -82,11 +89,13 @@
           <div slot="header" class="clearfix">
             <span>字典详情</span>
             <el-button
+              v-if="hasPermission('system:dictDetail:create')"
               style="float: right; padding: 4px 10px;"
               type="primary"
               icon="el-icon-plus"
               @click="$refs.dictDetail && $refs.dictDetail.crud.toAdd()"
-            >添加</el-button>
+              >添加</el-button
+            >
           </div>
           <dictDetail ref="dictDetail" />
         </el-card>
@@ -101,7 +110,7 @@ import pagination from '@crud/Pagination';
 import rrOperation from '@crud/RR.operation';
 import cdOperation from '@crud/CD.operation';
 import udOperation from '@crud/UD.operation';
-import { validateNameWithHyphen } from '@/utils/validate';
+import { validateNameWithHyphen, hasPermission } from '@/utils';
 import crudDict from '@/api/system/dict';
 import BaseModal from '@/components/BaseModal';
 import dictDetail from './dictDetail';
@@ -113,7 +122,14 @@ export default {
   components: { BaseModal, pagination, cdOperation, rrOperation, udOperation, dictDetail },
   cruds() {
     return [
-      CRUD({ title: '字典', crudMethod: { ...crudDict }}),
+      CRUD({
+        title: '字典',
+        crudMethod: { ...crudDict },
+        optShow: {
+          add: hasPermission('system:dict:create'),
+          del: hasPermission('system:dict:delete'),
+        },
+      }),
     ];
   },
   mixins: [presenter(), header(), form(defaultForm)],
@@ -129,13 +145,13 @@ export default {
           { required: true, message: '请输入字典名称', trigger: 'blur' },
           { validator: validateNameWithHyphen, trigger: 'change' },
         ],
-        remark: [
-          { validator: validateNameWithHyphen, trigger: 'change' },
-        ],
+        remark: [{ validator: validateNameWithHyphen, trigger: 'change' }],
       },
     };
   },
   methods: {
+    hasPermission,
+
     // 获取数据前设置好接口地址
     [CRUD.HOOK.beforeRefresh]() {
       if (this.$refs.dictDetail) {
@@ -160,4 +176,3 @@ export default {
   },
 };
 </script>
-
diff --git a/webapp/src/views/system/menu/index.vue b/webapp/src/views/system/menu/index.vue
new file mode 100644
index 0000000..4052a30
--- /dev/null
+++ b/webapp/src/views/system/menu/index.vue
@@ -0,0 +1,376 @@
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
+
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <cdOperation>
+        <span slot="right">
+          <!-- 搜索 -->
+          <el-input
+            v-model="query.blurry"
+            clearable
+            placeholder="输入菜单名称或路由地址搜索"
+            style="width: 230px;"
+            class="filter-item"
+            @change="crud.toQuery"
+          />
+          <el-date-picker
+            v-model="query.createTime"
+            :default-time="['00:00:00', '23:59:59']"
+            type="daterange"
+            range-separator=":"
+            class="date-item"
+            value-format="timestamp"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            @change="crud.toQuery"
+          />
+          <rrOperation />
+        </span>
+      </cdOperation>
+    </div>
+    <!--表单渲染-->
+    <BaseModal
+      :before-close="crud.cancelCU"
+      :visible="crud.status.cu > 0"
+      :title="crud.status.title"
+      :loading="crud.status.cu === 2"
+      width="800px"
+      @cancel="crud.cancelCU"
+      @ok="crud.submitCU"
+    >
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="菜单类型" prop="type">
+          <el-radio-group
+            v-model="form.type"
+            class="long-item"
+            :disabled="isEdit"
+            @change="onChangeType"
+          >
+            <el-radio-button label="0">目录</el-radio-button>
+            <el-radio-button label="1">页面</el-radio-button>
+            <el-radio-button label="3">外链</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="菜单标题" prop="name">
+          <el-input
+            v-model="form.name"
+            class="short-item"
+            placeholder="菜单标题"
+            maxlength="50"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item label="菜单图标" prop="icon">
+          <el-autocomplete
+            v-model="form.icon"
+            :fetch-suggestions="querySearch"
+            placeholder="点击选择图标"
+            class="short-item"
+            readonly
+            @select="handleSelect"
+          >
+            <IconFont
+              v-if="form.icon"
+              slot="prefix"
+              :type="form.icon"
+              :style="{ marginLeft: '5px' }"
+            />
+            <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+            <template slot-scope="{ item }">
+              <IconFont :type="item.value" />
+              <span style="margin-left: 5px;">{{ item.value }}</span>
+            </template>
+          </el-autocomplete>
+        </el-form-item>
+        <el-form-item label="上级菜单" prop="pid">
+          <treeselect
+            v-model="form.pid"
+            :defaultExpandLevel="1"
+            :clearable="false"
+            :searchable="false"
+            :options="menus"
+            class="short-item"
+            placeholder="选择上级类目"
+          />
+        </el-form-item>
+        <el-form-item label="菜单排序" prop="sort">
+          <el-input-number v-model.number="form.sort" :min="0" :max="999" />
+        </el-form-item>
+        <el-form-item v-if="!isLink" label="路由地址" prop="path">
+          <el-input
+            v-model="form.path"
+            placeholder="相对上级菜单的路由地址"
+            class="short-item"
+            maxlength="50"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item v-if="isLink" label="链接地址" prop="path">
+          <el-input
+            v-model="form.path"
+            placeholder="以http(s)://开头"
+            class="long-item"
+            maxlength="100"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item v-if="!isLink" label="权限标识" prop="permission">
+          <el-input
+            v-model="form.permission"
+            placeholder="权限标识"
+            class="short-item"
+            maxlength="50"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item v-if="isPage" label="路由名称" prop="componentName">
+          <el-input
+            v-model="form.componentName"
+            class="short-item"
+            placeholder="路由名称"
+            maxlength="50"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item v-if="isPage" label="组件路径" prop="component">
+          <el-input
+            v-model="form.component"
+            class="short-item"
+            placeholder="相对/src/views/的路径"
+            maxlength="50"
+            show-word-limit
+          />
+        </el-form-item>
+        <el-form-item v-if="isPage" label="页面布局" prop="layout">
+          <el-select v-model="form.layout" placeholder="页面布局" class="short-item" clearable>
+            <el-option
+              v-for="item in dict.Layout"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="isPage" label="隐藏菜单" class="short-item" prop="hidden">
+          <el-switch v-model="form.hidden" />
+        </el-form-item>
+        <el-form-item v-if="isPage" label="扩展配置" prop="extConfig">
+          <Editor
+            ref="editorRef"
+            v-model="form.extConfig"
+            class="code-editor long-item el-input__inner"
+            placeholder="扩展配置支持 JSON 格式"
+            @change="handleCodeChange"
+          />
+        </el-form-item>
+      </el-form>
+    </BaseModal>
+    <!--表格渲染-->
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      :data="crud.data"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      row-key="id"
+      @select="crud.selectChange"
+      @select-all="crud.selectAllChange"
+      @selection-change="crud.selectionChangeHandler"
+    >
+      <el-table-column type="selection" width="40" />
+      <el-table-column prop="icon" label="菜单名称" min-width="160">
+        <template slot-scope="scope">
+          <IconFont v-if="scope.row.icon" :type="scope.row.icon" />
+          <span>{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column show-overflow-tooltip prop="path" label="路由地址" />
+      <el-table-column show-overflow-tooltip prop="componentName" label="路由名称" />
+      <el-table-column show-overflow-tooltip prop="component" label="组件路径" />
+      <el-table-column show-overflow-tooltip prop="layout" label="页面布局">
+        <template slot-scope="scope">
+          {{ dict.label.Layout[scope.row.layout] }}
+        </template>
+      </el-table-column>
+
+      <el-table-column show-overflow-tooltip prop="permission" label="权限标识" />
+      <el-table-column prop="hidden" label="隐藏" width="60">
+        <template slot-scope="scope">
+          {{ scope.row.type === 1 ? (scope.row.hidden ? '是' : '否') : '--' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" align="center" label="排序" width="60">
+        <template slot-scope="scope">
+          {{ scope.row.sort }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" width="160">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="120" fixed="right">
+        <template slot-scope="scope">
+          <udOperation
+            :data="scope.row"
+            :show-edit="hasPermission('system:menu:edit')"
+            :show-delete="hasPermission('system:menu:delete')"
+            msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import Treeselect from '@riophae/vue-treeselect';
+
+import Editor from '@/components/editor';
+import { validateName, validateString, validateJSON, hasPermission } from '@/utils';
+import crudMenu, { getMenusTree } from '@/api/system/menu';
+import { iconList } from '@/components/IconFont/iconfont';
+import CRUD, { presenter, header, form, crud } from '@crud/crud';
+import rrOperation from '@crud/RR.operation';
+import cdOperation from '@crud/CD.operation';
+import udOperation from '@crud/UD.operation';
+import datePickerMixin from '@/mixins/datePickerMixin';
+import BaseModal from '@/components/BaseModal';
+
+import '@riophae/vue-treeselect/dist/vue-treeselect.css';
+
+// crud交由presenter持有
+const defaultForm = {
+  id: null,
+  name: null,
+  sort: 999,
+  path: null,
+  component: null,
+  componentName: null,
+  layout: null,
+  roles: [],
+  pid: 0,
+  icon: null,
+  cache: false,
+  hidden: false,
+  type: 0,
+  permission: null,
+  extConfig: '{}',
+};
+
+export default {
+  name: 'Menu',
+  components: { BaseModal, Treeselect, cdOperation, rrOperation, udOperation, Editor },
+  cruds() {
+    return CRUD({
+      title: '菜单',
+      crudMethod: { ...crudMenu },
+      optShow: {
+        add: hasPermission('system:menu:create'),
+        del: hasPermission('system:menu:delete'),
+      },
+    });
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud(), datePickerMixin],
+  data() {
+    return {
+      menus: [],
+      isEdit: false,
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' },
+          { validator: validateName, trigger: 'blur' },
+        ],
+        path: [
+          { required: true, message: '请输入地址', trigger: 'blur' },
+          { validator: validateString, trigger: 'blur' },
+        ],
+        component: [
+          { required: true, message: '请输入组件路径', trigger: 'blur' },
+          { validator: validateString, trigger: 'blur' },
+        ],
+        componentName: [
+          { required: true, message: '请输入路由名称', trigger: 'blur' },
+          { validator: validateName, trigger: 'blur' },
+        ],
+        permission: [
+          { required: false, message: '请输入权限标识', trigger: 'blur' },
+          { validator: validateString, trigger: 'blur' },
+        ],
+        pid: [{ required: true, message: '请选择上级菜单', trigger: 'blur' }],
+        layout: [{ required: true, message: '请选择页面布局', trigger: 'blur' }],
+        extConfig: [{ validator: validateJSON, trigger: 'change' }],
+      },
+    };
+  },
+  dicts: ['Layout'],
+  computed: {
+    // 目录模式
+    isDir() {
+      return String(this.form.type) === '0';
+    },
+    // 页面模式
+    isPage() {
+      return String(this.form.type) === '1';
+    },
+    // 外链模式
+    isLink() {
+      return String(this.form.type) === '3';
+    },
+  },
+  methods: {
+    hasPermission,
+
+    // 新增与编辑前做的操作
+    [CRUD.HOOK.afterToCU]() {
+      getMenusTree().then((res) => {
+        this.menus = [];
+        const menu = { id: 0, label: '根类目', children: [] };
+        menu.children = res;
+        this.menus.push(menu);
+      });
+    },
+    [CRUD.HOOK.beforeToAdd]() {
+      this.isEdit = false;
+    },
+    [CRUD.HOOK.beforeToEdit]() {
+      this.isEdit = true;
+    },
+    querySearch(queryString, cb) {
+      cb(iconList.map((item) => ({ value: item })));
+    },
+    // 选中图标
+    handleSelect(item) {
+      this.form.icon = item.value;
+    },
+    onChangeType(type) {
+      this.crud.resetForm();
+      this.$refs.form.clearValidate();
+      this.crud.form.type = type;
+    },
+    setCode(code) {
+      this.form.extConfig = code;
+    },
+    handleCodeChange(value) {
+      this.setCode(value);
+      this.$refs.form.validateField('extConfig');
+    },
+  },
+};
+</script>
+<style scoped>
+.long-item {
+  width: 670px;
+}
+
+.short-item {
+  width: 288px;
+}
+</style>
diff --git a/webapp/src/views/system/node/index.vue b/webapp/src/views/system/node/index.vue
index ae540ce..3c99330 100644
--- a/webapp/src/views/system/node/index.vue
+++ b/webapp/src/views/system/node/index.vue
@@ -1,34 +1,35 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
+    <!-- 创建资源独占 -->
+    <div class="py-4">
+      <el-button type="primary" icon="el-icon-plus" round @click="doCreateIsolation()"
+        >创建资源独占</el-button
+      >
+    </div>
     <!--表格渲染-->
-    <el-table
-      ref="table"
-      v-loading="loading"
-      :data="nodeList"
-      highlight-current-row
-    >
+    <el-table ref="table" v-loading="loading" :data="nodeList" highlight-current-row>
       <el-table-column type="expand">
         <template slot-scope="scope">
           <el-table :data="scope.row.pods">
-            <el-table-column prop="podName" label="POD" how-overflow-tooltip />
+            <el-table-column prop="podName" label="POD" show-overflow-tooltip />
             <el-table-column prop="status" label="状态" align="center">
-              <template slot-scope="props">{{ dict.label.pods_status[ props.row.status ] }}</template>
+              <template slot-scope="props">{{ dict.label.pods_status[props.row.status] }}</template>
             </el-table-column>
             <el-table-column label="CPU" align="center">
               <template slot-scope="props">{{ props.row.podCpu }}</template>
@@ -46,44 +47,171 @@
         </template>
       </el-table-column>
       <el-table-column prop="name" label="节点" />
+      <el-table-column prop="isolation" label="用户独占">
+        <template #default="scope">
+          {{ scope.row.isolation || '--' }}
+        </template>
+      </el-table-column>
       <el-table-column prop="status" label="状态" align="center">
         <template slot-scope="scope">
-          <span v-if="scope.row.warning"> {{ dict.label.node_warning[ scope.row.warning ] || scope.row.warning }} </span>
-          <span v-else> {{ dict.label.node_status[ scope.row.status ] || scope.row.status }} </span>
+          <span v-if="scope.row.warning">
+            {{ dict.label.node_warning[scope.row.warning] || scope.row.warning }}
+          </span>
+          <span v-else> {{ dict.label.node_status[scope.row.status] || scope.row.status }} </span>
         </template>
       </el-table-column>
       <el-table-column label="CPU (使用中 / 总数)" align="center">
-        <template slot-scope="scope">{{ scope.row.nodeCpu }} / {{ scope.row.totalNodeCpu }}核</template>
+        <template #header>
+          <span>CPU (使用中 / 总数)</span>
+          <el-tooltip effect="dark" placement="top">
+            <div slot="content">1000m = 1核</div>
+            <i class="el-icon-question" />
+          </el-tooltip>
+        </template>
+        <template slot-scope="scope"
+          >{{ scope.row.nodeCpu }} / {{ scope.row.totalNodeCpu * 1000 }}m</template
+        >
       </el-table-column>
       <el-table-column label="内存 (使用中 / 总数)" align="center">
-        <template slot-scope="scope">{{ scope.row.nodeMemory | parseMemory }} / {{ scope.row.totalNodeMemory | parseMemory }}</template>
+        <template #header>
+          <span>内存 (使用中 / 总数)</span>
+          <el-tooltip effect="dark" placement="top">
+            <div slot="content">1Mi = 1024 x 1024B, 1Gi = 1024Mi</div>
+            <i class="el-icon-question" />
+          </el-tooltip>
+        </template>
+        <template slot-scope="scope"
+          >{{ scope.row.nodeMemory | parseMemory }} /
+          {{ scope.row.totalNodeMemory | parseMemory }}</template
+        >
       </el-table-column>
       <el-table-column label="GPU (使用中 / 总数)" align="center">
-        <template slot-scope="scope">{{ scope.row.gpuUsed }} / {{ scope.row.gpuCapacity }}</template>
+        <template slot-scope="scope"
+          >{{ scope.row.gpuUsed }} / {{ scope.row.gpuCapacity }}</template
+        >
       </el-table-column>
       <el-table-column prop="ip" label="IP" width="210" />
+      <el-table-column label="操作" width="120px">
+        <template #default="scope">
+          <el-button v-if="!scope.row.isolation" type="text" @click="doCreateIsolation(scope.row)"
+            >资源独占</el-button
+          >
+          <el-button v-else type="text" @click="doRemoveIsolation(scope.row)"
+            >取消资源独占</el-button
+          >
+        </template>
+      </el-table-column>
     </el-table>
+    <!-- 资源独占表单 -->
+    <BaseModal
+      :visible.sync="isolationVisible"
+      title="创建资源独占"
+      :loading="isolationSubmitting"
+      width="600px"
+      @open="onIsolationOpen"
+      @cancel="isolationVisible = false"
+      @ok="onIsolationSubmit"
+      @close="onIsolationClose"
+    >
+      <el-form
+        ref="isolationForm"
+        :model="isolationForm"
+        :rules="isolationRules"
+        label-width="100px"
+      >
+        <el-form-item ref="userId" label="独占用户" prop="userId">
+          <el-select
+            v-model="isolationForm.userId"
+            v-el-select-load-more="getUserList"
+            filterable
+            :filter-method="filterUserName"
+            placeholder="查询用户"
+            @change="validateField('userId')"
+          >
+            <el-option
+              v-for="user in userList"
+              :key="user.id"
+              :label="user.username"
+              :value="user.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item ref="nodeNames" label="独占节点" prop="nodeNames">
+          <el-select
+            v-model="isolationForm.nodeNames"
+            multiple
+            collapse-tags
+            clearable
+            filterable
+            placeholder="请选择节点"
+            @change="validateField('nodeNames')"
+          >
+            <el-option v-for="node of openNodeNameList" :key="node" :label="node" :value="node" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </BaseModal>
   </div>
 </template>
 
 <script>
 import { parseTime } from '@/utils';
-import { getNodes } from '@/api/system/node';
+import { getNodes, addNodeIsolation, removeNodeIsolation } from '@/api/system/node';
+import { findByNickName } from '@/api/system/user';
+import BaseModal from '@/components/BaseModal';
 
 export default {
   name: 'Node',
   dicts: ['node_status', 'node_warning', 'pods_status'],
+  components: {
+    BaseModal,
+  },
   filters: {
     parseMemory(value) {
-      return value.substring(0, value.indexOf('Mi')) > 1024 ? `${(value.substring(0, value.indexOf('Mi')) / 1024).toFixed(2)  }Gi` : value;
+      return value.substring(0, value.indexOf('Mi')) > 1024
+        ? `${(value.substring(0, value.indexOf('Mi')) / 1024).toFixed(2)}Gi`
+        : value;
     },
   },
   data() {
     return {
       loading: false,
       nodeList: [],
+
+      // 资源独占
+      isolationVisible: false,
+      isolationSubmitting: false,
+      isolationForm: {
+        userId: null,
+        nodeNames: [],
+      },
+      isolationRules: {
+        userId: [
+          {
+            required: true,
+            message: '请选择用户',
+            trigger: 'manual',
+          },
+        ],
+        nodeNames: [
+          {
+            required: true,
+            message: '请选择节点',
+            trigger: 'manual',
+          },
+        ],
+      },
+      userAllList: [],
+      filterList: [],
+      userList: [],
+      page: 1,
     };
   },
+  computed: {
+    openNodeNameList() {
+      return this.nodeList.filter((node) => !node.isolation).map((node) => node.name);
+    },
+  },
   created() {
     this.getNodes();
   },
@@ -91,12 +219,81 @@ export default {
     parseTime,
     async getNodes() {
       this.loading = true;
-      getNodes().then(res => {
-        this.nodeList = res;
-      }).finally(() => {
-        this.loading = false;
+      getNodes()
+        .then((res) => {
+          this.nodeList = res;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    async onIsolationOpen() {
+      this.userAllList = await findByNickName();
+      this.filterList = this.userAllList;
+      this.getUserList();
+    },
+    getUserList() {
+      // 下拉分页每页为10条数据
+      const limit = 10;
+      if (!this.filterList.length || this.userList.length === this.filterList.length) {
+        return;
+      }
+      this.userList = this.userList.concat(
+        this.filterList.slice((this.page - 1) * limit, this.page * limit)
+      );
+      this.page += 1;
+    },
+    filterUserName(username) {
+      this.filterList = username
+        ? this.userAllList.filter((item) => item.username.indexOf(username) !== -1)
+        : this.userAllList;
+      this.page = 1;
+      this.userList = [];
+      this.getUserList();
+    },
+    doCreateIsolation(node) {
+      if (node) {
+        this.isolationForm.nodeNames = [node.name];
+      }
+      this.isolationVisible = true;
+    },
+    doRemoveIsolation(node) {
+      this.$confirm('此操作将会移除该节点的资源独占', '请确认').then(() => {
+        removeNodeIsolation([node.name]).then(() => {
+          this.$message.success('资源独占已移除');
+          this.getNodes();
+        });
+      });
+    },
+    onIsolationSubmit() {
+      this.$refs.isolationForm.validate((valid) => {
+        if (valid) {
+          this.isolationSubmitting = true;
+          addNodeIsolation(this.isolationForm)
+            .then(() => {
+              this.getNodes();
+              this.$message.success('资源独占创建成功');
+              this.isolationVisible = false;
+            })
+            .finally(() => {
+              this.isolationSubmitting = false;
+            });
+        }
       });
     },
+    onIsolationClose() {
+      this.isolationForm = {
+        userId: null,
+        nodeNames: [],
+      };
+      this.userList = [];
+      this.filterList = [];
+      this.page = 1;
+      this.$refs.isolationForm.clearValidate();
+    },
+    validateField(field) {
+      this.$refs[field].validate('manual');
+    },
   },
 };
 </script>
diff --git a/webapp/src/views/system/recycle/index.vue b/webapp/src/views/system/recycle/index.vue
new file mode 100644
index 0000000..4f144d4
--- /dev/null
+++ b/webapp/src/views/system/recycle/index.vue
@@ -0,0 +1,248 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <cdOperation>
+        <div slot="right">
+          <el-button
+            class="filter-item with-border"
+            style="padding: 8px;"
+            icon="el-icon-refresh"
+            @click="onResetFresh"
+          />
+        </div>
+      </cdOperation>
+      <!-- 列表数据 -->
+      <el-table
+        ref="table"
+        v-loading="crud.loading"
+        :data="crud.data"
+        highlight-current-row
+        @selection-change="crud.selectionChangeHandler"
+      >
+        <el-table-column type="selection" width="40" :selectable="canDelete" />
+        <el-table-column prop="recycleNote" show-overflow-tooltip label="回收说明">
+          <template slot-scope="scope">
+            {{ scope.row.recycleNote || '--' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="recycleModule" label="回收模块">
+          <template #header>
+            <dropdown-header
+              title="回收模块"
+              :list="onEnumeration(moduleMap)"
+              :filtered="Boolean(crud.query.recycleModel)"
+              @command="(cmd) => filter('recycleModel', cmd)"
+            />
+          </template>
+          <template slot-scope="scope">
+            {{ moduleMap[scope.row.recycleModule] }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="recycleStatus" align="center" label="回收任务状态">
+          <template #header>
+            <dropdown-header
+              title="回收任务状态"
+              :list="onEnumeration(statusMap)"
+              :filtered="Boolean(crud.query.recycleStatus)"
+              @command="(cmd) => filter('recycleStatus', cmd)"
+            />
+          </template>
+          <template slot-scope="scope">
+            <el-tag effect="plain" :type="tagMap[scope.row.recycleStatus]">
+              {{ statusMap[scope.row.recycleStatus] }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="recycleDelayDate" label="执行操作时间">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.recycleDelayDate) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right">
+          <template #header>
+            <span>操作</span>
+            <el-tooltip effect="dark" placement="top">
+              <div slot="content">
+                单击立即删除后状态改变可能会有延迟，<br />可以单击右上角手动刷新
+              </div>
+              <i class="el-icon-question" />
+            </el-tooltip>
+          </template>
+          <template slot-scope="scope">
+            <el-button
+              :id="`delete_` + scope.$index"
+              type="text"
+              :disabled="!canDelete(scope.row)"
+              @click.stop="doDelete(scope.row.id)"
+            >
+              立即删除
+            </el-button>
+            <el-button
+              :id="`restore_` + scope.$index"
+              type="text"
+              :disabled="!canRestore(scope.row)"
+              @click.stop="doRestore(scope.row.id)"
+            >
+              立即还原
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <pagination />
+    </div>
+  </div>
+</template>
+
+<script>
+import crudRecycle, {
+  list as getRecycleDate,
+  del,
+  restoreTask,
+  getRecycleModuleMap,
+} from '@/api/system/recycle';
+import CRUD, { presenter, header, crud } from '@crud/crud';
+import cdOperation from '@crud/CD.operation';
+import pagination from '@crud/Pagination';
+import DropdownHeader from '@/components/DropdownHeader';
+import { generateMap } from '@/utils';
+import { RECYCLE_STATUS_ENUM, recycleStatusMap } from './utils';
+
+export default {
+  name: 'Recycle',
+  components: { cdOperation, pagination, DropdownHeader },
+  cruds() {
+    return CRUD({
+      optShow: { add: false },
+      props: { optText: { del: '批量删除' } },
+      crudMethod: { ...crudRecycle },
+    });
+  },
+  mixins: [presenter(), header(), crud()],
+  data() {
+    return {
+      moduleMap: {},
+      pollMap: Object.create(null),
+      RECYCLE_STATUS_ENUM,
+      recycleStatusMap,
+    };
+  },
+  computed: {
+    statusMap() {
+      return generateMap(recycleStatusMap, 'status');
+    },
+    tagMap() {
+      return generateMap(recycleStatusMap, 'tag');
+    },
+  },
+  async mounted() {
+    this.moduleMap = await getRecycleModuleMap();
+    this.$once('hook:beforeDestroy', () => {
+      this.pollMap = Object.create(null);
+    });
+  },
+  methods: {
+    onEnumeration(map) {
+      const arr = [{ label: '全部', value: null }];
+      for (const key in map) {
+        arr.push({ label: map[key], value: key });
+      }
+      return arr;
+    },
+
+    filter(column, value) {
+      this.crud.query[column] = value;
+      this.crud.refresh();
+    },
+
+    canDelete(row) {
+      return [RECYCLE_STATUS_ENUM.DELETION, RECYCLE_STATUS_ENUM.DELETED_FAIL].includes(
+        row.recycleStatus
+      );
+    },
+
+    canRestore(row) {
+      return this.canDelete(row) && row.restoreCustom;
+    },
+
+    doDelete(id) {
+      this.$confirm(`此操作将立即永久删除该文件或表数据, 是否继续?`, '请确认').then(async () => {
+        await del([id]);
+        this.$message({
+          message: '资源删除中',
+          type: 'success',
+        });
+        this.crud.refresh();
+      });
+    },
+
+    doRestore(id) {
+      this.$confirm(`此操作将会立即还原该文件或表数据, 是否继续?`, '请确认').then(async () => {
+        await restoreTask({ taskId: id });
+        this.$message({
+          message: '还原成功',
+          type: 'success',
+        });
+        this.crud.refresh();
+      });
+    },
+
+    onResetFresh() {
+      this.crud.query = {};
+      this.crud.toQuery();
+    },
+
+    async onUpdateStatus(id, option = {}) {
+      const { result } = await getRecycleDate({ recycleTaskIdList: [id] });
+      const recycleInfo = result[0];
+      const crud_data = this.crud.data.find((info) => info.id === id);
+      // 当前页不存在该条信息不轮询
+      if (!crud_data) {
+        return;
+      }
+      const { pollId } = option;
+      // 更新数据
+      Object.assign(crud_data, recycleInfo);
+      if (this.needPoll(recycleInfo.recycleStatus) && pollId && this.pollMap[id] === pollId) {
+        setTimeout(() => {
+          this.onUpdateStatus(id, option);
+        }, 1000);
+      }
+    },
+
+    needPoll(status) {
+      return [RECYCLE_STATUS_ENUM.DELETING, RECYCLE_STATUS_ENUM.RESTORING].includes(status);
+    },
+
+    // hook
+    [CRUD.HOOK.afterRefresh]() {
+      const vaildList = this.crud.data.filter((info) => this.needPoll(info.recycleStatus));
+      vaildList.forEach((info) => {
+        this.poll(info.id);
+      });
+    },
+
+    poll(id) {
+      this.pollMap[id] = new Date().getTime();
+      this.onUpdateStatus(id, { pollId: this.pollMap[id] });
+    },
+  },
+};
+</script>
diff --git a/webapp/src/views/system/recycle/utils.js b/webapp/src/views/system/recycle/utils.js
new file mode 100644
index 0000000..cfd9a6a
--- /dev/null
+++ b/webapp/src/views/system/recycle/utils.js
@@ -0,0 +1,34 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+// 回收状态
+export const RECYCLE_STATUS_ENUM = {
+  DELETION: 0, // 待删除
+  DELETED: 1, // 已删除
+  DELETED_FAIL: 2, // 删除失败
+  DELETING: 3, // 删除中
+  RESTORING: 4, // 还原中
+  RESTORED: 5, // 已还原
+};
+
+export const recycleStatusMap = {
+  [RECYCLE_STATUS_ENUM.DELETION]: { status: '待删除', tag: '' },
+  [RECYCLE_STATUS_ENUM.DELETED]: { status: '已删除', tag: 'success' },
+  [RECYCLE_STATUS_ENUM.DELETED_FAIL]: { status: '删除失败', tag: 'danger' },
+  [RECYCLE_STATUS_ENUM.DELETING]: { status: '删除中', tag: 'warning' },
+  [RECYCLE_STATUS_ENUM.RESTORING]: { status: '还原中', tag: 'warning' },
+  [RECYCLE_STATUS_ENUM.RESTORED]: { status: '已还原', tag: 'success' },
+};
diff --git a/webapp/src/views/system/resources/index.vue b/webapp/src/views/system/resources/index.vue
new file mode 100644
index 0000000..abde76c
--- /dev/null
+++ b/webapp/src/views/system/resources/index.vue
@@ -0,0 +1,241 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="app-container">
+    <ProTable
+      ref="proTableRef"
+      create-title="创建资源规格"
+      :columns="columns"
+      :form-items="queryFormItems"
+      :list-request="list"
+      @add="doAdd"
+    >
+      <template #header-memNum>
+        <span>内存容量</span>
+        <el-tooltip effect="dark" placement="top">
+          <div slot="content">内存容量/工作空间单位换算: 1Mi = 1024 x 1024B</div>
+          <i class="el-icon-question" />
+        </el-tooltip>
+      </template>
+    </ProTable>
+    <!-- 表单弹窗 -->
+    <BaseModal
+      :visible.sync="formVisible"
+      :title="formTitle"
+      :loading="formSubmitting"
+      width="700px"
+      @cancel="formVisible = false"
+      @ok="onFormConfirm"
+      @close="onFormClose"
+    >
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="规格名称" prop="specsName">
+          <el-input
+            v-model="form.specsName"
+            placeholder="请输入规格名称"
+            maxlength="32"
+            show-word-limit
+            class="w-200"
+          />
+        </el-form-item>
+        <el-form-item ref="moduleRef" label="业务场景" prop="module">
+          <InfoSelect
+            v-model="form.module"
+            width="200px"
+            placeholder="请选择业务场景"
+            :dataSource="moduleList"
+            :disabled="formType === 'edit'"
+            value-key="value"
+            label-key="label"
+            @change="onModuleChange"
+          />
+        </el-form-item>
+        <el-divider />
+        <el-form-item class="dib" label="CPU数量" prop="cpuNum">
+          <el-input v-model.number="form.cpuNum" placeholder="请输入CPU数量" class="w-200">
+            <template slot="append">核</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item class="dib" label="GPU数量" prop="gpuNum">
+          <el-input v-model.number="form.gpuNum" placeholder="请输入GPU数量" class="w-200">
+            <template slot="append">核</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item class="dib" label="内存" prop="memNum">
+          <el-input v-model.number="form.memNum" placeholder="请输入内存大小" class="w-200">
+            <template slot="append">Mi</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item class="dib" label="工作空间" prop="workspaceRequest">
+          <el-input
+            v-model.number="form.workspaceRequest"
+            placeholder="请输入存储配额"
+            class="w-200"
+          >
+            <template slot="append">Mi</template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-alert title="1Mi = 1024 x 1024B" type="warning" show-icon :closable="false" />
+    </BaseModal>
+  </div>
+</template>
+
+<script>
+import { computed, reactive, ref, toRefs } from '@vue/composition-api';
+import { Message, MessageBox } from 'element-ui';
+
+import ProTable from '@/components/ProTable';
+import BaseModal from '@/components/BaseModal';
+import InfoSelect from '@/components/InfoSelect';
+import { list, add, edit, del } from '@/api/system/resources';
+import { getColumns, queryFormItems, moduleMap, rules } from './utils';
+
+const defaultForm = {
+  id: undefined,
+  specsName: null, // 规格名称
+  module: 2, // 业务场景
+  cpuNum: null,
+  gpuNum: null,
+  memNum: null,
+  workspaceRequest: null,
+};
+
+export default {
+  name: 'AuthCode',
+  components: {
+    ProTable,
+    BaseModal,
+    InfoSelect,
+  },
+  setup() {
+    const state = reactive({
+      formVisible: false,
+      formSubmitting: false,
+      formType: 'add', // add/edit
+    });
+
+    const form = reactive({ ...defaultForm });
+
+    // refs
+    const proTableRef = ref(null);
+    const formRef = ref(null);
+    const moduleRef = ref(null);
+
+    // 表单信息
+    const formTitle = computed(() => {
+      switch (state.formType) {
+        case 'edit':
+          return '编辑资源规格';
+        case 'add':
+        default:
+          return '创建资源规格';
+      }
+    });
+    const moduleList = computed(() =>
+      Object.keys(moduleMap).map((d) => ({ label: moduleMap[d], value: +d }))
+    );
+    const onFormConfirm = () => {
+      formRef.value.validate((valid) => {
+        if (valid) {
+          state.formSubmitting = true;
+          let submitFn;
+          let submitType;
+          switch (state.formType) {
+            case 'edit':
+              submitFn = edit;
+              submitType = '修改';
+              break;
+            case 'add':
+            default:
+              submitFn = add;
+              submitType = '创建';
+          }
+          submitFn(form)
+            .then(() => {
+              Message.success(`${submitType}资源成功`);
+              state.formVisible = false;
+              proTableRef.value.query();
+            })
+            .finally(() => {
+              state.formSubmitting = false;
+            });
+        }
+      });
+    };
+
+    const initForm = (originForm = {}) => {
+      Object.keys(form).forEach((key) => {
+        form[key] = originForm[key] !== undefined ? originForm[key] : defaultForm[key];
+      });
+    };
+
+    const onFormClose = () => {
+      initForm();
+      formRef.value.clearValidate();
+    };
+
+    const doAdd = () => {
+      state.formType = 'add';
+      state.formVisible = true;
+      initForm();
+    };
+    // 修改用户组信息
+    const doEdit = (row) => {
+      state.formType = 'edit';
+      state.formVisible = true;
+      initForm(row);
+    };
+
+    const doDelete = ({ id }) => {
+      MessageBox.confirm('此操作将删除该资源', '请确认').then(() => {
+        del([id]).then(() => {
+          Message.success('删除成功');
+          proTableRef.value.refresh();
+        });
+      });
+    };
+    const onModuleChange = () => {
+      moduleRef.value.validate('manual');
+    };
+    const columns = computed(() => {
+      return getColumns({
+        doEdit,
+        doDelete,
+      });
+    });
+
+    return {
+      ...toRefs(state),
+      form,
+      rules,
+      proTableRef,
+      formRef,
+      moduleRef,
+      columns,
+      queryFormItems,
+      doAdd,
+      formTitle,
+      list,
+      moduleList,
+      onModuleChange,
+      onFormConfirm,
+      onFormClose,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/views/system/resources/utils.js b/webapp/src/views/system/resources/utils.js
new file mode 100644
index 0000000..b10f71e
--- /dev/null
+++ b/webapp/src/views/system/resources/utils.js
@@ -0,0 +1,155 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+// 业务场景枚举
+export const moduleMap = {
+  1: 'notebook',
+  2: 'train',
+  3: 'serving',
+};
+
+const resourcesPoolTypeMap = {
+  0: 'CPU',
+  1: 'GPU',
+};
+
+const dropdownList = (map) => {
+  const list = Object.keys(map).map((d) => ({ label: map[d], value: d }));
+  list.unshift({ label: '全部', value: null });
+  return list;
+};
+
+function validateString(rule, value, callback) {
+  if (value === '' || value == null) {
+    callback();
+  } else if (!(/^[^\s]+.*[^\s]+$/.test(value) || /^[^\s]$/.test(value))) {
+    callback(new Error('首尾不能是空格'));
+  } else if (!/^[\u4E00-\u9FA5A-Za-z0-9_-\s]+$/.test(value)) {
+    callback(new Error('仅支持字母、数字、汉字、空格、英文横杠和下划线'));
+  } else {
+    callback();
+  }
+}
+
+// 搜索表单项
+export const queryFormItems = [
+  {
+    prop: 'specsName',
+    placeholder: '请输入资源名称',
+    class: 'w-300',
+    change: 'query',
+  },
+  {
+    type: 'button',
+    btnText: '重置',
+    func: 'resetQuery',
+  },
+  {
+    type: 'button',
+    btnText: '搜索',
+    btnType: 'primary',
+    func: 'query',
+  },
+];
+
+export function getColumns({ doEdit, doDelete }) {
+  return [
+    {
+      label: 'ID',
+      prop: 'id',
+      width: 80,
+      sortable: 'custom',
+    },
+    {
+      label: '规格名称',
+      prop: 'specsName',
+    },
+    {
+      label: 'CPU数量',
+      prop: 'cpuNum',
+      formatter: (value) => `${value}核`,
+    },
+    {
+      label: 'GPU数量',
+      prop: 'gpuNum',
+      formatter: (value) => `${value}核`,
+    },
+    {
+      label: '内存容量',
+      prop: 'memNum',
+      formatter: (value) => `${value}Mi`,
+    },
+    {
+      label: '工作空间',
+      prop: 'workspaceRequest',
+      formatter: (value) => `${value}Mi`,
+    },
+    {
+      label: '业务场景',
+      prop: 'module',
+      formatter: (value) => moduleMap[value],
+      dropdownList: dropdownList(moduleMap),
+    },
+    {
+      label: '规格类型',
+      prop: 'resourcesPoolType',
+      formatter: (value) => resourcesPoolTypeMap[Number(value)],
+      dropdownList: dropdownList(resourcesPoolTypeMap),
+    },
+    {
+      label: '操作',
+      type: 'operation',
+      operations: [
+        {
+          label: '编辑',
+          func: doEdit,
+        },
+        {
+          label: '删除',
+          func: doDelete,
+        },
+      ],
+    },
+  ];
+}
+
+export const rules = {
+  specsName: [
+    { required: true, message: '请输入规格名称', trigger: 'blur' },
+    { validator: validateString, trigger: ['blur', 'change'] },
+  ],
+  module: [{ required: true, message: '请选择业务场景', trigger: 'manual' }],
+  cpuNum: [
+    { required: true, message: '请输入CPU数量', trigger: 'blur' },
+    { pattern: /^[+]{0,1}(\d+)$/, message: '数量不能小于0', trigger: 'blur' },
+    { type: 'number', message: '所填必须为数字' },
+  ],
+  gpuNum: [
+    { required: true, message: '请输入GPU数量', trigger: 'blur' },
+    { pattern: /^[+]{0,1}(\d+)$/, message: '数量不能小于0', trigger: 'blur' },
+    { type: 'number', message: '所填必须为数字' },
+  ],
+  memNum: [
+    { required: true, message: '请输入内存大小', trigger: 'blur' },
+    { pattern: /^[+]{0,1}(\d+)$/, message: '内存大小不能小于0', trigger: 'blur' },
+    { type: 'number', message: '所填必须为数字' },
+  ],
+  workspaceRequest: [
+    { required: true, message: '请定义工作空间的存储配额', trigger: 'blur' },
+    { pattern: /^[+]{0,1}(\d+)$/, message: '存储配额不能小于0', trigger: 'blur' },
+    { type: 'number', message: '所填必须为数字' },
+  ],
+};
diff --git a/webapp/src/views/system/role/index.vue b/webapp/src/views/system/role/index.vue
index c4afc83..2f0d5c9 100644
--- a/webapp/src/views/system/role/index.vue
+++ b/webapp/src/views/system/role/index.vue
@@ -1,18 +1,9 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div class="app-container">
@@ -21,10 +12,17 @@
       <cdOperation>
         <span slot="right">
           <!-- 搜索 -->
-          <el-input v-model="query.blurry" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @change="crud.toQuery" />
+          <el-input
+            v-model="query.blurry"
+            clearable
+            placeholder="输入名称或者描述搜索"
+            style="width: 200px;"
+            class="filter-item"
+            @change="crud.toQuery"
+          />
           <el-date-picker
             v-model="query.createTime"
-            :default-time="['00:00:00','23:59:59']"
+            :default-time="['00:00:00', '23:59:59']"
             type="daterange"
             range-separator=":"
             class="date-item"
@@ -53,7 +51,14 @@
           <el-input v-model="form.name" style="width: 455px;" maxlength="50" show-word-limit />
         </el-form-item>
         <el-form-item label="描述信息" prop="remark">
-          <el-input v-model="form.remark" style="width: 455px;" rows="3" type="textarea" maxlength="255" show-word-limit />
+          <el-input
+            v-model="form.remark"
+            style="width: 455px;"
+            rows="3"
+            type="textarea"
+            maxlength="255"
+            show-word-limit
+          />
         </el-form-item>
       </el-form>
     </BaseModal>
@@ -79,10 +84,28 @@
                 <span>{{ parseTime(scope.row.createTime) }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="操作" width="170" fixed="right">
+            <el-table-column label="操作" width="260" fixed="right">
               <template slot-scope="scope">
-                <udOperation :data="scope.row" :disabled-dle="isDisabled(scope.row.id)" />
-                <el-button v-if="false" type="text" style="margin-left: 10px;" @click="handleCurrentChange(scope.row, scope.$index)">菜单分配</el-button>
+                <udOperation
+                  :data="scope.row"
+                  :show-edit="hasPermission('system:role:edit')"
+                  :show-delete="hasPermission('system:role:delete')"
+                  :disabled-dle="isDisabled(scope.row.id)"
+                />
+                <el-button
+                  v-if="hasPermission('system:role:menu')"
+                  type="text"
+                  style="margin-left: 10px;"
+                  @click="handleCurrentChange(scope.row, scope.$index)"
+                  >菜单分配</el-button
+                >
+                <el-button
+                  v-if="hasPermission('system:role:auth')"
+                  type="text"
+                  style="margin-left: 10px;"
+                  @click="doSelectPermissions(scope.row, scope.$index)"
+                  >权限组分配</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -91,7 +114,7 @@
         </el-card>
       </el-col>
       <!-- 菜单授权 -->
-      <el-col v-show="currentId" :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
+      <el-col v-show="treeMode === 'menu'" :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
         <el-card class="box-card" shadow="never">
           <div slot="header" class="clearfix">
             <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
@@ -103,7 +126,8 @@
               style="float: right; padding: 6px 9px;"
               type="primary"
               @click="saveMenu"
-            >保存</el-button>
+              >保存</el-button
+            >
           </div>
           <el-tree
             ref="menu"
@@ -115,6 +139,47 @@
           />
         </el-card>
       </el-col>
+      <el-col v-show="treeMode === 'authCode'" :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
+        <el-card class="box-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="选择指定角色分配操作权限"
+              placement="top"
+            >
+              <span class="role-span">权限组分配</span>
+            </el-tooltip>
+            <el-button
+              :loading="permissionLoading"
+              icon="el-icon-check"
+              style="float: right; padding: 6px 9px;"
+              type="primary"
+              @click="savePermission"
+              >保存</el-button
+            >
+          </div>
+          <el-checkbox-group v-model="authCodeCheckedList" class="flex flex-col">
+            <el-popover
+              v-for="authCode in authCodeList"
+              :key="authCode.id"
+              :title="authCode.children.length ? '该权限组包含以下权限' : undefined"
+              placement="left"
+              trigger="hover"
+              width="400"
+            >
+              <el-tree
+                :data="authCode.children"
+                :props="authProps"
+                empty-text="该权限组不包含任何权限"
+              />
+              <el-checkbox slot="reference" :label="authCode.id" class="my-5">{{
+                authCode.authCode
+              }}</el-checkbox>
+            </el-popover>
+          </el-checkbox-group>
+        </el-card>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -125,8 +190,10 @@ import rrOperation from '@crud/RR.operation';
 import cdOperation from '@crud/CD.operation';
 import udOperation from '@crud/UD.operation';
 import pagination from '@crud/Pagination';
-import { validateName } from '@/utils/validate';
-import crudRoles, { editMenu, get, getMenusTree }  from '@/api/system/role';
+import { validateName, checkLeafNode, hasPermission } from '@/utils';
+import crudRoles, { editMenu, get, editOperations } from '@/api/system/role';
+import { getMenusTree } from '@/api/system/menu';
+import { getAuthCodeList } from '@/api/system/authCode';
 import BaseModal from '@/components/BaseModal';
 import datePickerMixin from '@/mixins/datePickerMixin';
 
@@ -139,29 +206,68 @@ export default {
   name: 'Role',
   components: { BaseModal, pagination, cdOperation, rrOperation, udOperation },
   cruds() {
-    return CRUD({ title: '角色', crudMethod: { ...crudRoles }});
+    return CRUD({
+      title: '角色',
+      crudMethod: { ...crudRoles },
+      optShow: {
+        add: hasPermission('system:role:create'),
+        del: hasPermission('system:role:delete'),
+      },
+    });
   },
   mixins: [presenter(), header(), form(defaultForm), crud(), datePickerMixin],
   data() {
     return {
       defaultProps: { children: 'children', label: 'label' },
-      currentIndex: null, currentId: 0, menuLoading: false,
-      menus: [], defaultCheckedKeys: [DASHBOARD_MENU_ID], leafNodeIds: [],
+      authProps: {
+        label: 'authCode',
+      },
+      currentIndex: null,
+      menuLoading: false,
+      menus: [],
+      defaultCheckedKeys: [DASHBOARD_MENU_ID],
+      leafNodeIds: [],
       rules: {
         name: [
           { required: true, message: '请输入角色名称', trigger: 'blur' },
           { validator: validateName, trigger: 'blur' },
         ],
       },
+      currentRole: null, // 当前选中角色
+      treeMode: null, // 对应右侧树形模式  menu —— 菜单分配; authCode —— 权限组分配; null —— 不展示
+      authCodeList: [], // 操作权限树形列表
+      authCodeCheckedList: [], // 操作权限勾选数组
+      permissionLoading: false, // 保存权限 loading
     };
   },
+  computed: {
+    // 所选用户 ID
+    currentId() {
+      return this.currentRole.id;
+    },
+    // 所选角色的权限
+    checkedPermissionList() {
+      if (!this.currentRole) return [];
+      return this.currentRole.auths
+        .filter((auth) => this.permissionLeafNodeIdList.includes(auth.id))
+        .map((auth) => auth.id);
+    },
+    // 权限列表叶节点
+    permissionLeafNodeIdList() {
+      return this.authCodeList.map((p) => p.id);
+    },
+  },
   created() {
     this.getMenus();
+    this.getPermissions();
   },
   methods: {
+    hasPermission,
+
     [CRUD.HOOK.afterRefresh]() {
       this.currentIndex = null;
-      this.currentId = 0;
+      this.currentRole = null;
+      this.treeMode = null;
       this.$refs.menu.setCheckedKeys(this.defaultCheckedKeys);
     },
     // 提交前做的操作
@@ -170,7 +276,7 @@ export default {
     },
     // 获取所有菜单
     getMenus() {
-      getMenusTree().then(res => {
+      getMenusTree().then((res) => {
         res = res || [];
         for (let index = 0; index < res.length; index += 1) {
           const node = res[index];
@@ -180,34 +286,70 @@ export default {
           }
         }
         this.menus = res;
-        this.checkLeafNode();
+        this.leafNodeIds = checkLeafNode(res, []).map((node) => node.id);
+      });
+    },
+    // 获取操作权限树结构
+    async getPermissions() {
+      this.authCodeList = await getAuthCodeList();
+      this.authCodeList.forEach((authCode) => {
+        const { permissions } = authCode;
+        authCode.children = this.generatePermissionTree(permissions);
       });
     },
-    checkLeafNode() {
-      const checkNode = (node) => {
-        node.forEach(item => {
-          if (!item.children) {
-            this.leafNodeIds.push(item.id);
-          } else {
-            checkNode(item.children);
+    generatePermissionTree(permissions) {
+      if (!permissions.length) return [];
+
+      const result = [];
+      const pidRecord = {};
+      for (const permission of permissions) {
+        // pid 为 0 说明是第一级权限，直接加到 result
+        if (permission.pid === 0) {
+          result.push({
+            id: permission.id,
+            authCode: permission.name,
+            children: [],
+          });
+        } else {
+          const pidList = []; // 祖先 pid 列表
+          permission._pid = permission.pid; // 使用 _pid 临时记录 pid
+          while (permission._pid !== 0) {
+            pidList.unshift(permission._pid); // 从左侧插入祖先 pid
+            permission._pid = pidRecord[permission._pid]; // 寻找当前祖先权限的 pid
           }
-        });
-      };
-      this.leafNodeIds = [];
-      checkNode(this.menus);
+          let currentPermission;
+          let currentList = result;
+
+          // 根据祖先 pid 列表，依次寻找正确的上级权限
+          for (const pid of pidList) {
+            currentPermission = currentList.find((p) => p.id === pid);
+            currentList = currentPermission.children;
+          }
+          currentPermission.children.push({
+            id: permission.id,
+            authCode: permission.name,
+            children: [],
+          });
+        }
+
+        pidRecord[permission.id] = permission.pid; // 记录当前权限及其 pid 的关系
+      }
+
+      return result;
     },
     tableRowClassName({ rowIndex }) {
       return rowIndex === this.currentIndex ? 'highlight-row' : '';
     },
     // 触发单选
-    handleCurrentChange(val, index) {
-      if (val) {
-        // 保存当前的角色index 和 id
+    handleCurrentChange(role, index) {
+      this.treeMode = 'menu';
+      if (role) {
+        // 保存当前的角色index
         this.currentIndex = index;
-        this.currentId = val.id;
+        this.currentRole = role;
         // 菜单数据需要特殊处理
         const idSet = new Set(this.defaultCheckedKeys);
-        val.menus.forEach(menu => {
+        role.menus.forEach((menu) => {
           if (this.leafNodeIds.includes(menu.id)) {
             idSet.add(menu.id);
           }
@@ -215,6 +357,12 @@ export default {
         this.$refs.menu.setCheckedKeys([...idSet]);
       }
     },
+    doSelectPermissions(role, index) {
+      this.treeMode = 'authCode';
+      this.currentRole = role;
+      this.currentIndex = index;
+      this.authCodeCheckedList = role.auths.map((auth) => auth.id);
+    },
     // 保存菜单
     saveMenu() {
       this.menuLoading = true;
@@ -229,25 +377,35 @@ export default {
         const menu = { id: data };
         role.menus.push(menu);
       });
-      editMenu(role).then(() => {
-        this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS);
-        this.menuLoading = false;
-        this.update();
-      }).catch(err => {
-        this.menuLoading = false;
-        this.$message({
-          message: err.message,
-          type: 'error',
+      editMenu(role)
+        .then(() => {
+          this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS);
+          this.update();
+        })
+        .finally(() => {
+          this.menuLoading = false;
+        });
+    },
+    // 保存操作权限
+    savePermission() {
+      const role = { roleId: this.currentId, authIds: this.authCodeCheckedList };
+      this.permissionLoading = true;
+      editOperations(role)
+        .then(() => {
+          this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS);
+          this.update();
+        })
+        .finally(() => {
+          this.permissionLoading = false;
         });
-      });
     },
     // 改变数据
     update() {
       // 无刷新更新 表格数据
-      get(this.currentId).then(res => {
-        for (let i = 0; i < this.crud.data.length; i+=1) {
+      get(this.currentId).then((res) => {
+        for (let i = 0; i < this.crud.data.length; i += 1) {
           if (res.id === this.crud.data[i].id) {
-            this.crud.data[i] = res;
+            Object.assign(this.crud.data[i], res);
             break;
           }
         }
@@ -264,9 +422,9 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .role-span {
-    font-size: 15px;
-    font-weight: bold;
-    color: #303133;
-  }
+.role-span {
+  font-size: 15px;
+  font-weight: bold;
+  color: #303133;
+}
 </style>
diff --git a/webapp/src/views/system/user/index.vue b/webapp/src/views/system/user/index.vue
index ba3145b..37ed091 100644
--- a/webapp/src/views/system/user/index.vue
+++ b/webapp/src/views/system/user/index.vue
@@ -1,18 +1,9 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div class="app-container">
@@ -31,7 +22,7 @@
           />
           <el-date-picker
             v-model="query.createTime"
-            :default-time="['00:00:00','23:59:59']"
+            :default-time="['00:00:00', '23:59:59']"
             type="daterange"
             range-separator=":"
             class="date-item"
@@ -81,6 +72,7 @@
             placeholder="请选择"
             class="filter-item"
             style="width: 185px;"
+            filterable
           >
             <el-option
               v-for="item in roleOptions"
@@ -91,12 +83,14 @@
           </el-select>
         </el-form-item>
         <el-form-item label="状态" prop="enabled" style="margin-bottom: 0;">
-          <el-radio-group v-model="form.enabled" :disabled="isDisabled(form.id)" style="width: 185px;">
-            <el-radio
-              v-for="item in dict.user_status"
-              :key="item.id"
-              :label="item.value"
-            >{{ item.label }}</el-radio>
+          <el-radio-group
+            v-model="form.enabled"
+            :disabled="isDisabled(form.id)"
+            style="width: 185px;"
+          >
+            <el-radio v-for="item in dict.user_status" :key="item.id" :label="item.value">{{
+              item.label
+            }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark" style="margin-bottom: 0;">
@@ -105,7 +99,13 @@
       </el-form>
     </BaseModal>
     <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row @selection-change="crud.selectionChangeHandler">
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      :data="crud.data"
+      highlight-current-row
+      @selection-change="crud.selectionChangeHandler"
+    >
       <el-table-column :selectable="checkboxT" type="selection" width="40" />
       <el-table-column show-overflow-tooltip prop="username" label="用户名" />
       <el-table-column show-overflow-tooltip prop="nickName" label="昵称" />
@@ -135,7 +135,9 @@
           />
         </template>
         <template slot-scope="scope">
-          <el-tag :type="scope.row.enabled ? '' : 'info'" effect="plain">{{ dict.label.user_status[scope.row.enabled.toString()] }} </el-tag>
+          <el-tag :type="scope.row.enabled ? '' : 'info'" effect="plain"
+            >{{ dict.label.user_status[scope.row.enabled.toString()] }}
+          </el-tag>
         </template>
       </el-table-column>
       <el-table-column show-overflow-tooltip prop="remark" label="备注" />
@@ -146,7 +148,13 @@
       </el-table-column>
       <el-table-column label="操作" width="120" fixed="right">
         <template slot-scope="scope">
-          <udOperation :data="scope.row" :disabled-edit="isDisabledEdit(scope.row.id)" :disabled-dle="isDisabled(scope.row.id)" />
+          <udOperation
+            :data="scope.row"
+            :show-edit="hasPermission('system:user:edit')"
+            :show-delete="hasPermission('system:user:delete')"
+            :disabled-edit="isDisabledEdit(scope.row.id)"
+            :disabled-dle="isDisabled(scope.row.id)"
+          />
         </template>
       </el-table-column>
     </el-table>
@@ -163,7 +171,7 @@ import rrOperation from '@crud/RR.operation';
 import cdOperation from '@crud/CD.operation';
 import udOperation from '@crud/UD.operation';
 import pagination from '@crud/Pagination';
-import { validateName, validateAccount } from '@/utils/validate';
+import { validateName, validateAccount, hasPermission } from '@/utils';
 import crudUser from '@/api/system/user';
 import { getAll } from '@/api/system/role';
 import BaseModal from '@/components/BaseModal';
@@ -172,19 +180,37 @@ import datePickerMixin from '@/mixins/datePickerMixin';
 
 const ADMIN_USER_ID = 1; // 系统管理员ID
 
-const defaultForm = { id: null, username: null, nickName: null, sex: null, email: null, remark: null, enabled: null, phone: null, roles: [], roleId: '' };
+const defaultForm = {
+  id: null,
+  username: null,
+  nickName: null,
+  sex: null,
+  email: null,
+  remark: null,
+  enabled: null,
+  phone: null,
+  roles: [],
+  roleId: '',
+};
 export default {
   name: 'User',
   components: { BaseModal, cdOperation, rrOperation, udOperation, pagination, DropdownHeader },
   cruds() {
-    return CRUD({ title: '用户', crudMethod: { ...crudUser }});
+    return CRUD({
+      title: '用户',
+      crudMethod: { ...crudUser },
+      optShow: {
+        add: hasPermission('system:user:create'),
+        del: hasPermission('system:user:delete'),
+      },
+    });
   },
   mixins: [presenter(), header(), form(defaultForm), crud(), datePickerMixin],
   // 数据字典
   dicts: ['user_status'],
   data() {
     return {
-      height: `${document.documentElement.clientHeight - 180  }px;`,
+      height: `${document.documentElement.clientHeight - 180}px;`,
       roleOptions: [],
       defaultProps: { children: 'children', label: 'name' },
       rules: {
@@ -198,34 +224,34 @@ export default {
         ],
         email: [
           { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-          { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
+          {
+            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
+            message: '请输入正确的邮箱地址',
+            trigger: ['blur', 'change'],
+          },
         ],
         phone: [
           { required: true, message: '请输入手机号码', trigger: 'blur' },
-          { pattern: /^1\d{10}$/, message: '请输入正确的11位手机号码', trigger: ['blur', 'change'] },
-        ],
-        sex: [
-          { required: true, message: '请选择性别', trigger: 'change' },
-        ],
-        enabled: [
-          { required: true, message: '请选择状态', trigger: 'change' },
-        ],
-        roleId: [
-          { required: true, message: '请选择角色', trigger: 'change' },
+          {
+            pattern: /^1\d{10}$/,
+            message: '请输入正确的11位手机号码',
+            trigger: ['blur', 'change'],
+          },
         ],
+        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
+        enabled: [{ required: true, message: '请选择状态', trigger: 'change' }],
+        roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
       },
     };
   },
   computed: {
-    ...mapGetters([
-      'user',
-    ]),
+    ...mapGetters(['user']),
     userStatusList() {
       return [{ label: '全部', value: null }].concat(this.dict.user_status);
     },
     userRoleList() {
       const arr = [{ label: '全部', value: null }];
-      this.roleOptions.forEach(item => {
+      this.roleOptions.forEach((item) => {
         arr.push({ label: item.name, value: item.id });
       });
       return arr;
@@ -240,10 +266,12 @@ export default {
   mounted() {
     const that = this;
     window.onresize = function temp() {
-      that.height = `${document.documentElement.clientHeight - 180  }px;`;
+      that.height = `${document.documentElement.clientHeight - 180}px;`;
     };
   },
   methods: {
+    hasPermission,
+
     [CRUD.HOOK.afterAddError]() {
       this.afterErrorMethod();
     },
@@ -267,12 +295,14 @@ export default {
     },
     // 获取弹窗内角色数据
     getRoles() {
-      getAll().then(res => {
-        this.roleOptions = res;
-      }).catch(() => { });
+      getAll()
+        .then((res) => {
+          this.roleOptions = res;
+        })
+        .catch(() => {});
     },
     isDisabledEdit(id) {
-      return id === ADMIN_USER_ID && this.user.id !== ADMIN_USER_ID;
+      return id === ADMIN_USER_ID;
     },
     isDisabled(id) {
       return id === this.user.id || id === ADMIN_USER_ID;
@@ -282,7 +312,7 @@ export default {
     },
     getUserRoles(row) {
       const roles = row.roles || [];
-      const names = roles.map(role => role.name);
+      const names = roles.map((role) => role.name);
       return names.join('<br/>') || '-';
     },
     filterByStatus(status) {
diff --git a/webapp/src/views/system/userGroup/index.vue b/webapp/src/views/system/userGroup/index.vue
new file mode 100644
index 0000000..ac0a6c4
--- /dev/null
+++ b/webapp/src/views/system/userGroup/index.vue
@@ -0,0 +1,539 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="app-container">
+    <ProTable
+      ref="proTableRef"
+      :show-create="hasPermission('system:userGroup:create')"
+      create-title="创建用户组"
+      :columns="columns"
+      :form-items="queryFormItems"
+      :list-request="list"
+      row-key="id"
+      @add="doAdd"
+      @row-click="onRowClick"
+    />
+    <el-drawer title="用户组成员" :visible.sync="drawerVisible" custom-class="px-20">
+      <BaseTable :loading="drawerLoading" :data="currentGroupUserList" :columns="userColumns" />
+    </el-drawer>
+    <!-- 用户组表单弹窗 -->
+    <BaseModal
+      :visible.sync="formVisible"
+      :title="formTitle"
+      :loading="formSubmitting"
+      :ok-text="formModalOkText"
+      width="800px"
+      custom-class="mt-10vh"
+      @cancel="formVisible = false"
+      @ok="onFormConfirm"
+      @close="onFormClose"
+    >
+      <el-steps
+        v-if="formType === 'add'"
+        :active="createStep"
+        align-center
+        finish-status="success"
+        class="mb-20"
+      >
+        <el-step title="创建用户组" />
+        <el-step title="添加用户组成员" />
+      </el-steps>
+      <BaseForm
+        v-if="createStep === 0"
+        ref="groupFormRef"
+        :form-items="groupFormItems"
+        :model="form"
+        :rules="groupFormRules"
+        label-width="100px"
+      />
+      <el-transfer
+        v-else
+        v-model="userEditSelectedList"
+        :data="userEditTransferData"
+        filterable
+        filter-placeholder="请输入用户名"
+        target-order="unshift"
+        :titles="['未分组用户', '当前组内成员']"
+        class="user-group-transfer"
+      />
+    </BaseModal>
+    <!-- 编辑成员弹窗 -->
+    <BaseModal
+      :visible.sync="userEditVisible"
+      :title="userEditTitle"
+      ok-text="保存"
+      :loading="userEditSubmitting"
+      width="800px"
+      custom-class="mt-10vh"
+      @cancel="userEditVisible = false"
+      @ok="onUserEditSubmit"
+      @close="onUserEditClose"
+    >
+      <el-transfer
+        v-model="userEditSelectedList"
+        v-loading="userEditDataLoadingCount < 2"
+        :data="userEditTransferData"
+        filterable
+        filter-placeholder="请输入用户名"
+        target-order="unshift"
+        :titles="['未分组用户', '当前组内成员']"
+        class="user-group-transfer"
+      />
+    </BaseModal>
+    <!-- 批量修改角色弹窗 -->
+    <BaseModal
+      :visible.sync="roleEditVisible"
+      :title="roleEditTitle"
+      :loading="roleEditSubmitting"
+      @cancel="roleEditVisible = false"
+      @ok="onRoleEditSubmit"
+      @close="onRoleEditClose"
+    >
+      <BaseForm
+        ref="roleEditFormRef"
+        :form-items="roleEditFormItems"
+        :model="roleEditForm"
+        :rules="roleEditRules"
+        label-width="100px"
+      />
+    </BaseModal>
+  </div>
+</template>
+
+<script>
+import { computed, reactive, ref, toRefs } from '@vue/composition-api';
+import { Message, MessageBox } from 'element-ui';
+
+import ProTable from '@/components/ProTable';
+import BaseTable from '@/components/BaseTable';
+import BaseModal from '@/components/BaseModal';
+import BaseForm from '@/components/BaseForm';
+import {
+  list,
+  add,
+  edit,
+  del,
+  getUserListByGroup,
+  getUngroupedUsers,
+  updateGroupUsers,
+  deleteUserFromGroup,
+  updateUserState,
+  updateUserRoles,
+  deleteGroupUsers,
+} from '@/api/system/userGroup';
+import { list as getRoleList } from '@/api/system/role';
+import { hasPermission } from '@/utils';
+
+import {
+  getColumns,
+  groupFormItems,
+  queryFormItems,
+  getUserColumns,
+  groupFormRules,
+  getRoleEditFormItems,
+  roleEditRules,
+} from './utils';
+
+export default {
+  name: 'UserGroup',
+  components: {
+    ProTable,
+    BaseTable,
+    BaseModal,
+    BaseForm,
+  },
+  setup() {
+    const state = reactive({
+      // 详情抽屉
+      drawerVisible: false,
+      drawerLoading: false,
+
+      // 用户组表单弹窗
+      createStep: 0, // 创建表单步骤
+      formVisible: false,
+      formType: 'add', // add-创建 / edit-修改
+      formSubmitting: false,
+
+      // 编辑用户组成员弹窗
+      currentGroup: null, // 当前用户组
+      ungroupedUserList: [], // 未分组的用户列表
+      currentGroupUserList: [], // 当前用户组用户列表，抽屉列表复用
+      userEditSelectedList: [], // 当前用户组用户 ID 列表，选择用户弹窗值绑定
+      userEditDataLoadingCount: 0, // 加载未分组用户和当前组用户后各加 1，为 2 时表示数据加载完毕
+      userEditVisible: false,
+      userEditSubmitting: false,
+
+      // 批量修改角色
+      roleList: [],
+      roleEditVisible: false,
+      roleEditSubmitting: false,
+    });
+
+    // refs
+    const proTableRef = ref(null);
+    const groupFormRef = ref(null);
+    const roleEditFormRef = ref(null);
+
+    // 用户列表
+    // 获取未分组用户列表
+    const getUngroupedUserList = async () => {
+      state.ungroupedUserList = await getUngroupedUsers();
+      if (!state.ungroupedUserList.length) {
+        Message.warning('没有未分组的用户');
+      }
+    };
+    // 获取组成员列表
+    const getGroupUserList = async (groupId) => {
+      state.currentGroupUserList = await getUserListByGroup(groupId);
+    };
+    // 清空未分组用户列表、当前用户列表、用户编辑选择数组
+    const resetUserLists = () => {
+      Object.assign(state, {
+        ungroupedUserList: [],
+        currentGroupUserList: [],
+        userEditSelectedList: [],
+      });
+    };
+
+    // 角色列表
+    const getRoles = () => {
+      getRoleList({
+        current: 1,
+        size: 500,
+      }).then((res) => {
+        state.roleList = res.result;
+      });
+    };
+
+    // 表单操作
+    const defaultForm = {
+      name: null,
+      description: null,
+      id: null,
+    };
+    const form = reactive({ ...defaultForm });
+    const formTitle = computed(() => {
+      switch (state.formType) {
+        case 'edit':
+          return '修改用户组信息';
+        case 'add':
+        default:
+          return '创建用户组';
+      }
+    });
+    const formModalOkText = computed(() => {
+      switch (state.formType) {
+        case 'add':
+          if (state.createStep === 0) {
+            return '下一步';
+          }
+          return '保存';
+        case 'edit':
+        default:
+          return '确定';
+      }
+    });
+    const initForm = (originForm = {}) => {
+      Object.keys(form).forEach((key) => {
+        form[key] = originForm[key] !== undefined ? originForm[key] : defaultForm[key];
+      });
+    };
+    const onFormConfirm = () => {
+      // 提交创建/修改表单
+      if (state.createStep === 0) {
+        groupFormRef.value.validate((form) => {
+          state.formSubmitting = true;
+          let submitFn;
+          let submitType;
+          switch (state.formType) {
+            case 'edit':
+              submitFn = edit;
+              submitType = '修改';
+              break;
+            case 'add':
+            default:
+              submitFn = add;
+              submitType = '创建';
+          }
+          submitFn(form)
+            .then((res) => {
+              Message.success(`${submitType}成功！`);
+              switch (state.formType) {
+                case 'edit':
+                  state.formVisible = false;
+                  break;
+                case 'add':
+                  state.createStep = 1;
+                  state.currentGroup = res;
+                  getUngroupedUserList();
+                  break;
+                // no default
+              }
+              proTableRef.value.refresh();
+            })
+            .finally(() => {
+              state.formSubmitting = false;
+            });
+        });
+      } else if (state.createStep === 1) {
+        updateGroupUsers({
+          groupId: state.currentGroup.id,
+          userIds: state.userEditSelectedList,
+        }).then(() => {
+          Message.success('用户组成员保存成功');
+          state.formVisible = false;
+        });
+      }
+    };
+    const onFormClose = () => {
+      initForm();
+      state.createStep === 0 && groupFormRef.value.clearValidate(); // 从创建表单关闭时清空验证
+      state.createStep = 0;
+      resetUserLists();
+    };
+
+    // 编辑用户组成员
+    const userEditTitle = computed(() => {
+      return `编辑用户组成员${state.currentGroup ? ` - ${state.currentGroup.name}` : ''}`;
+    });
+    const userEditTransferData = computed(() => {
+      return state.ungroupedUserList.concat(state.currentGroupUserList).map((user) => {
+        return {
+          key: user.id,
+          label: user.nickName,
+        };
+      });
+    });
+    const onUserEditSubmit = () => {
+      state.userEditSubmitting = true;
+      updateGroupUsers({
+        groupId: state.currentGroup.id,
+        userIds: state.userEditSelectedList,
+      })
+        .then(() => {
+          Message.success('用户组成员保存成功');
+          state.userEditVisible = false;
+        })
+        .finally(() => {
+          state.userEditSubmitting = false;
+        });
+    };
+    const onUserEditClose = () => {
+      resetUserLists();
+    };
+
+    // 批量修改角色
+    const roleEditTitle = computed(() => {
+      return `批量修改用户角色${state.currentGroup ? ` - ${state.currentGroup.name}` : ''}`;
+    });
+    const roleEditFormItems = computed(() => {
+      return getRoleEditFormItems(state.roleList);
+    });
+    const roleEditForm = reactive({ roleId: null });
+    const onRoleEditSubmit = () => {
+      roleEditFormRef.value.validate((form) => {
+        state.roleEditSubmitting = true;
+        updateUserRoles(state.currentGroup.id, [form.roleId])
+          .then(() => {
+            Message.success('批量修改角色成功');
+            state.roleEditVisible = false;
+          })
+          .finally(() => {
+            state.roleEditSubmitting = false;
+          });
+      });
+    };
+    const onRoleEditClose = () => {
+      roleEditForm.roleId = null;
+      roleEditFormRef.value.clearValidate();
+    };
+
+    // 表格操作方法
+    // 创建用户组
+    const doAdd = () => {
+      state.formType = 'add';
+      state.formVisible = true;
+      initForm();
+    };
+    // 修改用户组信息
+    const doEdit = (row) => {
+      state.formType = 'edit';
+      state.formVisible = true;
+      initForm(row);
+    };
+    // 修改用户组成员
+    const doEditUsers = (row) => {
+      state.userEditDataLoadingCount = 0; // 重置数据加载计数
+      state.currentGroup = row;
+      getUngroupedUserList().then(() => {
+        state.userEditDataLoadingCount += 1;
+      });
+      getGroupUserList(row.id).then(() => {
+        state.userEditSelectedList = state.currentGroupUserList.map((user) => user.id);
+        state.userEditDataLoadingCount += 1;
+      });
+      state.userEditVisible = true;
+    };
+    // 删除用户组
+    const doDelete = (row) => {
+      MessageBox.confirm('此操作将删除该用户组', '请确认').then(() => {
+        del(row.id).then(() => {
+          Message.success('删除成功');
+          proTableRef.value.refresh();
+        });
+      });
+    };
+    // 批量激活/锁定用户
+    const doActiveDeactive = (row, enabled) => {
+      MessageBox.confirm(`此操作将批量${enabled ? '激活' : '锁定'}该组所有用户`, '请确认').then(
+        () => {
+          updateUserState(row.id, enabled).then(() => {
+            Message.success('用户状态修改成功');
+          });
+        }
+      );
+    };
+    // 批量删除用户
+    const doDeleteUsers = (row) => {
+      MessageBox.confirm('此操作将删除该用户组内的所有用户', '请确认').then(() => {
+        deleteGroupUsers(row.id).then(() => {
+          Message.success('用户删除成功');
+        });
+      });
+    };
+    // 批量修改用户角色
+    const doChangeRoles = (row) => {
+      // 如果角色列表为空，则请求角色列表
+      if (!state.roleList.length) {
+        getRoles();
+      }
+      state.currentGroup = row;
+      state.roleEditVisible = true;
+    };
+
+    // 从组删除用户
+    const doDeleteUserFromGroup = (row) => {
+      MessageBox.confirm(
+        `将从用户组“${state.currentGroup.name}”中移除用户“${row.nickName}”`,
+        '请确认'
+      ).then(() => {
+        deleteUserFromGroup([row.id], state.currentGroup.id).then(() => {
+          Message.success('删除成功');
+          getGroupUserList(state.currentGroup.id);
+        });
+      });
+    };
+
+    // 列信息
+    const columns = computed(() => {
+      return getColumns({
+        doEdit,
+        doEditUsers,
+        doDelete,
+        doActiveDeactive,
+        doDeleteUsers,
+        doChangeRoles,
+      });
+    });
+    const userColumns = computed(() => {
+      return getUserColumns({
+        doDeleteUserFromGroup,
+      });
+    });
+
+    // 单击行显示当前组成员列表
+    const onRowClick = async (row) => {
+      state.drawerLoading = true;
+      state.drawerVisible = true;
+      state.currentGroup = row;
+      await getGroupUserList(row.id).finally(() => {
+        state.drawerLoading = false;
+      });
+    };
+
+    return {
+      list,
+      hasPermission,
+
+      ...toRefs(state),
+      proTableRef,
+      groupFormRef,
+      roleEditFormRef,
+
+      groupFormItems,
+      groupFormRules,
+      form,
+
+      doAdd,
+      columns,
+      queryFormItems, // 查询项列表
+      userColumns,
+
+      onRowClick,
+
+      formTitle,
+      formModalOkText,
+      onFormConfirm,
+      onFormClose,
+
+      userEditTransferData,
+      userEditTitle,
+      onUserEditSubmit,
+      onUserEditClose,
+
+      roleEditTitle,
+      roleEditFormItems,
+      roleEditRules,
+      roleEditForm,
+      onRoleEditSubmit,
+      onRoleEditClose,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .user-group-transfer {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .el-transfer-panel {
+    width: 300px;
+  }
+
+  .el-transfer-panel__body {
+    height: 60vh;
+  }
+
+  .el-transfer-panel__list {
+    height: calc(60vh - 47px);
+  }
+
+  .el-transfer__buttons {
+    flex-shrink: 0;
+  }
+
+  .el-button {
+    padding: 12px 20px;
+  }
+}
+
+::v-deep .mt-10vh {
+  margin-top: 10vh !important;
+}
+</style>
diff --git a/webapp/src/views/system/userGroup/utils.js b/webapp/src/views/system/userGroup/utils.js
new file mode 100644
index 0000000..c06cd99
--- /dev/null
+++ b/webapp/src/views/system/userGroup/utils.js
@@ -0,0 +1,198 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+import { validateNameWithHyphen, hasPermission } from '@/utils';
+
+// 用户组列表项
+export function getColumns({
+  doEdit,
+  doEditUsers,
+  doDelete,
+  doActiveDeactive,
+  doDeleteUsers,
+  doChangeRoles,
+}) {
+  return [
+    {
+      label: 'ID',
+      prop: 'id',
+      width: 80,
+      sortable: 'custom',
+    },
+    {
+      label: '名称',
+      prop: 'name',
+    },
+    {
+      label: '描述',
+      prop: 'description',
+      minWidth: '200px',
+    },
+    {
+      label: '修改时间',
+      prop: 'updateTime',
+      type: 'time',
+      minWidth: '160px',
+      sortable: 'custom',
+    },
+    {
+      label: '操作',
+      type: 'operation',
+      width: '370px',
+      operations: [
+        {
+          label: '编辑',
+          func: doEdit,
+          hide: !hasPermission('system:userGroup:edit'),
+        },
+        {
+          label: '编辑成员',
+          func: doEditUsers,
+          hide: !hasPermission('system:userGroup:editUser'),
+        },
+        {
+          label: '批量激活',
+          func: (row) => doActiveDeactive(row, true),
+          hide: !hasPermission('system:userGroup:editUserState'),
+        },
+        {
+          label: '批量锁定',
+          func: (row) => doActiveDeactive(row, false),
+          hide: !hasPermission('system:userGroup:editUserState'),
+        },
+        {
+          label: '批量修改角色',
+          func: doChangeRoles,
+          hide: !hasPermission('system:userGroup:editUserRole'),
+        },
+        {
+          label: '批量删除用户',
+          func: doDeleteUsers,
+          hide: !hasPermission('system:userGroup:deleteUser'),
+        },
+        {
+          label: '删除',
+          func: doDelete,
+          hide: !hasPermission('system:userGroup:delete'),
+        },
+      ],
+    },
+  ];
+}
+
+// 用户组表单项
+export const groupFormItems = [
+  {
+    prop: 'name',
+    label: '用户组名称',
+    class: 'w-300',
+    maxlength: 32,
+    showWordLimit: true,
+    placeholder: '请输入用户组名称',
+  },
+  {
+    prop: 'description',
+    label: '用户组描述',
+    class: 'w-500',
+    inputType: 'textarea',
+    maxlength: 255,
+    showWordLimit: true,
+    placeholder: '请输入用户组描述',
+  },
+];
+
+// 用户组表单校验规则
+export const groupFormRules = {
+  name: [
+    { required: true, message: '请输入用户组名称', trigger: 'blur' },
+    { max: 32, message: '长度在32个字符以内', trigger: 'blur' },
+    {
+      validator: validateNameWithHyphen,
+      trigger: ['blur', 'change'],
+    },
+  ],
+  description: [{ max: 255, message: '长度在255个字符以内', trigger: 'blur' }],
+};
+
+// 用户组搜索表单项
+export const queryFormItems = [
+  {
+    prop: 'name',
+    placeholder: '请输入用户组名称或 ID',
+    class: 'w-200',
+    change: 'query',
+  },
+  {
+    type: 'button',
+    btnText: '重置',
+    func: 'resetQuery',
+  },
+  {
+    type: 'button',
+    btnText: '搜索',
+    btnType: 'primary',
+    func: 'query',
+  },
+];
+
+// 用户组用户列表项
+export function getUserColumns({ doDeleteUserFromGroup }) {
+  return [
+    {
+      label: 'ID',
+      prop: 'id',
+      width: 80,
+    },
+    {
+      label: '名称',
+      prop: 'nickName',
+    },
+    {
+      label: '操作',
+      type: 'operation',
+      width: '100px',
+      operations: [
+        {
+          label: '移除',
+          func: doDeleteUserFromGroup,
+        },
+      ],
+    },
+  ];
+}
+
+// 批量编辑用户权限表单项
+export function getRoleEditFormItems(roleList) {
+  return [
+    {
+      type: 'select',
+      label: '选择角色',
+      prop: 'roleId',
+      options: roleList.map((role) => ({ label: role.name, value: role.id })),
+    },
+  ];
+}
+
+// 批量编辑用户权限表单校验规则
+export const roleEditRules = {
+  roleId: [
+    {
+      required: true,
+      message: '请选择角色',
+      trigger: 'manual',
+    },
+  ],
+};
diff --git a/webapp/src/views/trainingImage/index.vue b/webapp/src/views/trainingImage/index.vue
index c351040..8ee7254 100644
--- a/webapp/src/views/trainingImage/index.vue
+++ b/webapp/src/views/trainingImage/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
@@ -34,9 +34,9 @@
       </cdOperation>
     </div>
     <el-tabs v-model="active" class="eltabs-inlineblock" @tab-click="handleClick">
-      <el-tab-pane id="tab_0" label="我的镜像" :name="IMAGE_TABS.TRAIN" />
-      <el-tab-pane id="tab_1" label="预置镜像" :name="IMAGE_TABS.PRESET" />
-      <el-tab-pane id="tab_1" label="NoteBook镜像" :name="IMAGE_TABS.NOTEBOOK" />
+      <el-tab-pane id="tab_0" label="我的镜像" :name="IMAGE_RESOURCE_ENUM.CUSTOM" />
+      <el-tab-pane id="tab_1" label="预置镜像" :name="IMAGE_RESOURCE_ENUM.PRESET" />
+      <el-tab-pane id="tab_1" label="Notebook 镜像" :name="IMAGE_RESOURCE_ENUM.NOTEBOOK" />
     </el-tabs>
     <!--表格渲染-->
     <el-table
@@ -48,7 +48,13 @@
       @selection-change="crud.selectionChangeHandler"
       @sort-change="crud.sortChange"
     >
-      <el-table-column v-if="!judgeTabs.preset" prop="id" label="ID" sortable="custom" width="80px" />
+      <el-table-column
+        v-if="!judgeTabs.preset"
+        prop="id"
+        label="ID"
+        sortable="custom"
+        width="80px"
+      />
       <el-table-column prop="imageName" label="镜像名称" sortable="custom" />
       <el-table-column prop="imageTag" label="镜像版本号" sortable="custom" />
       <el-table-column prop="imageStatus" label="状态" width="160px">
@@ -72,32 +78,50 @@
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-if="judgeTabs.notebook" prop="imageResource" label="是否为默认" align="center">
+      <el-table-column
+        v-if="judgeTabs.notebook"
+        prop="imageResource"
+        label="是否为默认"
+        align="center"
+      >
         <template slot-scope="scope">
-          <i :class="resourceObj(scope.row.imageResource).icon" :style="{color: resourceObj(scope.row.imageResource).color, fontSize: '20px'}"></i>
+          <i
+            :class="resourceObj(scope.row.imageResource).icon"
+            :style="{ color: resourceObj(scope.row.imageResource).color, fontSize: '20px' }"
+          ></i>
         </template>
       </el-table-column>
-      <el-table-column  v-if="!operationProps.disabled" label="操作" width="200px" fixed="right">
+      <el-table-column v-if="!operationProps.disabled" label="操作" width="200px" fixed="right">
         <template slot-scope="scope">
           <el-tooltip
-            v-if="rolePermissions && judgeTabs.notebook"
+            v-if="isAdmin && judgeTabs.notebook"
             effect="dark"
             content="设为在线编辑算法时创建nootbook的默认镜像"
             placement="top"
           >
-            <el-button 
-              :id="`doPrecast_`+scope.$index" 
+            <el-button
+              :id="`doPrecast_` + scope.$index"
               :disabled="Boolean(scope.row.imageResource)"
-              type="text" 
+              type="text"
               @click.stop="doPrecast(scope.row.id)"
             >
               {{ resourceObj(scope.row.imageResource).butText }}
             </el-button>
           </el-tooltip>
-          <el-button v-if="judgeTabs.train" :id="`doEdit_`+scope.$index" type="text" @click.stop="doEdit(scope.row)">
+          <el-button
+            v-if="hasPermission('training:image:edit') && judgeTabs.train"
+            :id="`doEdit_` + scope.$index"
+            type="text"
+            @click.stop="doEdit(scope.row)"
+          >
             编辑
           </el-button>
-          <el-button v-if="!judgeTabs.preset" :id="`doDelete_`+scope.$index" type="text" @click.stop="doDelete(scope.row.id)">
+          <el-button
+            v-if="hasPermission('training:image:delete') && (!judgeTabs.preset || isAdmin)"
+            :id="`doDelete_` + scope.$index"
+            type="text"
+            @click.stop="doDelete(scope.row.id)"
+          >
             删除
           </el-button>
         </template>
@@ -118,16 +142,23 @@
       @cancel="crud.cancelCU"
       @ok="crud.submitCU"
     >
-      <el-form
-        ref="form"
-        :model="form"
-        :rules="rules"
-        label-width="120px"
-      >
-        <el-form-item v-if="isEdit && rolePermissions" label="镜像类型" prop="imageType">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item v-if="isEdit && isAdmin" label="镜像类型" prop="imageType">
           <el-radio-group v-model="form.projectType" @change="onImageTypeChange">
             <el-radio :label="IMAGE_PROJECT_TYPE.TRAIN" border class="mr-0">训练镜像</el-radio>
-            <el-radio :label="IMAGE_PROJECT_TYPE.NOTEBOOK" border>notebook镜像</el-radio>
+            <el-radio :label="IMAGE_PROJECT_TYPE.NOTEBOOK" border>Notebook 镜像</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-if="isEdit && isAdmin && form.projectType === IMAGE_PROJECT_TYPE.TRAIN"
+          label="镜像来源"
+          prop="imageResource"
+        >
+          <el-radio-group v-model="form.imageResource">
+            <el-radio :label="Number(IMAGE_RESOURCE_ENUM.CUSTOM)" border class="mr-0"
+              >我的镜像</el-radio
+            >
+            <el-radio :label="Number(IMAGE_RESOURCE_ENUM.PRESET)" border>预置镜像</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item v-if="isEdit" label="镜像名称" prop="imageName">
@@ -141,12 +172,7 @@
             allow-create
             default-first-option
           >
-            <el-option
-              v-for="item in harborProjectList"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
+            <el-option v-for="item in harborProjectList" :key="item" :label="item" :value="item" />
           </el-select>
         </el-form-item>
         <el-form-item v-if="isEdit" ref="imagePath" label="镜像文件路径" prop="imagePath">
@@ -161,7 +187,6 @@
             :params="uploadParams"
             :show-file-count="false"
             :auto-upload="true"
-            :hash="false"
             :filters="uploadFilters"
             :limit="1"
             :on-remove="onFileRemove"
@@ -169,21 +194,17 @@
             @uploadSuccess="uploadSuccess"
             @uploadError="uploadError"
           />
-          <upload-progress 
-            v-if="loading" 
-            :progress="progress" 
-            :color="customColors" 
-            :status="status" 
-            :size="size" 
+          <upload-progress
+            v-if="loading"
+            :progress="progress"
+            :color="customColors"
+            :status="status"
+            :size="size"
             @onSetProgress="onSetProgress"
           />
         </el-form-item>
         <el-form-item v-if="isEdit" label="镜像版本号" prop="imageTag">
-          <el-input
-            id="imageTag"
-            v-model="form.imageTag"
-            style="width: 400px;"
-          />
+          <el-input id="imageTag" v-model="form.imageTag" style="width: 400px;" />
         </el-form-item>
         <el-form-item label="描述" prop="remark">
           <el-input
@@ -203,7 +224,6 @@
 </template>
 
 <script>
-
 import { mapGetters } from 'vuex';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { debounce } from 'throttle-debounce';
@@ -213,13 +233,19 @@ import rrOperation from '@crud/RR.operation';
 import pagination from '@crud/Pagination';
 import CRUD, { presenter, header, form, crud } from '@crud/crud';
 import trainingImageApi, { getImageNameList, del, setPrecast } from '@/api/trainingImage/index';
-import { getUniqueId, uploadSizeFomatter, invalidFileNameChar } from '@/utils';
+import {
+  getUniqueId,
+  uploadSizeFomatter,
+  invalidFileNameChar,
+  ADMIN_ROLE_ID,
+  hasPermission,
+} from '@/utils';
 import BaseModal from '@/components/BaseModal';
 import UploadInline from '@/components/UploadForm/inline';
 import DropdownHeader from '@/components/DropdownHeader';
 import UploadProgress from '@/components/UploadProgress';
 import { imageConfig } from '@/config';
-import { IMAGE_TABS, IMAGE_PROJECT_TYPE } from '../trainingJob/utils';
+import { IMAGE_RESOURCE_ENUM, IMAGE_PROJECT_TYPE } from '../trainingJob/utils';
 
 const defaultForm = {
   imageName: null,
@@ -227,7 +253,14 @@ const defaultForm = {
   imageTag: null,
   remark: null,
   projectType: IMAGE_PROJECT_TYPE.TRAIN,
+  imageResource: Number(IMAGE_RESOURCE_ENUM.CUSTOM),
+};
+
+const defaultQuery = {
+  imageStatus: null,
+  imageNameOrId: null,
 };
+
 export default {
   name: 'TrainingImage',
   components: {
@@ -244,6 +277,7 @@ export default {
       title: '镜像',
       crudMethod: { ...trainingImageApi },
       optShow: {
+        add: imageConfig.allowUploadImage && hasPermission('training:image:upload'),
         del: false,
       },
       queryOnPresenterCreated: false,
@@ -282,11 +316,8 @@ export default {
       }
     };
     return {
-      active: IMAGE_TABS.TRAIN,
-      localQuery: {
-        imageStatus: null,
-        imageNameOrId: null,
-      },
+      active: IMAGE_RESOURCE_ENUM.CUSTOM,
+      localQuery: { ...defaultQuery },
       map: {
         0: 'info',
         1: 'success',
@@ -298,13 +329,13 @@ export default {
         2: '制作失败',
       },
       rules: {
+        projectType: [{ required: true, message: '请选择镜像类型', trigger: 'change' }],
+        imageResource: [{ required: true, message: '请选择镜像来源', trigger: 'change' }],
         imageName: [
           { required: true, message: '请选择项目名称', trigger: 'change' },
           { validator: validateImageName, trigger: ['blur', 'change'] },
         ],
-        imagePath: [
-          { required: true, message: '请输入镜像路径', trigger: ['blur', 'manual'] },
-        ],
+        imagePath: [{ required: true, message: '请输入镜像路径', trigger: ['blur', 'manual'] }],
         imageTag: [
           { required: true, message: '请输入镜像版本号', trigger: 'blur' },
           { validator: validateImageTag, trigger: ['blur', 'change'] },
@@ -318,9 +349,9 @@ export default {
       progress: 0,
       size: 0,
       customColors: [
-        {color: '#909399', percentage: 40},
-        {color: '#e6a23c', percentage: 80},
-        {color: '#67c23a', percentage: 100},
+        { color: '#909399', percentage: 40 },
+        { color: '#e6a23c', percentage: 80 },
+        { color: '#67c23a', percentage: 100 },
       ],
       disableEdit: false,
       loading: false,
@@ -328,29 +359,27 @@ export default {
       prefabricate: true,
       // 以下为配置参数及常量参数
       imageConfig,
-      IMAGE_TABS,
+      IMAGE_RESOURCE_ENUM,
       IMAGE_PROJECT_TYPE,
       uploadFilters: [invalidFileNameChar],
     };
   },
   computed: {
-    ...mapGetters([
-      'user',
-    ]),
+    ...mapGetters(['user', 'isAdmin']),
     rolePermissions() {
       const { roles } = this.user;
-      return roles && roles.length && roles[0].permission === 'admin';
+      return roles && roles.length && roles[0].id === ADMIN_ROLE_ID;
     },
     judgeTabs() {
       return {
-        train: this.active === IMAGE_TABS.TRAIN,
-        preset: this.active === IMAGE_TABS.PRESET,
-        notebook: this.active === IMAGE_TABS.NOTEBOOK,
+        train: this.active === IMAGE_RESOURCE_ENUM.CUSTOM,
+        preset: this.active === IMAGE_RESOURCE_ENUM.PRESET,
+        notebook: this.active === IMAGE_RESOURCE_ENUM.NOTEBOOK,
       };
     },
     operationProps() {
       return {
-        disabled: !this.judgeTabs.train && !(this.rolePermissions && this.judgeTabs.notebook),
+        disabled: !this.isAdmin && !this.judgeTabs.train, // 非管理员只能上传我的镜像；管理员可以上传预置镜像和 Notebook 镜像
       };
     },
     imageStatusList() {
@@ -365,19 +394,21 @@ export default {
     },
   },
   mounted() {
-    this.crudQuery();
     this.crud.refresh();
     this.refetch = debounce(3000, this.crud.refresh);
     this.updateImagePath();
   },
   methods: {
+    hasPermission,
     // handle
     handleClick() {
-      this.crudQuery();
-      this.crud.refresh();
+      this.localQuery = { ...defaultQuery };
+      this.crud.toQuery();
       // 切换tab键时让表格重渲
       this.prefabricate = false;
-      this.$nextTick(() => { this.prefabricate = true; });
+      this.$nextTick(() => {
+        this.prefabricate = true;
+      });
     },
     onFileRemove() {
       this.form.imagePath = null;
@@ -386,7 +417,7 @@ export default {
     },
     uploadStart(files) {
       this.updateImagePath();
-      [ this.loading, this.size, this.progress ] = [ true, files.size, 0 ];
+      [this.loading, this.size, this.progress] = [true, files.size, 0];
     },
     onSetProgress(val) {
       this.progress += val;
@@ -415,18 +446,37 @@ export default {
     [CRUD.HOOK.beforeToAdd]() {
       this.isEdit = true;
       this.formType = 'add';
+      if (this.judgeTabs.preset) {
+        this.form.imageResource = Number(IMAGE_RESOURCE_ENUM.PRESET);
+      } else if (this.judgeTabs.notebook) {
+        this.form.projectType = IMAGE_PROJECT_TYPE.NOTEBOOK;
+      }
     },
     [CRUD.HOOK.beforeRefresh]() {
-      this.crud.query = { ...this.localQuery};
-      this.crudQuery();
+      this.crud.query = { ...this.localQuery };
+      switch (this.active) {
+        case IMAGE_RESOURCE_ENUM.CUSTOM:
+        case IMAGE_RESOURCE_ENUM.PRESET:
+          this.crud.query.projectType = IMAGE_PROJECT_TYPE.TRAIN;
+          this.crud.query.imageResource = Number(this.active);
+          break;
+        case IMAGE_RESOURCE_ENUM.NOTEBOOK:
+          this.crud.query.projectType = IMAGE_PROJECT_TYPE.NOTEBOOK;
+          break;
+        // no default
+      }
     },
     [CRUD.HOOK.beforeToEdit]() {
       this.isEdit = false;
     },
-    async onImageTypeChange() {
-      this.form.imageName = null;
+    async getImageNameList() {
       this.harborProjectList = await getImageNameList({ projectType: this.form.projectType });
     },
+    onImageTypeChange() {
+      this.form.imageName = null;
+      this.form.imageResource = Number(IMAGE_RESOURCE_ENUM.CUSTOM);
+      this.getImageNameList();
+    },
     onDialogClose() {
       if (this.isEdit) {
         this.$refs.upload.formRef.reset();
@@ -434,34 +484,19 @@ export default {
       this.loading = false;
     },
     async onDialogOpen() {
-      if (this.rolePermissions) {
-        this.onImageTypeChange();
-      } else {
-        this.form.projectType = IMAGE_PROJECT_TYPE.TRAIN;
-        this.harborProjectList = await getImageNameList({ projectType: this.form.projectType });
-      }
+      this.getImageNameList();
     },
     checkStatus() {
-      if (this.crud.data.some(item => [0].includes(item.imageStatus))) {
+      if (this.crud.data.some((item) => [0].includes(item.imageStatus))) {
         this.refetch();
       }
     },
-    crudQuery() {
-      const isTrain = [IMAGE_TABS.TRAIN, IMAGE_TABS.PRESET].includes(this.active);
-      this.crud.query.projectType = isTrain ? IMAGE_PROJECT_TYPE.TRAIN : IMAGE_PROJECT_TYPE.NOTEBOOK;
-      if (isTrain) {
-        this.crud.query.imageResource = Number(this.active);
-      };
-    },
     filterStatus(status) {
       this.localQuery.imageStatus = status;
       this.crud.toQuery();
     },
     resetQuery() {
-      this.localQuery = {
-        imageStatus: null,
-        imageNameOrId: null,
-      };
+      this.localQuery = { ...defaultQuery };
     },
     updateImagePath() {
       this.uploadParams.objectPath = `upload-temp/${this.user.id}/${getUniqueId()}`;
@@ -474,16 +509,14 @@ export default {
       await this.crud.toEdit(dataObj);
     },
     doDelete(id) {
-      this.$confirm('此操作将永久删除该镜像, 是否继续?', '请确认').then(
-        async() => {
-          await del({ ids: [id] });
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-          });
-          this.crud.refresh();
-        },
-      );
+      this.$confirm('此操作将永久删除该镜像, 是否继续?', '请确认').then(async () => {
+        await del({ ids: [id] });
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+        });
+        this.crud.refresh();
+      });
     },
     doPrecast(i) {
       setPrecast({ id: i }).then(() => {
@@ -495,8 +528,9 @@ export default {
       });
     },
     resourceObj(resource) {
-      return resource ? { icon: 'el-icon-circle-check', color: '#67C23A', butText: '当前为默认' }
-      : { icon: 'el-icon-circle-close', color: '#F56C6C', butText: '设为默认' };
+      return resource
+        ? { icon: 'el-icon-circle-check', color: '#67C23A', butText: '当前为默认' }
+        : { icon: 'el-icon-circle-close', color: '#F56C6C', butText: '设为默认' };
     },
     uploadSizeFomatter,
   },
@@ -509,4 +543,4 @@ export default {
   padding: 10px 0;
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/trainingJob/add.vue b/webapp/src/views/trainingJob/add.vue
index 2ae3d80..999275a 100644
--- a/webapp/src/views/trainingJob/add.vue
+++ b/webapp/src/views/trainingJob/add.vue
@@ -1,28 +1,26 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
     <!--任务版本新增-->
-    <job-form
-      ref="jobForm"
-      :type="formType"
-      @getForm="getForm"
-    />
-    <el-button type="primary" :loading="loading" style="margin-left: 120px;" @click="save">开始训练</el-button>
+    <job-form ref="jobForm" :type="formType" @getForm="getForm" />
+    <el-button type="primary" :loading="loading" style="margin-left: 120px;" @click="save"
+      >开始训练</el-button
+    >
     <el-button @click="reset">清空</el-button>
   </div>
 </template>
@@ -43,13 +41,13 @@ export default {
   created() {
     const from = this.$route.params.from || 'job';
     if (from === 'algorithm') {
-      const {params} = this.$route.params;
+      const { params } = this.$route.params;
       this.formType = 'algoAdd';
       this.$nextTick(() => {
         this.$refs.jobForm.initForm(params);
       });
     } else if (from === 'param') {
-      const {paramsInfo} = this.$route.params;
+      const { paramsInfo } = this.$route.params;
       paramsInfo.trainName = paramsInfo.paramName;
       this.formType = 'paramsAdd';
       this.$nextTick(() => {
@@ -69,7 +67,7 @@ export default {
     },
     // 任务新增
     async getForm(form) {
-      const params = { ...form};
+      const params = { ...form };
       delete params.algorithmSource;
       this.loading = true;
       const res = await addJob(params).finally(() => {
diff --git a/webapp/src/views/trainingJob/components/jobDetail.vue b/webapp/src/views/trainingJob/components/jobDetail.vue
index a6fee3a..8525f96 100644
--- a/webapp/src/views/trainingJob/components/jobDetail.vue
+++ b/webapp/src/views/trainingJob/components/jobDetail.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="job-detail-container">
@@ -45,16 +45,12 @@
         <div class="label">算法</div>
         <div class="text">
           <div class="dib">{{ item.algorithmName }}</div>
-          <el-tooltip
-            v-if="!isParam"
-            :content="algorithmEditTooltip"
-            placement="top"
-          >
+          <el-tooltip v-if="!isParam" :content="algorithmEditTooltip" placement="top">
             <div class="dib">
               <i
                 v-if="item.algorithmCodeDir"
                 class="el-icon-edit primary"
-                :class="{'cp': !editLoading}"
+                :class="{ cp: !editLoading }"
                 @click="goEditAlgorithm(item.algorithmId, item.algorithmCodeDir)"
               />
               <i v-else class="el-icon-question primary" />
@@ -72,16 +68,14 @@
         <div class="text">{{ item.imageTag }}</div>
       </el-col>
       <el-col
-        v-if="[0, 1].includes(item.modelResource)"
+        v-if="[MODEL_RESOURCE_ENUM.CUSTOM, MODEL_RESOURCE_ENUM.PRESET].includes(item.modelResource)"
         :xl="12"
         :span="24"
       >
         <div class="label">模型名称</div>
         <div class="text">{{ trainModel.name }}</div>
       </el-col>
-      <template
-        v-if="item.modelResource === 2"
-      >
+      <template v-if="item.modelResource === MODEL_RESOURCE_ENUM.ATLAS">
         <el-col :xl="12" :span="24">
           <div class="label">教师模型列表</div>
           <div class="text">{{ teacherModelNames }}</div>
@@ -94,20 +88,21 @@
     </el-row>
     <el-row class="row mt-0">
       <el-col v-if="!isParam" :span="12">
-        <div class="label">日志下载</div>
+        <div class="label">输出下载</div>
         <div class="text">
           <el-tooltip
             effect="dark"
-            :content="logDisableTooltip"
-            :disabled="!logDownloadDisable"
+            :content="outputDisableTooltip"
+            :disabled="!outputDownloadDisable"
             placement="top"
           >
             <div>
               <el-button
                 size="mini"
-                :disabled="logDownloadDisable"
-                @click="() => download(item.logPath, item.jobName + '_log.zip')"
-              >下载</el-button>
+                :disabled="outputDownloadDisable"
+                @click="() => download(item.outPath, item.jobName + '_out.zip')"
+                >下载</el-button
+              >
             </div>
           </el-tooltip>
         </div>
@@ -118,15 +113,13 @@
           <el-tooltip
             effect="dark"
             content="训练选择的算法没有包含模型输出参数，无法下载模型"
-            :disabled="Boolean(item.outPath)"
+            :disabled="Boolean(item.modelPath)"
             placement="top"
           >
             <div>
-              <el-button
-                size="mini"
-                :disabled="!item.outPath"
-                @click="() => choosePath(item)"
-              >下载</el-button>
+              <el-button size="mini" :disabled="!item.modelPath" @click="() => choosePath(item)"
+                >下载</el-button
+              >
             </div>
           </el-tooltip>
         </div>
@@ -138,10 +131,9 @@
       <el-col :span="24" class="dynamic">
         <div class="label">运行参数</div>
         <div class="text">
-          <span
-            v-for="(p, index) in runParamsList"
-            :key="p.key"
-          >{{ p.key }} = {{ p.value }} {{ index === runParamsList.length - 1 ? '' : ', ' }}</span>
+          <span v-for="(p, index) in runParamsList" :key="p.key"
+            >{{ p.key }} = {{ p.value }} {{ index === runParamsList.length - 1 ? '' : ', ' }}</span
+          >
         </div>
       </el-col>
       <el-col :xl="12" :span="24">
@@ -155,7 +147,7 @@
       <el-col :span="24">
         <div class="label">节点规格</div>
         <div class="text">
-          {{ spec && spec.label }}
+          {{ spec && spec.specsName }}
         </div>
       </el-col>
     </el-row>
@@ -170,14 +162,22 @@
 </template>
 
 <script>
-import { convertMapToList, downloadZipFromObjectPath } from '@/utils';
+import { isNil } from 'lodash';
+import {
+  convertMapToList,
+  downloadZipFromObjectPath,
+  RESOURCES_MODULE_ENUM,
+  MODEL_RESOURCE_ENUM,
+} from '@/utils';
 import { createNotebook, getNotebookAddress } from '@/api/development/notebook';
 import { getTrainModel } from '@/api/trainingJob/job';
+import { list as getSpecsNames } from '@/api/system/resources';
+
 import pathSelectDialog from './pathSelectDialog';
+import { TRAINING_STATUS_ENUM } from '../utils';
 
 export default {
   name: 'JobDetail',
-  dicts: ['cpu_specs', 'gpu_specs'],
   components: { pathSelectDialog },
   props: {
     item: {
@@ -191,6 +191,8 @@ export default {
   },
   data() {
     return {
+      MODEL_RESOURCE_ENUM,
+
       runParamsList: [],
       editLoading: false,
       trainTypeMap: {
@@ -198,22 +200,24 @@ export default {
         1: '分布式训练',
       },
       modelList: [],
+      specList: [],
       teacherModelList: [],
       studentModelList: [],
+
+      notifyInstance: null,
     };
   },
   computed: {
-    logDisableTooltip() {
-      switch(this.item.trainStatus) {
-        case 0:
-        case 1:
-          return '训练尚未完成，无法下载训练日志';
-        case 7:
-          return '训练创建失败，无法下载训练日志';
-          // no default
-      };
-      if (!this.item.logPath) {
-        return '算法没有指定日志输入路径，无法下载训练日志';
+    outputDisableTooltip() {
+      switch (this.item.trainStatus) {
+        case TRAINING_STATUS_ENUM.PENDING:
+          return '训练尚未开始，无法下载训练输出';
+        case TRAINING_STATUS_ENUM.CREATE_FAILED:
+          return '训练创建失败，无法下载训练输出';
+        // no default
+      }
+      if (!this.item.outPath) {
+        return '算法没有指定输出路径，无法下载训练输出';
       }
       return null;
     },
@@ -223,8 +227,12 @@ export default {
       }
       return '算法不存在或不可编辑';
     },
-    logDownloadDisable() {
-      return [0, 1, 7].indexOf(this.item.trainStatus) >= 0 || !this.item.logPath;
+    outputDownloadDisable() {
+      return (
+        [TRAINING_STATUS_ENUM.PENDING, TRAINING_STATUS_ENUM.CREATE_FAILED].includes(
+          this.item.trainStatus
+        ) || !this.item.outPath
+      );
     },
     isJob() {
       return this.type === 'job';
@@ -233,33 +241,33 @@ export default {
       return this.type === 'param';
     },
     spec() {
-      return this.specList.find(spec => spec.label === this.item.trainJobSpecsName);
-    },
-    specList() {
-      switch(this.item.resourcesPoolType) {
-        case 0:
-          return this.dict.cpu_specs;
-        case 1:
-          return this.dict.gpu_specs;
-        default:
-          return [];
-      }
+      return this.specList.find((spec) => spec.specsName === this.item.trainJobSpecsName);
     },
     trainModel() {
       return this.modelList.length ? this.modelList[0] : {};
     },
     teacherModelNames() {
-      return this.teacherModelList.map(model => model.name).join(', ');
+      return this.teacherModelList.map((model) => model.name).join(', ');
     },
     studentModelNames() {
-      return this.studentModelList.map(model => model.name).join(', ');
+      return this.studentModelList.map((model) => model.name).join(', ');
     },
   },
   watch: {
     item: {
       async handler(item) {
         this.runParamsList = convertMapToList(item.runParams);
-        if (item.modelResource === null || item.modelResource === undefined) { return; }
+        if (!isNil(item.resourcesPoolType)) {
+          this.specList = (
+            await getSpecsNames({
+              module: RESOURCES_MODULE_ENUM.TRAIN,
+              resourcesPoolType: item.resourcesPoolType,
+            })
+          ).result;
+        }
+        if (isNil(item.modelResource)) {
+          return;
+        }
         const { modelList, teacherModelList, studentModelList } = await getTrainModel({
           modelResource: item.modelResource,
           modelId: item.modelId || undefined,
@@ -276,24 +284,32 @@ export default {
   },
   beforeDestroy() {
     this.editLoading = false;
+    this.notifyInstance && this.notifyInstance.close();
   },
   methods: {
     choosePath(item) {
       this.$refs.pathSelect.show({
-        resumePath: `${item.outPath}/`,
+        resumePath: `${item.modelPath}/`,
         fileName: `${item.jobName}_model.zip`,
       });
     },
-    chooseDone(params, afterPathList){
+    chooseDone(params, afterPathList) {
       this.download(params.path, params.fileName, afterPathList);
       // 如果是文件，zip包会有完整的层级结构，文件目录则会优化，tofix
     },
     download(filePath, fileName, afterPathList = []) {
-      downloadZipFromObjectPath(filePath, fileName, { 
+      downloadZipFromObjectPath(filePath, fileName, {
         flat: true,
-        filter: afterPathList.length ? result => result.filter(item => {
-          return afterPathList.some(path => item.name.startsWith(`${filePath}/${path}/`) || item.name === `${filePath}/${path}`);
-        }) : null, 
+        filter: afterPathList.length
+          ? (result) =>
+              result.filter((item) => {
+                return afterPathList.some(
+                  (path) =>
+                    item.name.startsWith(`${filePath}/${path}/`) ||
+                    item.name === `${filePath}/${path}`
+                );
+              })
+          : null,
       });
       this.$message({
         message: '请查看下载文件',
@@ -305,6 +321,12 @@ export default {
         return;
       }
       this.editLoading = true;
+      this.notifyInstance = this.$notify({
+        title: '正在启动 Notebook',
+        message: '正在启动 Notebook，请稍等',
+        iconClass: 'el-icon-loading',
+        duration: 0,
+      });
       const notebookInfo = await createNotebook(1, {
         sourceId: id,
         sourceFilePath: codeDir,
@@ -322,26 +344,31 @@ export default {
       if (!this.editLoading) {
         return;
       }
-      getNotebookAddress(id).then(url => {
-        if (url) {
-          this.openNotebook(url, noteBookName);
-        } else {
-          setTimeout(() => {
-            this.getNotebookAddress(id, noteBookName);
-          }, 1000);
-        }
-      }).catch(err => {
-        this.editLoading = false;
-        throw new Error(err);
-      });
+      getNotebookAddress(id)
+        .then((url) => {
+          if (url) {
+            this.openNotebook(url, noteBookName);
+          } else {
+            setTimeout(() => {
+              this.getNotebookAddress(id, noteBookName);
+            }, 1000);
+          }
+        })
+        .catch((err) => {
+          this.editLoading = false;
+          throw new Error(err);
+        });
     },
     openNotebook(url, noteBookName) {
       window.open(url);
       this.$message.success('Notebook已启动.');
       this.editLoading = false;
-      this.$router.push({ name: 'Notebook', params: {
-        noteBookName,
-      }});
+      this.$router.push({
+        name: 'Notebook',
+        params: {
+          noteBookName,
+        },
+      });
     },
   },
 };
diff --git a/webapp/src/views/trainingJob/components/jobDrawer.vue b/webapp/src/views/trainingJob/components/jobDrawer.vue
index edb6c24..f4842e7 100644
--- a/webapp/src/views/trainingJob/components/jobDrawer.vue
+++ b/webapp/src/views/trainingJob/components/jobDrawer.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="ts-drawer">
@@ -26,12 +26,13 @@
         <div class="label">运行时长</div>
         <div class="text">{{ item.runtime }}</div>
       </el-col>
-      <el-col v-if="item.trainStatus===1" :span="12">
+      <el-col :span="12">
+        <div class="label">运行日志</div>
+        <el-button @click="onCheckLog">点击查看</el-button>
+      </el-col>
+      <el-col v-if="item.trainStatus === 1" :span="12">
         <div class="label">监控信息</div>
-        <el-button
-          size="mini"
-          @click="getGarafana"
-        >进入 Grafana</el-button>
+        <el-button size="mini" @click="checkMetrics">查看监控信息</el-button>
       </el-col>
     </el-row>
     <el-row class="row">
@@ -44,75 +45,55 @@
         <div class="text">剩余 {{ item.delayDeleteCountDown | minute2Time }}</div>
       </el-col>
     </el-row>
-    <!--日志信息-->
-    <div v-if="prepared" id="log-wrapper">
-      <div class="title">
-        运行日志
-        <el-button
-          class="fr log-download-btn"
-          :disabled="!podList.length"
-          :loading="logDownloading"
-          @click="downloadTrainLog"
-        >下载{{ isDistributed ? '全部' : '' }}运行日志</el-button>
-      </div>
-      <pod-log-container
-        v-if="!isDistributed && item.trainStatus !== 7 && logPodName"
-        ref="logContainer"
-        :pod-name="logPodName.podName"
-        class="log single-log"
+    <el-dialog
+      :visible.sync="metricsVisible"
+      width="800px"
+      title="监控信息"
+      append-to-body
+      top="5vh"
+      custom-class="metrics-dialog"
+      :close-on-click-modal="false"
+      @opened="onMetricsDialogOpened"
+      @close="onMetricsDialogClose"
+    >
+      <label class="pr-20">选择节点</label>
+      <el-select
+        v-model="selectedPod"
+        placeholder="请选择节点"
+        class="w-300 mb-20"
+        filterable
+        multiple
+        collapse-tags
+        @change="onSelectedPodChange"
+      >
+        <el-option
+          v-for="pod in podList"
+          :key="pod.podName"
+          :value="pod.podName"
+          :label="pod.displayName"
+        />
+      </el-select>
+      <PodMonitor
+        ref="podMonitor"
+        :namespace="item.k8sNamespace"
+        :resource-name="item.jobName"
+        :pod-name="selectedPod"
+        :display-gpu="item.resourcesPoolType === RESOURCES_POOL_TYPE_ENUM.GPU"
       />
-      <div v-else-if="podList.length" id="distributed-log-wrapper">
-        <el-tabs
-          v-model="activeLogTab"
-          class="log-tabs"
-          @tab-click="onLogTabClick"
-        >
-          <el-tab-pane
-            v-for="pod in podList"
-            :key="pod.podName"
-            :label="pod.displayName"
-            :name="pod.podName"
-          />
-        </el-tabs>
-        <el-button class="fr log-download-btn mb-20" @click="() => doDownloadPodLog()">下载节点运行日志</el-button>
-        <keep-alive>
-          <pod-log-container
-            :key="activePod.podName"
-            ref="podLogContainer"
-            :pod-name="activePod.podName"
-            class="log distributed-log"
-          />
-        </keep-alive>
-      </div>
-      <div v-else class="log">
-        <p class="log-error-msg">{{ logErrorMsg }}</p>
-      </div>
-    </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { downloadFile } from '@/utils';
-import {
-  getTrainLog,
-  getJobDetail,
-  getGarafanaInfo,
-  getPods,
-} from '@/api/trainingJob/job';
-import {
-  getPodLog,
-  downloadPodLog,
-  batchDownloadPodLog,
-  countPodLogs,
-} from '@/api/system/pod';
-import podLogContainer from '@/components/LogContainer/podLogContainer';
-import JobDetail from './jobDetail';
+import { RESOURCES_POOL_TYPE_ENUM } from '@/utils';
+import { getJobDetail, getPods } from '@/api/trainingJob/job';
+import PodMonitor from '@/components/PodMonitor';
 
-const LOG_DOWNLOAD_LINES_THRESHOLD = 100000; // 暂定阈值 100K 条
+import JobDetail from './jobDetail';
 
 export default {
   name: 'JobDrawer',
-  components: { JobDetail, podLogContainer },
+  components: { JobDetail, PodMonitor },
   filters: {
     minute2Time(totalMinutes) {
       let remainMinutes = totalMinutes || 0;
@@ -129,101 +110,16 @@ export default {
   },
   data() {
     return {
-      item: {},
-      prepared: false,
+      RESOURCES_POOL_TYPE_ENUM,
 
+      item: {},
+      podList: [], // pod 列表
+      selectedPod: [],
       keepCountDown: false,
-      logDownloading: false,
-      podList: [],
-      activeLogTab: null,
-      podLogLoadTags: {}, // 用于记录分布式训练中，节点的运行日志是否已加载过
+      metricsVisible: false,
     };
   },
-  computed: {
-    isDistributed() {
-      return this.item.trainType === 1;
-    },
-    logPodName() {
-      return this.podList[0];
-    },
-    activePod() {
-      return this.podList.find(pod => pod.podName === this.activeLogTab) || {};
-    },
-    podLogOption() {
-      return { podName: this.activePod.podName };
-    },
-    logErrorMsg() {
-      if (this.item.trainStatus === 7) {
-        return this.item.trainMsg;
-      }
-      return '暂无节点值';
-    },
-  },
   methods: {
-    getTrainLog,
-    getPodLog,
-    async downloadTrainLog() {
-      this.logDownloading = true;
-      const logLines = await countPodLogs(this.podList);
-      if (!this.isDistributed) {
-        const pod = this.podList[0];
-        await this.doDownloadPodLog(pod, logLines[pod.podName], true);
-        this.logDownloading = false;
-      } else {
-        let count = 0;
-        this.podList.forEach(pod => {
-          count += logLines[pod.podName];
-        });
-        // 日志总行数小于阈值，则打包下载，否则每节点单独下载
-        if (count < LOG_DOWNLOAD_LINES_THRESHOLD) {
-          const data = await batchDownloadPodLog({ podVOList: this.podList }).finally(() => { this.logDownloading = false; });
-          downloadFile(data, `${this.item.jobName}-log.zip`);
-        } else {
-          this.$message.warning('节点日志总行数过多，将以单个节点为单位分别下载日志，请允许多个文件下载');
-          const jobList = [];
-          this.podList.forEach(pod => {
-            jobList.push(this.doDownloadPodLog(pod, logLines[pod.podName], false));
-          });
-          Promise.all(jobList).then(() => {
-            this.logDownloading = false;
-          });
-        }
-      }
-    },
-    /**
-     * 下载节点日志
-     * @param {*} pod 下载的 pod，如果为空则为 this.activePod
-     * @param {*} podLogLines 下载的 pod 对应的日志行数，如果为空则调用接口单独查询
-     * @param {*} divisionWarning 是否在超过阈值需要分片下载时进行提示
-     */
-    async doDownloadPodLog(pod, podLogLines, divisionWarning = true) {
-      pod = pod || this.activePod;
-      const { podName } = pod;
-      const displayName = this.item.jobName + (this.isDistributed ? `-${pod.displayName}` : '');
-      if (!podLogLines) {
-        const count = await countPodLogs([{ podName }]);
-        podLogLines = count[podName];
-      }
-      // 如果节点日志行数超过阈值，则以阈值行数为单位分片下载
-      if (podLogLines < LOG_DOWNLOAD_LINES_THRESHOLD) {
-        this.downloadPodLog({ podName }, `${displayName}-log.log`);
-      } else {
-        if(divisionWarning) {
-          this.$message.warning(`目标 ${displayName} 日志总行数过多，将按行数进行日志分片下载，请允许多个文件下载`);
-        }
-        let startLine = 1;
-        let lines = LOG_DOWNLOAD_LINES_THRESHOLD;
-        while (startLine < podLogLines) {
-          this.downloadPodLog({ podName, startLine, lines }, `${displayName}-log-${startLine}-${startLine + lines - 1}.log`);
-          startLine += lines;
-          lines = podLogLines - startLine > LOG_DOWNLOAD_LINES_THRESHOLD ? lines : podLogLines - startLine;
-        }
-      }
-    },
-    async downloadPodLog(query, name) {
-      const data = await downloadPodLog(query);
-      downloadFile(data, name);
-    },
     countDown() {
       if (this.keepCountDown) {
         setTimeout(() => {
@@ -233,91 +129,58 @@ export default {
       }
     },
     async onOpen(jobId) {
+      this.getPodList(jobId);
       await this.getJobDetail(jobId);
-      this.prepared =  true;
       if (this.item.delayCreateCountDown > 0 || this.item.delayDeleteCountDown > 0) {
         this.keepCountDown = true;
         this.countDown();
       }
-      this.podList = await getPods(this.item.id);
-      if (this.isDistributed) {
-        if (this.podList.length) {
-          this.activeLogTab = this.podList[0].podName;
-          this.podLogLoadTags = {};
-          this.$nextTick(() => {
-            this.$refs.podLogContainer.reset();
-            this.podLogLoadTags[this.activeLogTab] = true;
-          });
-        }
-        return;
-      }
-      if (this.item.trainStatus !== 7 && this.podList.length) {
-        this.$nextTick(() => {
-          this.$refs.logContainer.reset();
-        });
-      }
-    },
-    onClose() {
-      this.keepCountDown = false;
-      this.prepared = false;
-    },
-    onLogTabClick() {
-      if (!this.podLogLoadTags[this.activeLogTab]) {
-        this.$nextTick(() => {
-          this.$refs.podLogContainer.reset();
-          this.podLogLoadTags[this.activeLogTab] = true;
-        });
-      }
     },
     async getJobDetail(jobId) {
       this.item = await getJobDetail(jobId);
     },
-    async getGarafana() {
-      const res = await getGarafanaInfo(this.item.id);
-      if (res.length) {
-        const newWindow = window.open('', '_blank');
-        res.forEach(item => {
-          newWindow.document.write(
-            `<p>${item.jobPodName}</p>
-             <iframe src="${item.jobMetricsGrafanaUrl}" style = 'width: 100%; height: 100%;' scrolling="yes"></iframe>`,
-          );
-        });
+    async getPodList(jobId) {
+      this.podList = await getPods(jobId);
+    },
+    onSelectedPodChange() {
+      this.$nextTick(() => {
+        this.$refs.podMonitor.init();
+      });
+    },
+    checkMetrics() {
+      if (this.item.k8sNamespace && this.item.jobName) {
+        this.metricsVisible = true;
       } else {
-        this.$message({
-          message: '暂无有效的监控信息',
-          type: 'warning',
-        });
+        this.$message.warning('命名空间或资源名称为空，无法查看监控信息');
       }
     },
+    onMetricsDialogOpened() {
+      this.podList.length && (this.selectedPod = [this.podList[0].podName]);
+      this.$nextTick(() => {
+        this.$refs.podMonitor.init();
+      });
+    },
+    onMetricsDialogClose() {
+      this.$refs.podMonitor.stop();
+      this.selectedPod = []; // 弹窗关闭时清空所选节点列表
+    },
+    onClose() {
+      this.keepCountDown = false;
+    },
+    onCheckLog() {
+      this.$emit('show-log', this.item);
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-#distributed-log-wrapper {
-  margin: 20px 0;
-}
-
-.log {
-  width: 90%;
-  height: 500px;
-  margin: 40px 5%;
-}
-
-.log-tabs {
-  margin: 0 5%;
-}
-
-.distributed-log {
-  margin-top: 60px;
-}
-
-.log-download-btn {
-  margin-right: 5%;
-}
+::v-deep .metrics-dialog {
+  margin-bottom: 5vh;
 
-.log-error-msg {
-  padding: 16px;
-  margin: 6px 0 0;
+  .el-dialog__body {
+    max-height: calc(90vh - 54px);
+    overflow-y: auto;
+  }
 }
 </style>
diff --git a/webapp/src/views/trainingJob/components/logDialog.vue b/webapp/src/views/trainingJob/components/logDialog.vue
new file mode 100644
index 0000000..514c5c8
--- /dev/null
+++ b/webapp/src/views/trainingJob/components/logDialog.vue
@@ -0,0 +1,246 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <el-dialog
+    :visible.sync="logVisible"
+    width="70%"
+    title="运行日志"
+    top="50px"
+    @open="onDialogOpen"
+    @close="onDialogClose"
+  >
+    <div class="flex flex-between">
+      <div v-if="isDistributed && podList.length">
+        <label>选择节点</label>
+        <InfoSelect
+          v-model="activeLogTab"
+          style="display: inline-block; width: 200px;"
+          placeholder="选择pod节点"
+          :dataSource="podList"
+          value-key="podName"
+          label-key="displayName"
+          clearable
+          default-first-option
+          filterable
+          @change="onLogChange"
+        />
+      </div>
+      <div class="btn">
+        <el-button v-if="isDistributed && podList.length" @click="() => doDownloadPodLog()"
+          >下载节点运行日志</el-button
+        >
+        <el-button
+          type="primary"
+          :disabled="!podList.length"
+          :loading="logDownloading"
+          @click="downloadTrainLog"
+          >下载{{ isDistributed ? '全部' : '' }}运行日志</el-button
+        >
+      </div>
+    </div>
+    <div id="log-wrapper">
+      <pod-log-container
+        v-if="!isDistributed && item.trainStatus !== 7 && logPodName"
+        ref="podLogContainer"
+        :pod="logPodName"
+        class="log single-log"
+      />
+      <div v-else-if="podList.length" id="distributed-log-wrapper">
+        <keep-alive>
+          <pod-log-container
+            :key="activePod.podName"
+            ref="podLogContainer"
+            :pod="activePod"
+            class="log distributed-log"
+          />
+        </keep-alive>
+      </div>
+      <div v-else class="log">
+        <p class="log-error-msg">暂无节点值</p>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { downloadFile } from '@/utils';
+import { getPods } from '@/api/trainingJob/job';
+import { downloadPodLog, batchDownloadPodLog, countPodLogs } from '@/api/system/pod';
+import podLogContainer from '@/components/LogContainer/podLogContainer';
+import InfoSelect from '@/components/InfoSelect/index';
+
+const LOG_DOWNLOAD_LINES_THRESHOLD = 100000; // 暂定阈值 100K 条
+
+export default {
+  name: 'LogDialog',
+  components: { podLogContainer, InfoSelect },
+  props: {},
+  data() {
+    return {
+      item: {},
+      logVisible: false,
+      logDownloading: false,
+      podList: [],
+      activeLogTab: null,
+      podLogLoadTags: {}, // 用于记录分布式训练中，节点的运行日志是否已加载过
+    };
+  },
+  computed: {
+    isDistributed() {
+      return this.item.trainType === 1;
+    },
+    logPodName() {
+      return this.podList[0];
+    },
+    activePod() {
+      return this.podList.find((pod) => pod.podName === this.activeLogTab) || {};
+    },
+    podLogOption() {
+      return { podName: this.activePod.podName };
+    },
+  },
+  methods: {
+    show(info) {
+      this.item = info;
+      this.logVisible = true;
+    },
+    async downloadTrainLog() {
+      this.logDownloading = true;
+      const logLines = await countPodLogs(this.item.k8sNamespace, this.podList);
+      if (!this.isDistributed) {
+        const pod = this.podList[0];
+        await this.doDownloadPodLog(pod, logLines[pod.podName], true);
+        this.logDownloading = false;
+      } else {
+        let count = 0;
+        this.podList.forEach((pod) => {
+          count += logLines[pod.podName];
+        });
+        // 日志总行数小于阈值，则打包下载，否则每节点单独下载
+        if (count < LOG_DOWNLOAD_LINES_THRESHOLD) {
+          const data = await batchDownloadPodLog({ podVOList: this.podList }).finally(() => {
+            this.logDownloading = false;
+          });
+          downloadFile(data, `${this.item.jobName}-log.zip`);
+        } else {
+          this.$message.warning(
+            '节点日志总行数过多，将以单个节点为单位分别下载日志，请允许多个文件下载'
+          );
+          const jobList = [];
+          this.podList.forEach((pod) => {
+            jobList.push(this.doDownloadPodLog(pod, logLines[pod.podName], false));
+          });
+          Promise.all(jobList).then(() => {
+            this.logDownloading = false;
+          });
+        }
+      }
+    },
+    /**
+     * 下载节点日志
+     * @param {*} pod 下载的 pod，如果为空则为 this.activePod
+     * @param {*} podLogLines 下载的 pod 对应的日志行数，如果为空则调用接口单独查询
+     * @param {*} divisionWarning 是否在超过阈值需要分片下载时进行提示
+     */
+    async doDownloadPodLog(pod, podLogLines, divisionWarning = true) {
+      pod = pod || this.activePod;
+      const { podName, namespace } = pod;
+      const displayName = this.item.jobName + (this.isDistributed ? `-${pod.displayName}` : '');
+      if (!podLogLines) {
+        const count = await countPodLogs(namespace, [pod]);
+        podLogLines = count[podName];
+      }
+      // 如果节点日志行数超过阈值，则以阈值行数为单位分片下载
+      if (podLogLines < LOG_DOWNLOAD_LINES_THRESHOLD) {
+        this.downloadPodLog({ podName, namespace }, `${displayName}-log.log`);
+      } else {
+        if (divisionWarning) {
+          this.$message.warning(
+            `目标 ${displayName} 日志总行数过多，将按行数进行日志分片下载，请允许多个文件下载`
+          );
+        }
+        let startLine = 1;
+        let lines = LOG_DOWNLOAD_LINES_THRESHOLD;
+        while (startLine < podLogLines) {
+          this.downloadPodLog(
+            { podName, namespace, startLine, lines },
+            `${displayName}-log-${startLine}-${startLine + lines - 1}.log`
+          );
+          startLine += lines;
+          lines =
+            podLogLines - startLine > LOG_DOWNLOAD_LINES_THRESHOLD
+              ? lines
+              : podLogLines - startLine;
+        }
+      }
+    },
+    async downloadPodLog(query, name) {
+      const data = await downloadPodLog(query);
+      downloadFile(data, name);
+    },
+    async onDialogOpen() {
+      this.podList = await getPods(this.item.id);
+      if (this.isDistributed) {
+        if (this.podList.length) {
+          this.activeLogTab = this.podList[0].podName;
+          this.podLogLoadTags = {};
+          this.$nextTick(() => {
+            this.$refs.podLogContainer.reset();
+            this.podLogLoadTags[this.activeLogTab] = true;
+          });
+        }
+        return;
+      }
+      if (this.item.trainStatus !== 7 && this.podList.length) {
+        this.$nextTick(() => {
+          this.$refs.podLogContainer.reset();
+        });
+      }
+    },
+    onDialogClose() {
+      this.$refs.podLogContainer && this.$refs.podLogContainer.stopPolling();
+    },
+    onLogChange() {
+      if (!this.activeLogTab) {
+        this.activeLogTab = this.podList[0].podName;
+      }
+      if (!this.podLogLoadTags[this.activeLogTab]) {
+        this.$nextTick(() => {
+          this.$refs.podLogContainer.reset();
+          this.podLogLoadTags[this.activeLogTab] = true;
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+#distributed-log-wrapper {
+  margin-bottom: 20px;
+}
+
+.log {
+  width: 100%;
+  height: calc(100vh - 316px);
+  margin: 20px 0;
+}
+
+.log-error-msg {
+  padding: 16px;
+  margin: 6px 0 0;
+}
+</style>
diff --git a/webapp/src/views/trainingJob/components/pathSelectDialog.vue b/webapp/src/views/trainingJob/components/pathSelectDialog.vue
index c5bdbdb..1919374 100644
--- a/webapp/src/views/trainingJob/components/pathSelectDialog.vue
+++ b/webapp/src/views/trainingJob/components/pathSelectDialog.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <!--训练管理页面-断点续训Dialog-->
@@ -23,10 +23,11 @@
     width="600px"
     @open="onDialogOpen"
     @opened="onDialogOpened"
-    @cancel="visible=false"
+    @cancel="visible = false"
     @ok="ok"
   >
-    <div v-if="fetchDone && treeList.length" class="fontBold">{{desc}}</div>
+    <div v-if="tip" class="ts-tip mb-20 px-20 py-10">{{ tip }}</div>
+    <div v-if="fetchDone && treeList.length" class="fontBold">{{ description }}</div>
     <div class="tree-container">
       <el-tree
         v-if="fetchDone"
@@ -34,12 +35,21 @@
         highlight-current
         :data="treeList"
         :empty-text="emptyText"
-        node-key="id"
+        node-key="originPath"
         :props="defaultProps"
-        :show-checkbox="type === 'modelDownload'"
+        show-checkbox
+        :check-strictly="type !== 'modelDownload'"
         :default-expanded-keys="defaultExpandedKeys.slice(0, 1)"
-        @node-click="handleNodeClick"
-      ></el-tree>
+        @check-change="checkChange"
+      >
+        <span slot-scope="{ node }" class="slot-t-node">
+          <i
+            :class="node.expanded ? 'el-icon-folder-opened' : 'el-icon-folder'"
+            style="color: #5872e5;"
+          />
+          <span>{{ node.label }}</span>
+        </span>
+      </el-tree>
     </div>
   </BaseModal>
 </template>
@@ -49,7 +59,7 @@ import { Loading } from 'element-ui';
 import BaseModal from '@/components/BaseModal';
 import { getTreeListFromFilepath } from '@/utils';
 import { resumeTrain } from '@/api/trainingJob/job';
-import { modelOfficial } from '../utils';
+import { copywriting } from '../utils';
 
 export default {
   name: 'JobResumeDialog',
@@ -66,16 +76,13 @@ export default {
   },
   data() {
     return {
-      title: '断点续训',
-      desc:'',
       visible: false,
       path: '',
       id: '',
-      fileName:'',
+      fileName: '',
       params: {},
       treeList: [],
       defaultExpandedKeys: [],
-      emptyText: '暂无数据',
       selectNode: null,
       defaultProps: {
         children: 'children',
@@ -84,48 +91,58 @@ export default {
       fetchDone: false,
     };
   },
+  computed: {
+    title() {
+      return copywriting.title[this.type];
+    },
+    tip() {
+      return copywriting.tip[this.type];
+    },
+    description() {
+      return copywriting.description[this.type];
+    },
+    emptyText() {
+      return copywriting.emptyText[this.type];
+    },
+  },
   methods: {
     show(item) {
       this.path = item.resumePath;
       this.id = item.id;
       this.fileName = item.fileName;
       this.params = item.params;
-      this.title = this.getCentext(this.type, 0);
-      this.desc = this.getCentext(this.type, 1);
-      this.emptyText = this.getCentext(this.type, 2);
       this.visible = true;
     },
-    getCentext(type='', num) {
-      if(modelOfficial[num][type]){
-        return modelOfficial[num][type];
-      }
-    },
     // handle
     async onDialogOpen() {
       this.fetchDone = false;
       this.treeList = [];
     },
     async onDialogOpened() {
-      const loadingInstance = Loading.service({ target: `.${this.classKey} .el-dialog__body` });
-      [this.treeList, this.defaultExpandedKeys] = await getTreeListFromFilepath(
-        this.path,
-      );
+      const loadingInstance = Loading.service({ target: `.${this.classKey} .tree-container` });
+      [this.treeList, this.defaultExpandedKeys] = await getTreeListFromFilepath(this.path);
       setTimeout(() => {
         loadingInstance.close();
         this.fetchDone = true;
       }, 500);
     },
-    handleNodeClick(data) {
-      this.selectNode = data;
+    checkChange(data, checked) {
+      if (this.type === 'modelDownload') return;
+      if (checked) {
+        this.selectNode = data;
+        this.$refs.tree.setCheckedNodes([data]);
+      } else if (this.selectNode === data) {
+        this.selectNode = null;
+      }
     },
-    ok(){
-      if (this.type==='jobResume') {
+    ok() {
+      if (this.type === 'jobResume') {
         this.chooseToResume();
-      } else if (this.type==='modelDownload') {
+      } else if (this.type === 'modelDownload') {
         const nodes = this.$refs.tree.getCheckedNodes();
         const downList = [];
         const pidList = [];
-        for(const node of nodes) {
+        for (const node of nodes) {
           if (pidList.indexOf(node.pid) === -1) {
             downList.push(node.originPath);
           }
@@ -144,7 +161,7 @@ export default {
         });
         return;
       }
-      const loadingInstance = Loading.service({target:'.el-dialog__body'});
+      const loadingInstance = Loading.service({ target: '.el-dialog__body' });
       const params = {
         id: this.id,
         path: this.selectNode.originPath,
@@ -164,12 +181,12 @@ export default {
         });
         return;
       }
-      this.visible = false; 
+      this.visible = false;
       const index = list[0].indexOf('/out/');
       if (index !== -1) {
         const beforePath = list[0].substring(0, index);
         let afterPathList = [];
-        afterPathList = list.map(item => item.substring(index + 1, item.length));
+        afterPathList = list.map((item) => item.substring(index + 1, item.length));
         if (afterPathList.length && afterPathList[0] === 'out/') {
           afterPathList[0] = 'out';
         }
diff --git a/webapp/src/views/trainingJob/detail.vue b/webapp/src/views/trainingJob/detail.vue
index a1ed6fe..a52f2ab 100644
--- a/webapp/src/views/trainingJob/detail.vue
+++ b/webapp/src/views/trainingJob/detail.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
@@ -25,30 +25,25 @@
       @sort-change="handleSortChange"
       @row-click="onRowClick"
     >
-      <el-table-column prop="id" label="版本ID" sortable="custom" />
       <el-table-column prop="trainVersion" label="版本" sortable="custom" />
       <el-table-column prop="runtime" label="训练时长" sortable="custom" />
       <el-table-column prop="trainStatus" label="状态">
         <template #header>
-          <el-dropdown trigger="click" placement="bottom-start" @command="cmd => filter('trainStatus', cmd)">
-            <span>
-              状态
-              <i class="el-icon-arrow-down el-icon--right" />
-            </span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item
-                v-for="item in jobStatusList"
-                :key="item.id"
-                :command="item.value"
-              >{{ item.label }}</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+          <DropdownHeader
+            title="状态"
+            :list="jobStatusList"
+            @command="(cmd) => filter('trainStatus', cmd)"
+          />
         </template>
         <template slot-scope="scope">
-          <el-tag
-            :type="map[scope.row.trainStatus].tagMap"
-            effect="plain"
-          >{{ dict.label.job_status[scope.row.trainStatus] || '--' }}</el-tag>
+          <el-tag :type="statusTagMap[scope.row.trainStatus]" effect="plain">{{
+            statusNameMap[scope.row.trainStatus] || '--'
+          }}</el-tag>
+          <msg-popover
+            :status-detail="scope.row.statusDetail"
+            :show="showPopover(scope.row.trainStatus)"
+            :empty-text="messageText(scope.row.trainStatus)"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="createTime" label="创建时间" sortable="custom">
@@ -60,78 +55,85 @@
         <template slot-scope="scope">
           <!--状态：0为待处理，1为运行中 -->
           <el-button
-            v-if="map[scope.row.trainStatus].statusMap==='running'"
-            :id="`doStop_`+scope.$index"
+            v-if="statusFlagMap[scope.row.trainStatus] === 'running'"
+            :id="`doStop_` + scope.$index"
             type="text"
             @click.stop="doStop(scope.row.id)"
-          >停止</el-button>
+            >停止</el-button
+          >
           <!--状态：2为运行完成，3为失败，4为停止，5为未知 -->
           <el-button
-            v-if="map[scope.row.trainStatus].statusMap==='done'"
-            :id="`goEdit_`+scope.$index"
+            v-if="statusFlagMap[scope.row.trainStatus] === 'done'"
+            :id="`goEdit_` + scope.$index"
             type="text"
             @click.stop="goEdit(scope.row, 'edit')"
-          >修改</el-button>
-          <el-button
-            :id="`goVisual_`+scope.$index"
-            :disabled="!scope.row.visualizedLogPath"
-            type="text"
-            @click.stop="goVisual(scope.row.jobName)"
-          >可视化</el-button>
+            >修改</el-button
+          >
+          <el-button :id="`showLog_` + scope.$index" type="text" @click.stop="onShowLog(scope.row)"
+            >运行日志</el-button
+          >
           <!-- 状态为 4 (停止) 时，在下拉菜单中展示保存模型 -->
           <el-button
             v-show="scope.row.trainStatus !== 4"
-            :id="`goSaveModel_`+scope.$index"
-            :disabled="!scope.row.outPath"
+            :id="`goSaveModel_` + scope.$index"
+            :disabled="!scope.row.modelPath"
             type="text"
             @click.stop="goSaveModel(scope.row)"
-          >保存模型</el-button>
+            >保存模型</el-button
+          >
           <el-button
             v-show="scope.row.trainStatus === 4"
-            :id="`doResume_`+scope.$index"
-            :disabled="!scope.row.outPath"
+            :id="`doResume_` + scope.$index"
+            :disabled="!scope.row.modelPath"
             type="text"
             @click.stop="doResume(scope.row)"
-          >断点续训</el-button>
+            >断点续训</el-button
+          >
           <el-dropdown>
-            <el-button type="text" style="margin-left: 10px;" @click.stop="()=>{}">
+            <el-button type="text" style="margin-left: 10px;" @click.stop="() => {}">
               更多<i class="el-icon-arrow-down el-icon--right" />
             </el-button>
             <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                :id="`goVisual_` + scope.$index"
+                :disabled="!scope.row.visualizedLogPath"
+                @click.native="goVisual(scope.row.jobName)"
+              >
+                <el-button :disabled="!scope.row.visualizedLogPath" type="text"
+                  >可视化&nbsp;<IconFont type="externallink"
+                /></el-button>
+              </el-dropdown-item>
               <!-- 状态为 4 (停止) 时，在下拉菜单中展示保存模型 -->
               <el-dropdown-item
                 v-show="scope.row.trainStatus === 4"
-                :id="`goSaveModel_inside_`+scope.$index"
+                :id="`goSaveModel_inside_` + scope.$index"
+                :disabled="!scope.row.modelPath"
                 @click.native="goSaveModel(scope.row)"
               >
-                <el-button
-                  :disabled="!scope.row.outPath"
-                  type="text"
-                >保存模型</el-button>
+                <el-button :disabled="!scope.row.modelPath" type="text">保存模型</el-button>
               </el-dropdown-item>
               <el-dropdown-item
-                :id="`goEditParams_`+scope.$index"
-                :disabled="map[scope.row.trainStatus].statusMap!=='done'"
+                :id="`goEditParams_` + scope.$index"
+                :disabled="statusFlagMap[scope.row.trainStatus] !== 'done'"
                 @click.native="goEdit(scope.row, 'saveParams')"
               >
                 <!--状态：2为运行完成，3为失败，4为停止，5为未知 -->
-                <el-button
-                  :disabled="map[scope.row.trainStatus].statusMap!=='done'"
-                  type="text"
-                >保存任务模板</el-button>
+                <el-button :disabled="statusFlagMap[scope.row.trainStatus] !== 'done'" type="text"
+                  >保存任务模板</el-button
+                >
               </el-dropdown-item>
               <el-dropdown-item
-                :id="`doDelete_`+scope.$index"
-                :disabled="map[scope.row.trainStatus].statusMap!=='done'"
+                :id="`doDelete_` + scope.$index"
+                :disabled="statusFlagMap[scope.row.trainStatus] !== 'done'"
                 @click.native="doDelete(scope.row.id)"
               >
                 <!--状态：2为运行完成，3为失败，4为停止，5为未知 -->
-                <el-button
-                  :disabled="map[scope.row.trainStatus].statusMap!=='done'"
-                  type="text"
-                >删除</el-button>
+                <el-button :disabled="statusFlagMap[scope.row.trainStatus] !== 'done'" type="text"
+                  >删除</el-button
+                >
               </el-dropdown-item>
-            </el-dropdown-menu></el-dropdown>
+            </el-dropdown-menu></el-dropdown
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -142,7 +144,7 @@
       :okText="dialogType === 'edit' ? '开始训练' : '保存'"
       :loading="submitLoading"
       width="50%"
-      @cancel="showDialog=false"
+      @cancel="showDialog = false"
       @ok="doEdit"
     >
       <job-form
@@ -154,10 +156,7 @@
       />
     </BaseModal>
     <!--保存模型Dialog-->
-    <save-model-dialog
-      ref="saveModel"
-      type="training"
-    />
+    <save-model-dialog ref="saveModel" type="training" />
     <!--断点续训Dialog-->
     <path-select-dialog
       ref="pathSelect"
@@ -166,6 +165,8 @@
       @chooseDone="chooseDone"
       @chooseModel="chooseModel"
     />
+    <!-- 运行日志Dialog -->
+    <log-dialog ref="logDialog" />
     <!--右边侧边栏-->
     <el-drawer
       :visible.sync="drawerVisible"
@@ -174,32 +175,49 @@
       :size="'50%'"
       @close="handleDrawerClose"
     >
-      <job-drawer ref="jobDrawer" />
+      <job-drawer ref="jobDrawer" @show-log="onShowLog" />
     </el-drawer>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { debounce } from 'throttle-debounce';
 
 import CRUD, { presenter, header, crud } from '@crud/crud';
-import { Constant } from '@/utils';
-import crudJob, { getJobList, stop as stopJob, del as deleteJob, edit as editJob } from '@/api/trainingJob/job';
+import { Constant, generateMap } from '@/utils';
+import crudJob, {
+  getJobList,
+  stop as stopJob,
+  del as deleteJob,
+  edit as editJob,
+  getJobDetail,
+} from '@/api/trainingJob/job';
 import { add as addParams } from '@/api/trainingJob/params';
 import BaseModal from '@/components/BaseModal';
 import JobForm from '@/components/Training/jobForm';
+import MsgPopover from '@/components/MsgPopover';
 import SaveModelDialog from '@/components/Training/saveModelDialog';
+import DropdownHeader from '@/components/DropdownHeader';
+
 import pathSelectDialog from './components/pathSelectDialog';
 import jobDrawer from './components/jobDrawer';
-import { trainingStatusMap as map } from './utils';
+import LogDialog from './components/logDialog';
+import { TRAINING_STATUS_ENUM, TRAINING_STATUS_MAP } from './utils';
 
 export default {
   name: 'JobDetail',
-  dicts: ['job_status'],
-  components: { BaseModal, JobForm, jobDrawer, SaveModelDialog, pathSelectDialog },
+  components: {
+    BaseModal,
+    JobForm,
+    jobDrawer,
+    SaveModelDialog,
+    pathSelectDialog,
+    LogDialog,
+    MsgPopover,
+    DropdownHeader,
+  },
   cruds() {
     return CRUD({
       crudMethod: { ...crudJob },
@@ -217,7 +235,6 @@ export default {
       id: null,
       tableList: [], // 任务版本列表
       params: {},
-      map,
       pathType: '', // 目录树选择类型
       keepPool: true,
       showDialog: false,
@@ -229,10 +246,12 @@ export default {
       submitLoading: false,
       resumeLoading: false,
       rules: {
-        parentId: [
-          { required: true, message: '请选择模型', trigger: 'blur' },
-        ],
+        parentId: [{ required: true, message: '请选择模型', trigger: 'blur' }],
       },
+      selectedTrain: {},
+      statusNameMap: generateMap(TRAINING_STATUS_MAP, 'name'),
+      statusTagMap: generateMap(TRAINING_STATUS_MAP, 'tagMap'),
+      statusFlagMap: generateMap(TRAINING_STATUS_MAP, 'statusMap'),
     };
   },
   beforeRouteEnter(to, from, next) {
@@ -243,11 +262,13 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
-      'user',
-    ]),
+    ...mapGetters(['user']),
     jobStatusList() {
-      return [{ label: '全部', value: null }].concat(this.dict.job_status);
+      const list = [{ label: '全部', value: null }];
+      Object.keys(this.statusNameMap).forEach((status) => {
+        list.push({ label: this.statusNameMap[status], value: status });
+      });
+      return list;
     },
   },
   mounted() {
@@ -266,6 +287,14 @@ export default {
         this.$refs.jobDrawer.onOpen(row.id);
       });
     },
+    async onShowLog(row) {
+      if (row.k8sNamespace) {
+        this.selectedTrain = row;
+      } else {
+        await this.getJobDetail(row.id);
+      }
+      this.$refs.logDialog.show(this.selectedTrain);
+    },
     handleSortChange({ prop, order }) {
       const sortParams = {
         sort: order ? prop : undefined,
@@ -279,10 +308,13 @@ export default {
     },
     // 页面逻辑
     async getJobList() {
-      const params = {trainId: this.id, ...this.params};
+      const params = { trainId: this.id, ...this.params };
       const data = await getJobList(params);
       this.tableList = data;
-      if (this.keepPool && this.tableList.some(item => item.trainStatus === 0 || item.trainStatus === 1)) {
+      if (
+        this.keepPool &&
+        this.tableList.some((item) => item.trainStatus === 0 || item.trainStatus === 1)
+      ) {
         setTimeout(() => {
           this.refetch(); // 如果有中间状态就进入轮询
         }, 1000);
@@ -351,12 +383,13 @@ export default {
         algorithmId: model.algorithmId,
         algorithmName: model.algorithmName,
         algorithmSource: model.algorithmSource,
-        algorithmUsage: model.algorithmUsage,
-        modelAddress: model.outPath,
+        modelClassName: model.algorithmUsage,
+        modelAddress: model.modelPath,
       };
+      this.getJobDetail(model.id);
       this.$nextTick(() => {
         this.$refs.pathSelect.show({
-          resumePath: `${model.outPath}/`,
+          resumePath: `${model.modelPath}/`,
           id: model.algorithmId,
           params: modelParams,
         });
@@ -367,47 +400,46 @@ export default {
       this.$refs.jobFormEdit.save();
     },
     doStop(id) {
-      this.$confirm('此操作将停止该任务版本, 是否继续?', '请确认')
-        .then(async() => {
-          const params = {
-            trainId: this.id,
-            id,
-          };
-          await stopJob(params);
-          this.$message({
-            message: '停止成功',
-            type: 'success',
-          });
-          this.refreshList();
+      this.$confirm('此操作将停止该任务版本, 是否继续?', '请确认').then(async () => {
+        const params = {
+          trainId: this.id,
+          id,
+        };
+        await stopJob(params);
+        this.$message({
+          message: '停止成功',
+          type: 'success',
         });
+        this.refreshList();
+      });
     },
     doDelete(id) {
-      const alertText = this.tableList.length === 1
-        ? '此版本为该训练唯一的版本，如果删除该版本，对应的训练任务将一并删除, 是否继续?'
-        : '此操作将删除该任务版本, 是否继续?';
-      this.$confirm(alertText, '请确认')
-        .then(async() => {
-          const params = {
-            trainId: this.id,
-            id,
-          };
-          await deleteJob(params);
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-          });
-          if (this.tableList.length === 1) {
-            this.$router.push({ path: '/training/job' });
-          } else {
-            this.refreshList();
-          }
+      const alertText =
+        this.tableList.length === 1
+          ? '此版本为该训练唯一的版本，如果删除该版本，对应的训练任务将一并删除, 是否继续?'
+          : '此操作将删除该任务版本, 是否继续?';
+      this.$confirm(alertText, '请确认').then(async () => {
+        const params = {
+          trainId: this.id,
+          id,
+        };
+        await deleteJob(params);
+        this.$message({
+          message: '删除成功',
+          type: 'success',
         });
+        if (this.tableList.length === 1) {
+          this.$router.push({ path: '/training/job' });
+        } else {
+          this.refreshList();
+        }
+      });
     },
     async doResume(item) {
       this.pathType = 'jobResume';
       this.$nextTick(() => {
         this.$refs.pathSelect.show({
-          resumePath: `${item.outPath}/`,
+          resumePath: `${item.modelPath}/`,
           id: item.id,
         });
       });
@@ -416,9 +448,27 @@ export default {
       this.refreshList();
     },
     chooseModel(selectPath, params) {
-      Object.assign(params, {modelAddress: selectPath});
+      Object.assign(params, {
+        modelAddress: selectPath,
+        frameType: this.selectedTrain.frameType && String(this.selectedTrain.frameType),
+      });
       this.$refs.saveModel.show(params);
     },
+    async getJobDetail(jobId) {
+      this.selectedTrain = await getJobDetail(jobId);
+    },
+
+    showPopover(trainStatus) {
+      return [
+        TRAINING_STATUS_ENUM.PENDING,
+        TRAINING_STATUS_ENUM.UNKNOW,
+        TRAINING_STATUS_ENUM.CREATE_FAILED,
+      ].includes(trainStatus);
+    },
+
+    messageText(trainStatus) {
+      return trainStatus ? '暂无提示信息' : '容器正在启动中';
+    },
   },
 };
 </script>
diff --git a/webapp/src/views/trainingJob/index.vue b/webapp/src/views/trainingJob/index.vue
index 7c17b53..61b5282 100644
--- a/webapp/src/views/trainingJob/index.vue
+++ b/webapp/src/views/trainingJob/index.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="app-container">
@@ -28,7 +28,8 @@
             icon="el-icon-plus"
             round
             @click="toAdd"
-          >创建训练任务</el-button>
+            >创建训练任务</el-button
+          >
         </span>
         <span class="cd-opts-right">
           <span slot="right">
@@ -58,7 +59,9 @@
             </template>
             <span>
               <el-button id="resetQuery" class="filter-item" @click="resetQuery">重置</el-button>
-              <el-button id="toQuery" class="filter-item" type="primary" @click="toQuery">搜索</el-button>
+              <el-button id="toQuery" class="filter-item" type="primary" @click="toQuery"
+                >搜索</el-button
+              >
             </span>
           </span>
         </span>
@@ -76,16 +79,15 @@
 </template>
 
 <script>
-import jobList from "./jobList";
-import jobParam from "./jobParam";
+import jobList from './jobList';
+import jobParam from './jobParam';
 
 export default {
-  name: "Job",
-  dicts: ["job_status"],
+  name: 'Job',
   components: { jobList, jobParam },
   data() {
     return {
-      active: "0",
+      active: '0',
       id: null,
       currentPage: 1,
       jobQuery: {
@@ -99,13 +101,13 @@ export default {
   },
   computed: {
     isAllTrain() {
-      return this.active === "0";
+      return this.active === '0';
     },
     isRunningTrain() {
-      return this.active === "1";
+      return this.active === '1';
     },
     isParams() {
-      return this.active === "2";
+      return this.active === '2';
     },
   },
   mounted() {
@@ -115,8 +117,8 @@ export default {
     });
   },
   beforeRouteEnter(to, from, next) {
-    if (from.name === "JobDetail" && from.params.currentPage) {
-      next(vm => {
+    if (from.name === 'JobDetail' && from.params.currentPage) {
+      next((vm) => {
         vm.currentPage = from.params.currentPage;
       });
       return;
@@ -126,9 +128,8 @@ export default {
   methods: {
     // tab change
     handleClick() {
-      this.jobQuery.trainStatus = this.isRunningTrain ? 1 : undefined;
       this.currentPage = 1;
-      this.toQuery();
+      this.resetQuery();
     },
     // ACTION
     toQuery() {
@@ -144,7 +145,7 @@ export default {
       }
     },
     toAdd() {
-      this.$router.push({ path: "/training/jobadd" });
+      this.$router.push({ path: '/training/jobadd' });
     },
     resetQuery() {
       if (this.isParams) {
diff --git a/webapp/src/views/trainingJob/jobList.vue b/webapp/src/views/trainingJob/jobList.vue
index 30dd576..58339f3 100644
--- a/webapp/src/views/trainingJob/jobList.vue
+++ b/webapp/src/views/trainingJob/jobList.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
@@ -27,17 +27,14 @@
       <el-table-column prop="trainId" label="ID" sortable="custom" width="80" fixed />
       <el-table-column prop="trainName" label="名称" min-width="160" fixed>
         <template slot-scope="scope">
-          <el-link @click="goDetail('detail', scope.row.trainId)">{{ scope.row.trainName }}</el-link>
+          <el-link type="primary" @click="goDetail('detail', scope.row.trainId)">{{
+            scope.row.trainName
+          }}</el-link>
         </template>
       </el-table-column>
       <el-table-column prop="versionNum" label="现有版本数目" min-width="160" />
       <el-table-column prop="runtime" label="训练时长" sortable="custom" min-width="160" />
-      <el-table-column
-        v-if="isAllTrain"
-        prop="trainStatus"
-        label="状态"
-        width="160"
-      >
+      <el-table-column v-if="isAllTrain" prop="trainStatus" label="状态" width="160">
         <template #header>
           <dropdown-header
             title="状态"
@@ -47,10 +44,9 @@
           />
         </template>
         <template slot-scope="scope">
-          <el-tag
-            :type="map[scope.row.trainStatus].tagMap"
-            effect="plain"
-          >{{ dict.label.job_status[scope.row.trainStatus] || '--' }}</el-tag>
+          <el-tag :type="statusTagMap[scope.row.trainStatus]" effect="plain">{{
+            statusNameMap[scope.row.trainStatus] || '--'
+          }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column prop="createTime" label="创建时间" sortable="custom" width="160">
@@ -62,18 +58,20 @@
         <template slot-scope="scope">
           <!--状态：0为待处理，1为运行中 -->
           <el-button
-            v-if="map[scope.row.trainStatus].statusMap==='running'"
-            :id="`doStop_`+scope.$index"
+            v-if="statusFlagMap[scope.row.trainStatus] === 'running'"
+            :id="`doStop_` + scope.$index"
             type="text"
             @click.stop="doStop(scope.row.trainId)"
-          >停止</el-button>
+            >停止</el-button
+          >
           <!--状态：2为运行完成，3为运行失败，4为停止，5为未知，7为创建失败 -->
           <el-button
-            v-if="map[scope.row.trainStatus].statusMap==='done'"
-            :id="`doDelete_`+scope.$index"
+            v-if="statusFlagMap[scope.row.trainStatus] === 'done'"
+            :id="`doDelete_` + scope.$index"
             type="text"
             @click.stop="doDelete(scope.row.trainId)"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -87,11 +85,11 @@ import CRUD, { presenter, header, crud } from '@crud/crud';
 import pagination from '@crud/Pagination';
 import crudJob, { stop as stopJob, del as deleteJob } from '@/api/trainingJob/job';
 import DropdownHeader from '@/components/DropdownHeader';
-import { trainingStatusMap as map } from './utils';
+import { generateMap } from '@/utils';
+import { TRAINING_STATUS_MAP } from './utils';
 
 export default {
   name: 'Job',
-  dicts: ['job_status'],
   components: { pagination, DropdownHeader },
   cruds() {
     return CRUD({
@@ -119,21 +117,27 @@ export default {
   data() {
     return {
       id: null,
-      map,
       localQuery: {
         trainName: null,
         trainStatus: 1,
       },
+      statusNameMap: generateMap(TRAINING_STATUS_MAP, 'name'),
+      statusTagMap: generateMap(TRAINING_STATUS_MAP, 'tagMap'),
+      statusFlagMap: generateMap(TRAINING_STATUS_MAP, 'statusMap'),
     };
   },
   computed: {
     jobStatusList() {
-      return [{ label: '全部', value: null }].concat(this.dict.job_status);
+      const list = [{ label: '全部', value: null }];
+      Object.keys(this.statusNameMap).forEach((status) => {
+        list.push({ label: this.statusNameMap[status], value: status });
+      });
+      return list;
     },
   },
   methods: {
     toQuery(params) {
-      this.crud.query = { ...params};
+      this.crud.query = { ...params };
       this.$nextTick(() => {
         this.crud.refresh();
       });
@@ -149,32 +153,30 @@ export default {
     },
     // op
     doStop(id) {
-      this.$confirm('此操作将停止该任务下所有版本, 是否继续?', '请确认')
-        .then(async() => {
-          const params = {
-            trainId: id,
-          };
-          await stopJob(params);
-          this.$message({
-            message: '停止成功',
-            type: 'success',
-          });
-          this.crud.refresh();
+      this.$confirm('此操作将停止该任务下所有版本, 是否继续?', '请确认').then(async () => {
+        const params = {
+          trainId: id,
+        };
+        await stopJob(params);
+        this.$message({
+          message: '停止成功',
+          type: 'success',
         });
+        this.crud.refresh();
+      });
     },
     doDelete(id) {
-      this.$confirm('此操作将删除该任务及所有版本, 是否继续?', '请确认')
-        .then(async() => {
-          const params = {
-            trainId: id,
-          };
-          await deleteJob(params);
-          this.$message({
-            message: '删除成功',
-            type: 'success',
-          });
-          this.crud.refresh();
+      this.$confirm('此操作将删除该任务及所有版本, 是否继续?', '请确认').then(async () => {
+        const params = {
+          trainId: id,
+        };
+        await deleteJob(params);
+        this.$message({
+          message: '删除成功',
+          type: 'success',
         });
+        this.crud.refresh();
+      });
     },
     filterByStatus(status) {
       this.crud.query.trainStatus = status;
diff --git a/webapp/src/views/trainingJob/jobParam.vue b/webapp/src/views/trainingJob/jobParam.vue
index af44ec1..bb3c56b 100644
--- a/webapp/src/views/trainingJob/jobParam.vue
+++ b/webapp/src/views/trainingJob/jobParam.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
@@ -36,7 +36,7 @@
             title="节点类型"
             :list="resourcesPoolTypeList"
             :filtered="Boolean(filterParams.resourcesPoolType)"
-            @command="cmd => filter('resourcesPoolType', cmd)"
+            @command="(cmd) => filter('resourcesPoolType', cmd)"
           />
         </template>
         <template slot-scope="scope">
@@ -45,9 +45,21 @@
       </el-table-column>
       <el-table-column label="操作" width="200" fixed="right">
         <template slot-scope="scope">
-          <el-button :id="`goTraining_`+scope.$index" type="text" @click.stop="goTraining(scope.row)">创建训练任务</el-button>
-          <el-button :id="`doEdit_`+scope.$index" type="text" @click.stop="doEdit(scope.row)">编辑</el-button>
-          <el-button :id="`doDelete_`+scope.$index" type="text" @click.stop="doDelete(scope.row.id)">删除</el-button>
+          <el-button
+            :id="`goTraining_` + scope.$index"
+            type="text"
+            @click.stop="goTraining(scope.row)"
+            >创建训练任务</el-button
+          >
+          <el-button :id="`doEdit_` + scope.$index" type="text" @click.stop="doEdit(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            :id="`doDelete_` + scope.$index"
+            type="text"
+            @click.stop="doDelete(scope.row.id)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -60,14 +72,14 @@
       :title="crud.status.title"
       :loading="loading"
       width="50%"
-      @cancel="showDialog=false"
+      @cancel="showDialog = false"
       @ok="toEdit"
     >
-      <job-form 
+      <job-form
         v-if="reFresh"
         ref="form"
         :widthPercent="100"
-        type="paramEdit"
+        type="paramsEdit"
         @getForm="getForm"
       />
     </BaseModal>
@@ -146,7 +158,7 @@ export default {
   },
   methods: {
     toQuery(params) {
-      this.crud.query = { ...params};
+      this.crud.query = { ...params };
       this.crud.toQuery();
     },
     filter(column, value) {
@@ -177,7 +189,7 @@ export default {
       this.$refs.form.save();
     },
     async getForm(form) {
-      const params = { ...form};
+      const params = { ...form };
       this.loading = true;
       await editParams(params).finally(() => {
         this.loading = false;
@@ -192,7 +204,7 @@ export default {
     // op
     doEdit(paramsDataObj) {
       this.reFresh = false;
-      this.$nextTick(async() => {
+      this.$nextTick(async () => {
         this.showDialog = true;
         this.$nextTick(() => {
           this.$refs.form.initForm(paramsDataObj);
@@ -201,7 +213,7 @@ export default {
       });
     },
     async doDelete(id) {
-      this.$confirm('此操作将永久删除该任务模板配置, 是否继续?', '请确认').then(async() => {
+      this.$confirm('此操作将永久删除该任务模板配置, 是否继续?', '请确认').then(async () => {
         await deleteParams({ ids: [id] });
         this.$message({
           message: '删除成功',
diff --git a/webapp/src/views/trainingJob/trainingVisualList.vue b/webapp/src/views/trainingJob/trainingVisualList.vue
new file mode 100644
index 0000000..92bfb7c
--- /dev/null
+++ b/webapp/src/views/trainingJob/trainingVisualList.vue
@@ -0,0 +1,79 @@
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
+
+<template>
+  <div class="app-container">
+    <ProTable
+      :show-create="false"
+      :form-items="trainVisualQueryFormItems"
+      :columns="trainVisualColumns"
+      :list-request="getTrainingVisualList"
+    />
+  </div>
+</template>
+
+<script>
+import { computed } from '@vue/composition-api';
+
+import ProTable from '@/components/ProTable';
+import { getTrainingVisualList } from '@/api/trainingJob/job';
+import { generateMap } from '@/utils';
+
+import { trainVisualQueryFormItems, getTrainVisualColumns, TRAINING_STATUS_MAP } from './utils';
+
+export default {
+  name: 'VisualTrainList',
+  components: {
+    ProTable,
+  },
+  setup(props, { root }) {
+    // 打开可视化
+    const goVisual = (row) => {
+      const { href } = root.$router.resolve({
+        name: 'VISUAL',
+        query: {
+          id: root.$store.getters.user.id,
+          trainJobName: row.jobName,
+        },
+      });
+      window.open(href, '_blank');
+    };
+
+    // 获取表头
+    const jobStatusList = computed(() => {
+      const list = [{ label: '全部', value: null }];
+      const statusNameMap = generateMap(TRAINING_STATUS_MAP, 'name');
+      Object.keys(statusNameMap).forEach((status) => {
+        list.push({ label: statusNameMap[status], value: status });
+      });
+      return list;
+    });
+    const trainVisualColumns = computed(() => {
+      return getTrainVisualColumns({
+        goVisual,
+        jobStatusList,
+      });
+    });
+
+    return {
+      trainVisualQueryFormItems,
+      trainVisualColumns,
+      getTrainingVisualList,
+      jobStatusList,
+    };
+  },
+};
+</script>
diff --git a/webapp/src/views/trainingJob/utils.js b/webapp/src/views/trainingJob/utils.js
index 4228b69..fe17d89 100644
--- a/webapp/src/views/trainingJob/utils.js
+++ b/webapp/src/views/trainingJob/utils.js
@@ -1,57 +1,162 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
-// 训练状态
-export const trainingStatusMap = {
-  0: { statusMap: 'running' },
-  1: { statusMap: 'running' },
-  2: { tagMap: 'success', statusMap: 'done' },
-  3: { tagMap: 'danger', statusMap: 'done' },
-  4: { tagMap: 'info', statusMap: 'done' },
-  5: { statusMap: 'done' },
-  7: { tagMap: 'danger', statusMap: 'done' },
+// 训练状态枚举
+export const TRAINING_STATUS_ENUM = {
+  PENDING: 0, // 待处理
+  RUNNING: 1, // 运行中
+  FINISHED: 2, // 运行完成
+  FAILED: 3, // 运行失败
+  STOPED: 4, // 停止
+  UNKNOW: 5, // 未知
+  CREATE_FAILED: 7, // 创建失败
+};
+
+// 训练状态匹配
+export const TRAINING_STATUS_MAP = {
+  [TRAINING_STATUS_ENUM.PENDING]: { name: '待处理', statusMap: 'running' },
+  [TRAINING_STATUS_ENUM.RUNNING]: { name: '运行中', statusMap: 'running' },
+  [TRAINING_STATUS_ENUM.FINISHED]: { name: '运行完成', tagMap: 'success', statusMap: 'done' },
+  [TRAINING_STATUS_ENUM.FAILED]: { name: '运行失败', tagMap: 'danger', statusMap: 'done' },
+  [TRAINING_STATUS_ENUM.STOPED]: { name: '停止', tagMap: 'info', statusMap: 'done' },
+  [TRAINING_STATUS_ENUM.UNKNOW]: { name: '未知', statusMap: 'done' },
+  [TRAINING_STATUS_ENUM.CREATE_FAILED]: { name: '创建失败', tagMap: 'danger', statusMap: 'done' },
 };
 
 // 目录树弹窗文案
-export const modelOfficial = [
-  {
-    'jobResume':'断点续训',
-    'modelDownload':'模型下载',
-    'modelSelect':'模型选择',
+export const copywriting = {
+  title: {
+    jobResume: '断点续训',
+    modelDownload: '模型下载',
+    modelSelect: '模型选择',
   },
-  {
-    'jobResume':'请选择从哪里开始继续训练',
-    'modelDownload': '请选择需要下载的模型文件目录',
-    'modelSelect': '请选择要保存的模型',
+  description: {
+    jobResume: '请选择模型并开始训练',
+    modelDownload: '请选择需要下载的模型文件目录',
+    modelSelect: '请选择要保存的模型',
   },
-  {
-    'jobResume':'暂无数据，无法断点续训',
-    'modelDownload': '暂无数据',
-    'modelSelect': '暂无模型数据',
+  emptyText: {
+    jobResume: '暂无数据，无法断点续训',
+    modelDownload: '暂无数据',
+    modelSelect: '暂无模型数据',
   },
-];
+  tip: {
+    jobResume:
+      '此功能将会以用户选择的模型作为预训练模型进行新一轮训练，之前的训练结果将被覆盖且无法找回。建议先保存模型！',
+  },
+};
 
 // 镜像管理相关参数
-export const IMAGE_TABS = {
-  TRAIN: '0',       // 训练镜像
-  PRESET: '1',      // 训练预置镜像
-  NOTEBOOK: '2',    // notebook镜像
+export const IMAGE_RESOURCE_ENUM = {
+  CUSTOM: '0', // 训练镜像
+  PRESET: '1', // 训练预置镜像
+  NOTEBOOK: '2', // notebook镜像
 };
 
 export const IMAGE_PROJECT_TYPE = {
-  TRAIN: 1,    // 训练镜像和预置镜像类型
+  TRAIN: 1, // 训练镜像和预置镜像类型
   NOTEBOOK: 0, // notebook镜像类型
-};
\ No newline at end of file
+};
+
+// 训练可视化列表页查询项
+export const trainVisualQueryFormItems = [
+  {
+    prop: 'trainName',
+    placeholder: '请输入训练名称',
+    class: 'w-200',
+    change: 'query',
+  },
+  {
+    prop: 'createTime',
+    startPlaceholder: '开始时间',
+    endPlaceholder: '结束时间',
+    type: 'date',
+    dateType: 'datetimerange',
+    defaultTime: ['00:00:00', '23:59:59'],
+    pickerOptions: {
+      disabledDate(time) {
+        return time.getTime() > new Date().setHours(23, 59, 59, 999);
+      },
+    },
+    valueFormat: 'timestamp',
+    change: 'query',
+  },
+  {
+    type: 'button',
+    btnText: '重置',
+    func: 'resetQuery',
+  },
+  {
+    type: 'button',
+    btnText: '搜索',
+    btnType: 'primary',
+    func: 'query',
+  },
+];
+
+// 训练可视化列表页表头
+export function getTrainVisualColumns({ goVisual, jobStatusList }) {
+  const statusTagMap = {};
+  Object.keys(TRAINING_STATUS_MAP).forEach((key) => {
+    statusTagMap[key] = TRAINING_STATUS_MAP[key].tagMap;
+  });
+  return [
+    {
+      label: '名称',
+      prop: 'trainName',
+      minWidth: '160px',
+    },
+    {
+      label: '版本',
+      prop: 'trainVersion',
+      sortable: 'custom',
+    },
+    {
+      label: '训练时长',
+      prop: 'runtime',
+      sortable: 'custom',
+    },
+    {
+      label: '状态',
+      prop: 'trainStatus',
+      dropdownList: jobStatusList.value,
+      formatter(value) {
+        return jobStatusList.value.find((status) => status.value === String(value))?.label;
+      },
+      type: 'tag',
+      tagMap: statusTagMap,
+    },
+    {
+      label: '创建时间',
+      prop: 'createTime',
+      type: 'time',
+      minWidth: '160px',
+      sortable: 'custom',
+    },
+    {
+      label: '操作',
+      type: 'operation',
+      width: '370px',
+      operations: [
+        {
+          label: '可视化',
+          func: goVisual,
+          iconAfter: 'externallink',
+        },
+      ],
+    },
+  ];
+}
diff --git a/webapp/src/views/user/center.vue b/webapp/src/views/user/center.vue
index 018103a..7c3f6cf 100644
--- a/webapp/src/views/user/center.vue
+++ b/webapp/src/views/user/center.vue
@@ -1,24 +1,15 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div class="app-container">
     <el-card class="box-card">
       <!--    个人信息    -->
-      <img :src="user.avatar" title="点击上传头像" class="avatar" @click="openUploadDialog">
+      <img :src="user.avatar" title="点击上传头像" class="avatar" @click="openUploadDialog" />
       <div class="info-row">
         <div class="info-label">登录账号</div>
         <div class="info-text">{{ user.username }}</div>
@@ -130,19 +121,21 @@ export default {
         ],
         phone: [
           { required: true, message: '请输入手机号码', trigger: 'blur' },
-          { pattern: /^1\d{10}$/, message: '请输入正确的11位手机号码', trigger: ['blur', 'change'] },
+          {
+            pattern: /^1\d{10}$/,
+            message: '请输入正确的11位手机号码',
+            trigger: ['blur', 'change'],
+          },
         ],
       },
       uploadFilters: [invalidFileNameChar],
     };
   },
   computed: {
-    ...mapGetters([
-      'user',
-    ]),
+    ...mapGetters(['user']),
     userRoles() {
       const roles = this.user.roles || [];
-      const names = roles.map(role => role.name);
+      const names = roles.map((role) => role.name);
       return names.join(' ') || '-';
     },
     uploadParams() {
@@ -161,15 +154,14 @@ export default {
       updateAvatar({
         path: `${bucketName}/${filePath}`,
         realName: `${bucketHost}/${bucketName}/${filePath}`,
-      })
-        .then(() => {
-          this.$notify({
-            title: '头像修改成功',
-            type: 'success',
-            duration: 2500,
-          });
-          store.dispatch('GetUserInfo').then(() => {});
+      }).then(() => {
+        this.$notify({
+          title: '头像修改成功',
+          type: 'success',
+          duration: 2500,
         });
+        store.dispatch('GetUserInfo').then(() => {});
+      });
     },
     uploadError() {
       this.$message({
@@ -196,14 +188,17 @@ export default {
         this.$refs.form.validate((valid) => {
           if (valid) {
             this.saveLoading = true;
-            store.dispatch('UpdateUserInfo', this.form).then(() => {
-              this.editSuccessNotify();
-              this.saveLoading = false;
-              this.infoDialog = false;
-            }).catch(() => {
-              this.saveLoading = false;
-              this.infoDialog = false;
-            });
+            store
+              .dispatch('UpdateUserInfo', this.form)
+              .then(() => {
+                this.editSuccessNotify();
+                this.saveLoading = false;
+                this.infoDialog = false;
+              })
+              .catch(() => {
+                this.saveLoading = false;
+                this.infoDialog = false;
+              });
           }
         });
       }
@@ -213,24 +208,24 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .avatar {
-    display: block;
-    width: 120px;
-    height: 120px;
-    margin: 20px 0;
-    cursor: pointer;
-    border-radius: 50%;
-    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.31), 0 1px 3px rgba(0, 0, 0, 0.08);
-  }
+.avatar {
+  display: block;
+  width: 120px;
+  height: 120px;
+  margin: 20px 0;
+  cursor: pointer;
+  border-radius: 50%;
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.31), 0 1px 3px rgba(0, 0, 0, 0.08);
+}
 
-  .info-row {
-    display: flex;
-    height: 32px;
-    font-size: 14px;
-    line-height: 32px;
-  }
+.info-row {
+  display: flex;
+  height: 32px;
+  font-size: 14px;
+  line-height: 32px;
+}
 
-  .info-label {
-    width: 100px;
-  }
+.info-label {
+  width: 100px;
+}
 </style>
diff --git a/webapp/src/views/user/components/updateEmail.vue b/webapp/src/views/user/components/updateEmail.vue
index 0c8979e..6b174f2 100644
--- a/webapp/src/views/user/components/updateEmail.vue
+++ b/webapp/src/views/user/components/updateEmail.vue
@@ -1,18 +1,9 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div style="display: inline-block;">
@@ -30,7 +21,13 @@
         </el-form-item>
         <el-form-item label="验证码" prop="code">
           <el-input v-model="form.code" style="width: 160px;" />
-          <el-button :loading="codeLoading" :disabled="isDisabled" style="width: 155px;" @click="sendCode">{{ buttonName }}</el-button>
+          <el-button
+            :loading="codeLoading"
+            :disabled="isDisabled"
+            style="width: 155px;"
+            @click="sendCode"
+            >{{ buttonName }}</el-button
+          >
         </el-form-item>
         <el-form-item label="当前密码" prop="pass">
           <el-input v-model="form.pass" type="password" style="width: 320px;" />
@@ -71,26 +68,24 @@ export default {
       }
     };
     return {
-      loading: false, dialog: false, title: '修改邮箱', form: { pass: '', email: '', code: '' },
-      users: { email: '', password: '' }, codeLoading: false,
-      buttonName: '获取验证码', isDisabled: false, time: 60,
+      loading: false,
+      dialog: false,
+      title: '修改邮箱',
+      form: { pass: '', email: '', code: '' },
+      users: { email: '', password: '' },
+      codeLoading: false,
+      buttonName: '获取验证码',
+      isDisabled: false,
+      time: 60,
       rules: {
-        pass: [
-          { required: true, message: '当前密码不能为空', trigger: 'blur' },
-        ],
-        email: [
-          { required: true, validator: validMail, trigger: 'blur' },
-        ],
-        code: [
-          { required: true, message: '验证码不能为空', trigger: 'blur' },
-        ],
+        pass: [{ required: true, message: '当前密码不能为空', trigger: 'blur' }],
+        email: [{ required: true, validator: validMail, trigger: 'blur' }],
+        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }],
       },
     };
   },
   computed: {
-    ...mapGetters([
-      'user',
-    ]),
+    ...mapGetters(['user']),
   },
   methods: {
     sendCode() {
@@ -101,33 +96,35 @@ export default {
           email: this.form.email,
           type: 2,
         };
-        getCodeBySentEmail(codeData).then(() => {
-          this.$message({
-            showClose: true,
-            message: '发送成功，验证码有效期5分钟',
-            type: 'success',
-          });
-          this.codeLoading = false;
-          this.isDisabled = true;
-          this.buttonName = `${this.time -= 1 }秒后重新发送`;
-          this.timer = window.setInterval(() => {
-            this.buttonName = `${this.time  }秒后重新发送`;
-            this.time -= 1;
-            if (this.time < 0) {
-              this.buttonName = '重新发送';
-              this.time = 60;
-              this.isDisabled = false;
-              window.clearInterval(this.timer);
-            }
-          }, 1000);
-        }).catch(err => {
-          this.resetForm();
-          this.codeLoading = false;
-          this.$message({
-            message: err.message,
-            type: 'error',
+        getCodeBySentEmail(codeData)
+          .then(() => {
+            this.$message({
+              showClose: true,
+              message: '发送成功，验证码有效期5分钟',
+              type: 'success',
+            });
+            this.codeLoading = false;
+            this.isDisabled = true;
+            this.buttonName = `${(this.time -= 1)}秒后重新发送`;
+            this.timer = window.setInterval(() => {
+              this.buttonName = `${this.time}秒后重新发送`;
+              this.time -= 1;
+              if (this.time < 0) {
+                this.buttonName = '重新发送';
+                this.time = 60;
+                this.isDisabled = false;
+                window.clearInterval(this.timer);
+              }
+            }, 1000);
+          })
+          .catch((err) => {
+            this.resetForm();
+            this.codeLoading = false;
+            this.$message({
+              message: err.message,
+              type: 'error',
+            });
           });
-        });
       }
     },
     doSubmit() {
@@ -140,26 +137,28 @@ export default {
             code: this.form.code,
             userId: this.user.id,
           };
-          resetEmail(formData).then(() => {
-            this.dialog = false;
-            this.loading = false;
-            this.resetForm();
-            this.$notify({
-              title: '邮箱修改成功',
-              type: 'success',
-              duration: 1500,
-            });
-            store.dispatch('GetUserInfo').then(() => {});
-          }).catch(err => {
-            this.loading = false;
-            this.$message({
-              message: err.message,
-              type: 'error',
+          resetEmail(formData)
+            .then(() => {
+              this.dialog = false;
+              this.loading = false;
+              this.resetForm();
+              this.$notify({
+                title: '邮箱修改成功',
+                type: 'success',
+                duration: 1500,
+              });
+              store.dispatch('GetUserInfo').then(() => {});
+            })
+            .catch((err) => {
+              this.loading = false;
+              this.$message({
+                message: err.message,
+                type: 'error',
+              });
             });
-          });
-        } else {
-          return false;
+          return true;
         }
+        return false;
       });
     },
     resetForm() {
@@ -173,4 +172,3 @@ export default {
   },
 };
 </script>
-
diff --git a/webapp/src/views/user/components/updatePass.vue b/webapp/src/views/user/components/updatePass.vue
index fe29b23..d296e19 100644
--- a/webapp/src/views/user/components/updatePass.vue
+++ b/webapp/src/views/user/components/updatePass.vue
@@ -1,18 +1,9 @@
-/*
-* Copyright 2019-2020 Zheng Jie
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+/* * Copyright 2019-2020 Zheng Jie * * Licensed under the Apache License, Version 2.0 (the
+"License"); * you may not use this file except in compliance with the License. * You may obtain a
+copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by
+applicable law or agreed to in writing, software * distributed under the License is distributed on
+an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See
+the License for the specific language governing permissions and * limitations under the License. */
 
 <template>
   <div style="display: inline-block;">
@@ -26,13 +17,28 @@
     >
       <el-form ref="form" :model="form" :rules="rules" label-width="88px">
         <el-form-item label="旧密码" prop="oldPass">
-          <el-input v-model="form.oldPass" type="password" auto-complete="on" style="width: 370px;" />
+          <el-input
+            v-model="form.oldPass"
+            type="password"
+            auto-complete="on"
+            style="width: 370px;"
+          />
         </el-form-item>
         <el-form-item label="新密码" prop="newPass">
-          <el-input v-model="form.newPass" type="password" auto-complete="on" style="width: 370px;" />
+          <el-input
+            v-model="form.newPass"
+            type="password"
+            auto-complete="on"
+            style="width: 370px;"
+          />
         </el-form-item>
         <el-form-item label="确认密码" prop="confirmPass">
-          <el-input v-model="form.confirmPass" type="password" auto-complete="on" style="width: 370px;" />
+          <el-input
+            v-model="form.confirmPass"
+            type="password"
+            auto-complete="on"
+            style="width: 370px;"
+          />
         </el-form-item>
       </el-form>
     </BaseModal>
@@ -60,18 +66,17 @@ export default {
       }
     };
     return {
-      loading: false, dialog: false, title: '修改密码', form: { oldPass: '', newPass: '', confirmPass: '' },
+      loading: false,
+      dialog: false,
+      title: '修改密码',
+      form: { oldPass: '', newPass: '', confirmPass: '' },
       rules: {
-        oldPass: [
-          { required: true, message: '请输入旧密码', trigger: 'blur' },
-        ],
+        oldPass: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
         newPass: [
           { required: true, message: '请输入新密码', trigger: 'blur' },
           { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
         ],
-        confirmPass: [
-          { required: true, validator: confirmPass, trigger: 'blur' },
-        ],
+        confirmPass: [{ required: true, validator: confirmPass, trigger: 'blur' }],
       },
     };
   },
@@ -84,30 +89,32 @@ export default {
             oldPass: encrypt(this.form.oldPass),
             newPass: encrypt(this.form.newPass),
           };
-          updatePass(formData).then(() => {
-            this.resetForm();
-            this.loading = false;
-            this.dialog = false;
-            this.$notify({
-              title: '密码修改成功，请重新登录',
-              type: 'success',
-              duration: 1500,
-            });
-            setTimeout(() => {
-              store.dispatch('LogOut').then(() => {
-                location.reload();
+          updatePass(formData)
+            .then(() => {
+              this.resetForm();
+              this.loading = false;
+              this.dialog = false;
+              this.$notify({
+                title: '密码修改成功，请重新登录',
+                type: 'success',
+                duration: 1500,
+              });
+              setTimeout(() => {
+                store.dispatch('LogOut').then(() => {
+                  window.location.reload();
+                });
+              }, 1500);
+            })
+            .catch((err) => {
+              this.loading = false;
+              this.$message({
+                message: err.message,
+                type: 'error',
               });
-            }, 1500);
-          }).catch(err => {
-            this.loading = false;
-            this.$message({
-              message: err.message,
-              type: 'error',
             });
-          });
-        } else {
-          return false;
+          return true;
         }
+        return false;
       });
     },
     resetForm() {
diff --git a/webapp/src/views/visual/Layout.vue b/webapp/src/views/visual/Layout.vue
index e9e6ffa..b3e716f 100644
--- a/webapp/src/views/visual/Layout.vue
+++ b/webapp/src/views/visual/Layout.vue
@@ -1,29 +1,29 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="layout-root layout-same-style" style="width: 100%;">
-    <el-dialog title="图片保存选项" :visible.sync="dialogFormVisible" class="layout-svg-save-dialog">
+    <el-dialog
+      title="图片保存选项"
+      :visible.sync="dialogFormVisible"
+      class="layout-svg-save-dialog"
+    >
       <el-form :model="form">
         <el-form-item label="图片名称" :label-width="formLabelWidth">
-          <el-input
-            v-model="form.input"
-            placeholder="请输入名称"
-            clearable
-          />
+          <el-input v-model="form.input" placeholder="请输入名称" clearable />
         </el-form-item>
         <el-form-item label="图片格式" :label-width="formLabelWidth">
           <el-select v-model="form.type" placeholder="请选择保存图片格式">
@@ -38,390 +38,541 @@
         <el-button type="primary" @click="downloadSvg">确 定</el-button>
       </div>
     </el-dialog>
-    <el-dialog title="全力加载中,请稍等..." :visible.sync="initWaitVisible" class="layout-svg-save-dialog">
+    <el-dialog
+      title="全力加载中,请稍等..."
+      :visible.sync="initWaitVisible"
+      class="layout-svg-save-dialog"
+    >
       <i class="el-icon-loading" />
     </el-dialog>
     <el-dialog :visible.sync="operationGuide" title="操作指南" class="layout-svg">
       <div id="write" class="">
         <h2>
-          <a name="模型结构" class="md-header-anchor"/>
-          <span>模型结构</span></h2>
+          <a name="模型结构" class="md-header-anchor" />
+          <span>模型结构</span>
+        </h2>
         <h3>
-          <a name="主体界面" class="md-header-anchor"/>
-          <span>主体界面</span></h3>
+          <a name="主体界面" class="md-header-anchor" />
+          <span>主体界面</span>
+        </h3>
         <p>
-          <span>1.通过滚轮实现图的放大与缩小</span></p>
+          <span>1.通过滚轮实现图的放大与缩小</span>
+        </p>
         <p>
-          <span>2.通过单击鼠标左键并移动实现图的移动</span></p>
+          <span>2.通过单击鼠标左键并移动实现图的移动</span>
+        </p>
         <p>
-          <span>3.单击节点会将节点具体信息显示在菜单栏，同时，与该节点相连的其他节点以及边都会标红</span></p>
+          <span
+            >3.单击节点会将节点具体信息显示在菜单栏，同时，与该节点相连的其他节点以及边都会标红</span
+          >
+        </p>
         <p>
-          <span>4.双击节点可以实现节点的展开与缩回</span></p>
+          <span>4.双击节点可以实现节点的展开与缩回</span>
+        </p>
         <p>
-          <span>5.右键节点可以对节点进行边的隐藏、显示以及删除操作</span></p>
+          <span>5.右键节点可以对节点进行边的隐藏、显示以及删除操作</span>
+        </p>
         <p>
-          <span>6.当通过右键删除节点时，节点会被放置在右侧的隐藏栏中。双击隐藏栏内的节点可以实现节点的放回</span></p>
+          <span
+            >6.当通过右键删除节点时，节点会被放置在右侧的隐藏栏中。双击隐藏栏内的节点可以实现节点的放回</span
+          >
+        </p>
         <h3>
-          <a name="功能栏" class="md-header-anchor"/>
-          <span>功能栏</span></h3>
+          <a name="功能栏" class="md-header-anchor" />
+          <span>功能栏</span>
+        </h3>
         <h4>
-          <a name="计算图" class="md-header-anchor"/>
-          <span>计算图</span></h4>
+          <a name="计算图" class="md-header-anchor" />
+          <span>计算图</span>
+        </h4>
         <p>
           <span>1.用户通过条件的输入与选择实现针对节点的</span>
-          <strong>
-            <span>批量筛选</span></strong>
+          <strong> <span>批量筛选</span></strong>
         </p>
         <p>
           <span>2.</span>
-          <strong>
-            <span>隐藏</span></strong>
-          <span>按钮用于实现针对符合批量筛选条件节点的隐藏，但并没有改变图的结构</span></p>
+          <strong> <span>隐藏</span></strong>
+          <span>按钮用于实现针对符合批量筛选条件节点的隐藏，但并没有改变图的结构</span>
+        </p>
         <p>
           <span>3.</span>
-          <strong>
-            <span>布局</span></strong>
-          <span>按钮用于实现针对符合批量筛选条件以及单独隐藏节点的删除与重新布局，该操作会让剩余节点在当前新条件下重新绘制，会改变图的结构</span></p>
+          <strong> <span>布局</span></strong>
+          <span
+            >按钮用于实现针对符合批量筛选条件以及单独隐藏节点的删除与重新布局，该操作会让剩余节点在当前新条件下重新绘制，会改变图的结构</span
+          >
+        </p>
         <p>
           <span>4.</span>
-          <strong>
-            <span>上一步</span></strong>
-          <span>按钮用于返回用户的之前一步操作</span></p>
+          <strong> <span>上一步</span></strong>
+          <span>按钮用于返回用户的之前一步操作</span>
+        </p>
         <p>
           <span>5.</span>
-          <strong>
-            <span>初始化</span></strong>
-          <span>按钮用于将图重置为最初未经改变的图像</span></p>
+          <strong> <span>初始化</span></strong>
+          <span>按钮用于将图重置为最初未经改变的图像</span>
+        </p>
         <h4>
-          <a name="结构图" class="md-header-anchor"/>
-          <span>结构图</span></h4>
+          <a name="结构图" class="md-header-anchor" />
+          <span>结构图</span>
+        </h4>
         <p>
-          <span>1.下拉框用于实现同数据集下结构图的切换</span></p>
+          <span>1.下拉框用于实现同数据集下结构图的切换</span>
+        </p>
         <p>
           <span>2.</span>
-          <strong>
-            <span>布局</span></strong>
-          <span>按钮用于实现针对单独隐藏节点的删除与重新布局，该操作会让剩余节点在当前新条件下重新绘制，会改变图的结构</span></p>
+          <strong> <span>布局</span></strong>
+          <span
+            >按钮用于实现针对单独隐藏节点的删除与重新布局，该操作会让剩余节点在当前新条件下重新绘制，会改变图的结构</span
+          >
+        </p>
         <h4>
-          <a name="数据信息栏" class="md-header-anchor"/>
-          <span>数据信息栏</span></h4>
+          <a name="数据信息栏" class="md-header-anchor" />
+          <span>数据信息栏</span>
+        </h4>
         <p>
           <span>信息栏用于显示单击特定节点时节点的全部信息，可通过</span>
-          <strong>
-            <span>箭头</span></strong>
-          <span>按钮实现对信息的折叠与展开</span></p>
+          <strong> <span>箭头</span></strong>
+          <span>按钮实现对信息的折叠与展开</span>
+        </p>
         <p>&nbsp;</p>
-        <hr >
+        <hr />
         <p>&nbsp;</p>
         <h2>
-          <a name="标量数据" class="md-header-anchor"/>
-          <span>标量数据</span></h2>
+          <a name="标量数据" class="md-header-anchor" />
+          <span>标量数据</span>
+        </h2>
         <h3>
-          <a name="主体界面-n308" class="md-header-anchor"/>
-          <span>主体界面</span></h3>
+          <a name="主体界面-n308" class="md-header-anchor" />
+          <span>主体界面</span>
+        </h3>
         <p>
-          <span>标量图表操作：</span></p>
+          <span>标量图表操作：</span>
+        </p>
         <ol>
           <li>
-            <span>不同分类的图表组可以单击选择关闭或打开视图</span></li>
+            <span>不同分类的图表组可以单击选择关闭或打开视图</span>
+          </li>
           <li>
-            <span>可以鼠标移动到数据上显示数据信息</span></li>
+            <span>可以鼠标移动到数据上显示数据信息</span>
+          </li>
           <li>
-            <span>每一图表右上角有放大缩小按钮</span></li>
+            <span>每一图表右上角有放大缩小按钮</span>
+          </li>
           <li>
-            <span>右上角矩形框可为用户定制所用，选中后再按定制按钮就可以把数据迁移上用户定制上；也可为合并多个图表时所用</span></li>
+            <span
+              >右上角矩形框可为用户定制所用，选中后再按定制按钮就可以把数据迁移上用户定制上；也可为合并多个图表时所用</span
+            >
+          </li>
           <li>
-            <span>在图表内部拖动鼠标选择一个方形区域可进行图表局部放大，双击图表可还原</span></li>
+            <span>在图表内部拖动鼠标选择一个方形区域可进行图表局部放大，双击图表可还原</span>
+          </li>
         </ol>
         <h3>
-          <a name="控制栏" class="md-header-anchor"/>
-          <span>控制栏</span></h3>
+          <a name="控制栏" class="md-header-anchor" />
+          <span>控制栏</span>
+        </h3>
         <p>
-          <span>Smooth：调整数据显示平滑程度，选择范围为（0 ~ 0.9）</span></p>
+          <span>Smooth：调整数据显示平滑程度，选择范围为（0 ~ 0.9）</span>
+        </p>
         <p>
-          <span>Y-axis：调整y轴数据显示方式，共两种，一种是linear（原始数据），一种是log-linear（取对数后的数据）</span></p>
+          <span
+            >Y-axis：调整y轴数据显示方式，共两种，一种是linear（原始数据），一种是log-linear（取对数后的数据）</span
+          >
+        </p>
         <p>
-          <span>合并按钮：将勾选中的图表进行合并，合并限制：至多可勾选两种tag的图表，至多可勾选6幅图表</span></p>
+          <span
+            >合并按钮：将勾选中的图表进行合并，合并限制：至多可勾选两种tag的图表，至多可勾选6幅图表</span
+          >
+        </p>
         <p>
-          <span>还原按钮：将勾选中的合并图表进行还原</span></p>
+          <span>还原按钮：将勾选中的合并图表进行还原</span>
+        </p>
         <h3>
-          <a name="数据信息栏-n326" class="md-header-anchor"/>
-          <span>数据信息栏</span></h3>
+          <a name="数据信息栏-n326" class="md-header-anchor" />
+          <span>数据信息栏</span>
+        </h3>
         <p>
-          <span>暂无数据</span></p>
+          <span>暂无数据</span>
+        </p>
         <p>&nbsp;</p>
-        <hr >
+        <hr />
         <p>&nbsp;</p>
         <h2>
-          <a name="媒体数据" class="md-header-anchor"/>
-          <span>媒体数据</span></h2>
+          <a name="媒体数据" class="md-header-anchor" />
+          <span>媒体数据</span>
+        </h2>
         <h3>
-          <a name="主体界面-n452" class="md-header-anchor"/>
-          <span>主体界面</span></h3>
+          <a name="主体界面-n452" class="md-header-anchor" />
+          <span>主体界面</span>
+        </h3>
         <p>
-          <span>可以显示文本，图像，音频</span></p>
+          <span>可以显示文本，图像，音频</span>
+        </p>
         <h4>
-          <a name="文本" class="md-header-anchor"/>
-          <span>文本</span></h4>
+          <a name="文本" class="md-header-anchor" />
+          <span>文本</span>
+        </h4>
         <ol>
           <li>
-            <span>显示相应的数据</span></li>
+            <span>显示相应的数据</span>
+          </li>
           <li>
-            <span>slider 可以对step进行拖拽</span></li>
+            <span>slider 可以对step进行拖拽</span>
+          </li>
         </ol>
         <h4>
-          <a name="图像" class="md-header-anchor"/>
-          <span>图像</span></h4>
+          <a name="图像" class="md-header-anchor" />
+          <span>图像</span>
+        </h4>
         <ol>
           <li>
-            <span>可以对图像进行点击，显示大图</span></li>
+            <span>可以对图像进行点击，显示大图</span>
+          </li>
           <li>
-            <span>slider 可以对step进行拖拽</span></li>
+            <span>slider 可以对step进行拖拽</span>
+          </li>
         </ol>
         <h4>
-          <a name="音频" class="md-header-anchor"/>
-          <span>音频</span></h4>
+          <a name="音频" class="md-header-anchor" />
+          <span>音频</span>
+        </h4>
         <ol>
           <li>
-            <span>可以播放音频</span></li>
+            <span>可以播放音频</span>
+          </li>
           <li>
-            <span>slider 可以对step进行拖拽</span></li>
+            <span>slider 可以对step进行拖拽</span>
+          </li>
         </ol>
         <h3>
-          <a name="数据信息栏-n472" class="md-header-anchor"/>
-          <span>数据信息栏</span></h3>
+          <a name="数据信息栏-n472" class="md-header-anchor" />
+          <span>数据信息栏</span>
+        </h3>
         <ol>
           <li>
             <p>
-              <span>暂时为空</span></p>
+              <span>暂时为空</span>
+            </p>
             <p>&nbsp;</p>
           </li>
         </ol>
-        <hr >
+        <hr />
         <p>&nbsp;</p>
         <h2>
-          <a name="统计分析" class="md-header-anchor"/>
-          <span>统计分析</span></h2>
+          <a name="统计分析" class="md-header-anchor" />
+          <span>统计分析</span>
+        </h2>
         <h3>
-          <a name="主体界面-n551" class="md-header-anchor"/>
-          <span>主体界面</span></h3>
+          <a name="主体界面-n551" class="md-header-anchor" />
+          <span>主体界面</span>
+        </h3>
         <p>
-          <span>由直方图和分布图两部分组成</span></p>
+          <span>由直方图和分布图两部分组成</span>
+        </p>
         <p>
-          <span>直方图操作：</span></p>
+          <span>直方图操作：</span>
+        </p>
         <ol>
           <li>
-            <span>直方图可以单击选择关闭或打开视图</span></li>
+            <span>直方图可以单击选择关闭或打开视图</span>
+          </li>
           <li>
-            <span>可以鼠标移动到数据上显示数据信息</span></li>
+            <span>可以鼠标移动到数据上显示数据信息</span>
+          </li>
           <li>
-            <span>每一直方图右上角有放大缩小按钮</span></li>
+            <span>每一直方图右上角有放大缩小按钮</span>
+          </li>
           <li>
-            <span>右上角矩形框为用户定制所用，选中后再按定制按钮就可以把数据迁移上用户定制上</span></li>
+            <span>右上角矩形框为用户定制所用，选中后再按定制按钮就可以把数据迁移上用户定制上</span>
+          </li>
         </ol>
         <p>
-          <span>分布图操作：</span></p>
+          <span>分布图操作：</span>
+        </p>
         <ol>
           <li>
-            <span>分布图可以单击选择关闭或打开视图</span></li>
+            <span>分布图可以单击选择关闭或打开视图</span>
+          </li>
           <li>
-            <span>每一直方图右上角有放大缩小按钮</span></li>
+            <span>每一直方图右上角有放大缩小按钮</span>
+          </li>
           <li>
-            <span>右上角矩形框为用户定制所用，选中后再按定制按钮就可以把数据迁移上用户定制上</span></li>
+            <span>右上角矩形框为用户定制所用，选中后再按定制按钮就可以把数据迁移上用户定制上</span>
+          </li>
         </ol>
         <h3>
-          <a name="控制栏-n571" class="md-header-anchor"/>
-          <span>控制栏</span></h3>
+          <a name="控制栏-n571" class="md-header-anchor" />
+          <span>控制栏</span>
+        </h3>
         <p>
-          <span>直方图控制栏：</span></p>
+          <span>直方图控制栏：</span>
+        </p>
         <p>
-          <span>数据显示比率参数：调整数据显示数量</span></p>
+          <span>数据显示比率参数：调整数据显示数量</span>
+        </p>
         <p>
-          <span>统计区间个数参数：调整总体数据的统计区间个数</span></p>
+          <span>统计区间个数参数：调整总体数据的统计区间个数</span>
+        </p>
         <p>
-          <span>模式下拉框：直方图三维或二维显示</span></p>
+          <span>模式下拉框：直方图三维或二维显示</span>
+        </p>
         <p>&nbsp;</p>
         <h3>
-          <a name="数据信息栏-n577" class="md-header-anchor"/>
-          <span>数据信息栏</span></h3>
+          <a name="数据信息栏-n577" class="md-header-anchor" />
+          <span>数据信息栏</span>
+        </h3>
         <p>
-          <span>显示直方图选中的原始数据</span></p>
+          <span>显示直方图选中的原始数据</span>
+        </p>
         <p>&nbsp;</p>
-        <hr >
+        <hr />
         <p>&nbsp;</p>
         <h2>
-          <a name="降维分析" class="md-header-anchor"/>
-          <span>降维分析</span></h2>
+          <a name="降维分析" class="md-header-anchor" />
+          <span>降维分析</span>
+        </h2>
         <h3>
-          <a name="主体界面-n671" class="md-header-anchor"/>
-          <span>主体界面</span></h3>
+          <a name="主体界面-n671" class="md-header-anchor" />
+          <span>主体界面</span>
+        </h3>
         <p>
-          <span>可以显示2维，3维分类结果</span></p>
+          <span>可以显示2维，3维分类结果</span>
+        </p>
         <h4>
-          <a name="2维操作" class="md-header-anchor"/>
-          <span>2维操作</span></h4>
+          <a name="2维操作" class="md-header-anchor" />
+          <span>2维操作</span>
+        </h4>
         <ol>
           <li>
-            <span>可以对点(线条)进行点击，数据信息栏会显示存储的图片/文本</span></li>
+            <span>可以对点(线条)进行点击，数据信息栏会显示存储的图片/文本</span>
+          </li>
           <li>
-            <span>鼠标移动上去可以简单显示对应的点和标签</span></li>
+            <span>鼠标移动上去可以简单显示对应的点和标签</span>
+          </li>
           <li>
-            <span>拖拽可以对点进行局部放大</span></li>
+            <span>拖拽可以对点进行局部放大</span>
+          </li>
           <li>
-            <span>双击显示窗口可以回到初始的显示界面</span></li>
+            <span>双击显示窗口可以回到初始的显示界面</span>
+          </li>
         </ol>
         <h4>
-          <a name="3维操作" class="md-header-anchor"/>
-          <span>3维操作</span></h4>
+          <a name="3维操作" class="md-header-anchor" />
+          <span>3维操作</span>
+        </h4>
         <ol>
           <li>
-            <span>可以对点(线条)进行点击，数据信息栏会显示存储的图片/文本</span></li>
+            <span>可以对点(线条)进行点击，数据信息栏会显示存储的图片/文本</span>
+          </li>
           <li>
-            <span>鼠标移动上去可以简单显示对应的点和标签</span></li>
+            <span>鼠标移动上去可以简单显示对应的点和标签</span>
+          </li>
           <li>
-            <span>鼠标滚轮可以进行缩放</span></li>
+            <span>鼠标滚轮可以进行缩放</span>
+          </li>
         </ol>
         <h3>
-          <a name="控制面板" class="md-header-anchor"/>
-          <span>控制面板</span></h3>
+          <a name="控制面板" class="md-header-anchor" />
+          <span>控制面板</span>
+        </h3>
         <ol>
           <li>
-            <span>可以选择对应的标签(Tag)</span></li>
+            <span>可以选择对应的标签(Tag)</span>
+          </li>
           <li>
-            <span>可以选择对应的降维方法(PCA TSNE)</span></li>
+            <span>可以选择对应的降维方法(PCA TSNE)</span>
+          </li>
           <li>
-            <span>可以选择维度信息</span></li>
+            <span>可以选择维度信息</span>
+          </li>
           <li>
-            <span>播放按钮可以显示出step动态的动画（这个功能对于应2，3,4-8维）</span></li>
+            <span>播放按钮可以显示出step动态的动画（这个功能对于应2，3,4-8维）</span>
+          </li>
         </ol>
         <h3>
-          <a name="数据信息栏-n711" class="md-header-anchor"/>
-          <span>数据信息栏</span></h3>
+          <a name="数据信息栏-n711" class="md-header-anchor" />
+          <span>数据信息栏</span>
+        </h3>
         <ol>
           <li>
             <p>
-              <span>显示对应的数据（文字和图片）</span></p>
+              <span>显示对应的数据（文字和图片）</span>
+            </p>
             <p>&nbsp;</p>
           </li>
         </ol>
-        <hr >
+        <hr />
         <p>&nbsp;</p>
         <h2>
-          <a name="超参数" class="md-header-anchor"/>
-          <span>超参数</span></h2>
+          <a name="超参数" class="md-header-anchor" />
+          <span>超参数</span>
+        </h2>
         <h3>
-          <a name="主体界面-n767" class="md-header-anchor"/>
-          <span>主体界面</span></h3>
+          <a name="主体界面-n767" class="md-header-anchor" />
+          <span>主体界面</span>
+        </h3>
         <p>
-          <span>主界面由平行坐标以及表格数据</span></p>
+          <span>主界面由平行坐标以及表格数据</span>
+        </p>
         <p>
-          <span>平行坐标操作：</span></p>
+          <span>平行坐标操作：</span>
+        </p>
         <ol>
           <li>
-            <span>选择坐标轴上部分区域高亮显示对应的表格数据也会高亮</span></li>
+            <span>选择坐标轴上部分区域高亮显示对应的表格数据也会高亮</span>
+          </li>
           <li>
-            <span>鼠标移动到线上高亮显示</span></li>
+            <span>鼠标移动到线上高亮显示</span>
+          </li>
           <li>
-            <span>坐标轴移动以改变平行坐标</span></li>
+            <span>坐标轴移动以改变平行坐标</span>
+          </li>
         </ol>
         <p>
-          <span>表格操作：</span></p>
+          <span>表格操作：</span>
+        </p>
         <ol>
           <li>
-            <span>鼠标移动到某一行，平行坐标上对应数据会高亮显示</span></li>
+            <span>鼠标移动到某一行，平行坐标上对应数据会高亮显示</span>
+          </li>
         </ol>
         <h3>
-          <a name="控制面板-n783" class="md-header-anchor"/>
-          <span>控制面板</span></h3>
+          <a name="控制面板-n783" class="md-header-anchor" />
+          <span>控制面板</span>
+        </h3>
         <p>
-          <span>主参数 控制颜色映射对应的数据</span></p>
+          <span>主参数 控制颜色映射对应的数据</span>
+        </p>
         <p>
-          <span>坐标尺度： 数值型数据可以选择线性坐标轴和对数坐标轴</span></p>
+          <span>坐标尺度： 数值型数据可以选择线性坐标轴和对数坐标轴</span>
+        </p>
         <h3>
-          <a name="统计信息栏" class="md-header-anchor"/>
-          <span>统计信息栏</span></h3>
+          <a name="统计信息栏" class="md-header-anchor" />
+          <span>统计信息栏</span>
+        </h3>
         <p>
-          <span>显示选中的数据进行统计信息显示。</span></p>
+          <span>显示选中的数据进行统计信息显示。</span>
+        </p>
         <p>
-          <span>默认选中全部数据</span></p>
+          <span>默认选中全部数据</span>
+        </p>
         <h3>
-          <a name="数据信息栏-n789" class="md-header-anchor"/>
-          <span>数据信息栏</span></h3>
+          <a name="数据信息栏-n789" class="md-header-anchor" />
+          <span>数据信息栏</span>
+        </h3>
         <p>
-          <span>显示选中数据的原始信息。</span></p>
+          <span>显示选中数据的原始信息。</span>
+        </p>
         <p>&nbsp;</p>
-        <hr >
+        <hr />
         <p>&nbsp;</p>
         <h2>
-          <a name="异常检测" class="md-header-anchor"/>
-          <span>异常检测</span></h2>
+          <a name="异常检测" class="md-header-anchor" />
+          <span>异常检测</span>
+        </h2>
         <h3>
-          <a name="主体界面-n811" class="md-header-anchor"/>
-          <span>主体界面</span></h3>
+          <a name="主体界面-n811" class="md-header-anchor" />
+          <span>主体界面</span>
+        </h3>
         <p>
           <span>由直方图、颜色矩阵和盒须图三部分组成</span>
-          <span>直方图：数据的统计信息，区间不均匀分布，坐标轴上的红色标记对应盒须图异常点的上下边界</span>
-          <span>颜色矩阵：用矩形表示数值点，根据数值大小为矩形赋予一个颜色值，颜色矩阵可以通过滚轮放大缩小查看；</span>
-          <span/>
-          <span>颜色条上下三角形可拖动，只查看一定范围内的数值分布，数值大小超出上下三角形数值的矩形颜色变灰</span>
+          <span
+            >直方图：数据的统计信息，区间不均匀分布，坐标轴上的红色标记对应盒须图异常点的上下边界</span
+          >
+          <span
+            >颜色矩阵：用矩形表示数值点，根据数值大小为矩形赋予一个颜色值，颜色矩阵可以通过滚轮放大缩小查看；</span
+          >
+          <span />
+          <span
+            >颜色条上下三角形可拖动，只查看一定范围内的数值分布，数值大小超出上下三角形数值的矩形颜色变灰</span
+          >
           <span>盒须图：拖动下方坐标轴上的刷子可查看相应范围内的盒须图，</span>
-          <span/>
-          <span>点击某个盒须图，请求异常点数据，在盒须图中用红色圆圈标记出来，并把颜色矩阵中对应的矩形的边界高亮</span>
-          <span/>
+          <span />
+          <span
+            >点击某个盒须图，请求异常点数据，在盒须图中用红色圆圈标记出来，并把颜色矩阵中对应的矩形的边界高亮</span
+          >
+          <span />
           <span>异常值的上下边界也可拖拽，停止拖拽时会重新获取新范围外的异常点数据</span>
-          <span/>
+          <span />
         </p>
         <h3>
-          <a name="控制栏-n813" class="md-header-anchor"/>
-          <span>控制栏</span></h3>
+          <a name="控制栏-n813" class="md-header-anchor" />
+          <span>控制栏</span>
+        </h3>
         <p>
           <span>主要功能：调节盒须图异常值的上下边界</span>
-          <span>联动选择：勾选联动后，盒须图异常值的上下边界会同步变化</span></p>
+          <span>联动选择：勾选联动后，盒须图异常值的上下边界会同步变化</span>
+        </p>
         <h3>
-          <a name="数据信息栏-n815" class="md-header-anchor"/>
-          <span>数据信息栏</span></h3>
+          <a name="数据信息栏-n815" class="md-header-anchor" />
+          <span>数据信息栏</span>
+        </h3>
         <p>
-          <span>鼠标放到颜色矩阵或是盒须图的异常点上，显示该点所在的行、列、数值大小等</span></p>
+          <span>鼠标放到颜色矩阵或是盒须图的异常点上，显示该点所在的行、列、数值大小等</span>
+        </p>
         <h3>
-          <a name="数据信息栏-n817" class="md-header-anchor"/>
-          <span>数据信息栏</span></h3>
+          <a name="数据信息栏-n817" class="md-header-anchor" />
+          <span>数据信息栏</span>
+        </h3>
         <p>
-          <span>暂无数据</span></p>
+          <span>暂无数据</span>
+        </p>
         <p>&nbsp;</p>
-        <hr >
+        <hr />
         <p>&nbsp;</p>
         <h2>
-          <a name="用户定制" class="md-header-anchor"/>
-          <span>用户定制</span></h2>
+          <a name="用户定制" class="md-header-anchor" />
+          <span>用户定制</span>
+        </h2>
         <h3>
-          <a name="主体界面-n134" class="md-header-anchor"/>
-          <span>主体界面</span></h3>
+          <a name="主体界面-n134" class="md-header-anchor" />
+          <span>主体界面</span>
+        </h3>
         <p>
-          <span>可以将媒体数据，标量数据，统计分析数据集中到用户定制集中显示</span></p>
+          <span>可以将媒体数据，标量数据，统计分析数据集中到用户定制集中显示</span>
+        </p>
         <ol start="">
           <li>
-            <span>通过点击上面信息框的勾选框，再点击用户定制图标，自动跳转到用户定制</span></li>
+            <span>通过点击上面信息框的勾选框，再点击用户定制图标，自动跳转到用户定制</span>
+          </li>
           <li>
-            <span>点击‘X’，会删除对应的显示组件</span></li>
+            <span>点击‘X’，会删除对应的显示组件</span>
+          </li>
         </ol>
         <h3>
-          <a name="控制栏-n141" class="md-header-anchor"/>
-          <span>控制栏</span></h3>
+          <a name="控制栏-n141" class="md-header-anchor" />
+          <span>控制栏</span>
+        </h3>
         <p>
-          <span>对应的显示组件有对应的控制栏的话，右边会出现相应的控制栏</span></p>
+          <span>对应的显示组件有对应的控制栏的话，右边会出现相应的控制栏</span>
+        </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
       </div>
     </el-dialog>
-    <el-dialog title="设定数据同步间隔" :visible.sync="dataSyncVisible" class="layout-svg-save-dialog">
+    <el-dialog
+      title="设定数据同步间隔"
+      :visible.sync="dataSyncVisible"
+      class="layout-svg-save-dialog"
+    >
       <div>
         <el-checkbox v-model="syncDataBool">启用同步</el-checkbox>
       </div>
       <div style="margin-top: 10px;">
-        <el-input-number v-model="timeSync" class="input-number" size="mini" :min="30" :disabled="!syncDataBool" />秒
+        <el-input-number
+          v-model="timeSync"
+          class="input-number"
+          size="mini"
+          :min="30"
+          :disabled="!syncDataBool"
+        />秒
       </div>
     </el-dialog>
-    <div ref="left" class="layout-sidebar layout-same-style" :style="{height: leftStyle.height, width: leftStyle.width}">
+    <div
+      ref="left"
+      class="layout-sidebar layout-same-style"
+      :style="{ height: leftStyle.height, width: leftStyle.width }"
+    >
       <logo :collapse="false" />
       <div :class="['layout-sidebar-category-container']">
         <div class="layout-sidebar-category layout-same-style">
@@ -429,18 +580,39 @@
             v-for="(item, i) in allCategoryInform"
             :key="item.id"
             :class="['layout-sidebar-category-each']"
-            :style="{height: 100/allCategoryInform.length + '%', lineHeight: 100/allCategoryInform.length + '%'}"
+            :style="{
+              height: 100 / allCategoryInform.length + '%',
+              lineHeight: 100 / allCategoryInform.length + '%',
+            }"
           >
             <div ref="eachTop" :class="['layout-sidebar-category-each-top']" />
-            <div ref="eachMiddle" :class="['layout-sidebar-category-each-middle']" :style="item.id==selected||i==initId && initFlag?{borderLeft:'4px solid #2e4fde'}:{}">
+            <div
+              ref="eachMiddle"
+              :class="['layout-sidebar-category-each-middle']"
+              :style="
+                item.id == selected || (i == initId && initFlag)
+                  ? { borderLeft: '4px solid #2e4fde' }
+                  : {}
+              "
+            >
               <router-link
                 tag="li"
                 :to="item.routerName"
-                :class="[item.id==selected||i==initId && initFlag?&quot;category-selected&quot;:&quot;&quot;]"
+                :class="[
+                  item.id == selected || (i == initId && initFlag) ? 'category-selected' : '',
+                ]"
                 @click.native="change(item)"
               >
-                <i :class="['iconfont', item.icon]" :style="{fontSize: 16+ 'px'}" />
-                <span :class="[leftStyle.categoryFlage?'span-after':'']" :style="item.id==selected||i==initId && initFlag?{fontSize: 16 + 'px' , color: 'rgb(46, 79, 222)' }:{fontSize: 16 + 'px'}">{{ item.name }}</span>
+                <i :class="['iconfont', item.icon]" :style="{ fontSize: 16 + 'px' }" />
+                <span
+                  :class="[leftStyle.categoryFlage ? 'span-after' : '']"
+                  :style="
+                    item.id == selected || (i == initId && initFlag)
+                      ? { fontSize: 16 + 'px', color: 'rgb(46, 79, 222)' }
+                      : { fontSize: 16 + 'px' }
+                  "
+                  >{{ item.name }}</span
+                >
               </router-link>
             </div>
             <div :class="['layout-sidebar-category-each-bottom']" />
@@ -453,14 +625,17 @@
           v-show="item.shaowFlag"
           :key="item.id"
           ref="item.ref"
-          :style="{position:'absolute',marginLeft:item.margin}"
+          :style="{ position: 'absolute', marginLeft: item.margin }"
           @click="isHide(item)"
         >
-          <i :class="['iconfont', item.name]" :style="{fontSize: item.size}" />
+          <i :class="['iconfont', item.name]" :style="{ fontSize: item.size }" />
         </p>
       </div>
     </div>
-    <div class="layout-header-content layout-same-style" :style="{height: rightStyle.height, width: rightStyle.width}">
+    <div
+      class="layout-header-content layout-same-style"
+      :style="{ height: rightStyle.height, width: rightStyle.width }"
+    >
       <div class="layout-header layout-same-style">
         <div :class="['same-div']" style="width: 400px;">
           <p
@@ -470,21 +645,21 @@
             :title="item.chName"
             @click="jsutTest(item.raw)"
           >
-            <i :class="['iconfont', item.name]" :style="{fontSize: item.size}" />
+            <i :class="['iconfont', item.name]" :style="{ fontSize: item.size }" />
           </p>
           <p :class="['tool-p']" />
-          <p :class="['run-select-container']" :style="{width: '40%'}">
+          <p :class="['run-select-container']" :style="{ width: '40%' }">
             <el-select
               v-if="update"
               v-model="value1"
               :class="['run-selest']"
               size="mini"
-              :multiple="multipleFlag === 2?false:isMultiple"
-              :disabled="multipleFlag === 2?true:false"
+              :multiple="multipleFlag === 2 ? false : isMultiple"
+              :disabled="multipleFlag === 2 ? true : false"
               placeholder="RUN"
               collapse-tags
               filterable
-              :clearable="multipleFlag === 2?false:isMultiple"
+              :clearable="multipleFlag === 2 ? false : isMultiple"
               @focus="getOptions()"
             >
               <el-option
@@ -498,25 +673,30 @@
         </div>
         <div :class="['same-div']" style="width: calc(100% - 800px);" />
         <div :class="['same-div', 'search-tag']" style="width: 400px;">
-          <p
-            :class="['run-select-container']"
-            :style="{margin: '0 0 0 0'}"
-          >
-            <i :class="['el-icon-refresh']" style="font-size: 19px; color: whitesmoke; cursor: pointer;" @click="isClicked" />
+          <p :class="['run-select-container']" :style="{ margin: '0 0 0 0' }">
+            <i
+              :class="['el-icon-refresh']"
+              style="font-size: 19px; color: whitesmoke; cursor: pointer;"
+              @click="isClicked"
+            />
             <i
               v-for="item in settingHelp"
               :key="item.id"
               :class="['iconfont', item.name, 'icon-setting-help']"
-              :style="{fontSize: item.size,'cursor': 'pointer'}"
+              :style="{ fontSize: item.size, cursor: 'pointer' }"
               @click="getTigger(item)"
             />
           </p>
         </div>
       </div>
-      <div id="full-screen1" class="layout-content layout-same-style" style="background-color: white;">
+      <div
+        id="full-screen1"
+        class="layout-content layout-same-style"
+        style="background-color: white;"
+      >
         <div
-          :class="['right-slider', rightRetract.retractFlage? 'right-slider-last':'']"
-          :style="{right: rightRetract.setBackLeft, width: rightRetract.width}"
+          :class="['right-slider', rightRetract.retractFlage ? 'right-slider-last' : '']"
+          :style="{ right: rightRetract.setBackLeft, width: rightRetract.width }"
         >
           <p
             v-for="item in rightSilderIcons"
@@ -524,14 +704,19 @@
             :key="item.id"
             @click="rightSilder(item)"
           >
-            <i
-              :class="['iconfont', item.name]"
-              :style="{fontSize: item.size}"
-            />
+            <i :class="['iconfont', item.name]" :style="{ fontSize: item.size }" />
           </p>
         </div>
-        <router-view id="full-screen" :class="[rawShape, 'layout-same-style']" :style="{width: contentsStyle.leftWidth}" />
-        <router-view v-show="contentsStyle.rightShowFlag" name="right" class="layout-content-paramenter layout-same-style" />
+        <router-view
+          id="full-screen"
+          :class="[rawShape, 'layout-same-style']"
+          :style="{ width: contentsStyle.leftWidth }"
+        />
+        <router-view
+          v-show="contentsStyle.rightShowFlag"
+          name="right"
+          class="layout-content-paramenter layout-same-style"
+        />
       </div>
     </div>
   </div>
@@ -544,10 +729,13 @@ import constants from '@/utils/VisualUtils/constants';
 import { param2Obj } from '@/utils';
 import Logo from '../../layout/components/Sidebar/Logo';
 
-const { mapMutations: mapLayoutMutations, mapActions: mapLayoutActions, mapGetters: mapLayoutGetters, mapState: mapLayoutState } = createNamespacedHelpers('Visual/layout');
 const {
-  mapMutations: mapCustomMutations,
-} = createNamespacedHelpers('Visual/custom');
+  mapMutations: mapLayoutMutations,
+  mapActions: mapLayoutActions,
+  mapGetters: mapLayoutGetters,
+  mapState: mapLayoutState,
+} = createNamespacedHelpers('Visual/layout');
+const { mapMutations: mapCustomMutations } = createNamespacedHelpers('Visual/custom');
 
 export default {
   components: {
@@ -559,7 +747,8 @@ export default {
       downloadState: ['graph', 'scalar', 'statistic'],
       init: 1,
       screenWidth: '0px',
-      titleSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAAAgCAYAAADXPABiAAAAAXNSR0IArs4c6QAADilJREFUeAHtWwmQVMUZ7r9nhl1WDkFAMWiU8ogKamLpXrOwiIJoNHF3R7zwAMQjUcsreCQlJJaxYsWj4oGJIIUikGHQigZEQTa7swdRYykGDRqSgIIakWPZa2Zed75+s+/Nez3HzsyOQEW6arb7P/rv97r//vv//37L2MFycAYOzsDBGch2BihbRouvtKr2YSZYqQWrmohtag2HZjpx+bRL/YEziMSZjr7GeRPHzp8zZ45w4L61zaqqwMkRIebZE0Bs5fpw6CEbRqO6+rJhkX5e7sTl0i4RXd1r1gR3e3PppHhJUrtkosrdjyomTrxq9tq1i3a48blB/Yh1RoR8Sg1j9Vy9ZoOB9gIFl1XVXiclu96i9bmWrGN9U2hcOjnllTX3SMZGp6MXDM9ZU2vjioW9yROCD2LMsOcek/SJ3qcrFtkko91DdHy28F6iFeCtzV0xGLVislxFSunpiLSrB37ZRcgRaGwMbizz174EeTVWV8Hk3ClTbl68atXvujERI0E7w6L1tSaivZlkCGIXMcnKMvEUgkaSeSBnYSFkFUqGrRjlkwNDWTcb2ptgvMRuFkvmElKeV14d+CCZkgIznH3WEgx2pqBgHfiD2BW2YgAxalfbNnVMPZmK//8ZV3nR9IHGjt2/sd7RoOjhmA+7SEkVZZW1TyuEJGbgWPmpTexjw1YM2S5vkVLcn7c8mHgRNXo380SbOeNj0o2zPhx8p7Sydh1edYLFAytxZ3X1nGe6jQ0W6ltRx9o7SzAPN9gv61CKOE6eCNSJZltSFHWyYhC9jM28y5bRSwNW+W3FYitGL/wFI3s43dicxlpYg5CHPyYNI6EYjB3THdsQ4EMHP8o7O561+PTa6IjMxUQp62IWHBWGp7/vaAvWa97lTZpqJ4/XSzcLgwY7cXob/tZRUrDnnHiMW4/fA05cprYkz7ZM9D7RiN1f7B24yZJRX7+wy2qrGpuOJky4tsjCDR/erhRs3yoGtHFxc8Py162HSFefd/Ypr772xoZPJJPHWTwIS+5o+dOCJYDbLJxel1bV7EXE5ChSNr2xNO9Jb6oPmbvHITCpWV5V+2M8pwsviVpaG5evdSHzBsjxRjgwHI55XGScTgT1TFG4ZNM7o3tutUh43otbGkO2L1jhr52OjvZm2/IFXQDelbbFIEbvYdhFloC+1IhczsJkfU+TscPHPbdpuJSgCk/HjQtMQmg2wskQCAQ8wWBQRSkHTMGOO01/GBLyHzouH3j92iVfoJ9yTM1SWTm1LMaiLRaMNMFzSBNMt+CUNfEXiYkZeM4Bio76elS2YmDNp1l6Da37opiPxcYNJSxGSzj4EjqoX58KFvTYbiHetQazhRG/C1HHf204RaNsXM1UJug+RYJS4CWY4S3xXWDt+tYUffY3CrbCmXeJPw73FswZqqiq+5EhhemMSx6dz7RtUVZVdy98wxNhGRpamlbM1+dDEm8D/UXgZykaTo5Jao0aGoL/qji75rtGNxtn9ZGcLamvn2OGFnknQixhznrWrFm+iDCWYvTBTjys37r14eWuc9hNj0PDBw97BX1HQKvHqh9e4/RYZ/T+VLwHAk5ZMIQDVdqzdBR7Tnpfw+UNwoc5A5vsKvUjwvJrRQo5XtEko3M1kg0SeZ+xASY5Np3ppMoomwG8Op7MQsz3vNUuqGK89+GOB7HLz7KE94y2y1Mkr3Xh0gCvvPL7DmLclckjJqf7/VNPSNNlv6I//ZwhpyKRdHIWesfadU5svm3s8H5235jHdAxtGA34Fu0mTEx7jgRXa+Oyv2H137IwWKOZfv/lQ+CVKMWIF6KNis8CbR/DQuRbl1XWTZFC3JHUn2hm85uh/yTh0yCKfAPmdcbaZsNyHKFY8BLeGEXnonlZmi7fCBqJtvcx+OGZhAshinU6zv0zyyprlG+QWyF6H/5C8q6XrEcxzHA0WSYy0ZglhdestJtVcv4IE0I57yhyUIx1B9HryDjMGCyEyjjbpSAWo/LcS4+UJBZBKhQzURCyPb2+MRRKYHpvqXAKVsKVzMKuuaR0XO3xvfcuHAec52GYuBGZfsnWQimyLM7UJx0NPVMmF+Ec9igGDH/qEs/eSt1yuZmPPoKCWJx/W1g850SrjXXaObCkZKEFq7rPioF0dZHRGVkGpR3mFIzBNiB+vt2Jy7Zd7C2ahyjJkRmVHEHZ7Gz7/z/xYTFNq4T57E75XqQsBgpR2qNEkc1ojuhR1U4u9IfXX38+LqeH2CfFgNbRzrZtC2Du/dpgHYx7p+rJFI0nLVhfv+QrEKEcbJv1w1aciNvF4Wk7FZxAO6GcX6f7YSUiKYaEj9TTh5IvDtTOtOkWX0+NqdydQp46JJD9hD1h0pWYsnixBuaCgp5RMRT/oJKS+Wp8q6+qcfTF+nHvE06cavfJxyivqvsVHuxyXShx9pPWhmUf6vhc4NamkLI2eVmcXMZJx4t7h1PS0RCN9Nu6TWzGon3HxUOeya3hYFjhyv21j2GxbnXSOfFpzeHgn524XtsyrhhYQocFTfRCoNKuUltY8IEJbOqWsgrwnZ6GlpkpgTgXrWhoWLpV75G3YuDFp+PizDFAXDQnehyZtYX6QLnCeIEL0Weas9/wIYddoyIXJ25/tD/dZkzTlQLWAM5jXCnUMwnGEfoZLsUQUtwAUk6KgaijBBZZldSKYX4GARXEDfekSdMO2dPRy/RITZmlPNaUrv3J6yjBop2DR3HExnGpMEuvjRrJkyMTbdDsQHkxXjZg/3CpdiAoBbKyHNfxP9PfAdlel1evLgMxHy6riQU+3+8PHK33zQzTIT301EeJw/eIRGL9M8kyw36V6XQU6NyZcOzPd6DMZs6KUVE9dQxeMISf29ogDh4ysP/UQqWs8cA/cD4sTGV2V/rOTt9Ae/WaD2phit15FaLdAw/p/4I+HG41YTWcBblLctyWOknp22YqG2OavoTOhnUwLFzUJxM5DwvpqKMsNkdZFgfKbJIh5+i4nBQD31scJ6LR1SnCtB0+xi5ctWrxHn2AfGAV6SCjeLKrL7EDQjGQibzb9VwASMpFuleveERx0QJQoy5+KW+aMuWKXh1Fu09PGArrk1IxPEyYKWzFb0St0NbubTfUhsZ5c6mNcDyXshoVVYELErQcwlW/v3a0iBnrIMROisQFUcTjYTXhcGizU3Bf2rvat6uMInQtUbD73k1A+6eFm8nJ2KEuS6aehHzuY8R6OnUJhgV9yYLNGtcFX7d13eTCZQTsMHRvKjakwm3F8JBRlIpH4UQs9iAqBHlmQfxPNfCL7ONJSOOXsCYWPbs8Rln1pcdg9HUwZ6N6BJsVBBsY4MrmhhUNTnyf2warSJLBuZ3STaLtIwQm7h59KMzB2pb60Ec63oJxv+HyPRQeFua28kAgoz9g9cdGjEcbaY4SSLMVQxipLUZpZeBcPLty5s2CZ17eEl7+KgD72ZTCl/vrAj0svSuG6SxFI+sgWHeaoKxyJgYIWsIKVUuS5ZqsjlGHs40abp+ClePrqjB54/VBcbfzpI5zwi2Nwb9gG7qOQSz2CPm5GaE4WZPa1dXXILnVYzk5S2kxXIohkhVDypiPkXgsIZwiuEU1o0kf8YegJAm5xB7Al3Km75jRx6iuvmJUlAl1fByTEBxvcUa3ZPNls96vNxgKiIy49Lv56J1CObVuudlBZnbXEMlRGKN3mxv/aH/bkE4arMbDOg23ovedc05gsI53w+2HWjCO0sQCWkjUWGTb+eRcJh0lyBjfiPl0+muPr28IfaxE9HwG8bglDnN/fHf0gxkKdkcWFgdqdVff1d21BkOPdqDNJrTp3pam0BM6vhBw2bi6sZAzwiWLU9gF72MA2d1fwFqcpA9LnO7CjsO+yVyKvGNe7IptUMlAp9U9rL3LdGSTjidLWjcTtmJgcVM69nCG7aMEia6kqATJxs0k+dWWTD50kMvnGVDMH27vkpssOizQl6ptOxsJApSiOnC6ETNWwqcY6cSbHZDIQSdby3R61jCnj1oaljfr/MiR3I4J/K0TD3N9Ph1J9XK7vNeJT25LdZaWJvAksHDK6UpfJGtubVq+Kh0DYv/T8NXU21AM1yaCU/laa3jFlHT9dDzeCx9bS9e8IQTvLPYVn1Bfv/hTnV/BFeMD5VgHc45goW/mzPu2/gUX53ypYYjVit/j4ZOFkEsxzhAFq4IPr2+A5m6JQ9n9LfaNecP1sqqbSl7ha+8VaMadHk0WBj0VA83X0DmDZLB56JSkGLBQrqtnLKwxoJia2/ew/vgS6ee5DSQ5njdzH87U+ZtSMdSHOFu3R9VdkDZPFMH5nFMiD1nbZ7/c+dXdzs2GJGH/rliX2gRTU70XvtyyFxhz3paKB9m2j6D95rN4GX0cwQDOIpjjP9echAxtr/fvh7p8DPz74ZWYhJUQnaQU0O4XMsgqCKm6OqCSORM0Ya3qX+Y03D4Bt26Xd2I+ksNTol+rf47K5SFU1pZLPlfvA8W9BNHAD3W8grmQiaOEUUrFCIeDW/AdxyPqpz7XSyUnH5ytGGX+utlMyEW2F9wjTe1YhKQzcKk1Debzr/kMkm2fTkOoPIHuQKXczdnKzJcv/tVYckYQ15EbjxrZy/GUZtAi35j5OLwd53mcEbv6KfXPRXo3wektXLxdrX6eEm+rTv8mYdNEquvsCBOf4aWv0gfzCO8nTU3LzIfySJoe4+z7Ok8+MPyGpAnixDZjMly5fE+x700lf9QgtndLh5uWz7hJfST/MAkHBKKxgVjE69S9tLN4vfwtREgRJy7btvrkD1Y5ALmn6n08u9qGAeeyCj3RgxlBKH78w3IkZiTmAP7FP3U5sOzXI1LRN5fOlhEePXpIx/8AAR9JZREELO8AAAAASUVORK5CYII=',
+      titleSrc:
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAAAgCAYAAADXPABiAAAAAXNSR0IArs4c6QAADilJREFUeAHtWwmQVMUZ7r9nhl1WDkFAMWiU8ogKamLpXrOwiIJoNHF3R7zwAMQjUcsreCQlJJaxYsWj4oGJIIUikGHQigZEQTa7swdRYykGDRqSgIIakWPZa2Zed75+s+/Nez3HzsyOQEW6arb7P/rv97r//vv//37L2MFycAYOzsDBGch2BihbRouvtKr2YSZYqQWrmohtag2HZjpx+bRL/YEziMSZjr7GeRPHzp8zZ45w4L61zaqqwMkRIebZE0Bs5fpw6CEbRqO6+rJhkX5e7sTl0i4RXd1r1gR3e3PppHhJUrtkosrdjyomTrxq9tq1i3a48blB/Yh1RoR8Sg1j9Vy9ZoOB9gIFl1XVXiclu96i9bmWrGN9U2hcOjnllTX3SMZGp6MXDM9ZU2vjioW9yROCD2LMsOcek/SJ3qcrFtkko91DdHy28F6iFeCtzV0xGLVislxFSunpiLSrB37ZRcgRaGwMbizz174EeTVWV8Hk3ClTbl68atXvujERI0E7w6L1tSaivZlkCGIXMcnKMvEUgkaSeSBnYSFkFUqGrRjlkwNDWTcb2ptgvMRuFkvmElKeV14d+CCZkgIznH3WEgx2pqBgHfiD2BW2YgAxalfbNnVMPZmK//8ZV3nR9IHGjt2/sd7RoOjhmA+7SEkVZZW1TyuEJGbgWPmpTexjw1YM2S5vkVLcn7c8mHgRNXo380SbOeNj0o2zPhx8p7Sydh1edYLFAytxZ3X1nGe6jQ0W6ltRx9o7SzAPN9gv61CKOE6eCNSJZltSFHWyYhC9jM28y5bRSwNW+W3FYitGL/wFI3s43dicxlpYg5CHPyYNI6EYjB3THdsQ4EMHP8o7O561+PTa6IjMxUQp62IWHBWGp7/vaAvWa97lTZpqJ4/XSzcLgwY7cXob/tZRUrDnnHiMW4/fA05cprYkz7ZM9D7RiN1f7B24yZJRX7+wy2qrGpuOJky4tsjCDR/erhRs3yoGtHFxc8Py162HSFefd/Ypr772xoZPJJPHWTwIS+5o+dOCJYDbLJxel1bV7EXE5ChSNr2xNO9Jb6oPmbvHITCpWV5V+2M8pwsviVpaG5evdSHzBsjxRjgwHI55XGScTgT1TFG4ZNM7o3tutUh43otbGkO2L1jhr52OjvZm2/IFXQDelbbFIEbvYdhFloC+1IhczsJkfU+TscPHPbdpuJSgCk/HjQtMQmg2wskQCAQ8wWBQRSkHTMGOO01/GBLyHzouH3j92iVfoJ9yTM1SWTm1LMaiLRaMNMFzSBNMt+CUNfEXiYkZeM4Bio76elS2YmDNp1l6Da37opiPxcYNJSxGSzj4EjqoX58KFvTYbiHetQazhRG/C1HHf204RaNsXM1UJug+RYJS4CWY4S3xXWDt+tYUffY3CrbCmXeJPw73FswZqqiq+5EhhemMSx6dz7RtUVZVdy98wxNhGRpamlbM1+dDEm8D/UXgZykaTo5Jao0aGoL/qji75rtGNxtn9ZGcLamvn2OGFnknQixhznrWrFm+iDCWYvTBTjys37r14eWuc9hNj0PDBw97BX1HQKvHqh9e4/RYZ/T+VLwHAk5ZMIQDVdqzdBR7Tnpfw+UNwoc5A5vsKvUjwvJrRQo5XtEko3M1kg0SeZ+xASY5Np3ppMoomwG8Op7MQsz3vNUuqGK89+GOB7HLz7KE94y2y1Mkr3Xh0gCvvPL7DmLclckjJqf7/VNPSNNlv6I//ZwhpyKRdHIWesfadU5svm3s8H5235jHdAxtGA34Fu0mTEx7jgRXa+Oyv2H137IwWKOZfv/lQ+CVKMWIF6KNis8CbR/DQuRbl1XWTZFC3JHUn2hm85uh/yTh0yCKfAPmdcbaZsNyHKFY8BLeGEXnonlZmi7fCBqJtvcx+OGZhAshinU6zv0zyyprlG+QWyF6H/5C8q6XrEcxzHA0WSYy0ZglhdestJtVcv4IE0I57yhyUIx1B9HryDjMGCyEyjjbpSAWo/LcS4+UJBZBKhQzURCyPb2+MRRKYHpvqXAKVsKVzMKuuaR0XO3xvfcuHAec52GYuBGZfsnWQimyLM7UJx0NPVMmF+Ec9igGDH/qEs/eSt1yuZmPPoKCWJx/W1g850SrjXXaObCkZKEFq7rPioF0dZHRGVkGpR3mFIzBNiB+vt2Jy7Zd7C2ahyjJkRmVHEHZ7Gz7/z/xYTFNq4T57E75XqQsBgpR2qNEkc1ojuhR1U4u9IfXX38+LqeH2CfFgNbRzrZtC2Du/dpgHYx7p+rJFI0nLVhfv+QrEKEcbJv1w1aciNvF4Wk7FZxAO6GcX6f7YSUiKYaEj9TTh5IvDtTOtOkWX0+NqdydQp46JJD9hD1h0pWYsnixBuaCgp5RMRT/oJKS+Wp8q6+qcfTF+nHvE06cavfJxyivqvsVHuxyXShx9pPWhmUf6vhc4NamkLI2eVmcXMZJx4t7h1PS0RCN9Nu6TWzGon3HxUOeya3hYFjhyv21j2GxbnXSOfFpzeHgn524XtsyrhhYQocFTfRCoNKuUltY8IEJbOqWsgrwnZ6GlpkpgTgXrWhoWLpV75G3YuDFp+PizDFAXDQnehyZtYX6QLnCeIEL0Weas9/wIYddoyIXJ25/tD/dZkzTlQLWAM5jXCnUMwnGEfoZLsUQUtwAUk6KgaijBBZZldSKYX4GARXEDfekSdMO2dPRy/RITZmlPNaUrv3J6yjBop2DR3HExnGpMEuvjRrJkyMTbdDsQHkxXjZg/3CpdiAoBbKyHNfxP9PfAdlel1evLgMxHy6riQU+3+8PHK33zQzTIT301EeJw/eIRGL9M8kyw36V6XQU6NyZcOzPd6DMZs6KUVE9dQxeMISf29ogDh4ysP/UQqWs8cA/cD4sTGV2V/rOTt9Ae/WaD2phit15FaLdAw/p/4I+HG41YTWcBblLctyWOknp22YqG2OavoTOhnUwLFzUJxM5DwvpqKMsNkdZFgfKbJIh5+i4nBQD31scJ6LR1SnCtB0+xi5ctWrxHn2AfGAV6SCjeLKrL7EDQjGQibzb9VwASMpFuleveERx0QJQoy5+KW+aMuWKXh1Fu09PGArrk1IxPEyYKWzFb0St0NbubTfUhsZ5c6mNcDyXshoVVYELErQcwlW/v3a0iBnrIMROisQFUcTjYTXhcGizU3Bf2rvat6uMInQtUbD73k1A+6eFm8nJ2KEuS6aehHzuY8R6OnUJhgV9yYLNGtcFX7d13eTCZQTsMHRvKjakwm3F8JBRlIpH4UQs9iAqBHlmQfxPNfCL7ONJSOOXsCYWPbs8Rln1pcdg9HUwZ6N6BJsVBBsY4MrmhhUNTnyf2warSJLBuZ3STaLtIwQm7h59KMzB2pb60Ec63oJxv+HyPRQeFua28kAgoz9g9cdGjEcbaY4SSLMVQxipLUZpZeBcPLty5s2CZ17eEl7+KgD72ZTCl/vrAj0svSuG6SxFI+sgWHeaoKxyJgYIWsIKVUuS5ZqsjlGHs40abp+ClePrqjB54/VBcbfzpI5zwi2Nwb9gG7qOQSz2CPm5GaE4WZPa1dXXILnVYzk5S2kxXIohkhVDypiPkXgsIZwiuEU1o0kf8YegJAm5xB7Al3Km75jRx6iuvmJUlAl1fByTEBxvcUa3ZPNls96vNxgKiIy49Lv56J1CObVuudlBZnbXEMlRGKN3mxv/aH/bkE4arMbDOg23ovedc05gsI53w+2HWjCO0sQCWkjUWGTb+eRcJh0lyBjfiPl0+muPr28IfaxE9HwG8bglDnN/fHf0gxkKdkcWFgdqdVff1d21BkOPdqDNJrTp3pam0BM6vhBw2bi6sZAzwiWLU9gF72MA2d1fwFqcpA9LnO7CjsO+yVyKvGNe7IptUMlAp9U9rL3LdGSTjidLWjcTtmJgcVM69nCG7aMEia6kqATJxs0k+dWWTD50kMvnGVDMH27vkpssOizQl6ptOxsJApSiOnC6ETNWwqcY6cSbHZDIQSdby3R61jCnj1oaljfr/MiR3I4J/K0TD3N9Ph1J9XK7vNeJT25LdZaWJvAksHDK6UpfJGtubVq+Kh0DYv/T8NXU21AM1yaCU/laa3jFlHT9dDzeCx9bS9e8IQTvLPYVn1Bfv/hTnV/BFeMD5VgHc45goW/mzPu2/gUX53ypYYjVit/j4ZOFkEsxzhAFq4IPr2+A5m6JQ9n9LfaNecP1sqqbSl7ha+8VaMadHk0WBj0VA83X0DmDZLB56JSkGLBQrqtnLKwxoJia2/ew/vgS6ee5DSQ5njdzH87U+ZtSMdSHOFu3R9VdkDZPFMH5nFMiD1nbZ7/c+dXdzs2GJGH/rliX2gRTU70XvtyyFxhz3paKB9m2j6D95rN4GX0cwQDOIpjjP9echAxtr/fvh7p8DPz74ZWYhJUQnaQU0O4XMsgqCKm6OqCSORM0Ya3qX+Y03D4Bt26Xd2I+ksNTol+rf47K5SFU1pZLPlfvA8W9BNHAD3W8grmQiaOEUUrFCIeDW/AdxyPqpz7XSyUnH5ytGGX+utlMyEW2F9wjTe1YhKQzcKk1Debzr/kMkm2fTkOoPIHuQKXczdnKzJcv/tVYckYQ15EbjxrZy/GUZtAi35j5OLwd53mcEbv6KfXPRXo3wektXLxdrX6eEm+rTv8mYdNEquvsCBOf4aWv0gfzCO8nTU3LzIfySJoe4+z7Ok8+MPyGpAnixDZjMly5fE+x700lf9QgtndLh5uWz7hJfST/MAkHBKKxgVjE69S9tLN4vfwtREgRJy7btvrkD1Y5ALmn6n08u9qGAeeyCj3RgxlBKH78w3IkZiTmAP7FP3U5sOzXI1LRN5fOlhEePXpIx/8AAR9JZREELO8AAAAASUVORK5CYII=',
       selected: -1,
       selectedRaw: '',
       value: '',
@@ -608,27 +797,29 @@ export default {
       },
       options: '',
       value1: [],
-      icons: [{
-        value: 0,
-        chName: '定制',
-        raw: 'custom',
-        name: 'icon-ziyuan104',
-        size: '16px',
-      },
-      {
-        value: 1,
-        chName: '下载',
-        raw: 'download',
-        name: 'icon-xiazai3',
-        size: '16px',
-      },
-      {
-        value: 2,
-        chName: '全屏',
-        raw: 'fullScreen',
-        name: 'icon-ziyuan111',
-        size: '16px',
-      }],
+      icons: [
+        {
+          value: 0,
+          chName: '定制',
+          raw: 'custom',
+          name: 'icon-ziyuan104',
+          size: '16px',
+        },
+        {
+          value: 1,
+          chName: '下载',
+          raw: 'download',
+          name: 'icon-xiazai3',
+          size: '16px',
+        },
+        {
+          value: 2,
+          chName: '全屏',
+          raw: 'fullScreen',
+          name: 'icon-ziyuan111',
+          size: '16px',
+        },
+      ],
       sync: false,
       leftSilderIcons: [
         {
@@ -646,7 +837,8 @@ export default {
           shaowFlag: false,
           size: '25px',
           margin: '10px',
-        }],
+        },
+      ],
       rightSilderIcons: [
         {
           value: 2,
@@ -661,7 +853,8 @@ export default {
           ref: 'left',
           shaowFlag: false,
           size: '25px',
-        }],
+        },
+      ],
       settingHelp: [
         {
           id: 0,
@@ -763,8 +956,7 @@ export default {
       this.getStateStore[this.selectedRaw] = this.value1;
       this.setUserSelectRunFile(this.value1);
     },
-    inputValue() {
-    },
+    inputValue() {},
     multipleFlag() {
       this.isMultiple = this.multipleFlag;
     },
@@ -803,19 +995,19 @@ export default {
   },
   created() {
     const params = param2Obj(window.location.href);
-    if (typeof (params.id) === 'undefined' || typeof (params.trainJobName) === 'undefined') {
+    if (typeof params.id === 'undefined' || typeof params.trainJobName === 'undefined') {
       // 查看sessionStorage里面是否有这两个数据
-      if (typeof (Storage) !== 'undefined') {
+      if (typeof Storage !== 'undefined') {
         if (sessionStorage.id && sessionStorage.trainJobName) {
           params.id = sessionStorage.id;
           params.trainJobName = sessionStorage.trainJobName;
         } else {
-          this.setErrorMessage(`${'没有参数 id 和 trainJobName!!!' +
-          '_'}${  new Date().getTime()}`);
+          this.setErrorMessage(`${'没有参数 id 和 trainJobName!!!' + '_'}${new Date().getTime()}`);
         }
       } else {
-        this.setErrorMessage(`${'对不起，你的浏览器不支持 web storage!!!' +
-        '_'}${  new Date().getTime()}`);
+        this.setErrorMessage(
+          `${'对不起，你的浏览器不支持 web storage!!!' + '_'}${new Date().getTime()}`
+        );
         // document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
       }
     } else {
@@ -832,11 +1024,12 @@ export default {
     this.initWaitingPage(params);
   },
   mounted() {
-    const h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+    const h =
+      window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
     const hReal = h * 0.905 * 0.075 * 0.5;
-    this.actegoryClickStyle.divTop = `0 0 ${  hReal / 2  }px 0`;
-    this.actegoryClickStyle.divAim = `${hReal  }px 0 0 ${  hReal  }px`;
-    this.actegoryClickStyle.divBottom = `0 ${  hReal / 2  }px 0 0`;
+    this.actegoryClickStyle.divTop = `0 0 ${hReal / 2}px 0`;
+    this.actegoryClickStyle.divAim = `${hReal}px 0 0 ${hReal}px`;
+    this.actegoryClickStyle.divBottom = `0 ${hReal / 2}px 0 0`;
     const that = this;
     window.onresize = () => {
       return (() => {
@@ -864,15 +1057,11 @@ export default {
       'setParams',
       'setErrorMessage',
     ]),
-    ...mapCustomMutations([
-      'setData',
-    ]),
+    ...mapCustomMutations(['setData']),
     isClicked() {
-      d3.select('.el-icon-refresh')
-        .attr('class', 'el-icon-refresh anim');
+      d3.select('.el-icon-refresh').attr('class', 'el-icon-refresh anim');
       setTimeout(() => {
-        d3.select('.anim')
-          .attr('class', 'el-icon-refresh');
+        d3.select('.anim').attr('class', 'el-icon-refresh');
       }, 5000);
       // 手动的数据同步
       this.timingFeatchCategoryOnce(this.$route.path);
@@ -892,7 +1081,7 @@ export default {
         this.leftStyle.width = '62px';
         this.rightStyle.width = 'calc(100% - 62px)';
         this.logoFlag = false;
-        this.allCategoryInform.forEach(val => {
+        this.allCategoryInform.forEach((val) => {
           val.name = '';
         });
         this.leftStyle.categoryFlage = true;
@@ -903,7 +1092,7 @@ export default {
         this.leftStyle.width = '180px';
         this.rightStyle.width = 'calc(100% - 180px)';
         this.logoFlag = true;
-        this.allCategoryInform.forEach(val => {
+        this.allCategoryInform.forEach((val) => {
           val.icon = val.iconCopy;
           val.name = val.nameCopy;
         });
@@ -934,18 +1123,22 @@ export default {
       if (val === 'download') {
         if (this.downloadState.indexOf(this.selectedRaw) >= 0) {
           if (this.svgDownloadList[this.selectedRaw].length === 0) {
-            this.setErrorMessage(`${'请先在当前页面勾选需要下载的图片' +
-          '_'}${  new Date().getTime()}`);
+            this.setErrorMessage(
+              `${'请先在当前页面勾选需要下载的图片' + '_'}${new Date().getTime()}`
+            );
           } else {
             this.dialogFormVisible = true;
           }
         } else {
-          this.setErrorMessage(`${'当前页面不支持下载' +
-          '_'}${  new Date().getTime()}`);
+          this.setErrorMessage(`${'当前页面不支持下载' + '_'}${new Date().getTime()}`);
           this.dialogFormVisible = false;
         }
       } else if (val === 'fullScreen') {
-        const isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+        const isFull =
+          document.fullscreenElement ||
+          document.mozFullScreenElement ||
+          document.webkitFullscreenElement ||
+          document.msFullscreenElement;
         if (isFull) {
           if (document.cancelFullScreen) {
             document.cancelFullScreen();
@@ -974,10 +1167,12 @@ export default {
           }
         }
       } else if (val === 'custom') {
-        const {className} = document.getElementsByClassName('category-selected')[0].getElementsByTagName('i')[0];
+        const { className } = document
+          .getElementsByClassName('category-selected')[0]
+          .getElementsByTagName('i')[0];
         const iconName = className.split(' ')[1];
         let index = 0;
-        for (; index < this.allCategoryInform.length; index+=1) {
+        for (; index < this.allCategoryInform.length; index += 1) {
           if (this.allCategoryInform[index].icon === iconName) {
             index = this.allCategoryInform[index].rawName;
             break;
@@ -991,29 +1186,35 @@ export default {
     },
     downloadSvg() {
       this.dialogFormVisible = false;
-      this.svgDownloadList[this.selectedRaw].forEach(val => {
+      this.svgDownloadList[this.selectedRaw].forEach((val) => {
         const testDOM = document.querySelector(val);
-        download.covertSVG2Image(testDOM, this.form.input, testDOM.width.baseVal.value, testDOM.height.baseVal.value, this.form.type);
+        download.covertSVG2Image(
+          testDOM,
+          this.form.input,
+          testDOM.width.baseVal.value,
+          testDOM.height.baseVal.value,
+          this.form.type
+        );
       });
-      this.form.input = "下载";
-      this.form.type = "png";
+      this.form.input = '下载';
+      this.form.type = 'png';
     },
     downCancel() {
       this.dialogFormVisible = false;
-      this.form.input = "下载";
-      this.form.type = "png";
+      this.form.input = '下载';
+      this.form.type = 'png';
     },
     testDownloadJson2csv() {
       const testObject = [
         {
-          'name': 'xds',
-          'age': '26',
-          'gender': 'male',
+          name: 'xds',
+          age: '26',
+          gender: 'male',
         },
         {
-          'name': 'zhngsnan',
-          'age': '22',
-          'gender': 'male',
+          name: 'zhngsnan',
+          age: '22',
+          gender: 'male',
         },
       ];
       download.downloadJSON2CSV(testObject);
@@ -1041,1035 +1242,1518 @@ export default {
 </script>
 
 <style lang="less" scoped>
-    @deep: ~'/deep/';
-
-    .layout-same-style {
-      padding: 0;
-      margin: 0;
+@deep: ~'/deep/';
+
+.layout-same-style {
+  padding: 0;
+  margin: 0;
+}
+
+.layout-root {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow: hidden;
+  text-align: center;
+
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 1px;
+    background-color: white;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 0;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #ccc;
+    border-radius: 10px;
+  }
+}
+
+.layout-header .search-tag input::-webkit-input-placeholder {
+  font-size: 12px;
+  color: #c0c4ce;
+}
+
+.layout-header .search-tag input::-moz-placeholder {
+  font-size: 12px;
+  color: #c0c4ce;
+}
+
+.run-selest {
+  width: 100%;
+  height: 70%;
+  color: #757575;
+  border: 1px solid #2f2f2f;
+  border-width: 0 0 1px 0;
+  border-radius: 3px;
+
+  /deep/ .el-select__tags {
+    top: 40%;
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+
+  /deep/ .el-input {
+    height: 100%;
+
+    /deep/ input {
+      height: 100%;
+      background-color: transparent;
+      border-width: 0;
     }
-
-    .layout-root {
+  }
+
+  /deep/ .el-input__inner {
+    font-size: 14px;
+    color: white;
+  }
+
+  /deep/ .el-tag {
+    padding-bottom: 4%;
+  }
+
+  /deep/ .el-input__suffix {
+    top: 10%;
+  }
+
+  /deep/ .is-reverse {
+    margin: -20% 0 0 0;
+  }
+}
+
+.layout-header {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 28px;
+  background-color: #625eb3;
+
+  .same-div {
+    display: flex;
+    flex-direction: row;
+    width: 33.3%;
+    height: 100%;
+
+    .same-p {
       display: flex;
-      flex-direction: row;
+      align-items: center;
+      width: 30px;
       height: 100%;
-      overflow: hidden;
-      text-align: center;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
 
-      ::-webkit-scrollbar {
-        width: 5px;
-        height: 1px;
-        background-color: white;
+      i {
+        margin: auto;
+        color: white;
       }
+    }
 
-      ::-webkit-scrollbar-track {
-        border-radius: 0;
-        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-      }
+    .run-select-container {
+      display: flex;
+      align-items: center;
+      padding: 0;
+      margin: 0 0 0 3.5%;
 
-      ::-webkit-scrollbar-thumb {
-        background-color: #ccc;
-        border-radius: 10px;
+      .icon-setting-help {
+        margin: 0 0 0 10px;
+        color: white;
       }
     }
 
-    .layout-header .search-tag input::-webkit-input-placeholder {
+    .tool-p {
+      height: 70%;
+      margin: 1% 0 0 1%;
+      border: 1px dashed #bfbfbf;
+      border-width: 0 0 0 1px;
+    }
+  }
+
+  .search-tag {
+    flex-direction: row-reverse;
+
+    input:-moz-placeholder {
       font-size: 12px;
       color: #c0c4ce;
     }
 
-    .layout-header .search-tag input::-moz-placeholder {
+    input:-ms-input-placeholder {
       font-size: 12px;
       color: #c0c4ce;
     }
-
-    .run-selest {
-      width: 100%;
-      height: 70%;
-      color: #757575;
-      border: 1px solid #2f2f2f;
-      border-width: 0 0 1px 0;
-      border-radius: 3px;
-
-      /deep/ .el-select__tags {
-        top: 40%;
-        flex-wrap: nowrap;
-        overflow: hidden;
-      }
-
-      /deep/ .el-input {
-        height: 100%;
-
-        /deep/ input {
-          height: 100%;
-          background-color: transparent;
-          border-width: 0;
-        }
-      }
-
-      /deep/ .el-input__inner {
-        font-size: 14px;
-        color: white;
-      }
-
-      /deep/ .el-tag {
-        padding-bottom: 4%;
-      }
-
-      /deep/ .el-input__suffix {
-        top: 10%;
-      }
-
-      /deep/ .is-reverse {
-        margin: -20% 0 0 0;
-      }
+  }
+}
+
+.right-slider {
+  position: absolute;
+  bottom: 0;
+  z-index: 10;
+  height: 47px;
+  clear: none;
+
+  p {
+    position: relative;
+    font-weight: 700;
+    color: #625eb3;
+    cursor: pointer;
+  }
+}
+
+.right-slider-last {
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
+
+  p {
+    position: relative;
+    font-weight: 700;
+    color: #625eb3;
+    cursor: pointer;
+  }
+}
+
+.layout-sidebar {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  background-color: #f3f7ff;
+
+  .layout-logo {
+    display: -webkit-box;
+    align-items: center;
+    width: 100%;
+    height: 50px;
+    text-align: center;
+    background-color: #f3f7ff;
+
+    img {
+      width: 52px;
+      height: 27.24px;
+      margin-right: 6px;
+      margin-left: 6px;
     }
 
-    .layout-header {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      height: 28px;
-      background-color: #625eb3;
-
-      .same-div {
-        display: flex;
-        flex-direction: row;
-        width: 33.3%;
-        height: 100%;
-
-        .same-p {
-          display: flex;
-          align-items: center;
-          width: 30px;
-          height: 100%;
-          padding: 0;
-          margin: 0;
-          cursor: pointer;
-
-          i {
-            margin: auto;
-            color: white;
-          }
-        }
-
-        .run-select-container {
-          display: flex;
-          align-items: center;
-          padding: 0;
-          margin: 0 0 0 3.5%;
-
-          .icon-setting-help {
-            margin: 0 0 0 10px;
-            color: white;
-          }
-        }
-
-        .tool-p {
-          height: 70%;
-          margin: 1% 0 0 1%;
-          border: 1px dashed #bfbfbf;
-          border-width: 0 0 0 1px;
-        }
-      }
-
-      .search-tag {
-        flex-direction: row-reverse;
-
-        input:-moz-placeholder {
-          font-size: 12px;
-          color: #c0c4ce;
-        }
-
-        input:-ms-input-placeholder {
-          font-size: 12px;
-          color: #c0c4ce;
-        }
-      }
+    .img-after {
+      width: 52px;
+      height: 27.24px;
     }
 
-    .right-slider {
-      position: absolute;
-      bottom: 0;
-      z-index: 10;
-      height: 47px;
-      clear: none;
-
-      p {
-        position: relative;
-        font-weight: 700;
-        color: #625eb3;
-        cursor: pointer;
-      }
+    span {
+      margin: 0 0 0 7%;
+      font-family: PingFangSC-Semibold, sans-serif;
+      color: white;
     }
+  }
 
-    .right-slider-last {
-      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
+  .layout-sidebar-category-container {
+    height: calc(100% - 97px);
 
-      p {
-        position: relative;
-        font-weight: 700;
-        color: #625eb3;
-        cursor: pointer;
-      }
+    .toolDiv {
+      height: 3%;
+      background-color: #f3f7ff;
     }
 
-    .layout-sidebar {
+    .layout-sidebar-category {
       display: flex;
       flex-direction: column;
-      overflow-y: auto;
+      justify-content: space-around;
+      width: 100%;
+      margin: 0% 0 0 0;
       background-color: #f3f7ff;
 
-      .layout-logo {
-        display: -webkit-box;
-        align-items: center;
-        width: 100%;
-        height: 50px;
-        text-align: center;
-        background-color: #f3f7ff;
-
-        img {
-          width: 52px;
-          height: 27.24px;
-          margin-right: 6px;
-          margin-left: 6px;
-        }
-
-        .img-after {
-          width: 52px;
-          height: 27.24px;
-        }
+      .layout-sidebar-category-each {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
 
-        span {
-          margin: 0 0 0 7%;
-          font-family: PingFangSC-Semibold, sans-serif;
-          color: white;
+        .layout-sidebar-category-each-top {
+          flex-grow: 1;
+          height: 0%;
+          background-color: #f3f7ff;
+          border-radius: 0;
         }
-      }
-
-      .layout-sidebar-category-container {
-        height: calc(100% - 97px);
 
-        .toolDiv {
-          height: 3%;
+        .layout-sidebar-category-each-bottom {
+          flex-grow: 1;
+          height: 0%;
           background-color: #f3f7ff;
         }
 
-        .layout-sidebar-category {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
+        .layout-sidebar-category-each-middle {
+          flex-grow: 1;
           width: 100%;
-          margin: 0% 0 0 0;
+          height: 56px;
           background-color: #f3f7ff;
 
-          .layout-sidebar-category-each {
+          li {
             display: flex;
-            flex-direction: column;
-            background-color: #fff;
-
-            .layout-sidebar-category-each-top {
-              flex-grow: 1;
-              height: 0%;
-              background-color: #f3f7ff;
-              border-radius: 0;
+            align-items: center;
+            justify-content: space-around;
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            margin: 0 0 0 0%;
+            color: rgb(102, 102, 102);
+            list-style: none;
+            cursor: pointer;
+            background-color: #f3f7ff;
+            border-radius: 0 0 0 0;
+
+            span {
+              float: right;
+              margin: 0 20% 0 0;
+              font-family: PingFangSC-Regular, sans-serif;
             }
 
-            .layout-sidebar-category-each-bottom {
-              flex-grow: 1;
-              height: 0%;
-              background-color: #f3f7ff;
+            .span-after {
+              margin: 0;
             }
 
-            .layout-sidebar-category-each-middle {
-              flex-grow: 1;
-              width: 100%;
-              height: 56px;
-              background-color: #f3f7ff;
-
-              li {
-                display: flex;
-                align-items: center;
-                justify-content: space-around;
-                width: 100%;
-                height: 100%;
-                padding: 0;
-                margin: 0 0 0 0%;
-                color: rgb(102, 102, 102);
-                list-style: none;
-                cursor: pointer;
-                background-color: #f3f7ff;
-                border-radius: 0 0 0 0;
-
-                span {
-                  float: right;
-                  margin: 0 20% 0 0;
-                  font-family: PingFangSC-Regular, sans-serif;
-                }
-
-                .span-after {
-                  margin: 0;
-                }
-
-                i {
-                  float: left;
-                  margin: 0 0 0 10px;
-                  font-weight: 500;
-                }
-              }
+            i {
+              float: left;
+              margin: 0 0 0 10px;
+              font-weight: 500;
             }
           }
         }
       }
-
-      .layout-sidebar-setting {
-        width: 100%;
-        height: 47px;
-
-        p {
-          position: relative;
-          font-weight: 700;
-          color: #625eb3;
-          cursor: pointer;
-        }
-      }
     }
+  }
 
-    .layout-header-content {
-      display: flex;
-      flex-direction: column;
-    }
+  .layout-sidebar-setting {
+    width: 100%;
+    height: 47px;
 
-    .layout-content {
+    p {
       position: relative;
-      width: 100%;
-      height: 96.5%;
-
-      .layout-content-panel {
-        z-index: 0;
-        float: left;
-        height: 100%;
-        background-color: white;
-      }
-
-      .layout-content-panel-full-screen {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-      }
-
-      .layout-content-paramenter {
-        z-index: 0;
-        float: right;
-        width: 290px;
-        height: 94%;
-        margin-right: 0;
-        overflow-y: auto;
-      }
+      font-weight: 700;
+      color: #625eb3;
+      cursor: pointer;
     }
-
-    .layout-input {
-      float: right;
-      width: 10%;
-      height: 5%;
-      margin-top: 0.8%;
+  }
+}
+
+.layout-header-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.layout-content {
+  position: relative;
+  width: 100%;
+  height: 96.5%;
+
+  .layout-content-panel {
+    z-index: 0;
+    float: left;
+    height: 100%;
+    background-color: white;
+  }
+
+  .layout-content-panel-full-screen {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .layout-content-paramenter {
+    z-index: 0;
+    float: right;
+    width: 290px;
+    height: 94%;
+    margin-right: 0;
+    overflow-y: auto;
+  }
+}
+
+.layout-input {
+  float: right;
+  width: 10%;
+  height: 5%;
+  margin-top: 0.8%;
+}
+
+.category-selected {
+  background-color: #d8dfff !important;
+}
+
+.tag-search {
+  width: 100%;
+  height: 70%;
+  background: none;
+  border: 1px solid #2f2f2f;
+  border-width: 0 0 1px 0;
+  border-radius: 3px;
+  outline: none;
+
+  ::-webkit-input-placeholder {
+    color: black;
+  }
+}
+
+.layout-svg-save-dialog {
+  /deep/ .el-dialog {
+    width: 360px;
+    padding-right: 20px;
+    border-radius: 10px;
+  }
+
+  /deep/ .el-form-item__label {
+    text-align: center;
+  }
+
+  /deep/ .el-dialog__body {
+    padding: 12px 22px;
+  }
+
+  /deep/ .el-dialog__footer {
+    padding: 5px 20px 10px;
+  }
+
+  /deep/ .el-input-number {
+    line-height: 26px;
+  }
+}
+/* stylelint-disable */
+.layout-svg {
+  * {
+    text-align: left;
+  }
+  .in-text-selection,
+  ::selection {
+    color: var(--select-text-font-color);
+    text-shadow: none;
+    background: var(--select-text-bg-color);
+  }
+  #write {
+    position: relative;
+    width: inherit;
+    height: auto;
+    padding-top: 40px;
+    margin: 0 auto;
+    overflow-x: visible;
+    word-break: normal;
+    word-wrap: break-word;
+    white-space: normal;
+  }
+  #write.first-line-indent p {
+    text-indent: 2em;
+  }
+  #write.first-line-indent li p,
+  #write.first-line-indent p * {
+    text-indent: 0;
+  }
+  #write.first-line-indent li {
+    margin-left: 2em;
+  }
+  .for-image #write {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
+  body.typora-export {
+    padding-right: 30px;
+    padding-left: 30px;
+  }
+  .typora-export .footnote-line,
+  .typora-export li,
+  .typora-export p {
+    white-space: pre-wrap;
+  }
+
+  @media screen and (max-width: 500px) {
+    body.typora-export {
+      padding-right: 0;
+      padding-left: 0;
     }
-
-    .category-selected {
-      background-color: #d8dfff !important;
+    #write {
+      padding-right: 20px;
+      padding-left: 20px;
     }
-
-    .tag-search {
-      width: 100%;
-      height: 70%;
-      background: none;
-      border: 1px solid #2f2f2f;
-      border-width: 0 0 1px 0;
-      border-radius: 3px;
-      outline: none;
-
-      ::-webkit-input-placeholder {
-        color: black;
-      }
+    .CodeMirror-sizer {
+      margin-left: 0 !important;
     }
-
-    .layout-svg-save-dialog {
-      /deep/ .el-dialog {
-        width: 360px;
-        padding-right: 20px;
-        border-radius: 10px;
-      }
-
-      /deep/ .el-form-item__label {
-        text-align: center;
-      }
-
-      /deep/ .el-dialog__body {
-        padding: 12px 22px;
-      }
-
-      /deep/ .el-dialog__footer {
-        padding: 5px 20px 10px;
-      }
-
-      /deep/ .el-input-number {
-        line-height: 26px;
-      }
+    .CodeMirror-gutters {
+      display: none !important;
     }
-    /* stylelint-disable */
-    .layout-svg {
-      * {
-        text-align: left;
-      }
-      .in-text-selection,
-      ::selection { color: var(--select-text-font-color); text-shadow: none; background: var(--select-text-bg-color); }
-      #write { position: relative; width: inherit; height: auto; padding-top: 40px; margin: 0 auto; overflow-x: visible; word-break: normal; word-wrap: break-word; white-space: normal; }
-      #write.first-line-indent p { text-indent: 2em; }
-      #write.first-line-indent li p,
-      #write.first-line-indent p * { text-indent: 0; }
-      #write.first-line-indent li { margin-left: 2em; }
-      .for-image #write { padding-right: 8px; padding-left: 8px; }
-      body.typora-export { padding-right: 30px; padding-left: 30px; }
-      .typora-export .footnote-line,
-      .typora-export li,
-      .typora-export p { white-space: pre-wrap; }
-
-      @media screen and (max-width: 500px) {
-        body.typora-export { padding-right: 0; padding-left: 0; }
-        #write { padding-right: 20px; padding-left: 20px; }
-        .CodeMirror-sizer { margin-left: 0 !important; }
-        .CodeMirror-gutters { display: none !important; }
-      }
-      #write li > figure:last-child { margin-bottom: 0.5rem; }
-      #write ol,
-      #write ul { position: relative; }
-      img { max-width: 100%; vertical-align: middle; image-orientation: from-image; }
-      button,
-      input,
-      select,
-      textarea { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; color: inherit; font-variant-caps: inherit; }
-      input[type="checkbox"],
-      input[type="radio"] { padding: 0; line-height: normal; }
-      *,
-      ::after,
-      ::before { box-sizing: border-box; }
-      #write h1,
-      #write h2,
-      #write h3,
-      #write h4,
-      #write h5,
-      #write h6,
-      #write p,
-      #write pre { width: inherit; }
-      #write h1,
-      #write h2,
-      #write h3,
-      #write h4,
-      #write h5,
-      #write h6,
-      #write p { position: relative; }
-      p { line-height: inherit; }
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 { break-after: avoid-page; break-inside: avoid; orphans: 4; }
-      p { orphans: 4; }
-      h1 { font-size: 2rem; }
-      h2 { font-size: 1.8rem; }
-      h3 { font-size: 1.6rem; }
-      h4 { font-size: 1.4rem; }
-      h5 { font-size: 1.2rem; }
-      h6 { font-size: 1rem; }
-      .md-math-block,
-      .md-rawblock,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p { margin-top: 1rem; margin-bottom: 1rem; }
-      .hidden { display: none; }
-      .md-blockmeta { font-style: italic; font-weight: 700; color: rgb(204, 204, 204); }
-      a { cursor: pointer; }
-      sup.md-footnote { padding: 2px 4px; color: rgb(85, 85, 85); cursor: pointer; background-color: rgba(238, 238, 238, 0.7); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }
-      sup.md-footnote a,
-      sup.md-footnote a:hover { color: inherit; text-decoration: inherit; text-transform: inherit; }
-      #write input[type="checkbox"] { width: inherit; height: inherit; cursor: pointer; }
-      figure { max-width: calc(100% + 16px); padding: 0; margin: 1.2em 0; overflow-x: auto; }
-      figure > table { margin: 0; }
-      tr { break-inside: avoid; break-after: auto; }
-      thead { display: table-header-group; }
-      table { width: 100%; overflow: auto; text-align: left; border-spacing: 0; border-collapse: collapse; break-inside: auto; }
-      table.md-table td { min-width: 32px; }
-      .CodeMirror-gutters { background-color: inherit; border-right-width: 0; }
-      .CodeMirror-linenumber { }
-      .CodeMirror { text-align: left; }
-      .CodeMirror-placeholder { opacity: 0.3; }
-      .CodeMirror pre { padding: 0 4px; }
-      .CodeMirror-lines { padding: 0; }
-      div.hr:focus { cursor: none; }
-      #write pre { white-space: pre-wrap; }
-      #write.fences-no-line-wrapping pre { white-space: pre; }
-      #write pre.ty-contain-cm { white-space: normal; }
-      .CodeMirror-gutters { margin-right: 4px; }
-      .md-fences { position: relative !important; display: block; overflow: visible; font-size: 0.9rem; text-align: left; white-space: pre; background-color: inherit; background-image: inherit; background-repeat: inherit inherit; background-attachment: inherit; background-position: inherit inherit; background-clip: inherit; background-origin: inherit; background-size: inherit; break-inside: avoid; }
-      .md-diagram-panel { width: 100%; padding-top: 0; padding-bottom: 8px; margin-top: 10px; overflow-x: auto; text-align: center; }
-      #write .md-fences.mock-cm { white-space: pre-wrap; }
-      .md-fences.md-fences-with-lineno { padding-left: 0; }
-      #write.fences-no-line-wrapping .md-fences.mock-cm { overflow-x: auto; white-space: pre; }
-      .md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
-      .CodeMirror-line,
-      twitterwidget { break-inside: avoid; }
-      .footnotes { margin-top: 1em; margin-bottom: 1em; font-size: 0.9rem; opacity: 0.8; }
-      .footnotes + .footnotes { margin-top: 0; }
-      .md-reset { position: static; box-sizing: content-box; float: none; width: auto; height: auto; padding: 0; margin: 0; font-weight: 400; line-height: normal; text-align: left; text-decoration: none; text-shadow: none; white-space: nowrap; vertical-align: top; cursor: inherit; background-repeat: initial initial; background-position: 0 0; border: 0; outline: 0; direction: ltr; }
-      li div { padding-top: 0; }
-      blockquote { margin: 1rem 0; }
-      li .mathjax-block,
-      li p { margin: 0.5rem 0; }
-      li { position: relative; margin: 0; }
-      blockquote > :last-child { margin-bottom: 0; }
-      blockquote > :first-child,
-      li > :first-child { margin-top: 0; }
-      .footnotes-area { padding-bottom: 0.143rem; margin-top: 0.714rem; color: rgb(136, 136, 136); white-space: normal; }
-      #write .footnote-line { white-space: pre-wrap; }
-
-      @media print {
-        body,
-        html { height: 99%; border: 1px solid transparent; break-after: avoid; break-before: avoid; font-variant-ligatures: no-common-ligatures; }
-        #write { padding-top: 0; margin-top: 0; border-color: transparent !important; }
-        .typora-export * { -webkit-print-color-adjust: exact; }
-        html.blink-to-pdf { font-size: 13px; }
-        .typora-export #write { padding-right: 32px; padding-bottom: 0; padding-left: 32px; break-after: avoid; }
-        .typora-export #write::after { height: 0; }
-        .is-mac table { break-inside: avoid; }
-      }
-      .footnote-line { margin-top: 0.714em; font-size: 0.7em; }
-      a img,
-      img a { cursor: pointer; }
-      pre.md-meta-block { display: block; min-height: 0.8rem; overflow-x: hidden; font-size: 0.8rem; white-space: pre-wrap; background-color: rgb(204, 204, 204); background-repeat: initial initial; background-position: initial initial; }
-      p > .md-image:only-child:not(.md-img-error) img,
-      p > img:only-child { display: block; margin: auto; }
-      #write.first-line-indent p > .md-image:only-child:not(.md-img-error) img { position: relative; left: -2em; }
-      p > .md-image:only-child { display: inline-block; width: 100%; }
-      #write .MathJax_Display { margin: 0.8em 0 0; }
-      .md-math-block { width: 100%; }
-      .md-math-block:not(:empty)::after { display: none; }
-      [contenteditable="true"]:active,
-      [contenteditable="true"]:focus,
-      [contenteditable="false"]:active,
-      [contenteditable="false"]:focus { outline: 0; box-shadow: none; }
-      .md-task-list-item { position: relative; list-style-type: none; }
-      .task-list-item.md-task-list-item { padding-left: 0; }
-      .md-task-list-item > input { position: absolute; top: 0; left: 0; margin-top: calc(1em - 10px); margin-left: -1.2em; border: none; }
-      .math { font-size: 1rem; }
-      .md-toc { position: relative; min-height: 3.58rem; font-size: 0.9rem; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
-      .md-toc-content { position: relative; margin-left: 0; }
-      .md-toc-content::after,
-      .md-toc::after { display: none; }
-      .md-toc-item { display: block; color: rgb(65, 131, 196); }
-      .md-toc-item a { text-decoration: none; }
-      .md-toc-inner:hover { text-decoration: underline; }
-      .md-toc-inner { display: inline-block; cursor: pointer; }
-      .md-toc-h1 .md-toc-inner { margin-left: 0; font-weight: 700; }
-      .md-toc-h2 .md-toc-inner { margin-left: 2em; }
-      .md-toc-h3 .md-toc-inner { margin-left: 4em; }
-      .md-toc-h4 .md-toc-inner { margin-left: 6em; }
-      .md-toc-h5 .md-toc-inner { margin-left: 8em; }
-      .md-toc-h6 .md-toc-inner { margin-left: 10em; }
-
-      @media screen and (max-width: 48em) {
-        .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
-        .md-toc-h4 .md-toc-inner { margin-left: 5em; }
-        .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
-        .md-toc-h6 .md-toc-inner { margin-left: 8em; }
-      }
-      a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
-      .footnote-line a:not(.reversefootnote) { color: inherit; }
-      .md-attr { display: none; }
-      .md-fn-count::after { content: "."; }
-      code,
-      pre,
-      samp,
-      tt { font-family: var(--monospace); }
-      kbd { padding: 0.1em 0.6em; margin: 0 0.1em; font-size: 0.8em; color: rgb(36, 39, 41); white-space: nowrap; vertical-align: middle; background-color: rgb(255, 255, 255); background-repeat: initial initial; background-position: initial initial; border: 1px solid rgb(173, 179, 185); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0 1px 0, rgb(255, 255, 255) 0 0 0 2px inset; }
-      .md-comment { font-family: var(--monospace); color: rgb(162, 127, 3); opacity: 0.8; }
-      code { text-align: left; }
-      a.md-print-anchor { position: absolute !important; right: 0 !important; display: inline-block !important; width: 1px !important; text-shadow: initial !important; white-space: pre !important; background-repeat: initial initial !important; background-position: 0 0 !important; border: none !important; outline: 0 !important; }
-      .md-inline-math .MathJax_SVG .noError { display: none !important; }
-      .html-for-mac .inline-math-svg .MathJax_SVG { vertical-align: 0.2px; }
-      .md-math-block .MathJax_SVG_Display { position: relative; display: block !important; width: auto; min-width: 100%; max-width: none; min-height: 0; max-height: none; margin: 0; overflow-y: hidden; text-align: center; text-indent: 0; }
-      .MathJax_SVG_Display,
-      .md-inline-math .MathJax_SVG_Display { display: inline-block !important; width: auto; margin: inherit; }
-      .MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
-      .MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
-      .MathJax_SVG { display: inline; float: none; min-width: 0; max-width: none; min-height: 0; max-height: none; padding: 0; margin: 0; font-style: normal; font-weight: 400; line-height: normal; text-align: left; text-indent: 0; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; zoom: 90%; border: 0; word-spacing: normal; direction: ltr; }
-      .MathJax_SVG * { transition: none; }
-      .MathJax_SVG_Display svg { margin-top: 0 !important; margin-bottom: 0 !important; vertical-align: middle !important; }
-      .os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
-      .md-diagram-panel > svg { max-width: 100%; }
-      [lang="flow"] svg,
-      [lang="mermaid"] svg { max-width: 100%; height: auto; }
-      [lang="mermaid"] .node text { font-size: 1rem; }
-      table tr th { border-bottom-width: 0; }
-      video { display: block; max-width: 100%; margin: 0 auto; }
-      iframe { width: 100%; max-width: 100%; border: none; }
-      .highlight td,
-      .highlight tr { border: 0; }
-      svg[id^="mermaidChart"] { line-height: 1em; }
-      mark { color: rgb(0, 0, 0); background-color: rgb(255, 255, 0); background-repeat: initial initial; background-position: initial initial; }
-      .md-html-inline .md-plain,
-      .md-html-inline strong,
-      mark .md-inline-math,
-      mark strong { color: inherit; }
-      mark .md-meta { color: rgb(0, 0, 0); opacity: 0.3 !important; }
-
-      :root {
-        --side-bar-bg-color: #fafafa;
-        --control-text-color: #777;
-      }
-
-      @include-when-export url(https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
-
-      /* open-sans-regular - latin-ext_latin */
-
-      /* open-sans-italic - latin-ext_latin */
-
-      /* open-sans-700 - latin-ext_latin */
-
-      /* open-sans-700italic - latin-ext_latin */
-      html {
-        font-size: 16px;
-      }
-
-      body {
-        font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-        line-height: 1.6;
-        color: rgb(51, 51, 51);
-      }
-
-      #write {
-        max-width: 860px;
-        padding: 30px;
-        padding-bottom: 100px;
-        margin: 0 auto;
-      }
-
-      @media only screen and (min-width: 1400px) {
-        #write {
-          max-width: 1024px;
-        }
-      }
-
-      @media only screen and (min-width: 1800px) {
-        #write {
-          max-width: 1200px;
-        }
-      }
-
-      #write > ul:first-child,
-      #write > ol:first-child {
-        margin-top: 30px;
-      }
-
-      a {
-        color: #4183c4;
-      }
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        position: relative;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        font-weight: bold;
-        line-height: 1.4;
-        cursor: text;
-      }
-
-      h1:hover a.anchor,
-      h2:hover a.anchor,
-      h3:hover a.anchor,
-      h4:hover a.anchor,
-      h5:hover a.anchor,
-      h6:hover a.anchor {
-        text-decoration: none;
-      }
-
-      h1 tt,
-      h1 code {
-        font-size: inherit;
-      }
-
-      h2 tt,
-      h2 code {
-        font-size: inherit;
-      }
-
-      h3 tt,
-      h3 code {
-        font-size: inherit;
-      }
-
-      h4 tt,
-      h4 code {
-        font-size: inherit;
-      }
-
-      h5 tt,
-      h5 code {
-        font-size: inherit;
-      }
-
-      h6 tt,
-      h6 code {
-        font-size: inherit;
-      }
-
-      h1 {
-        padding-bottom: 0.3em;
-        font-size: 2.25em;
-        line-height: 1.2;
-        border-bottom: 1px solid #eee;
-      }
-
-      h2 {
-        padding-bottom: 0.3em;
-        font-size: 1.75em;
-        line-height: 1.225;
-        border-bottom: 1px solid #eee;
-      }
-
-      h3 {
-        font-size: 1.5em;
-        line-height: 1.43;
-      }
-
-      h4 {
-        font-size: 1.25em;
-      }
-
-      h5 {
-        font-size: 1em;
-      }
-
-      h6 {
-        font-size: 1em;
-        color: #777;
-      }
-
-      p,
-      blockquote,
-      ul,
-      ol,
-      dl,
-      table {
-        margin: 0.8em 0;
-      }
-
-      li > ol,
-      li > ul {
-        margin: 0 0;
-      }
-
-      hr {
-        box-sizing: content-box;
-        height: 2px;
-        padding: 0;
-        margin: 16px 0;
-        overflow: hidden;
-        background-color: #e7e7e7;
-        border: 0 none;
-      }
-
-      li p.first {
-        display: inline-block;
-      }
-
-      ul,
-      ol {
-        padding-left: 30px;
-      }
-
-      ul:first-child,
-      ol:first-child {
-        margin-top: 0;
-      }
-
-      ul:last-child,
-      ol:last-child {
-        margin-bottom: 0;
-      }
-
-      blockquote {
-        padding: 0 15px;
-        color: #777;
-        border-left: 4px solid #dfe2e5;
-      }
-
-      blockquote blockquote {
-        padding-right: 0;
-      }
-
-      table {
-        padding: 0;
-        word-break: initial;
-      }
-
-      table tr {
-        padding: 0;
-        margin: 0;
-        border-top: 1px solid #dfe2e5;
-      }
-
-      table tr:nth-child(2n),
-      thead {
-        background-color: #f8f8f8;
-      }
-
-      table tr th {
-        padding: 6px 13px;
-        margin: 0;
-        font-weight: bold;
-        border: 1px solid #dfe2e5;
-        border-bottom: 0;
-      }
-
-      table tr td {
-        padding: 6px 13px;
-        margin: 0;
-        border: 1px solid #dfe2e5;
-      }
-
-      table tr th:first-child,
-      table tr td:first-child {
-        margin-top: 0;
-      }
-
-      table tr th:last-child,
-      table tr td:last-child {
-        margin-bottom: 0;
-      }
-
-      .CodeMirror-lines {
-        padding-left: 4px;
-      }
-
-      .code-tooltip {
-        border-top: 1px solid #eef2f2;
-        box-shadow: 0 1px 1px 0 rgba(0, 28, 36, 0.3);
-      }
-
-      .md-fences,
-      code,
-      tt {
-        padding: 0;
-        padding: 2px 4px 0 4px;
-        font-size: 0.9em;
-        background-color: #f8f8f8;
-        border: 1px solid #e7eaed;
-        border-radius: 3px;
-      }
-
-      code {
-        padding: 0 2px 0 2px;
-        background-color: #f3f4f4;
-      }
-
-      .md-fences {
-        padding-top: 8px;
-        padding-bottom: 6px;
-        margin-top: 15px;
-        margin-bottom: 15px;
-      }
-
-      .md-task-list-item > input {
-        margin-left: -1.3em;
-      }
-
-      @media print {
-        html {
-          font-size: 13px;
-        }
-
-        table,
-        pre {
-          page-break-inside: avoid;
-        }
-
-        pre {
-          word-wrap: break-word;
-        }
-      }
-
-      .md-fences {
-        background-color: #f8f8f8;
-      }
-
-      #write pre.md-meta-block {
-        padding: 1rem;
-        margin-top: 0 !important;
-        font-size: 85%;
-        line-height: 1.45;
-        color: #777;
-        background-color: #f7f7f7;
-        border: 0;
-        border-radius: 3px;
-      }
-
-      .mathjax-block > .code-tooltip {
-        bottom: 0.375rem;
-      }
-
-      .md-mathjax-midline {
-        background: #fafafa;
-      }
-
-      #write > h3.md-focus::before {
-        top: 0.375rem;
-        left: -1.5625rem;
-      }
-
-      #write > h4.md-focus::before {
-        top: 0.285714286rem;
-        left: -1.5625rem;
-      }
-
-      #write > h5.md-focus::before {
-        top: 0.285714286rem;
-        left: -1.5625rem;
-      }
-
-      #write > h6.md-focus::before {
-        top: 0.285714286rem;
-        left: -1.5625rem;
-      }
-
-      .md-image > .md-meta {
-        padding: 2px 0 0 4px;
-        font-size: 0.9em;
-        color: inherit;
-
-        /* border: 1px solid #ddd; */
-        border-radius: 3px;
-      }
-
-      .md-tag {
-        color: #a7a7a7;
-        opacity: 1;
-      }
-
-      .md-toc {
-        padding-bottom: 20px;
-        margin-top: 20px;
-      }
-
-      .sidebar-tabs {
-        border-bottom: none;
-      }
-
-      #typora-quick-open {
-        background-color: #f8f8f8;
-        border: 1px solid #ddd;
-      }
-
-      #typora-quick-open-item {
-        background-color: #fafafa;
-        border-color: #fefefe #e5e5e5 #e5e5e5 #eee;
-        border-style: solid;
-        border-width: 1px;
-      }
-
-      /** focus mode */
-      .on-focus-mode blockquote {
-        border-left-color: rgba(85, 85, 85, 0.12);
-      }
-
-      header,
-      .context-menu,
-      .megamenu-content,
-      footer {
-        font-family: "Segoe UI", "Arial", sans-serif;
-      }
-
-      .file-node-content:hover .file-node-icon,
-      .file-node-content:hover .file-node-open-state {
-        visibility: visible;
-      }
-
-      .mac-seamless-mode #typora-sidebar {
-        background-color: #fafafa;
-        background-color: var(--side-bar-bg-color);
-      }
-
-      .md-lang {
-        color: #b4654d;
-      }
-
-      .html-for-mac .context-menu {
-        --item-hover-bg-color: #e6f0fe;
-      }
-
-      #md-notification .btn {
-        border: 0;
-      }
-
-      .dropdown-menu .divider {
-        border-color: #e5e5e5;
-      }
-
-      .ty-preferences .window-content {
-        background-color: #fafafa;
-      }
-
-      .ty-preferences .nav-group-item.active {
-        color: white;
-        background: #999;
-      }
-
-      .typora-export li,
-      .typora-export p,
-      .typora-export,
-      .footnote-line { white-space: normal; }
-
-      /deep/ .el-dialog {
-        width: 40%;
-        border-radius: 10px;
-      }
-
-      /deep/ .el-form-item__label {
-        text-align: center;
-      }
-
-      /deep/ .el-dialog__body {
-        padding: 12px 22px;
-      }
-
-      /deep/ .el-dialog__footer {
-        padding: 5px 20px 10px;
-      }
+  }
+  #write li > figure:last-child {
+    margin-bottom: 0.5rem;
+  }
+  #write ol,
+  #write ul {
+    position: relative;
+  }
+  img {
+    max-width: 100%;
+    vertical-align: middle;
+    image-orientation: from-image;
+  }
+  button,
+  input,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: inherit;
+    font-style: inherit;
+    font-weight: inherit;
+    font-stretch: inherit;
+    line-height: inherit;
+    color: inherit;
+    font-variant-caps: inherit;
+  }
+  input[type='checkbox'],
+  input[type='radio'] {
+    padding: 0;
+    line-height: normal;
+  }
+  *,
+  ::after,
+  ::before {
+    box-sizing: border-box;
+  }
+  #write h1,
+  #write h2,
+  #write h3,
+  #write h4,
+  #write h5,
+  #write h6,
+  #write p,
+  #write pre {
+    width: inherit;
+  }
+  #write h1,
+  #write h2,
+  #write h3,
+  #write h4,
+  #write h5,
+  #write h6,
+  #write p {
+    position: relative;
+  }
+  p {
+    line-height: inherit;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    break-after: avoid-page;
+    break-inside: avoid;
+    orphans: 4;
+  }
+  p {
+    orphans: 4;
+  }
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.8rem;
+  }
+  h3 {
+    font-size: 1.6rem;
+  }
+  h4 {
+    font-size: 1.4rem;
+  }
+  h5 {
+    font-size: 1.2rem;
+  }
+  h6 {
+    font-size: 1rem;
+  }
+  .md-math-block,
+  .md-rawblock,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  .hidden {
+    display: none;
+  }
+  .md-blockmeta {
+    font-style: italic;
+    font-weight: 700;
+    color: rgb(204, 204, 204);
+  }
+  a {
+    cursor: pointer;
+  }
+  sup.md-footnote {
+    padding: 2px 4px;
+    color: rgb(85, 85, 85);
+    cursor: pointer;
+    background-color: rgba(238, 238, 238, 0.7);
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  sup.md-footnote a,
+  sup.md-footnote a:hover {
+    color: inherit;
+    text-decoration: inherit;
+    text-transform: inherit;
+  }
+  #write input[type='checkbox'] {
+    width: inherit;
+    height: inherit;
+    cursor: pointer;
+  }
+  figure {
+    max-width: calc(100% + 16px);
+    padding: 0;
+    margin: 1.2em 0;
+    overflow-x: auto;
+  }
+  figure > table {
+    margin: 0;
+  }
+  tr {
+    break-inside: avoid;
+    break-after: auto;
+  }
+  thead {
+    display: table-header-group;
+  }
+  table {
+    width: 100%;
+    overflow: auto;
+    text-align: left;
+    border-spacing: 0;
+    border-collapse: collapse;
+    break-inside: auto;
+  }
+  table.md-table td {
+    min-width: 32px;
+  }
+  .CodeMirror-gutters {
+    background-color: inherit;
+    border-right-width: 0;
+  }
+  .CodeMirror-linenumber {
+  }
+  .CodeMirror {
+    text-align: left;
+  }
+  .CodeMirror-placeholder {
+    opacity: 0.3;
+  }
+  .CodeMirror pre {
+    padding: 0 4px;
+  }
+  .CodeMirror-lines {
+    padding: 0;
+  }
+  div.hr:focus {
+    cursor: none;
+  }
+  #write pre {
+    white-space: pre-wrap;
+  }
+  #write.fences-no-line-wrapping pre {
+    white-space: pre;
+  }
+  #write pre.ty-contain-cm {
+    white-space: normal;
+  }
+  .CodeMirror-gutters {
+    margin-right: 4px;
+  }
+  .md-fences {
+    position: relative !important;
+    display: block;
+    overflow: visible;
+    font-size: 0.9rem;
+    text-align: left;
+    white-space: pre;
+    background-color: inherit;
+    background-image: inherit;
+    background-repeat: inherit inherit;
+    background-attachment: inherit;
+    background-position: inherit inherit;
+    background-clip: inherit;
+    background-origin: inherit;
+    background-size: inherit;
+    break-inside: avoid;
+  }
+  .md-diagram-panel {
+    width: 100%;
+    padding-top: 0;
+    padding-bottom: 8px;
+    margin-top: 10px;
+    overflow-x: auto;
+    text-align: center;
+  }
+  #write .md-fences.mock-cm {
+    white-space: pre-wrap;
+  }
+  .md-fences.md-fences-with-lineno {
+    padding-left: 0;
+  }
+  #write.fences-no-line-wrapping .md-fences.mock-cm {
+    overflow-x: auto;
+    white-space: pre;
+  }
+  .md-fences.mock-cm.md-fences-with-lineno {
+    padding-left: 8px;
+  }
+  .CodeMirror-line,
+  twitterwidget {
+    break-inside: avoid;
+  }
+  .footnotes {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    font-size: 0.9rem;
+    opacity: 0.8;
+  }
+  .footnotes + .footnotes {
+    margin-top: 0;
+  }
+  .md-reset {
+    position: static;
+    box-sizing: content-box;
+    float: none;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    font-weight: 400;
+    line-height: normal;
+    text-align: left;
+    text-decoration: none;
+    text-shadow: none;
+    white-space: nowrap;
+    vertical-align: top;
+    cursor: inherit;
+    background-repeat: initial initial;
+    background-position: 0 0;
+    border: 0;
+    outline: 0;
+    direction: ltr;
+  }
+  li div {
+    padding-top: 0;
+  }
+  blockquote {
+    margin: 1rem 0;
+  }
+  li .mathjax-block,
+  li p {
+    margin: 0.5rem 0;
+  }
+  li {
+    position: relative;
+    margin: 0;
+  }
+  blockquote > :last-child {
+    margin-bottom: 0;
+  }
+  blockquote > :first-child,
+  li > :first-child {
+    margin-top: 0;
+  }
+  .footnotes-area {
+    padding-bottom: 0.143rem;
+    margin-top: 0.714rem;
+    color: rgb(136, 136, 136);
+    white-space: normal;
+  }
+  #write .footnote-line {
+    white-space: pre-wrap;
+  }
+
+  @media print {
+    body,
+    html {
+      height: 99%;
+      border: 1px solid transparent;
+      break-after: avoid;
+      break-before: avoid;
+      font-variant-ligatures: no-common-ligatures;
+    }
+    #write {
+      padding-top: 0;
+      margin-top: 0;
+      border-color: transparent !important;
+    }
+    .typora-export * {
+      -webkit-print-color-adjust: exact;
+    }
+    html.blink-to-pdf {
+      font-size: 13px;
+    }
+    .typora-export #write {
+      padding-right: 32px;
+      padding-bottom: 0;
+      padding-left: 32px;
+      break-after: avoid;
+    }
+    .typora-export #write::after {
+      height: 0;
+    }
+    .is-mac table {
+      break-inside: avoid;
+    }
+  }
+  .footnote-line {
+    margin-top: 0.714em;
+    font-size: 0.7em;
+  }
+  a img,
+  img a {
+    cursor: pointer;
+  }
+  pre.md-meta-block {
+    display: block;
+    min-height: 0.8rem;
+    overflow-x: hidden;
+    font-size: 0.8rem;
+    white-space: pre-wrap;
+    background-color: rgb(204, 204, 204);
+    background-repeat: initial initial;
+    background-position: initial initial;
+  }
+  p > .md-image:only-child:not(.md-img-error) img,
+  p > img:only-child {
+    display: block;
+    margin: auto;
+  }
+  #write.first-line-indent p > .md-image:only-child:not(.md-img-error) img {
+    position: relative;
+    left: -2em;
+  }
+  p > .md-image:only-child {
+    display: inline-block;
+    width: 100%;
+  }
+  #write .MathJax_Display {
+    margin: 0.8em 0 0;
+  }
+  .md-math-block {
+    width: 100%;
+  }
+  .md-math-block:not(:empty)::after {
+    display: none;
+  }
+  [contenteditable='true']:active,
+  [contenteditable='true']:focus,
+  [contenteditable='false']:active,
+  [contenteditable='false']:focus {
+    outline: 0;
+    box-shadow: none;
+  }
+  .md-task-list-item {
+    position: relative;
+    list-style-type: none;
+  }
+  .task-list-item.md-task-list-item {
+    padding-left: 0;
+  }
+  .md-task-list-item > input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: calc(1em - 10px);
+    margin-left: -1.2em;
+    border: none;
+  }
+  .math {
+    font-size: 1rem;
+  }
+  .md-toc {
+    position: relative;
+    min-height: 3.58rem;
+    font-size: 0.9rem;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+  }
+  .md-toc-content {
+    position: relative;
+    margin-left: 0;
+  }
+  .md-toc-content::after,
+  .md-toc::after {
+    display: none;
+  }
+  .md-toc-item {
+    display: block;
+    color: rgb(65, 131, 196);
+  }
+  .md-toc-item a {
+    text-decoration: none;
+  }
+  .md-toc-inner:hover {
+    text-decoration: underline;
+  }
+  .md-toc-inner {
+    display: inline-block;
+    cursor: pointer;
+  }
+  .md-toc-h1 .md-toc-inner {
+    margin-left: 0;
+    font-weight: 700;
+  }
+  .md-toc-h2 .md-toc-inner {
+    margin-left: 2em;
+  }
+  .md-toc-h3 .md-toc-inner {
+    margin-left: 4em;
+  }
+  .md-toc-h4 .md-toc-inner {
+    margin-left: 6em;
+  }
+  .md-toc-h5 .md-toc-inner {
+    margin-left: 8em;
+  }
+  .md-toc-h6 .md-toc-inner {
+    margin-left: 10em;
+  }
+
+  @media screen and (max-width: 48em) {
+    .md-toc-h3 .md-toc-inner {
+      margin-left: 3.5em;
+    }
+    .md-toc-h4 .md-toc-inner {
+      margin-left: 5em;
+    }
+    .md-toc-h5 .md-toc-inner {
+      margin-left: 6.5em;
+    }
+    .md-toc-h6 .md-toc-inner {
+      margin-left: 8em;
+    }
+  }
+  a.md-toc-inner {
+    font-size: inherit;
+    font-style: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+  .footnote-line a:not(.reversefootnote) {
+    color: inherit;
+  }
+  .md-attr {
+    display: none;
+  }
+  .md-fn-count::after {
+    content: '.';
+  }
+  code,
+  pre,
+  samp,
+  tt {
+    font-family: var(--monospace);
+  }
+  kbd {
+    padding: 0.1em 0.6em;
+    margin: 0 0.1em;
+    font-size: 0.8em;
+    color: rgb(36, 39, 41);
+    white-space: nowrap;
+    vertical-align: middle;
+    background-color: rgb(255, 255, 255);
+    background-repeat: initial initial;
+    background-position: initial initial;
+    border: 1px solid rgb(173, 179, 185);
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    box-shadow: rgba(12, 13, 14, 0.2) 0 1px 0, rgb(255, 255, 255) 0 0 0 2px inset;
+  }
+  .md-comment {
+    font-family: var(--monospace);
+    color: rgb(162, 127, 3);
+    opacity: 0.8;
+  }
+  code {
+    text-align: left;
+  }
+  a.md-print-anchor {
+    position: absolute !important;
+    right: 0 !important;
+    display: inline-block !important;
+    width: 1px !important;
+    text-shadow: initial !important;
+    white-space: pre !important;
+    background-repeat: initial initial !important;
+    background-position: 0 0 !important;
+    border: none !important;
+    outline: 0 !important;
+  }
+  .md-inline-math .MathJax_SVG .noError {
+    display: none !important;
+  }
+  .html-for-mac .inline-math-svg .MathJax_SVG {
+    vertical-align: 0.2px;
+  }
+  .md-math-block .MathJax_SVG_Display {
+    position: relative;
+    display: block !important;
+    width: auto;
+    min-width: 100%;
+    max-width: none;
+    min-height: 0;
+    max-height: none;
+    margin: 0;
+    overflow-y: hidden;
+    text-align: center;
+    text-indent: 0;
+  }
+  .MathJax_SVG_Display,
+  .md-inline-math .MathJax_SVG_Display {
+    display: inline-block !important;
+    width: auto;
+    margin: inherit;
+  }
+  .MathJax_SVG .MJX-monospace {
+    font-family: var(--monospace);
+  }
+  .MathJax_SVG .MJX-sans-serif {
+    font-family: sans-serif;
+  }
+  .MathJax_SVG {
+    display: inline;
+    float: none;
+    min-width: 0;
+    max-width: none;
+    min-height: 0;
+    max-height: none;
+    padding: 0;
+    margin: 0;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-align: left;
+    text-indent: 0;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    zoom: 90%;
+    border: 0;
+    word-spacing: normal;
+    direction: ltr;
+  }
+  .MathJax_SVG * {
+    transition: none;
+  }
+  .MathJax_SVG_Display svg {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    vertical-align: middle !important;
+  }
+  .os-windows.monocolor-emoji .md-emoji {
+    font-family: 'Segoe UI Symbol', sans-serif;
+  }
+  .md-diagram-panel > svg {
+    max-width: 100%;
+  }
+  [lang='flow'] svg,
+  [lang='mermaid'] svg {
+    max-width: 100%;
+    height: auto;
+  }
+  [lang='mermaid'] .node text {
+    font-size: 1rem;
+  }
+  table tr th {
+    border-bottom-width: 0;
+  }
+  video {
+    display: block;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+  iframe {
+    width: 100%;
+    max-width: 100%;
+    border: none;
+  }
+  .highlight td,
+  .highlight tr {
+    border: 0;
+  }
+  svg[id^='mermaidChart'] {
+    line-height: 1em;
+  }
+  mark {
+    color: rgb(0, 0, 0);
+    background-color: rgb(255, 255, 0);
+    background-repeat: initial initial;
+    background-position: initial initial;
+  }
+  .md-html-inline .md-plain,
+  .md-html-inline strong,
+  mark .md-inline-math,
+  mark strong {
+    color: inherit;
+  }
+  mark .md-meta {
+    color: rgb(0, 0, 0);
+    opacity: 0.3 !important;
+  }
+
+  :root {
+    --side-bar-bg-color: #fafafa;
+    --control-text-color: #777;
+  }
+
+  @include-when-export url(https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
+
+  /* open-sans-regular - latin-ext_latin */
+
+  /* open-sans-italic - latin-ext_latin */
+
+  /* open-sans-700 - latin-ext_latin */
+
+  /* open-sans-700italic - latin-ext_latin */
+  html {
+    font-size: 16px;
+  }
+
+  body {
+    font-family: 'Open Sans', 'Clear Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 1.6;
+    color: rgb(51, 51, 51);
+  }
+
+  #write {
+    max-width: 860px;
+    padding: 30px;
+    padding-bottom: 100px;
+    margin: 0 auto;
+  }
+
+  @media only screen and (min-width: 1400px) {
+    #write {
+      max-width: 1024px;
+    }
+  }
 
-      /deep/ .el-input-number {
-        line-height: 26px;
-      }
+  @media only screen and (min-width: 1800px) {
+    #write {
+      max-width: 1200px;
     }
-    /* stylelint-enable*/
-    @{deep}.anim {
-      animation: myfirst 5s;
+  }
+
+  #write > ul:first-child,
+  #write > ol:first-child {
+    margin-top: 30px;
+  }
+
+  a {
+    color: #4183c4;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-weight: bold;
+    line-height: 1.4;
+    cursor: text;
+  }
+
+  h1:hover a.anchor,
+  h2:hover a.anchor,
+  h3:hover a.anchor,
+  h4:hover a.anchor,
+  h5:hover a.anchor,
+  h6:hover a.anchor {
+    text-decoration: none;
+  }
+
+  h1 tt,
+  h1 code {
+    font-size: inherit;
+  }
+
+  h2 tt,
+  h2 code {
+    font-size: inherit;
+  }
+
+  h3 tt,
+  h3 code {
+    font-size: inherit;
+  }
+
+  h4 tt,
+  h4 code {
+    font-size: inherit;
+  }
+
+  h5 tt,
+  h5 code {
+    font-size: inherit;
+  }
+
+  h6 tt,
+  h6 code {
+    font-size: inherit;
+  }
+
+  h1 {
+    padding-bottom: 0.3em;
+    font-size: 2.25em;
+    line-height: 1.2;
+    border-bottom: 1px solid #eee;
+  }
+
+  h2 {
+    padding-bottom: 0.3em;
+    font-size: 1.75em;
+    line-height: 1.225;
+    border-bottom: 1px solid #eee;
+  }
+
+  h3 {
+    font-size: 1.5em;
+    line-height: 1.43;
+  }
+
+  h4 {
+    font-size: 1.25em;
+  }
+
+  h5 {
+    font-size: 1em;
+  }
+
+  h6 {
+    font-size: 1em;
+    color: #777;
+  }
+
+  p,
+  blockquote,
+  ul,
+  ol,
+  dl,
+  table {
+    margin: 0.8em 0;
+  }
+
+  li > ol,
+  li > ul {
+    margin: 0 0;
+  }
+
+  hr {
+    box-sizing: content-box;
+    height: 2px;
+    padding: 0;
+    margin: 16px 0;
+    overflow: hidden;
+    background-color: #e7e7e7;
+    border: 0 none;
+  }
+
+  li p.first {
+    display: inline-block;
+  }
+
+  ul,
+  ol {
+    padding-left: 30px;
+  }
+
+  ul:first-child,
+  ol:first-child {
+    margin-top: 0;
+  }
+
+  ul:last-child,
+  ol:last-child {
+    margin-bottom: 0;
+  }
+
+  blockquote {
+    padding: 0 15px;
+    color: #777;
+    border-left: 4px solid #dfe2e5;
+  }
+
+  blockquote blockquote {
+    padding-right: 0;
+  }
+
+  table {
+    padding: 0;
+    word-break: initial;
+  }
+
+  table tr {
+    padding: 0;
+    margin: 0;
+    border-top: 1px solid #dfe2e5;
+  }
+
+  table tr:nth-child(2n),
+  thead {
+    background-color: #f8f8f8;
+  }
+
+  table tr th {
+    padding: 6px 13px;
+    margin: 0;
+    font-weight: bold;
+    border: 1px solid #dfe2e5;
+    border-bottom: 0;
+  }
+
+  table tr td {
+    padding: 6px 13px;
+    margin: 0;
+    border: 1px solid #dfe2e5;
+  }
+
+  table tr th:first-child,
+  table tr td:first-child {
+    margin-top: 0;
+  }
+
+  table tr th:last-child,
+  table tr td:last-child {
+    margin-bottom: 0;
+  }
+
+  .CodeMirror-lines {
+    padding-left: 4px;
+  }
+
+  .code-tooltip {
+    border-top: 1px solid #eef2f2;
+    box-shadow: 0 1px 1px 0 rgba(0, 28, 36, 0.3);
+  }
+
+  .md-fences,
+  code,
+  tt {
+    padding: 0;
+    padding: 2px 4px 0 4px;
+    font-size: 0.9em;
+    background-color: #f8f8f8;
+    border: 1px solid #e7eaed;
+    border-radius: 3px;
+  }
+
+  code {
+    padding: 0 2px 0 2px;
+    background-color: #f3f4f4;
+  }
+
+  .md-fences {
+    padding-top: 8px;
+    padding-bottom: 6px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
+  .md-task-list-item > input {
+    margin-left: -1.3em;
+  }
+
+  @media print {
+    html {
+      font-size: 13px;
     }
 
-    @keyframes myfirst {
-      from {
-        transform: rotate(0deg);
-      }
+    table,
+    pre {
+      page-break-inside: avoid;
+    }
 
-      to {
-        transform: rotate(-360deg);
-      }
+    pre {
+      word-wrap: break-word;
     }
-</style>
\ No newline at end of file
+  }
+
+  .md-fences {
+    background-color: #f8f8f8;
+  }
+
+  #write pre.md-meta-block {
+    padding: 1rem;
+    margin-top: 0 !important;
+    font-size: 85%;
+    line-height: 1.45;
+    color: #777;
+    background-color: #f7f7f7;
+    border: 0;
+    border-radius: 3px;
+  }
+
+  .mathjax-block > .code-tooltip {
+    bottom: 0.375rem;
+  }
+
+  .md-mathjax-midline {
+    background: #fafafa;
+  }
+
+  #write > h3.md-focus::before {
+    top: 0.375rem;
+    left: -1.5625rem;
+  }
+
+  #write > h4.md-focus::before {
+    top: 0.285714286rem;
+    left: -1.5625rem;
+  }
+
+  #write > h5.md-focus::before {
+    top: 0.285714286rem;
+    left: -1.5625rem;
+  }
+
+  #write > h6.md-focus::before {
+    top: 0.285714286rem;
+    left: -1.5625rem;
+  }
+
+  .md-image > .md-meta {
+    padding: 2px 0 0 4px;
+    font-size: 0.9em;
+    color: inherit;
+
+    /* border: 1px solid #ddd; */
+    border-radius: 3px;
+  }
+
+  .md-tag {
+    color: #a7a7a7;
+    opacity: 1;
+  }
+
+  .md-toc {
+    padding-bottom: 20px;
+    margin-top: 20px;
+  }
+
+  .sidebar-tabs {
+    border-bottom: none;
+  }
+
+  #typora-quick-open {
+    background-color: #f8f8f8;
+    border: 1px solid #ddd;
+  }
+
+  #typora-quick-open-item {
+    background-color: #fafafa;
+    border-color: #fefefe #e5e5e5 #e5e5e5 #eee;
+    border-style: solid;
+    border-width: 1px;
+  }
+
+  /** focus mode */
+  .on-focus-mode blockquote {
+    border-left-color: rgba(85, 85, 85, 0.12);
+  }
+
+  header,
+  .context-menu,
+  .megamenu-content,
+  footer {
+    font-family: 'Segoe UI', 'Arial', sans-serif;
+  }
+
+  .file-node-content:hover .file-node-icon,
+  .file-node-content:hover .file-node-open-state {
+    visibility: visible;
+  }
+
+  .mac-seamless-mode #typora-sidebar {
+    background-color: #fafafa;
+    background-color: var(--side-bar-bg-color);
+  }
+
+  .md-lang {
+    color: #b4654d;
+  }
+
+  .html-for-mac .context-menu {
+    --item-hover-bg-color: #e6f0fe;
+  }
+
+  #md-notification .btn {
+    border: 0;
+  }
+
+  .dropdown-menu .divider {
+    border-color: #e5e5e5;
+  }
+
+  .ty-preferences .window-content {
+    background-color: #fafafa;
+  }
+
+  .ty-preferences .nav-group-item.active {
+    color: white;
+    background: #999;
+  }
+
+  .typora-export li,
+  .typora-export p,
+  .typora-export,
+  .footnote-line {
+    white-space: normal;
+  }
+
+  /deep/ .el-dialog {
+    width: 40%;
+    border-radius: 10px;
+  }
+
+  /deep/ .el-form-item__label {
+    text-align: center;
+  }
+
+  /deep/ .el-dialog__body {
+    padding: 12px 22px;
+  }
+
+  /deep/ .el-dialog__footer {
+    padding: 5px 20px 10px;
+  }
+
+  /deep/ .el-input-number {
+    line-height: 26px;
+  }
+}
+/* stylelint-enable*/
+@{deep}.anim {
+  animation: myfirst 5s;
+}
+
+@keyframes myfirst {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
+}
+</style>
diff --git a/webapp/src/views/visual/Visual/customs/Category.vue b/webapp/src/views/visual/Visual/customs/Category.vue
index 1f28f83..035b684 100644
--- a/webapp/src/views/visual/Visual/customs/Category.vue
+++ b/webapp/src/views/visual/Visual/customs/Category.vue
@@ -1,79 +1,75 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <style lang="scss" scoped>
-  .test {
+.test {
+  position: relative;
+  width: 80%;
+  padding: 2% 0 2% 0;
+  margin: 0 0 0 10%;
+  color: white;
+  background-color: #2c2d2f;
+  opacity: 0.5;
+
+  p {
     position: relative;
-    width: 80%;
-    padding: 2% 0 2% 0;
-    margin: 0 0 0 10%;
-    color: white;
-    background-color: #2c2d2f;
-    opacity: 0.5;
+    padding: 1% 0 1% 0;
+    margin: 0;
+  }
 
-    p {
-      position: relative;
-      padding: 1% 0 1% 0;
-      margin: 0;
+  .test-title {
+    text-align: left;
+
+    span {
+      margin: 0 0 0 5%;
+      font-size: 16px;
+      font-weight: 600;
     }
+  }
 
-    .test-title {
-      text-align: left;
+  .test-content {
+    display: flex;
+    font-size: 15px;
+    text-align: left;
 
-      span {
-        margin: 0 0 0 5%;
-        font-size: 16px;
-        font-weight: 600;
-      }
+    .span-key {
+      flex: 3;
+      font-weight: 500;
+      text-align: right;
     }
 
-    .test-content {
-      display: flex;
-      font-size: 15px;
+    .span-content {
+      flex: 7;
+      margin: 0 0 0 2%;
+      overflow: hidden;
+      font-weight: 500;
       text-align: left;
-
-      .span-key {
-        flex: 3;
-        font-weight: 500;
-        text-align: right;
-      }
-
-      .span-content {
-        flex: 7;
-        margin: 0 0 0 2%;
-        overflow: hidden;
-        font-weight: 500;
-        text-align: left;
-        word-wrap: break-word;
-        white-space: pre-wrap;
-        background-color: black;
-      }
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      background-color: black;
     }
   }
+}
 </style>
 <template>
   <div class="test">
     <p :class="['test-title']">
       <span>{{ name }}</span>
     </p>
-    <p
-      v-for="(item, key, i) in content"
-      :key="i"
-      :class="['test-content']"
-    >
+    <p v-for="(item, key, i) in content" :key="i" :class="['test-content']">
       <span :class="['span-key']">{{ key }}:</span>
       <span :class="['span-content']">{{ item }}</span>
     </p>
@@ -89,7 +85,6 @@ export default {
       type: String,
     },
   },
-  mounted() {
-  },
+  mounted() {},
 };
 </script>
diff --git a/webapp/src/views/visual/Visual/customs/Customs.vue b/webapp/src/views/visual/Visual/customs/Customs.vue
index 1774db5..e72bd5c 100644
--- a/webapp/src/views/visual/Visual/customs/Customs.vue
+++ b/webapp/src/views/visual/Visual/customs/Customs.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <style lang="less" scoped>
 .temp {
@@ -180,37 +180,58 @@
           <div>
             <div class="scalarscontent">
               <el-row :gutter="20">
-                <ScalarContainer v-for="(val, name) in scalarData" :key="name" :content="val" :chartname="name" />
+                <ScalarContainer
+                  v-for="(val, name) in scalarData"
+                  :key="name"
+                  :content="val"
+                  :chartname="name"
+                />
               </el-row>
             </div>
           </div>
         </div>
 
         <div id="audio">
-          <div :style="hasAudio.hasData?'':'display:none'">
+          <div :style="hasAudio.hasData ? '' : 'display:none'">
             <div class="scalarscontent">
               <el-row :gutter="20">
-                <AudioContainer v-for="item in audioData" ref="AudioContainer" :key="item.index" :content="item.content" :index="item.index" />
+                <AudioContainer
+                  v-for="item in audioData"
+                  ref="AudioContainer"
+                  :key="item.index"
+                  :content="item.content"
+                  :index="item.index"
+                />
               </el-row>
             </div>
           </div>
         </div>
 
         <div id="image">
-          <div :style="hasImage.hasData?'':'display:none'">
+          <div :style="hasImage.hasData ? '' : 'display:none'">
             <div class="scalarscontent">
               <el-row :gutter="20">
-                <ImageContainer v-for="item in imageData" ref="ImageContainer" :key="item.content.run + '/' + Object.keys(item.content.value)[0]" :content="item.content" />
+                <ImageContainer
+                  v-for="item in imageData"
+                  ref="ImageContainer"
+                  :key="item.content.run + '/' + Object.keys(item.content.value)[0]"
+                  :content="item.content"
+                />
               </el-row>
             </div>
           </div>
         </div>
 
         <div id="text">
-          <div :style="hasText.hasData?'':'display:none'">
+          <div :style="hasText.hasData ? '' : 'display:none'">
             <div class="scalarscontent">
               <el-row :gutter="20">
-                <TextContainer v-for="item in textData" ref="TextContainer" :key="item.content.run + '/' + Object.keys(item.content.value)[0]" :content="item.content" />
+                <TextContainer
+                  v-for="item in textData"
+                  ref="TextContainer"
+                  :key="item.content.run + '/' + Object.keys(item.content.value)[0]"
+                  :content="item.content"
+                />
               </el-row>
             </div>
           </div>
@@ -219,8 +240,12 @@
         <div id="histogram">
           <div class="statistics-container">
             <div :class="['statistics-content']">
-              <div v-for="item in statisticData" :id="item.divId" :key="item.divId" class="allStatisticContainer">
-
+              <div
+                v-for="item in statisticData"
+                :id="item.divId"
+                :key="item.divId"
+                class="allStatisticContainer"
+              >
                 <statisticContainer
                   ref="histoContainer"
                   :key="item.ttlabel"
@@ -239,7 +264,10 @@
           </div>
         </div>
         <div v-if="!hasData">
-          <p>本页面支持将其他页面的数据通过“定制”按钮  <i class="iconfont icon-ziyuan104" />  导入到本页面</p>
+          <p>
+            本页面支持将其他页面的数据通过“定制”按钮
+            <i class="iconfont icon-ziyuan104" /> 导入到本页面
+          </p>
           <p>支持将媒体数据、统计分析和标量数据导入到本页面</p>
         </div>
       </div>
@@ -248,16 +276,15 @@
 </template>
 <script>
 import { createNamespacedHelpers } from 'vuex';
-import statisticContainer from "../statistics/drawStatistic/statisticContainer";
-import ImageContainer from "../medias/image/imagecontainer/ImageContainer";
-import TextContainer from "../medias/text/textContainer/TextContainer";
-import AudioContainer from "../medias/audio/audioContainer/AudioContainer";
-import ScalarContainer from "../scalars/scalarcontainer/ScalarCustom";
+import statisticContainer from '../statistics/drawStatistic/statisticContainer';
+import ImageContainer from '../medias/image/imagecontainer/ImageContainer';
+import TextContainer from '../medias/text/textContainer/TextContainer';
+import AudioContainer from '../medias/audio/audioContainer/AudioContainer';
+import ScalarContainer from '../scalars/scalarcontainer/ScalarCustom';
 
-const {
-  mapMutations: mapCustomMutations,
-  mapGetters: mapCustomGetters,
-} = createNamespacedHelpers('Visual/custom');
+const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers(
+  'Visual/custom'
+);
 
 export default {
   components: {
@@ -325,7 +352,13 @@ export default {
         this.hasText.hasData = 0;
         this.hasText.showFlag = 0;
       }
-      if (this.audioData.length || this.textData.length || this.imageData.length || this.statisticData.length || Object.keys(this.scalarData).length) {
+      if (
+        this.audioData.length ||
+        this.textData.length ||
+        this.imageData.length ||
+        this.statisticData.length ||
+        Object.keys(this.scalarData).length
+      ) {
         this.hasData = true;
       } else {
         this.hasData = false;
@@ -337,7 +370,13 @@ export default {
         this.hasImage.showFlag = 0;
       }
       this.imageData = this.getImageData;
-      if (this.audioData.length || this.textData.length || this.imageData.length || this.statisticData.length || Object.keys(this.scalarData).length) {
+      if (
+        this.audioData.length ||
+        this.textData.length ||
+        this.imageData.length ||
+        this.statisticData.length ||
+        Object.keys(this.scalarData).length
+      ) {
         this.hasData = true;
       } else {
         this.hasData = false;
@@ -345,7 +384,13 @@ export default {
     },
     getScalarData(val) {
       this.scalarData = val;
-      if (this.audioData.length || this.textData.length || this.imageData.length || this.statisticData.length || Object.keys(this.scalarData).length) {
+      if (
+        this.audioData.length ||
+        this.textData.length ||
+        this.imageData.length ||
+        this.statisticData.length ||
+        Object.keys(this.scalarData).length
+      ) {
         this.hasData = true;
       } else {
         this.hasData = false;
@@ -353,7 +398,13 @@ export default {
     },
     getStatisticData(val) {
       this.statisticData = val;
-      if (this.audioData.length || this.textData.length || this.imageData.length || this.statisticData.length || Object.keys(this.scalarData).length) {
+      if (
+        this.audioData.length ||
+        this.textData.length ||
+        this.imageData.length ||
+        this.statisticData.length ||
+        Object.keys(this.scalarData).length
+      ) {
         this.hasData = true;
       } else {
         this.hasData = false;
@@ -366,7 +417,13 @@ export default {
     this.imageData = this.getImageData;
     this.scalarData = this.getScalarData;
     this.statisticData = this.getStatisticData;
-    if (this.audioData.length || this.textData.length || this.imageData.length || this.statisticData.length || Object.keys(this.scalarData).length) {
+    if (
+      this.audioData.length ||
+      this.textData.length ||
+      this.imageData.length ||
+      this.statisticData.length ||
+      Object.keys(this.scalarData).length
+    ) {
       this.hasData = true;
     } else {
       this.hasData = false;
diff --git a/webapp/src/views/visual/Visual/customs/CustomsPanel.vue b/webapp/src/views/visual/Visual/customs/CustomsPanel.vue
index 0938ced..0930e8e 100644
--- a/webapp/src/views/visual/Visual/customs/CustomsPanel.vue
+++ b/webapp/src/views/visual/Visual/customs/CustomsPanel.vue
@@ -1,97 +1,97 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <style lang="less" scoped>
-  .temp {
-    height: 100px;
+.temp {
+  height: 100px;
 
-    .test1 {
-      margin: 3% 0 0 0;
-      text-align: center;
-    }
+  .test1 {
+    margin: 3% 0 0 0;
+    text-align: center;
   }
-
-  .show {
-    display: none;
-  }
-
-  .infoTitle {
-    height: 30px;
-    padding-left: 5%;
-    font-size: 12px;
-    line-height: 30px;
-    color: white;
-    text-align: left;
-    background-color: #625eb3;
-    border-radius: 3px;
-
-    .dot {
-      margin-right: 2%;
-    }
-  }
-
-  .statisticPanelContent {
-    padding: 5% 10% 8% 10%;
-    font-size: 11px;
-    text-align: left;
-    border-radius: 0 0 3px 3px;
-  }
-
-  .selectMode {
-    margin-top: 12%;
-    line-height: 30px;
-  }
-
-  .scroll1 {
-    margin-top: 7%;
-  }
-
-  .scroll .rangeNumber {
-    margin-top: 1%;
-  }
-
-  .statisticInfo {
-    margin-top: 6%;
-  }
-
-  .info {
-    width: 100%;
-  }
-
-  .infoContent {
-    padding: 5% 10% 3% 10%;
-    font-size: 11px;
-    text-align: left;
-  }
-
-  .infoContent div {
-    margin-bottom: 3%;
-  }
-
-  .el-select-dropdown__item.selected {
-    color: #625eb3;
-  }
-
-  .el-select-dropdown__item {
-    font-size: 11px;
+}
+
+.show {
+  display: none;
+}
+
+.infoTitle {
+  height: 30px;
+  padding-left: 5%;
+  font-size: 12px;
+  line-height: 30px;
+  color: white;
+  text-align: left;
+  background-color: #625eb3;
+  border-radius: 3px;
+
+  .dot {
+    margin-right: 2%;
   }
+}
+
+.statisticPanelContent {
+  padding: 5% 10% 8% 10%;
+  font-size: 11px;
+  text-align: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.selectMode {
+  margin-top: 12%;
+  line-height: 30px;
+}
+
+.scroll1 {
+  margin-top: 7%;
+}
+
+.scroll .rangeNumber {
+  margin-top: 1%;
+}
+
+.statisticInfo {
+  margin-top: 6%;
+}
+
+.info {
+  width: 100%;
+}
+
+.infoContent {
+  padding: 5% 10% 3% 10%;
+  font-size: 11px;
+  text-align: left;
+}
+
+.infoContent div {
+  margin-bottom: 3%;
+}
+
+.el-select-dropdown__item.selected {
+  color: #625eb3;
+}
+
+.el-select-dropdown__item {
+  font-size: 11px;
+}
 </style>
 <template>
   <div style="display: flex; flex-direction: column; height: 100%;">
-    <div id="8888" style="height: 50%; overflow: auto;" :class="[scalar?'':'show']">
+    <div id="8888" style="height: 50%; overflow: auto;" :class="[scalar ? '' : 'show']">
       <el-col :span="24">
         <ScalarsPanel style="clear: both;" />
         <div />
@@ -117,7 +117,11 @@
             <el-row>
               <el-col :span="8">模式</el-col>
               <el-col :span="16">
-                <el-select v-model="statisticMode" class="histmodeselect" @change="setStatisticMode(statisticMode)">
+                <el-select
+                  v-model="statisticMode"
+                  class="histmodeselect"
+                  @change="setStatisticMode(statisticMode)"
+                >
                   <el-option value="三维">三维</el-option>
                   <el-option value="二维">二维</el-option>
                 </el-select>
@@ -163,9 +167,11 @@
 </template>
 <script>
 import { createNamespacedHelpers } from 'vuex';
-import ScalarsPanel from "../scalars/ScalarsPanel";
+import ScalarsPanel from '../scalars/ScalarsPanel';
 
-const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers('Visual/custom');
+const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers(
+  'Visual/custom'
+);
 const { mapGetters: mapStatisticGatters } = createNamespacedHelpers('Visual/statistic');
 export default {
   components: {
diff --git a/webapp/src/views/visual/Visual/customs/index.js b/webapp/src/views/visual/Visual/customs/index.js
index 1d22e68..d3b9be1 100644
--- a/webapp/src/views/visual/Visual/customs/index.js
+++ b/webapp/src/views/visual/Visual/customs/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 export { default as Customs } from './Customs';
 export { default as CustomsPanel } from './CustomsPanel';
diff --git a/webapp/src/views/visual/Visual/embeddings/EmbeddingDraw.vue b/webapp/src/views/visual/Visual/embeddings/EmbeddingDraw.vue
index ebfe660..fe5866d 100644
--- a/webapp/src/views/visual/Visual/embeddings/EmbeddingDraw.vue
+++ b/webapp/src/views/visual/Visual/embeddings/EmbeddingDraw.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <style lang="less" scoped>
 /deep/ .dimension {
@@ -147,7 +147,10 @@ svg {
 
 <template>
   <div class="container">
-    <span id="title">#{{ getCurInfo.curMethod }} - {{ getCurInfo.curDim }} | Current-Step : {{ getCurInfo.curMapStep }}</span>
+    <span id="title"
+      >#{{ getCurInfo.curMethod }} - {{ getCurInfo.curDim }} | Current-Step :
+      {{ getCurInfo.curMapStep }}</span
+    >
     <div id="main" ref="draw" class="draw">
       <div v-show="getCurInfo.curDim === '3维'" id="threeDimension" style="width: 100%;" />
     </div>
@@ -229,9 +232,7 @@ export default {
       'getLegendColor',
       'getLineWidth',
     ]),
-    ...mapLayoutStates([
-      'userSelectRunFile',
-    ]),
+    ...mapLayoutStates(['userSelectRunFile']),
     clickEleCumputed: {
       get() {
         return this.clickEle;
@@ -251,9 +252,9 @@ export default {
           this.localCurInfo = JSON.parse(JSON.stringify(val));
           this.renderInit();
         } else if (val.curDim !== this.localCurInfo.curDim) {
-            this.localCurInfo = JSON.parse(JSON.stringify(val));
-            this.renderInit();
-          }
+          this.localCurInfo = JSON.parse(JSON.stringify(val));
+          this.renderInit();
+        }
       },
       deep: true,
     },
@@ -272,7 +273,7 @@ export default {
   },
   mounted() {
     this.renderInit();
-    if (typeof (this.getCurData) !== 'undefined') {
+    if (typeof this.getCurData !== 'undefined') {
       this.renderUpdate(this.getCurData);
     }
   },
@@ -281,7 +282,8 @@ export default {
     renderInit() {
       if (JSON.stringify(this.localCurInfo) === '{}') {
         // empty
-      } else if (parseInt(this.localCurInfo.curDim, 10) === 3) { // 是3维显示
+      } else if (parseInt(this.localCurInfo.curDim, 10) === 3) {
+        // 是3维显示
         this.renderThreeInit();
       } else if (parseInt(this.localCurInfo.curDim, 10) === 2) {
         this.renderTwoInit();
@@ -292,10 +294,20 @@ export default {
     },
     renderTwoInit() {
       const vm = this;
-      this.height = d3.select(this.$refs.draw).node().getBoundingClientRect().height;
-      this.width = d3.select(this.$refs.draw).node().getBoundingClientRect().width;
-      d3.select(this.$refs.draw).select('svg').remove(); // 先清空svg
-      const svg = d3.select(this.$refs.draw).append('svg')
+      this.height = d3
+        .select(this.$refs.draw)
+        .node()
+        .getBoundingClientRect().height;
+      this.width = d3
+        .select(this.$refs.draw)
+        .node()
+        .getBoundingClientRect().width;
+      d3.select(this.$refs.draw)
+        .select('svg')
+        .remove(); // 先清空svg
+      const svg = d3
+        .select(this.$refs.draw)
+        .append('svg')
         .attr('width', '100%')
         .attr('height', '100%')
         .attr('preserveAspectRatio', 'xMidYMid meet') // 自适应相关
@@ -306,28 +318,32 @@ export default {
         bottom: 100,
         left: 120,
       };
-      const g = svg.append('g')
+      const g = svg
+        .append('g')
         .attr('transform', `translate(${vm.margin.left}, ${vm.margin.top})`)
         .attr('id', 'maingroup');
-      vm.xScale = d3.scaleLinear()
+      vm.xScale = d3
+        .scaleLinear()
         .domain([vm.dataAttr.minX, vm.dataAttr.maxX])
         .range([0, this.width - this.margin.left - this.margin.right]);
-      vm.yScale = d3.scaleLinear()
+      vm.yScale = d3
+        .scaleLinear()
         .domain([vm.dataAttr.minY, vm.dataAttr.maxY].reverse())
         .range([0, this.height - this.margin.top - this.margin.bottom]);
-      g
-        .append('defs')
+      g.append('defs')
         .append('clipPath')
         .attr('id', 'clip')
         .append('rect')
-        .attr('width', (vm.width - vm.margin.left - vm.margin.right))
-        .attr('height', (vm.height - vm.margin.top - vm.margin.bottom))
+        .attr('width', vm.width - vm.margin.left - vm.margin.right)
+        .attr('height', vm.height - vm.margin.top - vm.margin.bottom)
         .attr('x', 0)
         .attr('y', 0);
-      vm.yAxis = d3.axisLeft(vm.yScale)
+      vm.yAxis = d3
+        .axisLeft(vm.yScale)
         .tickSize(-(this.width - this.margin.left - this.margin.right))
         .tickPadding(10);
-      vm.xAxis = d3.axisBottom(vm.xScale)
+      vm.xAxis = d3
+        .axisBottom(vm.xScale)
         .tickSize(-(this.height - this.margin.top - this.margin.bottom))
         .tickPadding(10);
       // eslint-disable-next-line
@@ -345,13 +361,16 @@ export default {
       var xAxisGroup = g
         .append('g')
         .call(vm.xAxis)
-        .attr('transform', `translate(${0}, ${(vm.height - vm.margin.top - vm.margin.bottom)})`)
+        .attr('transform', `translate(${0}, ${vm.height - vm.margin.top - vm.margin.bottom})`)
         .attr('id', 'xaxis')
         .attr('font-size', '16px')
         .attr('color', '#736FBC');
       // 新增 tooltip
-      d3.select(this.$refs.draw).selectAll('.tooltip').remove();
-      d3.select(this.$refs.draw).append('div')
+      d3.select(this.$refs.draw)
+        .selectAll('.tooltip')
+        .remove();
+      d3.select(this.$refs.draw)
+        .append('div')
         .attr('class', 'tooltip')
         .style('opacity', 0)
         .style('background-color', 'white')
@@ -369,8 +388,7 @@ export default {
         idleTimeout = null;
       }
       const idleDelay = 350;
-      g.append('g')
-        .attr('class', 'brush');
+      g.append('g').attr('class', 'brush');
       const gscatter = g
         .append('g')
         .attr('clip-path', 'url(#clip)')
@@ -386,10 +404,10 @@ export default {
         gscatter
           .selectAll('circle')
           .transition(t)
-          .attr('cx', datum => {
+          .attr('cx', (datum) => {
             return vm.xScale(datum[0]);
           })
-          .attr('cy', datum => {
+          .attr('cy', (datum) => {
             return vm.yScale(datum[1]);
           });
       }
@@ -398,7 +416,10 @@ export default {
         .brush()
         .extent([
           [0, 0],
-          [(vm.width - vm.margin.left - vm.margin.right), (vm.height - vm.margin.top - vm.margin.bottom)],
+          [
+            vm.width - vm.margin.left - vm.margin.right,
+            vm.height - vm.margin.top - vm.margin.bottom,
+          ],
         ])
         .on('end', () => {
           const s = d3.event.selection;
@@ -410,31 +431,32 @@ export default {
             // 还原
             vm.xScale
               .domain(d3.extent(vm.getCurData.data, (d) => d[0]))
-              .range([0, (vm.width - vm.margin.left - vm.margin.right)])
+              .range([0, vm.width - vm.margin.left - vm.margin.right])
               .nice();
             vm.yScale
               .domain(d3.extent(vm.getCurData.data, (d) => d[1]).reverse())
-              .range([0, (vm.height - vm.margin.top - vm.margin.bottom)])
+              .range([0, vm.height - vm.margin.top - vm.margin.bottom])
               .nice();
           } else {
             // 逻辑上是缩放
             vm.xScale
               .domain([s[0][0], s[1][0]].map(vm.xScale.invert, vm.xScale)) // X1 X2
-              .range([0, (vm.width - vm.margin.left - vm.margin.right)])
+              .range([0, vm.width - vm.margin.left - vm.margin.right])
               .nice();
             vm.yScale
               .domain([s[0][1], s[1][1]].map(vm.yScale.invert, vm.yScale)) // Y1 Y2
-              .range([0, (vm.height - vm.margin.top - vm.margin.bottom)])
+              .range([0, vm.height - vm.margin.top - vm.margin.bottom])
               .nice();
             g.select('.brush').call(brush.move, null);
           }
           zoom();
         });
-      d3.selectAll('.brush')
-        .call(brush);
+      d3.selectAll('.brush').call(brush);
     },
     renderThreeInit() {
-      d3.select('#threeDimension').selectAll('div').remove();
+      d3.select('#threeDimension')
+        .selectAll('div')
+        .remove();
       d3.select('#threeDimension')
         .append('div')
         .attr('id', 'threeChild')
@@ -442,10 +464,18 @@ export default {
         .style('height', '100%')
         .style('display', 'block');
       const vm = this;
-      this.height = d3.select(this.$refs.draw).node().getBoundingClientRect().height;
-      this.width = d3.select(this.$refs.draw).node().getBoundingClientRect().width;
+      this.height = d3
+        .select(this.$refs.draw)
+        .node()
+        .getBoundingClientRect().height;
+      this.width = d3
+        .select(this.$refs.draw)
+        .node()
+        .getBoundingClientRect().width;
 
-      d3.select(this.$refs.draw).select('svg').remove(); // 先清空svg
+      d3.select(this.$refs.draw)
+        .select('svg')
+        .remove(); // 先清空svg
       vm.margin = {
         top: 100,
         right: 120,
@@ -457,26 +487,44 @@ export default {
       const vm = this;
       const g = d3.select('#maingroup');
       const gscatter = d3.select('#subgroup');
-      this.dataAttr.minX = d3.min(localData.data, (d) => { return d[0]; });
-      this.dataAttr.maxX = d3.max(localData.data, (d) => { return d[0]; });
-      this.dataAttr.minY = d3.min(localData.data, (d) => { return d[1]; });
-      this.dataAttr.maxY = d3.max(localData.data, (d) => { return d[1]; });
-      this.height = d3.select(this.$refs.draw).node().getBoundingClientRect().height;
-      this.width = d3.select(this.$refs.draw).node().getBoundingClientRect().width;
+      this.dataAttr.minX = d3.min(localData.data, (d) => {
+        return d[0];
+      });
+      this.dataAttr.maxX = d3.max(localData.data, (d) => {
+        return d[0];
+      });
+      this.dataAttr.minY = d3.min(localData.data, (d) => {
+        return d[1];
+      });
+      this.dataAttr.maxY = d3.max(localData.data, (d) => {
+        return d[1];
+      });
+      this.height = d3
+        .select(this.$refs.draw)
+        .node()
+        .getBoundingClientRect().height;
+      this.width = d3
+        .select(this.$refs.draw)
+        .node()
+        .getBoundingClientRect().width;
       vm.halfHight = this.height / 2;
       vm.halfWidth = this.width / 2;
-      vm.xScale = d3.scaleLinear()
+      vm.xScale = d3
+        .scaleLinear()
         .domain([vm.dataAttr.minX, vm.dataAttr.maxX])
         .range([0, this.width - this.margin.left - this.margin.right])
         .nice();
-      vm.yScale = d3.scaleLinear()
+      vm.yScale = d3
+        .scaleLinear()
         .domain([vm.dataAttr.minY, vm.dataAttr.maxY].reverse())
         .range([0, this.height - this.margin.top - this.margin.bottom])
         .nice();
-        // Adding axes
-      vm.yAxis = d3.axisLeft(vm.yScale)
+      // Adding axes
+      vm.yAxis = d3
+        .axisLeft(vm.yScale)
         .tickSize(-(this.width - this.margin.left - this.margin.right));
-      vm.xAxis = d3.axisBottom(vm.xScale)
+      vm.xAxis = d3
+        .axisBottom(vm.xScale)
         .tickSize(-(this.height - this.margin.top - this.margin.bottom))
         .tickPadding(10);
       const t = gscatter.transition().duration(750);
@@ -489,60 +537,90 @@ export default {
 
       vm.circleUpdate = gscatter.selectAll('circle').data(localData.data);
       vm.circleExit = vm.circleUpdate.exit();
-      vm.circleEnter = vm.circleUpdate.enter().append('circle')
-        .attr('cy', (datum) => { return vm.yScale(datum[1]); })
-        .attr('cx', (datum) => { return vm.xScale(datum[0]); })
+      vm.circleEnter = vm.circleUpdate
+        .enter()
+        .append('circle')
+        .attr('cy', (datum) => {
+          return vm.yScale(datum[1]);
+        })
+        .attr('cx', (datum) => {
+          return vm.xScale(datum[0]);
+        })
         .attr('r', 3)
         .attr('fill', function myFill(datum, index) {
-          if (typeof (vm.getCurData.labelTypeColor[localData.label[index].toString()]) !== 'undefined') {
+          if (
+            typeof vm.getCurData.labelTypeColor[localData.label[index].toString()] !== 'undefined'
+          ) {
             return vm.getCurData.labelTypeColor[localData.label[index].toString()];
-          } 
-            return vm.getLegendColor[9];
+          }
+          return vm.getLegendColor[9];
         })
         .attr('opacity', 1)
         .on('click', function myClick(datum, i) {
           d3.event.stopPropagation(); // 阻止事件冒泡即可
           vm.clickEleCumputed = true;
           const value = localData.label[i];
-          vm.setMessage([`${constant.IMGURl}/api/projector_sample?run=${vm.userSelectRunFile}&tag=${vm.getCurInfo.curTag}&index=${i}`, `第${i + 1}个点,标签为${value}`]);
+          vm.setMessage([
+            `${constant.IMGURl}/api/projector_sample?run=${vm.userSelectRunFile}&tag=${vm.getCurInfo.curTag}&index=${i}`,
+            `第${i + 1}个点,标签为${value}`,
+          ]);
         })
         .on('mouseover', function myMouseOver(datum, index) {
           const div = d3.selectAll('div.tooltip');
           const value = localData.label[index];
           div
             .style('opacity', 0.9)
-            .style('left', `${d3.event.offsetX + 30  }px`)
-            .style('top', `${d3.event.offsetY - 10  }px`)
+            .style('left', `${d3.event.offsetX + 30}px`)
+            .style('top', `${d3.event.offsetY - 10}px`)
             .style('z-index', 5);
           div.html(`第${index + 1}个点，标签为${value}`);
         })
         .on('mouseout', () => {
           const div = d3.select('div.tooltip');
-          div
-            .style('opacity', 0)
-            .style('z-index', -1);
+          div.style('opacity', 0).style('z-index', -1);
         });
-      vm.circleUpdate.merge(vm.circleEnter).transition().ease(d3.easeLinear).duration(1000)
-        .attr('cy', (datum) => { return vm.yScale(datum[1]); })
-        .attr('cx', (datum) => { return vm.xScale(datum[0]); })
+      vm.circleUpdate
+        .merge(vm.circleEnter)
+        .transition()
+        .ease(d3.easeLinear)
+        .duration(1000)
+        .attr('cy', (datum) => {
+          return vm.yScale(datum[1]);
+        })
+        .attr('cx', (datum) => {
+          return vm.xScale(datum[0]);
+        })
         .attr('fill', function myFill(datum, index) {
-          if (typeof (vm.getCurData.labelTypeColor[localData.label[index].toString()]) !== 'undefined') {
+          if (
+            typeof vm.getCurData.labelTypeColor[localData.label[index].toString()] !== 'undefined'
+          ) {
             return vm.getCurData.labelTypeColor[localData.label[index].toString()];
-          } 
-            return vm.getLegendColor[9];
+          }
+          return vm.getLegendColor[9];
         });
       vm.circleExit.remove();
 
       // draw legend 颜色校验等增加鼠标点击的事件吧
       // 删除所有legend
-      d3.select('#maingroup').selectAll('.legend').remove();
-      const legend = d3.select('#maingroup').selectAll('.legend')
+      d3.select('#maingroup')
+        .selectAll('.legend')
+        .remove();
+      const legend = d3
+        .select('#maingroup')
+        .selectAll('.legend')
         .data(localData.labelType)
-        .enter().append('g')
+        .enter()
+        .append('g')
         .attr('class', 'legend')
-        .attr('transform', function myTransform(d, i) { return `translate(${  vm.width - vm.margin.left - vm.margin.right + 30  },${  -(i + 1) * 25 + vm.height - vm.margin.bottom - vm.margin.top  })`; });
+        .attr('transform', function myTransform(d, i) {
+          return `translate(${vm.width -
+            vm.margin.left -
+            vm.margin.right +
+            30},${-(i + 1) * 25 + vm.height - vm.margin.bottom - vm.margin.top})`;
+        });
       // draw legend colored rectangles
-      legend.append('circle')
+      legend
+        .append('circle')
         .data(localData.labelType)
         .attr('cx', '15')
         .attr('cy', '10')
@@ -551,7 +629,8 @@ export default {
           return vm.getLegendColor[localData.labelType.length - 1 - i];
         });
       // draw legend text
-      legend.append('text')
+      legend
+        .append('text')
         .data(localData.labelType)
         .attr('class', 'legend_text')
         .attr('x', 40)
@@ -559,18 +638,24 @@ export default {
         .attr('dy', '.5em')
         .attr('fill', 'black')
         .style('text-anchor', 'start')
-        .text((d, i) => { return localData.labelType[localData.labelType.length - 1 - i]; });
+        .text((d, i) => {
+          return localData.labelType[localData.labelType.length - 1 - i];
+        });
     },
     renderThreeUpdate(localData) {
       const vm = this;
       // 开始数据投篮栏
       const myData = {};
-      for (let i = 0; i < localData.labelType.length; i+=1) {
+      for (let i = 0; i < localData.labelType.length; i += 1) {
         myData[localData.labelType[i]] = [];
         myData[localData.labelType[i]].push(['x', 'y', 'z', 'index']);
       }
-      for (let i = 0; i < localData.label.length; i+=1) {
-        if (localData.labelType.indexOf(localData.label[i].toString()) >= 10 || localData.labelType.indexOf(localData.label[i].toString()) === -1) { // 序列大于10
+      for (let i = 0; i < localData.label.length; i += 1) {
+        if (
+          localData.labelType.indexOf(localData.label[i].toString()) >= 10 ||
+          localData.labelType.indexOf(localData.label[i].toString()) === -1
+        ) {
+          // 序列大于10
           myData[localData.labelType[9]].push(localData.data[i].concat(i));
         } else {
           myData[localData.label[i].toString()].push(localData.data[i].concat(i));
@@ -624,21 +709,23 @@ export default {
         },
         series: [],
       };
-      for (let i = 0; i < localData.labelType.length; i+=1) {
+      for (let i = 0; i < localData.labelType.length; i += 1) {
         option.series.push({
           name: localData.labelType[i],
           type: 'scatter3D',
           symbolSize: 5,
           data: myData[localData.labelType[i]],
-          itemStyle: {
-          },
+          itemStyle: {},
         });
       }
       this.myChart = echarts.init(document.getElementById('threeChild'), 'light');
       this.myChart.setOption(option);
       this.myChart.on('click', function myClick(params) {
         const value = localData.label[params.data[3]];
-        vm.setMessage([`${constant.IMGURl}/api/projector_sample?run=${vm.userSelectRunFile}&tag=${vm.getCurInfo.curTag}&index=${params.data[3]}`, `点击第${params.data[3]}个点,标签为${value}`]);
+        vm.setMessage([
+          `${constant.IMGURl}/api/projector_sample?run=${vm.userSelectRunFile}&tag=${vm.getCurInfo.curTag}&index=${params.data[3]}`,
+          `点击第${params.data[3]}个点,标签为${value}`,
+        ]);
       });
 
       window.addEventListener('resize', () => {
@@ -651,7 +738,8 @@ export default {
       if (JSON.stringify(this.localCurInfo) === '{}') {
         return;
       }
-      if (parseInt(this.localCurInfo.curDim, 10) === 3) { // 是3维显示
+      if (parseInt(this.localCurInfo.curDim, 10) === 3) {
+        // 是3维显示
         this.renderThreeUpdate(localData);
       } else if (parseInt(this.localCurInfo.curDim, 10) === 2) {
         this.renderTwoUpdate(localData);
diff --git a/webapp/src/views/visual/Visual/embeddings/Embeddings.vue b/webapp/src/views/visual/Visual/embeddings/Embeddings.vue
index 50c2376..4b3cfb4 100644
--- a/webapp/src/views/visual/Visual/embeddings/Embeddings.vue
+++ b/webapp/src/views/visual/Visual/embeddings/Embeddings.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
@@ -37,40 +37,33 @@ export default {
     embeddingDraw,
   },
   data() {
-    return {
-    };
+    return {};
   },
   computed: {
-    ...mapEmbeddingGetters([
-    ]),
-    ...mapLayoutStates([
-      'userSelectRunFile',
-    ]),
-  },
-  watch: {
-  },
-  created() {
+    ...mapEmbeddingGetters([]),
+    ...mapLayoutStates(['userSelectRunFile']),
   },
+  watch: {},
+  created() {},
   methods: {
-    ...mapEmbeddingActions([
-    ]),
+    ...mapEmbeddingActions([]),
   },
 };
 </script>
 <style lang="less" scoped>
-  .temp {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    background-color: white;
-  }
+.temp {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background-color: white;
+}
 
-  .display-panel {
-    height: 97.5%;
-    margin: 1% 1% 0 1%;
-    overflow-y: auto;
-    background-color: white;
-    border-radius: 5px 5px 0 0;
-    box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
-  }
+.display-panel {
+  height: 97.5%;
+  margin: 1% 1% 0 1%;
+  overflow-y: auto;
+  background-color: white;
+  border-radius: 5px 5px 0 0;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
+}
 </style>
diff --git a/webapp/src/views/visual/Visual/embeddings/EmbeddingsPanel.vue b/webapp/src/views/visual/Visual/embeddings/EmbeddingsPanel.vue
index 15a7a64..77bad13 100644
--- a/webapp/src/views/visual/Visual/embeddings/EmbeddingsPanel.vue
+++ b/webapp/src/views/visual/Visual/embeddings/EmbeddingsPanel.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="embeddingpanel">
@@ -39,7 +39,7 @@
                       placeholder="请选择"
                     >
                       <el-option
-                        v-for="(item,index) in curTags"
+                        v-for="(item, index) in curTags"
                         :key="index"
                         :value="item"
                         :label="item"
@@ -58,11 +58,7 @@
                 </el-col>
                 <el-col :span="16">
                   <div class="center">
-                    <el-select
-                      v-model="curMethod"
-                      class="tagSelect histmodeselect"
-                      size="small"
-                    >
+                    <el-select v-model="curMethod" class="tagSelect histmodeselect" size="small">
                       <el-option
                         v-for="item in allMethods"
                         :key="item.value"
@@ -83,13 +79,9 @@
                 </el-col>
                 <el-col :span="16">
                   <div class="center">
-                    <el-select
-                      v-model="curDim"
-                      class="tagSelect histmodeselect"
-                      size="small"
-                    >
+                    <el-select v-model="curDim" class="tagSelect histmodeselect" size="small">
                       <el-option
-                        v-for="(item,index) in allDims"
+                        v-for="(item, index) in allDims"
                         :key="index"
                         :value="item"
                         :label="item"
@@ -106,7 +98,7 @@
                     background-color="#736FBC"
                     type="primary"
                     size="medium"
-                    :icon="playAction ? 'iconfont icon-zanting':'iconfont icon-ziyuan74'"
+                    :icon="playAction ? 'iconfont icon-zanting' : 'iconfont icon-ziyuan74'"
                     @click="playActionClick()"
                   />
                 </el-col>
@@ -115,7 +107,7 @@
                     v-model="curStep"
                     :min="curMin"
                     :max="curMapMax"
-                    :disabled="curMapMax===0"
+                    :disabled="curMapMax === 0"
                     input-size="small"
                     class="rangeNumber"
                     :show-tooltip="false"
@@ -141,14 +133,34 @@
               <div v-if="getMessage == ''">
                 <span>暂无信息</span>
               </div>
-              <el-card v-if="getMessage != ''" :body-style="{ padding: '0px' }" class="infoCard" display="none">
-                <div v-if="getQuestionInfo[userSelectRunFile][getCurInfo.curTag]['sample']" class="showBox">
-                  <div v-if="getQuestionInfo[userSelectRunFile][getCurInfo.curTag]['sample_type'] == 'text' && getMessage != ''" class="image">
+              <el-card
+                v-if="getMessage != ''"
+                :body-style="{ padding: '0px' }"
+                class="infoCard"
+                display="none"
+              >
+                <div
+                  v-if="getQuestionInfo[userSelectRunFile][getCurInfo.curTag]['sample']"
+                  class="showBox"
+                >
+                  <div
+                    v-if="
+                      getQuestionInfo[userSelectRunFile][getCurInfo.curTag]['sample_type'] ==
+                        'text' && getMessage != ''
+                    "
+                    class="image"
+                  >
                     <el-scrollbar style="height: 100%;">
-                      <p>{{ getPanelSampleData["url"] }}</p>
+                      <p>{{ getPanelSampleData['url'] }}</p>
                     </el-scrollbar>
                   </div>
-                  <div v-if="getQuestionInfo[userSelectRunFile][getCurInfo.curTag]['sample_type'] == 'image' && getMessage != ''" class="image">
+                  <div
+                    v-if="
+                      getQuestionInfo[userSelectRunFile][getCurInfo.curTag]['sample_type'] ==
+                        'image' && getMessage != ''
+                    "
+                    class="image"
+                  >
                     <el-scrollbar style="height: 100%;">
                       <el-image
                         :src="getPanelSampleData['url']"
@@ -157,10 +169,19 @@
                       />
                     </el-scrollbar>
                   </div>
-                  <div v-if="getQuestionInfo[userSelectRunFile][getCurInfo.curTag]['sample_type'] == 'audio' && getMessage != ''" class="image">
+                  <div
+                    v-if="
+                      getQuestionInfo[userSelectRunFile][getCurInfo.curTag]['sample_type'] ==
+                        'audio' && getMessage != ''
+                    "
+                    class="image"
+                  >
                     <el-scrollbar style="height: 100%;">
                       <AudioContainer
-                        v-if="getQuestionInfo[userSelectRunFile][getCurInfo.curTag]['sample_type'] == 'audio' && getMessage != ''"
+                        v-if="
+                          getQuestionInfo[userSelectRunFile][getCurInfo.curTag]['sample_type'] ==
+                            'audio' && getMessage != ''
+                        "
                         :theUrl="getPanelSampleData['url']"
                         theControlList="noMuted noSpeed onlyOnePlaying"
                         :index="1000"
@@ -188,10 +209,11 @@ const {
   mapMutations: mapEmbeddingMutations,
   mapActions: mapEmbeddingActions,
 } = createNamespacedHelpers('Visual/embedding');
-const { mapState: mapLayoutStates, mapGetters: mapLayoutGetters } = createNamespacedHelpers('Visual/layout');
+const { mapState: mapLayoutStates, mapGetters: mapLayoutGetters } = createNamespacedHelpers(
+  'Visual/layout'
+);
 export default {
-  components: {
-  },
+  components: {},
   data() {
     return {
       // ----------------------------- Tag选择 -----------------------------
@@ -199,14 +221,15 @@ export default {
       curTags: [],
       // ----------------------------- method选择 -----------------------------
       curMethod: '',
-      allMethods: [{
-        value: 'PCA',
-        label: 'PCA',
-      },
-      {
-        value: 'TSNE',
-        label: 'TSNE',
-      },
+      allMethods: [
+        {
+          value: 'PCA',
+          label: 'PCA',
+        },
+        {
+          value: 'TSNE',
+          label: 'TSNE',
+        },
       ],
       // ----------------------------- 维度信息选择选择 -----------------------------
       curDim: '',
@@ -240,21 +263,20 @@ export default {
       'getErrorMessage',
       'getLineWidth',
     ]),
-    ...mapLayoutStates([
-      'userSelectRunFile',
-    ]),
+    ...mapLayoutStates(['userSelectRunFile']),
     ...mapLayoutGetters(['getParams']),
   },
   watch: {
     curLineWidth() {
       this.setLineWidth(this.curLineWidth);
     },
-    getReceivedCurInfo() { // 只触发一次第一次
+    getReceivedCurInfo() {
+      // 只触发一次第一次
       if (this.userSelectRunFile === '') {
         return;
       }
       this.setCurInfo(['received', false]); // 屏蔽别的请求
-      for (let i = 0; i < this.getCategoryInfo.curRuns.length; i+=1) {
+      for (let i = 0; i < this.getCategoryInfo.curRuns.length; i += 1) {
         if (this.userSelectRunFile === this.getCategoryInfo.curRuns[i]) {
           this.curTags = this.getCategoryInfo.curTags[i].slice(0);
         }
@@ -264,10 +286,14 @@ export default {
       this.curMethod = this.getCurInfo.curMethod;
       this.curDim = this.getCurInfo.curDim;
       this.curStep = this.getCurInfo.curStep;
-      this.curMax = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[this.getQuestionInfo[this.userSelectRunFile][this.curTag].curMax];
+      this.curMax = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[
+        this.getQuestionInfo[this.userSelectRunFile][this.curTag].curMax
+      ];
       this.curMapMax = this.getQuestionInfo[this.userSelectRunFile][this.curTag].curMax;
       this.curMin = 0;
-      this.curMapStep = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[this.curStep];
+      this.curMapStep = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[
+        this.curStep
+      ];
       const param = {
         run: this.userSelectRunFile,
         tag: this.curTag,
@@ -291,14 +317,16 @@ export default {
     },
     curStep() {
       this.setCurInfo(['curStep', this.curStep]);
-      this.curMapStep = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[this.curStep];
+      this.curMapStep = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[
+        this.curStep
+      ];
     },
     curMapStep() {
       this.setCurInfo(['curMapStep', this.curMapStep]);
       this.fetchData();
     },
     getReceivedQuestionInfo() {
-      for (let i = 0; i < this.getCategoryInfo.curRuns.length; i+=1) {
+      for (let i = 0; i < this.getCategoryInfo.curRuns.length; i += 1) {
         if (this.userSelectRunFile === this.getCategoryInfo.curRuns[i]) {
           this.curTags = this.getCategoryInfo.curTags[i].slice(0);
         }
@@ -308,7 +336,10 @@ export default {
       this.setCheckLabels(val);
     },
     getMessage() {
-      if (this.getQuestionInfo[this.userSelectRunFile][this.getCurInfo.curTag].sample && this.getMessage.length > 0) {
+      if (
+        this.getQuestionInfo[this.userSelectRunFile][this.getCurInfo.curTag].sample &&
+        this.getMessage.length > 0
+      ) {
         this.fetchSampleData(this.getMessage[0]);
       }
     },
@@ -321,11 +352,11 @@ export default {
         setTimeout(() => {
           if (vm.playAction) {
             let curSteptmp = vm.curStep;
-            curSteptmp+=1;
+            curSteptmp += 1;
             if (curSteptmp > vm.curMapMax) {
               vm.playAction = false;
             } else {
-              vm.curStep+=1;
+              vm.curStep += 1;
             }
           }
         }, 2000);
@@ -337,7 +368,7 @@ export default {
         return;
       }
       this.setCurInfo(['received', false]); // 屏蔽别的请求
-      for (let i = 0; i < this.getCategoryInfo.curRuns.length; i+=1) {
+      for (let i = 0; i < this.getCategoryInfo.curRuns.length; i += 1) {
         if (this.userSelectRunFile === this.getCategoryInfo.curRuns[i]) {
           this.curTags = this.getCategoryInfo.curTags[i].slice(0);
         }
@@ -347,10 +378,14 @@ export default {
       this.curMethod = 'PCA';
       this.curDim = '3维';
       this.curStep = 0;
-      this.curMax = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[this.getQuestionInfo[this.userSelectRunFile][this.curTag].curMax];
+      this.curMax = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[
+        this.getQuestionInfo[this.userSelectRunFile][this.curTag].curMax
+      ];
       this.curMapMax = this.getQuestionInfo[this.userSelectRunFile][this.curTag].curMax;
       this.curMin = 0;
-      this.curMapStep = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[this.curStep];
+      this.curMapStep = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[
+        this.curStep
+      ];
       const param = {
         run: this.userSelectRunFile,
         tag: this.curTag,
@@ -367,7 +402,8 @@ export default {
       });
     },
   },
-  created() { // 每次加载的时候都会触发
+  created() {
+    // 每次加载的时候都会触发
     this.curLineWidth = this.getLineWidth;
     if (!this.getInitStateFlag) {
       if (this.getReceivedCategoryInfo) {
@@ -378,7 +414,7 @@ export default {
     }
     if (this.getReceivedQuestionInfo) {
       this.setCurInfo(['received', false]); // 屏蔽别的请求
-      for (let i = 0; i < this.getCategoryInfo.curRuns.length; i+=1) {
+      for (let i = 0; i < this.getCategoryInfo.curRuns.length; i += 1) {
         if (this.userSelectRunFile === this.getCategoryInfo.curRuns[i]) {
           this.curTags = this.getCategoryInfo.curTags[i].slice(0);
         }
@@ -388,11 +424,15 @@ export default {
       this.curMethod = this.getCurInfo.curMethod;
       this.curDim = this.getCurInfo.curDim;
       this.curStep = this.getCurInfo.curStep;
-      this.curMax = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[this.getQuestionInfo[this.userSelectRunFile][this.curTag].curMax];
+      this.curMax = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[
+        this.getQuestionInfo[this.userSelectRunFile][this.curTag].curMax
+      ];
       this.curMapMax = this.getQuestionInfo[this.userSelectRunFile][this.curTag].curMax;
       // this.curMin = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[0]
       this.curMin = 0;
-      this.curMapStep = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[this.curStep];
+      this.curMapStep = this.getQuestionInfo[this.userSelectRunFile][this.curTag].allSteps[
+        this.curStep
+      ];
       const param = {
         run: this.userSelectRunFile,
         tag: this.curTag,
@@ -423,7 +463,8 @@ export default {
       }
     },
     fetchData() {
-      if (!this.getReceivedCurInfo || !this.getCurInfo.received) { // 只要数据未准备好就不触发请求
+      if (!this.getReceivedCurInfo || !this.getCurInfo.received) {
+        // 只要数据未准备好就不触发请求
         return;
       }
       // console.log('this.getCurInfo.curMethod', this.getCurInfo.curMethod)
@@ -443,265 +484,269 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-  .typeselect {
-    height: 30%;
+.typeselect {
+  height: 30%;
+}
+
+select {
+  width: 70%;
+  height: 30%;
+  margin-top: 20%;
+}
+
+.panel {
+  /deep/ .el-card {
+    margin: 3.5% 5% 4% 0%;
+    border-top: 0;
   }
 
-  select {
-    width: 70%;
-    height: 30%;
-    margin-top: 20%;
+  /deep/ .el-card__body {
+    padding: 0;
+    border-radius: 0 0 3px 3px;
   }
 
-  .panel {
-    /deep/ .el-card {
-      margin: 3.5% 5% 4% 0%;
-      border-top: 0;
-    }
+  .info {
+    .infoTitle {
+      span {
+        font-size: 12px;
+      }
 
-    /deep/ .el-card__body {
-      padding: 0;
-      border-radius: 0 0 3px 3px;
+      padding: 2% 2% 2% 5%;
+      color: white;
+      text-align: left;
+      background-color: #625eb3;
+      border-bottom: 1px solid #8f8ad7;
+
+      .iconfont {
+        margin-right: 7px;
+        font-size: 12px;
+        font-style: normal;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
     }
+  }
 
-    .info {
-      .infoTitle {
-        span {
-          font-size: 12px;
-        }
+  /deep/ .el-icon-circle-close {
+    color: white;
+  }
 
-        padding: 2% 2% 2% 5%;
-        color: white;
-        text-align: left;
-        background-color: #625eb3;
-        border-bottom: 1px solid #8f8ad7;
-
-        .iconfont {
-          margin-right: 7px;
-          font-size: 12px;
-          font-style: normal;
-          -webkit-font-smoothing: antialiased;
-          -moz-osx-font-smoothing: grayscale;
-        }
+  /deep/ .el-image-viewer__img {
+    height: 100%;
+  }
+
+  /deep/ .infoContent {
+    @backgroundColorList: #ef6f38, #efdd79, #c5507a, #9359b0, #525c99, #47c1d6, #b5d4e8, #15746c,
+      #81c19c, #a08983;
+    .backgroundcard(@className, @backgroundColorList,@i) {
+      .@{className}@{i} .el-checkbox__inner {
+        //属性名称 可以直接拼接属性
+        background: @backgroundColorList;
+        opacity: 0.5;
       }
     }
-
-    /deep/ .el-icon-circle-close {
-      color: white;
+    @checkboxClass: checkboxx;
+    .loop(0);
+    // 选中状态下的透明度得更改
+    .backgroundchecked(@className, @backgroundColorList,@i) {
+      .@{className}@{i}.is-checked .el-checkbox__inner {
+        //属性名称 可以直接拼接属性
+        opacity: 1;
+      }
     }
-
-    /deep/ .el-image-viewer__img {
-      height: 100%;
+    .loop(@i) when(@i < 10) {
+      // extract 是取出列表中的对应元素
+      .backgroundcard(@checkboxClass, extract(@backgroundColorList, @i+1), @i);
+      .backgroundchecked(@checkboxClass, extract(@backgroundColorList, @i+1), @i);
+      .loop(@i+1);
     }
+    .loop(0);
 
-    /deep/ .infoContent {
-      @backgroundColorList: #EF6F38, #EFDD79 ,#C5507A, #9359B0, #525C99,#47C1D6, #B5D4E8, #15746C, #81c19c, #A08983;
-      .backgroundcard(@className, @backgroundColorList,@i) {
-        .@{className}@{i} .el-checkbox__inner { //属性名称 可以直接拼接属性
-          background: @backgroundColorList;
-          opacity: 0.5;
-        }
+    padding: 2% 10% 2% 10%;
+
+    .image {
+      display: block;
+      width: 100%;
+      height: 300px;
+
+      p {
+        margin-top: 2%;
+        margin-right: 2%;
+        margin-bottom: 2%;
+        margin-left: 2%;
       }
-      @checkboxClass: checkboxx;
-      .loop(0);
-      // 选中状态下的透明度得更改
-      .backgroundchecked(@className, @backgroundColorList,@i) {
-        .@{className}@{i}.is-checked .el-checkbox__inner { //属性名称 可以直接拼接属性
-          opacity: 1;
-        }
+    }
+
+    .infoItem {
+      justify-content: center;
+      margin: 5% 0 5% 0;
+      font-size: 11px;
+      text-align: left;
+
+      .center {
+        text-align: center;
       }
-      .loop(@i) when(@i < 10) { // extract 是取出列表中的对应元素
-        .backgroundcard(@checkboxClass,extract(@backgroundColorList, @i+1), @i);
-        .backgroundchecked(@checkboxClass,extract(@backgroundColorList, @i+1), @i);
-        .loop(@i+1);
+
+      span {
+        display: flex;
+        align-items: center; /* 定义body的元素垂直居中 */
+        line-height: 30px;
+        text-align: center;
       }
-      .loop(0);
+    }
 
-      padding: 2% 10% 2% 10%;
+    .el-select {
+      border-color: #8f95ad;
+    }
 
-      .image {
-        display: block;
-        width: 100%;
-        height: 300px;
+    .infoItem .el-select {
+      width: 100%;
+    }
 
-        p {
-          margin-top: 2%;
-          margin-right: 2%;
-          margin-bottom: 2%;
-          margin-left: 2%;
-        }
-      }
+    .el-slider__bar {
+      background-color: #625eb3;
+    }
 
-      .infoItem {
-        justify-content: center;
-        margin: 5% 0 5% 0;
-        font-size: 11px;
-        text-align: left;
+    .el-input__inner {
+      height: 30px;
+      font-size: 11px;
+      line-height: 30px;
+      color: #625eb3;
+      border-color: #8f95ad;
+      border-radius: 50px;
+    }
 
-        .center {
-          text-align: center;
-        }
+    .el-input.is-focus {
+      border-color: #7f7cc1;
+    }
 
-        span {
-          display: flex;
-          align-items: center; /* 定义body的元素垂直居中 */
-          line-height: 30px;
-          text-align: center;
-        }
-      }
+    .el-select:hover .el-input__inner {
+      border-color: #7f7cc1;
+    }
 
-      .el-select {
-        border-color: #8f95ad;
-      }
+    .el-select__caret {
+      font-size: 20px;
+      font-weight: 900;
+      color: #7f7cc1;
+    }
 
-      .infoItem .el-select {
-        width: 100%;
+    .imageSpan {
+      span {
+        display: block !important;
+        margin: 0 auto;
+        text-align: center;
       }
+    }
 
-      .el-slider__bar {
-        background-color: #625eb3;
+    .row-bg {
+      button {
+        color: #7f7cc1;
+        background-color: white;
+        border-color: white;
       }
 
-      .el-input__inner {
-        height: 30px;
-        font-size: 11px;
-        line-height: 30px;
-        color: #625eb3;
-        border-color: #8f95ad;
-        border-radius: 50px;
+      .el-slider__button {
+        width: 12px;
+        height: 12px;
+        border-color: #7f7cc1;
       }
 
-      .el-input.is-focus {
-        border-color: #7f7cc1;
+      .el-slider__runway {
+        height: 4px;
       }
 
-      .el-select:hover .el-input__inner {
-        border-color: #7f7cc1;
+      .el-slider__bar {
+        height: 4px;
       }
 
-      .el-select__caret {
-        font-size: 20px;
-        font-weight: 900;
-        color: #7f7cc1;
+      .iconfont {
+        font-size: 11px;
       }
 
-      .imageSpan {
+      .grid-content {
+        height: 38px;
+        line-height: 38px;
+
         span {
-          display: block !important;
+          display: block;
           margin: 0 auto;
+          line-height: 38px;
           text-align: center;
         }
       }
+    }
 
-      .row-bg {
-        button {
-          color: #7f7cc1;
-          background-color: white;
-          border-color: white;
-        }
+    .ProbabilityDensitySec {
+      width: 93%;
 
-        .el-slider__button {
-          width: 12px;
-          height: 12px;
-          border-color: #7f7cc1;
-        }
+      .ProbabilityDensity {
+        margin-bottom: -10px;
+        color: #8f8ad7;
+      }
 
-        .el-slider__runway {
-          height: 4px;
-        }
+      .el-checkbox__label {
+        color: #8f8ad7;
+      }
 
-        .el-slider__bar {
-          height: 4px;
-        }
+      .el-checkbox {
+        color: #8f8ad7;
+      }
 
-        .iconfont {
-          font-size: 11px;
-        }
+      .el-checkbox__inner {
+        border-radius: 50%;
+      }
 
-        .grid-content {
-          height: 38px;
-          line-height: 38px;
+      .leftInline-block {
+        display: -webkit-flex; /* Safari */
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-start;
+
+        .el-checkbox {
+          display: inline-block;
 
           span {
-            display: block;
-            margin: 0 auto;
-            line-height: 38px;
-            text-align: center;
+            display: inline-block;
           }
         }
-      }
 
-      .ProbabilityDensitySec {
-        width: 93%;
-
-        .ProbabilityDensity {
-          margin-bottom: -10px;
-          color: #8f8ad7;
+        .el-checkbox__inner {
+          border-color: #dcdfe6;
         }
 
-        .el-checkbox__label {
-          color: #8f8ad7;
+        .el-checkbox__inner:hover {
+          border-color: #dcdfe6;
         }
 
-        .el-checkbox {
-          color: #8f8ad7;
+        .el-checkbox__input.is-checked .el-checkbox__inner::after {
+          border-color: white;
         }
 
-        .el-checkbox__inner {
-          border-radius: 50%;
+        .el-checkbox__input.is_focus .el-checkbox__inner {
+          border-color: #dcdfe6;
         }
 
-        .leftInline-block {
-          display: -webkit-flex; /* Safari */
-          display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          justify-content: flex-start;
-
-          .el-checkbox {
-            display: inline-block;
-
-            span {
-              display: inline-block;
-            }
-          }
-
-          .el-checkbox__inner {
-            border-color: #dcdfe6;
-          }
-
-          .el-checkbox__inner:hover {
-            border-color: #dcdfe6;
-          }
-
-          .el-checkbox__input.is-checked .el-checkbox__inner::after {
-            border-color: white;
-          }
-
-          .el-checkbox__input.is_focus .el-checkbox__inner {
-            border-color: #dcdfe6;
-          }
-
-          .el-checkbox__input.is-checked .el-checkbox__inner {
-            border-color: #dcdfe6;
-          }
+        .el-checkbox__input.is-checked .el-checkbox__inner {
+          border-color: #dcdfe6;
         }
+      }
 
-        hr {
-          background-color: #8f8ad7;
-          border-color: #8f8ad7;
-          border-width: 0.1;
-          opacity: 0.6;
-        }
+      hr {
+        background-color: #8f8ad7;
+        border-color: #8f8ad7;
+        border-width: 0.1;
+        opacity: 0.6;
       }
     }
   }
+}
 
-  .el-select-dropdown__item.selected {
-    color: #625eb3;
-  }
+.el-select-dropdown__item.selected {
+  color: #625eb3;
+}
 
-  .el-select-dropdown__item {
-    font-size: 11px;
-  }
+.el-select-dropdown__item {
+  font-size: 11px;
+}
 </style>
diff --git a/webapp/src/views/visual/Visual/embeddings/index.js b/webapp/src/views/visual/Visual/embeddings/index.js
index a1b87fa..1aa244c 100644
--- a/webapp/src/views/visual/Visual/embeddings/index.js
+++ b/webapp/src/views/visual/Visual/embeddings/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as Embeddings } from './Embeddings';
 export { default as EmbeddingsPanel } from './EmbeddingsPanel';
diff --git a/webapp/src/views/visual/Visual/exception/Exception.vue b/webapp/src/views/visual/Visual/exception/Exception.vue
index 54a572f..cbd48a1 100644
--- a/webapp/src/views/visual/Visual/exception/Exception.vue
+++ b/webapp/src/views/visual/Visual/exception/Exception.vue
@@ -1,24 +1,29 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
     <div class="temp">
-      <div id='excepDisplay' :class="['display-panel']">
-        <div v-for="(item, index) in allData" v-show="excepRunShow[item[0]]" :key="index" class="excepContDiv">
+      <div id="excepDisplay" :class="['display-panel']">
+        <div
+          v-for="(item, index) in allData"
+          v-show="excepRunShow[item[0]]"
+          :key="index"
+          class="excepContDiv"
+        >
           <excepContainer :oneData="item" :index="index" :oneAllStep="allStep[index]" />
         </div>
       </div>
@@ -29,7 +34,11 @@
 import { createNamespacedHelpers } from 'vuex';
 import excepContainer from './excepContainer';
 
-const { mapActions: mapExceptionActions, mapGetters: mapExceptionGetters, mapMutations: mapExceptionMutations } = createNamespacedHelpers('Visual/exception');
+const {
+  mapActions: mapExceptionActions,
+  mapGetters: mapExceptionGetters,
+  mapMutations: mapExceptionMutations,
+} = createNamespacedHelpers('Visual/exception');
 const { mapState: mapLayoutStates } = createNamespacedHelpers('Visual/layout');
 export default {
   components: {
@@ -43,7 +52,14 @@ export default {
     };
   },
   computed: {
-    ...mapExceptionGetters(['getRun', 'getAllStep', 'getAllData', 'getInitStateFlag', 'getErrorMessage', 'getFreshFlag']),
+    ...mapExceptionGetters([
+      'getRun',
+      'getAllStep',
+      'getAllData',
+      'getInitStateFlag',
+      'getErrorMessage',
+      'getFreshFlag',
+    ]),
     ...mapLayoutStates(['userSelectRunFile']),
   },
   watch: {
@@ -80,7 +96,12 @@ export default {
   },
   methods: {
     ...mapExceptionActions(['fetchAllStep', 'fetchAllData']),
-    ...mapExceptionMutations(['setInitStateFlag', 'setFreshFlag', 'setRectCurInfo', 'setCurIqrTimes']),
+    ...mapExceptionMutations([
+      'setInitStateFlag',
+      'setFreshFlag',
+      'setRectCurInfo',
+      'setCurIqrTimes',
+    ]),
     setRunShow() {
       const stateTemp = [];
       for (let i = 0; i < this.getRun.length; i += 1) {
@@ -90,7 +111,8 @@ export default {
         stateTemp[this.userSelectRunFile[i]] = true;
       }
       this.excepRunShow = stateTemp;
-      if (this.userSelectRunFile.length === 0) { // 没有选择任何run时清空控制面板数据
+      if (this.userSelectRunFile.length === 0) {
+        // 没有选择任何run时清空控制面板数据
         this.setRectCurInfo(['', '', '', '', '', '', '']);
         this.setCurIqrTimes(['', '', '', '', '', '', '']);
       }
@@ -115,4 +137,4 @@ export default {
   border-radius: 5px 5px 0 0;
   box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/visual/Visual/exception/ExceptionPanel.vue b/webapp/src/views/visual/Visual/exception/ExceptionPanel.vue
index b902b56..e03e4df 100644
--- a/webapp/src/views/visual/Visual/exception/ExceptionPanel.vue
+++ b/webapp/src/views/visual/Visual/exception/ExceptionPanel.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="temp">
@@ -38,15 +38,22 @@
             <div v-if="!dq0Show">
               <el-row class="item">
                 <el-col :span="colSpan0[0]">联动&nbsp;：</el-col>
-                <el-col :span="colSpan0[1]"><el-checkbox v-model="myLinkChecked" /></el-col>
+                <el-col :span="colSpan0[1]"><el-checkbox v-model="myLinkChecked"/></el-col>
               </el-row>
               <el-row class="item excepPanelSelect">
                 <el-col :span="colSpan1[0]">上四分位距倍数&nbsp;：</el-col>
-                <el-col :span="colSpan1[1]"><el-input v-model="curBoxInfo.upTimes" type="number" @change="changeUpTimes()" /></el-col>
+                <el-col :span="colSpan1[1]"
+                  ><el-input v-model="curBoxInfo.upTimes" type="number" @change="changeUpTimes()"
+                /></el-col>
               </el-row>
               <el-row class="item excepPanelSelect">
                 <el-col :span="colSpan1[0]">下四分位距倍数&nbsp;：</el-col>
-                <el-col :span="colSpan1[1]"><el-input v-model="curBoxInfo.downTimes" type="number" @change="changeDownTimes()" /></el-col>
+                <el-col :span="colSpan1[1]"
+                  ><el-input
+                    v-model="curBoxInfo.downTimes"
+                    type="number"
+                    @change="changeDownTimes()"
+                /></el-col>
               </el-row>
               <div class="item subButtonDiv">
                 <el-button class="subButton" @click="submitBoxInfo()">确定</el-button>
@@ -77,7 +84,9 @@
       </el-card>
       <el-card>
         <!-- 对应颜色矩阵中的行列数值 -->
-        <div class="infoTitle"><i class="el-icon-chat-dot-round dot" />颜色矩阵像素点相关信息：</div>
+        <div class="infoTitle">
+          <i class="el-icon-chat-dot-round dot" />颜色矩阵像素点相关信息：
+        </div>
         <div v-show="!rectInfoShowFlag" class="infoContent">暂无信息</div>
         <div v-show="rectInfoShowFlag" class="infoContent">
           <div v-for="(item, index) in curRectInfoHead" :key="index">
@@ -94,7 +103,10 @@
 <script>
 import { createNamespacedHelpers } from 'vuex';
 
-const { mapGetters: mapExceptionGetters, mapMutations: mapExceptionMutations } = createNamespacedHelpers('Visual/exception');
+const {
+  mapGetters: mapExceptionGetters,
+  mapMutations: mapExceptionMutations,
+} = createNamespacedHelpers('Visual/exception');
 export default {
   data() {
     return {
@@ -143,7 +155,13 @@ export default {
         return;
       }
       this.boxInfoShowFlag = true;
-      [this.curBoxInfo.run, this.curBoxInfo.tag, this.curBoxInfo.step, this.curBoxInfo.upTimes, this.curBoxInfo.downTimes] = val;
+      [
+        this.curBoxInfo.run,
+        this.curBoxInfo.tag,
+        this.curBoxInfo.step,
+        this.curBoxInfo.upTimes,
+        this.curBoxInfo.downTimes,
+      ] = val;
       this.runSeletChange();
       this.tagSeletChange();
     },
@@ -168,7 +186,13 @@ export default {
   methods: {
     ...mapExceptionMutations(['setCurIqrTimes', 'setLinkChecked', 'setRectCurInfo']),
     mySetCurIqrTimes() {
-      this.setCurIqrTimes([this.curBoxInfo.run, this.curBoxInfo.tag, this.curBoxInfo.step, this.curBoxInfo.upTimes, this.curBoxInfo.downTimes]);
+      this.setCurIqrTimes([
+        this.curBoxInfo.run,
+        this.curBoxInfo.tag,
+        this.curBoxInfo.step,
+        this.curBoxInfo.upTimes,
+        this.curBoxInfo.downTimes,
+      ]);
     },
     runSeletChange() {
       for (let i = 0; i < this.getRun.length; i += 1) {
@@ -180,7 +204,10 @@ export default {
     },
     tagSeletChange() {
       for (let i = 0; i < this.getAllStep.length; i += 1) {
-        if (this.getAllStep[i][0] === this.curBoxInfo.run && this.getAllStep[i][1] === this.curBoxInfo.tag) {
+        if (
+          this.getAllStep[i][0] === this.curBoxInfo.run &&
+          this.getAllStep[i][1] === this.curBoxInfo.tag
+        ) {
           this.curRunTagStep = this.getAllStep[i][2].step;
           break;
         }
@@ -189,7 +216,10 @@ export default {
     computeMaxTimes() {
       let curStepBox = [];
       for (let i = 0; i < this.getAllStep.length; i += 1) {
-        if (this.getAllStep[i][0] === this.curBoxInfo.run && this.getAllStep[i][1] === this.curBoxInfo.tag) {
+        if (
+          this.getAllStep[i][0] === this.curBoxInfo.run &&
+          this.getAllStep[i][1] === this.curBoxInfo.tag
+        ) {
           let k = 0;
           for (let j = 0; j < this.curRunTagStep.length; j += 1) {
             if (this.curRunTagStep[j] === this.curBoxInfo.step) {
@@ -218,7 +248,7 @@ export default {
       const [maxDownTimes, maxUpTimes] = this.computeMaxTimes();
       if (this.curBoxInfo.upTimes > maxUpTimes) {
         this.$message({
-          message: `上四分位距的倍数最大只能为：${  maxUpTimes}`,
+          message: `上四分位距的倍数最大只能为：${maxUpTimes}`,
           type: 'warning',
         });
         this.curBoxInfo.upTimes = maxUpTimes;
@@ -228,7 +258,7 @@ export default {
         let downTimesTemp = this.curBoxInfo.upTimes;
         if (maxDownTimes < downTimesTemp) {
           this.$message({
-            message: `下四分位距的倍数最大只能为：${  maxDownTimes}`,
+            message: `下四分位距的倍数最大只能为：${maxDownTimes}`,
             type: 'warning',
           });
           downTimesTemp = maxDownTimes;
@@ -250,7 +280,7 @@ export default {
       const [maxDownTimes, maxUpTimes] = this.computeMaxTimes();
       if (this.curBoxInfo.downTimes > maxDownTimes) {
         this.$message({
-          message: `下四分位距的倍数最大只能为：${  maxDownTimes}`,
+          message: `下四分位距的倍数最大只能为：${maxDownTimes}`,
           type: 'warning',
         });
         this.curBoxInfo.downTimes = maxDownTimes;
@@ -260,7 +290,7 @@ export default {
         let upTimesTemp = this.curBoxInfo.downTimes;
         if (maxUpTimes < upTimesTemp) {
           this.$message({
-            message: `上四分位距的倍数最大只能为：${  maxUpTimes}`,
+            message: `上四分位距的倍数最大只能为：${maxUpTimes}`,
             type: 'warning',
           });
           upTimesTemp = maxUpTimes;
@@ -273,7 +303,10 @@ export default {
     submitBoxInfo() {
       // 需要先判断一下再存进去，数据没变也不提交
       // 都不为空，以及倍数不能为负数
-      if (Number(this.curBoxInfo.upTimes) !== Number(this.curBoxInfo.downTimes) && this.myLinkChecked) {
+      if (
+        Number(this.curBoxInfo.upTimes) !== Number(this.curBoxInfo.downTimes) &&
+        this.myLinkChecked
+      ) {
         if (this.downUpChange === 'downUp') {
           this.changeDownTimes();
         } else {
@@ -281,7 +314,11 @@ export default {
         }
       }
       // 如果没有变化就不提交
-      if (Number(this.curBoxInfo.upTimes) === this.getCurIqrTimes[3] && Number(this.curBoxInfo.downTimes) === this.getCurIqrTimes[4]) return;
+      if (
+        Number(this.curBoxInfo.upTimes) === this.getCurIqrTimes[3] &&
+        Number(this.curBoxInfo.downTimes) === this.getCurIqrTimes[4]
+      )
+        return;
       if (Number(this.curBoxInfo.upTimes) < 0 || Number(this.curBoxInfo.downTimes) < 0) {
         this.$message({
           message: '倍数不能为负数',
@@ -289,7 +326,13 @@ export default {
         });
         return;
       }
-      this.setCurIqrTimes([this.curBoxInfo.run, this.curBoxInfo.tag, this.curBoxInfo.step, Number(this.curBoxInfo.upTimes), Number(this.curBoxInfo.downTimes)]);
+      this.setCurIqrTimes([
+        this.curBoxInfo.run,
+        this.curBoxInfo.tag,
+        this.curBoxInfo.step,
+        Number(this.curBoxInfo.upTimes),
+        Number(this.curBoxInfo.downTimes),
+      ]);
     },
   },
 };
@@ -394,7 +437,8 @@ export default {
   border-color: #625eb3;
 }
 
-/deep/ .excepPanel .el-checkbox__input.is-checked .el-checkbox__inner .excepPanel .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+/deep/
+.excepPanel .el-checkbox__input.is-checked .el-checkbox__inner .excepPanel .el-checkbox__input.is-indeterminate .el-checkbox__inner {
   background-color: #625eb3;
   border-color: #625eb3;
 }
diff --git a/webapp/src/views/visual/Visual/exception/excepContainer.vue b/webapp/src/views/visual/Visual/exception/excepContainer.vue
index e868cda..2558de0 100644
--- a/webapp/src/views/visual/Visual/exception/excepContainer.vue
+++ b/webapp/src/views/visual/Visual/exception/excepContainer.vue
@@ -1,24 +1,27 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="exceptionContainer">
     <el-card style="height: 100%;">
-      <div :class="excepContainerHeadShow?'excepContainerHead2':'excepContainerHead1'">
-        <div class="excepHead"><span style="font-weight: 600;">{{ oneData[0] }}</span>/<span>{{ oneData[1] }}</span></div>
+      <div :class="excepContainerHeadShow ? 'excepContainerHead2' : 'excepContainerHead1'">
+        <div class="excepHead">
+          <span style="font-weight: 600;">{{ oneData[0] }}</span
+          >/<span>{{ oneData[1] }}</span>
+        </div>
         <div class="curStep">当前步：{{ myAllStep[curStepIndex] }}</div>
       </div>
       <el-row :gutter="30" class="excepContainerContent">
@@ -49,19 +52,23 @@
 import * as d3 from 'd3';
 import { createNamespacedHelpers } from 'vuex';
 
-const { mapActions: mapExceptionActions, mapGetters: mapExceptionGetters, mapMutations: mapExceptionMutations } = createNamespacedHelpers('Visual/exception');
+const {
+  mapActions: mapExceptionActions,
+  mapGetters: mapExceptionGetters,
+  mapMutations: mapExceptionMutations,
+} = createNamespacedHelpers('Visual/exception');
 export default {
   name: 'ExcepContainer',
   props: { oneData: Array, index: Number, oneAllStep: Array },
   data() {
     return {
       excepContainerHeadShow: false,
-      excepHistId: `excepHist${  this.index}`,
-      excepRectId: `excepRect${  this.index}`,
-      excepCanvasId: `excepCanvas${  this.index}`,
-      excepLegendId: `excepLegend${  this.index}`,
-      excepBoxId: `excepBox${  this.index}`,
-      excepStepAxisId: `excepStepAxis${  this.index}`,
+      excepHistId: `excepHist${this.index}`,
+      excepRectId: `excepRect${this.index}`,
+      excepCanvasId: `excepCanvas${this.index}`,
+      excepLegendId: `excepLegend${this.index}`,
+      excepBoxId: `excepBox${this.index}`,
+      excepStepAxisId: `excepStepAxis${this.index}`,
       curStepIndex: 0, // 当前显示的step的索引
       boxLeftIndex: 0, // 刷子获取的范围
       boxRightIndex: 4,
@@ -112,18 +119,22 @@ export default {
         this.curExcepBox = val[2];
         this.drawExcepBox();
         // 盒须图高亮
-        d3.select(`#${  this.excepBoxId}`).select(`.boxRect${  this.curStepIndex}`).style('fill', '#B0B6E6');
+        d3.select(`#${this.excepBoxId}`)
+          .select(`.boxRect${this.curStepIndex}`)
+          .style('fill', '#B0B6E6');
       }
     },
     getCurIqrTimes(val) {
       // 控制面板修改参数后，这边如何处理
       this.excepContainerHeadShow = false;
       const getOneStepDataFlag = false;
-      if (this.myOneData[0] === val[0] && this.myOneData[1] === val[1]) { // 是不是当前这个子组件中的数据
+      if (this.myOneData[0] === val[0] && this.myOneData[1] === val[1]) {
+        // 是不是当前这个子组件中的数据
         // 边框高亮
         this.excepContainerHeadShow = true;
-        if (this.myAllStep[this.curStepIndex] !== val[2]) { // step发生变化
-          let k = 0; 
+        if (this.myAllStep[this.curStepIndex] !== val[2]) {
+          // step发生变化
+          let k = 0;
           for (let i = 0; i < this.myAllStep.length; i += 1) {
             if (this.myAllStep[i] === val[2]) {
               k = i;
@@ -134,18 +145,36 @@ export default {
           this.getOneStepData(k);
         }
         // 数据变化才会存进来，上下界变化
-        const dq = this.myBoxPercent[this.curStepIndex][0][1] - this.myBoxPercent[this.curStepIndex][0][3];
+        const dq =
+          this.myBoxPercent[this.curStepIndex][0][1] - this.myBoxPercent[this.curStepIndex][0][3];
         if (dq !== 0) {
           // 修改这个子组件中的数据
-          this.myBoxPercent[this.curStepIndex][0][0] = this.myBoxPercent[this.curStepIndex][0][1] + val[3] * dq;
-          this.myBoxPercent[this.curStepIndex][0][4] = this.myBoxPercent[this.curStepIndex][0][3] - val[4] * dq;
+          this.myBoxPercent[this.curStepIndex][0][0] =
+            this.myBoxPercent[this.curStepIndex][0][1] + val[3] * dq;
+          this.myBoxPercent[this.curStepIndex][0][4] =
+            this.myBoxPercent[this.curStepIndex][0][3] - val[4] * dq;
           // 修改vuex中保存的数据
-          this.setAllStepBoxUp({ index: this.index, step: this.curStepIndex, up: this.myBoxPercent[this.curStepIndex][0][0] });
-          this.setAllStepBoxDown({ index: this.index, step: this.curStepIndex, down: this.myBoxPercent[this.curStepIndex][0][4] });
+          this.setAllStepBoxUp({
+            index: this.index,
+            step: this.curStepIndex,
+            up: this.myBoxPercent[this.curStepIndex][0][0],
+          });
+          this.setAllStepBoxDown({
+            index: this.index,
+            step: this.curStepIndex,
+            down: this.myBoxPercent[this.curStepIndex][0][4],
+          });
         }
-        const paramTemp = { run: this.myOneData[0], tag: this.myOneData[1], step: this.myAllStep[this.curStepIndex], down: this.myBoxPercent[this.curStepIndex][0][4], up: this.myBoxPercent[this.curStepIndex][0][0] };
+        const paramTemp = {
+          run: this.myOneData[0],
+          tag: this.myOneData[1],
+          step: this.myAllStep[this.curStepIndex],
+          down: this.myBoxPercent[this.curStepIndex][0][4],
+          up: this.myBoxPercent[this.curStepIndex][0][0],
+        };
         this.fetchExcepBox(paramTemp);
-        if (!getOneStepDataFlag) { // 没有重新获取颜色矩阵，也需要重新绘制，因为之前的path还存在
+        if (!getOneStepDataFlag) {
+          // 没有重新获取颜色矩阵，也需要重新绘制，因为之前的path还存在
           this.drawCanvasRect();
         }
       }
@@ -173,9 +202,11 @@ export default {
     }
     this.drawExcepBox();
     this.drawExcepStepAxis();
-    d3.select(`#${  this.excepBoxId}`).select('.boxRect0').style('fill', '#B0B6E6');
+    d3.select(`#${this.excepBoxId}`)
+      .select('.boxRect0')
+      .style('fill', '#B0B6E6');
     // 当鼠标进入颜色矩阵区域禁止滑动条的滚轮操作，不在颜色矩阵区域就允许滑动条的滚轮操作
-    d3.select(`#${ this.excepCanvasId}`).on('mouseover', () => {
+    d3.select(`#${this.excepCanvasId}`).on('mouseover', () => {
       document.getElementById('excepDisplay').onmousewheel = () => {
         return false;
       };
@@ -199,73 +230,104 @@ export default {
     ]),
     // 画直方图
     drawExcepHist() {
-      d3.select(`#${  this.excepHistId}`).select('svg').remove();
+      d3.select(`#${this.excepHistId}`)
+        .select('svg')
+        .remove();
       const histSvgWidth = 630;
       const histSvgHeight = 240;
       const padding = { top: 25, right: 30, bottom: 25, left: 50 };
       const histWidth = histSvgWidth - padding.left - padding.right;
       const histHeight = histSvgHeight - padding.top - padding.bottom;
-      const histOuterSvg = d3.select(`#${  this.excepHistId}`).append('svg')
-        .attr('width', '100%').attr('height', '100%')
-        .attr('preserveAspectRatio', 'xMidYMid meet').attr('viewBox', `0 0 ${  histSvgWidth  } ${  histSvgHeight}`);
-      const histSvg = histOuterSvg.append('g').attr('width', histSvgWidth).attr('height', histSvgHeight)
-        .attr('transform', `translate(${  padding.left  },${  padding.top  })`);
-      this.histxScale = d3.scaleLinear().domain([this.myOneData[4][0], this.myOneData[4][1]]).range([0, histWidth]).nice();
-      const histCountMax = d3.max(this.myOneData[4][2],  function _nonName(d) {
+      const histOuterSvg = d3
+        .select(`#${this.excepHistId}`)
+        .append('svg')
+        .attr('width', '100%')
+        .attr('height', '100%')
+        .attr('preserveAspectRatio', 'xMidYMid meet')
+        .attr('viewBox', `0 0 ${histSvgWidth} ${histSvgHeight}`);
+      const histSvg = histOuterSvg
+        .append('g')
+        .attr('width', histSvgWidth)
+        .attr('height', histSvgHeight)
+        .attr('transform', `translate(${padding.left},${padding.top})`);
+      this.histxScale = d3
+        .scaleLinear()
+        .domain([this.myOneData[4][0], this.myOneData[4][1]])
+        .range([0, histWidth])
+        .nice();
+      const histCountMax = d3.max(this.myOneData[4][2], function _nonName(d) {
         return d[2];
       });
-      const histyScale = d3.scaleLinear().domain([0, histCountMax]).range([histHeight, 0]).nice();
-      const histxAxis = d3.axisBottom()
+      const histyScale = d3
+        .scaleLinear()
+        .domain([0, histCountMax])
+        .range([histHeight, 0])
+        .nice();
+      const histxAxis = d3
+        .axisBottom()
         .scale(this.histxScale)
         .ticks(7);
-      const histyAxis = d3.axisLeft()
+      const histyAxis = d3
+        .axisLeft()
         .scale(histyScale)
-        .tickFormat(d => {
+        .tickFormat((d) => {
           if (d > 10000) {
             const numLen = d.toString().length - 1;
-            return `${ d / (10 ** numLen) }e+${ numLen }`;
+            return `${d / 10 ** numLen}e+${numLen}`;
           }
           return d;
         });
-      histSvg.append('g').call(histxAxis).attr('transform', `translate(0, ${  histHeight  })`);
+      histSvg
+        .append('g')
+        .call(histxAxis)
+        .attr('transform', `translate(0, ${histHeight})`);
       histSvg.append('g').call(histyAxis);
       const that = this;
-      histSvg.append('g')
+      histSvg
+        .append('g')
         .selectAll('rect')
         .data(this.myOneData[4][2])
         .enter()
         .append('g')
         .append('rect')
-        .attr('x',  function _nonName(d) {
+        .attr('x', function _nonName(d) {
           return that.histxScale(d[0]);
         })
-        .attr('y',  function _nonName(d) {
+        .attr('y', function _nonName(d) {
           return histyScale(d[2]);
         })
-        .attr('width',  function _nonName(d) {
+        .attr('width', function _nonName(d) {
           return that.histxScale(d[1]) - that.histxScale(d[0]);
         })
-        .attr('height',  function _nonName(d) {
+        .attr('height', function _nonName(d) {
           return histHeight - histyScale(d[2]);
         })
         .attr('fill', '#B0B6E6');
       // 把盒线图中的up和down标记出来
       const min = this.myBoxPercent[this.curStepIndex][0][4];
       const max = this.myBoxPercent[this.curStepIndex][0][0];
-      histSvg.append('g').append('rect')
+      histSvg
+        .append('g')
+        .append('rect')
         .attr('x', this.histxScale(min))
-        .attr('y', histHeight - 5).attr('width', '3')
-        .attr('height', '10').attr('fill', 'red')
+        .attr('y', histHeight - 5)
+        .attr('width', '3')
+        .attr('height', '10')
+        .attr('fill', 'red')
         .attr('class', 'minLine');
-      histSvg.append('g').append('rect')
+      histSvg
+        .append('g')
+        .append('rect')
         .attr('x', this.histxScale(max))
-        .attr('y', histHeight - 5).attr('width', '3')
-        .attr('height', '10').attr('fill', 'red')
+        .attr('y', histHeight - 5)
+        .attr('width', '3')
+        .attr('height', '10')
+        .attr('fill', 'red')
         .attr('class', 'maxLine');
     },
     // 为画布添加鼠标操作，只需要初始添加一次
     CanvasRectMouseOperator() {
-      const excepCanvas=document.getElementById(this.excepCanvasId);
+      const excepCanvas = document.getElementById(this.excepCanvasId);
       // 鼠标悬浮计算当前点的行列
       const that = this;
       function onMouseMoveFunc(e) {
@@ -273,16 +335,25 @@ export default {
         const rectDh = 10 * that.rectScale;
         const row = Math.floor(e.layerY / rectDh);
         const col = Math.floor(e.layerX / rectDw);
-        that.setRectCurInfo([that.myOneData[0], that.myOneData[1], that.myAllStep[that.curStepIndex], row, col, that.myOneData[3][4][row][col]]);
+        that.setRectCurInfo([
+          that.myOneData[0],
+          that.myOneData[1],
+          that.myAllStep[that.curStepIndex],
+          row,
+          col,
+          that.myOneData[3][4][row][col],
+        ]);
       }
       excepCanvas.onmousemove = onMouseMoveFunc;
       // 鼠标滚轮放大，禁用滑动条的滚轮事件
       function onMouseWheelFunc(e) {
-        if (e.wheelDelta < 0) { // 缩小
+        if (e.wheelDelta < 0) {
+          // 缩小
           that.rectScale *= 0.9;
           that.drawCanvasRect();
           that.setRectExcepBox();
-        } else { // 放大
+        } else {
+          // 放大
           that.rectScale *= 1.1;
           that.drawCanvasRect();
           that.setRectExcepBox();
@@ -307,12 +378,15 @@ export default {
       const rectDh = 10 * this.rectScale;
       const rectWidth = rectDw * m;
       const rectHeight = rectDh * n;
-      const excepCanvas=document.getElementById(this.excepCanvasId);
+      const excepCanvas = document.getElementById(this.excepCanvasId);
       excepCanvas.width = 0; // canvas画布宽高变化，就清空了原先的内容
       excepCanvas.width = rectWidth + 20;
       excepCanvas.height = rectHeight;
-      const colorLinear = d3.scaleLinear().domain([min, (min + max) / 2, max]).range(this.rectColor);
-      const excepCanvas2d=excepCanvas.getContext("2d");
+      const colorLinear = d3
+        .scaleLinear()
+        .domain([min, (min + max) / 2, max])
+        .range(this.rectColor);
+      const excepCanvas2d = excepCanvas.getContext('2d');
       for (let i = 0; i < n; i += 1) {
         for (let j = 0; j < m; j += 1) {
           if (this.myOneData[3][4][i][j] >= min && this.myOneData[3][4][i][j] <= max) {
@@ -329,7 +403,7 @@ export default {
         excepCanvas2d.beginPath();
         excepCanvas2d.moveTo(0, lineY);
         excepCanvas2d.lineTo(rectWidth, lineY);
-        excepCanvas2d.strokeStyle="white";
+        excepCanvas2d.strokeStyle = 'white';
         excepCanvas2d.stroke();
       }
       for (let i = 0; i < m; i += 1) {
@@ -337,22 +411,32 @@ export default {
         excepCanvas2d.beginPath();
         excepCanvas2d.moveTo(lineX, 0);
         excepCanvas2d.lineTo(lineX, rectHeight);
-        excepCanvas2d.strokeStyle="white";
+        excepCanvas2d.strokeStyle = 'white';
         excepCanvas2d.stroke();
       }
     },
     // 画颜色矩阵的legend
     drawExcepLedgend() {
-      d3.select(`#${  this.excepLegendId}`).select('svg').remove();
+      d3.select(`#${this.excepLegendId}`)
+        .select('svg')
+        .remove();
       const legendWidth = 100;
       const legendHeight = 300;
       const legendRectWidth = 25;
       const legendRectHeight = 135;
       const top = 100;
       const left = 20;
-      const legendSvg = d3.select(`#${  this.excepLegendId}`).append('svg').attr('width', legendWidth).attr('height', legendHeight)
-        .attr('width', '100%').attr('height', '100%').attr('preserveAspectRatio', 'xMidYMid meet')
-        .attr('viewBox', `0 0 ${  legendWidth  } ${  legendHeight}`).append('g').attr('transform', `translate(${  left  },${  top  })`);
+      const legendSvg = d3
+        .select(`#${this.excepLegendId}`)
+        .append('svg')
+        .attr('width', legendWidth)
+        .attr('height', legendHeight)
+        .attr('width', '100%')
+        .attr('height', '100%')
+        .attr('preserveAspectRatio', 'xMidYMid meet')
+        .attr('viewBox', `0 0 ${legendWidth} ${legendHeight}`)
+        .append('g')
+        .attr('transform', `translate(${left},${top})`);
       const min = this.myOneData[3][1];
       const max = this.myOneData[3][2];
       const minMaxFormat = d3.format('.4f');
@@ -372,32 +456,50 @@ export default {
         .attr('y', 0)
         .attr('stroke', 'black')
         .style('font-size', '10px');
-      const valuescale = d3.scaleLinear().domain([min, max]).range([legendRectHeight, 0]);
+      const valuescale = d3
+        .scaleLinear()
+        .domain([min, max])
+        .range([legendRectHeight, 0]);
       // 背景矩形
-      legendSvg.append('g').append('rect').attr('x', 0).attr('y', 0).attr('width', legendRectWidth)
-        .attr('height', legendRectHeight).attr('fill', '#eeeeee');
+      legendSvg
+        .append('g')
+        .append('rect')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', legendRectWidth)
+        .attr('height', legendRectHeight)
+        .attr('fill', '#eeeeee');
       // legend矩形，上下边界会变化，自己配渐变颜色
       // 定义一个线性渐变
       const defs = legendSvg.append('defs');
-      const legendId = `linearColor${  this.index}`;
-      const linearGradient = defs.append('linearGradient')
+      const legendId = `linearColor${this.index}`;
+      const linearGradient = defs
+        .append('linearGradient')
         .attr('id', legendId)
         .attr('x1', '0')
         .attr('y1', '0')
         .attr('x2', '0')
         .attr('y2', '100%');
-      linearGradient.append('stop')
+      linearGradient
+        .append('stop')
         .attr('offset', '0%')
         .style('stop-color', this.rectColor[2]);
-      linearGradient.append('stop')
+      linearGradient
+        .append('stop')
         .attr('offset', '50%')
         .style('stop-color', this.rectColor[1]);
-      linearGradient.append('stop')
+      linearGradient
+        .append('stop')
         .attr('offset', '100%')
         .style('stop-color', this.rectColor[0]);
-      const myLegend = legendSvg.append('g').append('rect').attr('x', 0).attr('y', 0)
-        .attr('width', legendRectWidth).attr('height', legendRectHeight)
-        .style('fill', `url(#${  legendId  })`);
+      const myLegend = legendSvg
+        .append('g')
+        .append('rect')
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', legendRectWidth)
+        .attr('height', legendRectHeight)
+        .style('fill', `url(#${legendId})`);
       const upDownRect = legendSvg.append('g');
       let upHeight = 0;
       let downHeight = legendRectHeight;
@@ -406,77 +508,131 @@ export default {
       // 上三角形的信息
       const lengthTri = 10;
       const that = this;
-      upDownRect.append('g').append('path').attr('d', `m${legendRectWidth} 0L${legendRectWidth + lengthTri} ${-lengthTri}L${legendRectWidth + lengthTri} 0 Z`)
+      upDownRect
+        .append('g')
+        .append('path')
+        .attr(
+          'd',
+          `m${legendRectWidth} 0L${legendRectWidth + lengthTri} ${-lengthTri}L${legendRectWidth +
+            lengthTri} 0 Z`
+        )
         .attr('fill', this.rectColor[2])
-        .on('mouseover',  function _nonName() {
+        .on('mouseover', function _nonName() {
           d3.select(this).style('cursor', 's-resize');
         })
         .call(
-          d3.drag().on('drag',  function _nonName() {
-            d3.select(this).style('cursor', 's-resize');
-            if (d3.event.y < 0 || d3.event.y > downHeight) upHeight = 0;
-            else upHeight = d3.event.y;
-            d3.select(this).attr('d', `m${legendRectWidth} ${0 + upHeight}L${legendRectWidth + lengthTri} ${-lengthTri + upHeight}L${legendRectWidth + lengthTri} ${+upHeight} Z`);
-            myLegend.attr('y', upHeight).attr('height', downHeight - upHeight);
-            curMax = valuescale.invert(upHeight);
-            curMaxText.text(minMaxFormat(curMax)).attr('y', upHeight);
-          })
-            .on('end',  function _nonName() {
+          d3
+            .drag()
+            .on('drag', function _nonName() {
+              d3.select(this).style('cursor', 's-resize');
+              if (d3.event.y < 0 || d3.event.y > downHeight) upHeight = 0;
+              else upHeight = d3.event.y;
+              d3.select(this).attr(
+                'd',
+                `m${legendRectWidth} ${0 + upHeight}L${legendRectWidth + lengthTri} ${-lengthTri +
+                  upHeight}L${legendRectWidth + lengthTri} ${+upHeight} Z`
+              );
+              myLegend.attr('y', upHeight).attr('height', downHeight - upHeight);
+              curMax = valuescale.invert(upHeight);
+              curMaxText.text(minMaxFormat(curMax)).attr('y', upHeight);
+            })
+            .on('end', function _nonName() {
               that.rectMin = curMin;
               that.rectMax = curMax;
               that.drawCanvasRect();
               that.setRectExcepBox();
-            }),
+            })
         );
       // 下三角形信息
-      upDownRect.append('g').append('path').attr('d', `m${legendRectWidth} ${legendRectHeight}L${legendRectWidth + lengthTri} ${legendRectHeight + lengthTri}L${legendRectWidth + lengthTri} ${legendRectHeight} Z`)
+      upDownRect
+        .append('g')
+        .append('path')
+        .attr(
+          'd',
+          `m${legendRectWidth} ${legendRectHeight}L${legendRectWidth +
+            lengthTri} ${legendRectHeight + lengthTri}L${legendRectWidth +
+            lengthTri} ${legendRectHeight} Z`
+        )
         .attr('fill', this.rectColor[0])
-        .on('mouseover',  function _nonName() {
+        .on('mouseover', function _nonName() {
           d3.select(this).style('cursor', 's-resize');
         })
         .call(
-          d3.drag().on('drag',  function _nonName() {
-            d3.select(this).style('cursor', 's-resize');
-            if (d3.event.y > legendRectHeight || d3.event.y < upHeight) downHeight = legendRectHeight;
-            else downHeight = d3.event.y;
-            d3.select(this).attr('d', `m${legendRectWidth} ${downHeight}L${legendRectWidth + lengthTri} ${lengthTri + downHeight}L${legendRectWidth + lengthTri} ${downHeight} Z`);
-            myLegend.attr('height', downHeight - upHeight);
-            curMin = valuescale.invert(downHeight);
-            curMinText.text(minMaxFormat(curMin)).attr('y', downHeight + 10);
-          })
-            .on('end',  function _nonName() {
+          d3
+            .drag()
+            .on('drag', function _nonName() {
+              d3.select(this).style('cursor', 's-resize');
+              if (d3.event.y > legendRectHeight || d3.event.y < upHeight)
+                downHeight = legendRectHeight;
+              else downHeight = d3.event.y;
+              d3.select(this).attr(
+                'd',
+                `m${legendRectWidth} ${downHeight}L${legendRectWidth + lengthTri} ${lengthTri +
+                  downHeight}L${legendRectWidth + lengthTri} ${downHeight} Z`
+              );
+              myLegend.attr('height', downHeight - upHeight);
+              curMin = valuescale.invert(downHeight);
+              curMinText.text(minMaxFormat(curMin)).attr('y', downHeight + 10);
+            })
+            .on('end', function _nonName() {
               that.rectMin = curMin;
               that.rectMax = curMax;
               that.drawCanvasRect();
               that.setRectExcepBox();
-            }),
+            })
         );
     },
     // 画step坐标轴
     drawExcepStepAxis() {
-      d3.select(`#${  this.excepStepAxisId}`).select('svg').remove();
+      d3.select(`#${this.excepStepAxisId}`)
+        .select('svg')
+        .remove();
       const stepSvgWidth = 630;
       const stepSvgHeight = 40;
       const padding = { left: 50, top: 10, right: 30, bottom: 10 };
       const stepWidth = stepSvgWidth - padding.left - padding.right;
-      const stepSvg = d3.select(`#${  this.excepStepAxisId}`).append('svg').attr('width', '100%').attr('height', '100%')
-        .attr('preserveAspectRatio', 'xMidYMid meet').attr('viewBox', `0 0 ${  stepSvgWidth  } ${  stepSvgHeight}`); // .append('g')
+      const stepSvg = d3
+        .select(`#${this.excepStepAxisId}`)
+        .append('svg')
+        .attr('width', '100%')
+        .attr('height', '100%')
+        .attr('preserveAspectRatio', 'xMidYMid meet')
+        .attr('viewBox', `0 0 ${stepSvgWidth} ${stepSvgHeight}`); // .append('g')
       const allStep = this.myAllStep;
       const stepArrayLen = allStep.length - 1;
       const maxStep = allStep[stepArrayLen];
-      const stepXScale = d3.scaleLinear().domain([allStep[0], maxStep]).range([0, stepWidth]).nice();
-      const stepXScale2 = d3.scalePoint().domain(this.myAllStep).range([0, stepWidth]);
-      const stepXAxis = stepSvg.append('g').call(d3.axisBottom().scale(stepXScale2))
-        .attr('transform', `translate(${  padding.left  },${  padding.top  })`); // .attr('class', 'axis')
-      stepSvg.append('g').append('text').text('step:').attr('x', 20).attr('y', padding.top + 5)
-        .attr('fill', 'black').style('font-size', '12px');
+      const stepXScale = d3
+        .scaleLinear()
+        .domain([allStep[0], maxStep])
+        .range([0, stepWidth])
+        .nice();
+      const stepXScale2 = d3
+        .scalePoint()
+        .domain(this.myAllStep)
+        .range([0, stepWidth]);
+      const stepXAxis = stepSvg
+        .append('g')
+        .call(d3.axisBottom().scale(stepXScale2))
+        .attr('transform', `translate(${padding.left},${padding.top})`); // .attr('class', 'axis')
+      stepSvg
+        .append('g')
+        .append('text')
+        .text('step:')
+        .attr('x', 20)
+        .attr('y', padding.top + 5)
+        .attr('fill', 'black')
+        .style('font-size', '12px');
       const that = this;
       // 加刷子操作
       // 限制brush刷取的操作
       // 固定刷子宽度
-      const brush = d3.brushX()
-        .extent([[0, -7], [stepWidth, 7]])
-        .on('end',  function _nonName() {
+      const brush = d3
+        .brushX()
+        .extent([
+          [0, -7],
+          [stepWidth, 7],
+        ])
+        .on('end', function _nonName() {
           if (d3.event.selection === null) {
             return;
           }
@@ -513,54 +669,78 @@ export default {
           that.boxLeftIndex = leftK;
           that.boxRightIndex = rightK;
           that.drawExcepBox();
-          d3.select(`#${  that.excepBoxId}`).select(`.boxRect${  that.curStepIndex}`).style('fill', '#B0B6E6');
+          d3.select(`#${that.excepBoxId}`)
+            .select(`.boxRect${that.curStepIndex}`)
+            .style('fill', '#B0B6E6');
         });
-      stepXAxis.append('g')
+      stepXAxis
+        .append('g')
         .attr('class', 'brush')
         .call(brush)
-        .call(brush.move, [allStep[that.boxLeftIndex], allStep[that.boxRightIndex]].map(stepXScale)); // 默认选五步
+        .call(
+          brush.move,
+          [allStep[that.boxLeftIndex], allStep[that.boxRightIndex]].map(stepXScale)
+        ); // 默认选五步
       // removes handle to resize the brush
-      d3.select(`#${  this.excepStepAxisId}`).selectAll('.brush>.handle').remove();
+      d3.select(`#${this.excepStepAxisId}`)
+        .selectAll('.brush>.handle')
+        .remove();
       // removes crosshair cursor
-      d3.select(`#${  this.excepStepAxisId}`).selectAll('.brush>.overlay').remove();
+      d3.select(`#${this.excepStepAxisId}`)
+        .selectAll('.brush>.overlay')
+        .remove();
     },
     // 画盒须图
     drawExcepBox() {
-      d3.select(`#${  this.excepBoxId}`).select('svg').remove();
+      d3.select(`#${this.excepBoxId}`)
+        .select('svg')
+        .remove();
       const leftIndex = this.boxLeftIndex;
       const rightIndex = this.boxRightIndex;
       const dw = 110; // 一个box的宽度
-      const allStep = this.myAllStep; 
+      const allStep = this.myAllStep;
       const bigBoxSvgHeight = 240;
       const padding = { top: 20, right: 30, bottom: 40, left: 50 };
       const bigBoxSvgWidth = 650;
       const bigBoxHeight = bigBoxSvgHeight - padding.top - padding.bottom;
-      const bigBoxSvg = d3.select(`#${  this.excepBoxId}`).append('svg')
-        .attr('width', '100%').attr('height', '100%')
-        .attr('preserveAspectRatio', 'xMidYMid meet').attr('viewBox', `0 0 ${  bigBoxSvgWidth  } ${  bigBoxSvgHeight}`)
+      const bigBoxSvg = d3
+        .select(`#${this.excepBoxId}`)
+        .append('svg')
+        .attr('width', '100%')
+        .attr('height', '100%')
+        .attr('preserveAspectRatio', 'xMidYMid meet')
+        .attr('viewBox', `0 0 ${bigBoxSvgWidth} ${bigBoxSvgHeight}`)
         .append('g');
       const stepSlice = allStep.slice(leftIndex, rightIndex + 1);
       const stepDomain = [];
       for (let i = 0; i <= rightIndex - leftIndex + 1; i += 1) {
         stepDomain.push((i + 0.5) * dw);
       }
-      const boxXScale = d3.scaleOrdinal().domain(stepSlice).range(stepDomain);
-      bigBoxSvg.append('g').call(d3.axisBottom().scale(boxXScale))
-        .attr('transform', `translate(${  padding.left - dw / 2  },${  bigBoxHeight + padding.top  })`) // .attr('class', 'axis')
-        .selectAll('text').attr('dx', dw / 2).style('font-size', '11px').style('font-weight', '600');
+      const boxXScale = d3
+        .scaleOrdinal()
+        .domain(stepSlice)
+        .range(stepDomain);
+      bigBoxSvg
+        .append('g')
+        .call(d3.axisBottom().scale(boxXScale))
+        .attr('transform', `translate(${padding.left - dw / 2},${bigBoxHeight + padding.top})`) // .attr('class', 'axis')
+        .selectAll('text')
+        .attr('dx', dw / 2)
+        .style('font-size', '11px')
+        .style('font-weight', '600');
       // 被选中的step中的最大值最小值中的最大值最小值（包括异常点吗）
       const boxPercent = this.myBoxPercent;
       const selectBoxData = boxPercent.slice(leftIndex, rightIndex + 1);
-      let valueMax1 = d3.max(selectBoxData,  function _nonName(d) {
+      let valueMax1 = d3.max(selectBoxData, function _nonName(d) {
         return d[0][0];
       });
-      let valueMin1 = d3.min(selectBoxData,  function _nonName(d) {
+      let valueMin1 = d3.min(selectBoxData, function _nonName(d) {
         return d[0][4];
       });
-      const valueMax2 = d3.max(selectBoxData,  function _nonName(d) {
+      const valueMax2 = d3.max(selectBoxData, function _nonName(d) {
         return d[1][5];
       });
-      const valueMin2 = d3.min(selectBoxData,  function _nonName(d) {
+      const valueMin2 = d3.min(selectBoxData, function _nonName(d) {
         return d[1][0];
       });
       if (valueMax2 > valueMax1) {
@@ -569,28 +749,46 @@ export default {
       if (valueMin2 < valueMin1) {
         valueMin1 = valueMin2;
       }
-      this.boxYScale = d3.scaleLinear().domain([valueMin1, valueMax1]).range([bigBoxHeight, 0]).nice();
-      bigBoxSvg.append('g').call(d3.axisLeft().scale(this.boxYScale).ticks(7))
-        .attr('transform', `translate(${  padding.left  },${  padding.top  })`);
+      this.boxYScale = d3
+        .scaleLinear()
+        .domain([valueMin1, valueMax1])
+        .range([bigBoxHeight, 0])
+        .nice();
+      bigBoxSvg
+        .append('g')
+        .call(
+          d3
+            .axisLeft()
+            .scale(this.boxYScale)
+            .ticks(7)
+        )
+        .attr('transform', `translate(${padding.left},${padding.top})`);
       const width = (dw - 10) / 2;
       const rectWidth = dw - 6;
       const that = this;
       for (let i = leftIndex; i <= rightIndex; i += 1) {
         const center = boxXScale(allStep[i]) + padding.left;
         const oneBoxSvg = bigBoxSvg.append('g'); // 用svg可以通过zoom局部放大
-        oneBoxSvg.append('rect')
+        oneBoxSvg
+          .append('rect')
           .attr('x', center - rectWidth / 2)
           .attr('y', padding.top)
           .attr('height', bigBoxHeight - 1)
           .attr('width', rectWidth)
           .attr('stroke', 'white')
-          .attr('class', `boxRect${  i}`)
+          .attr('class', `boxRect${i}`)
           .style('fill', '#edf1fd')
-          .on('mousemove',  function _nonName() {
+          .on('mousemove', function _nonName() {
             d3.select(this).style('cursor', 'pointer');
           })
-          .on('click',  function _nonName() { // 单击获取当前步的数据
-            const idx = Number(d3.select(this).attr('class').slice(7));
+          .on('click', function _nonName() {
+            // 单击获取当前步的数据
+            const idx = Number(
+              d3
+                .select(this)
+                .attr('class')
+                .slice(7)
+            );
             const dq = that.myBoxPercent[idx][0][1] - that.myBoxPercent[idx][0][3];
             let uptimes = that.myBoxPercent[idx][0][0];
             let downtimes = that.myBoxPercent[idx][0][4];
@@ -602,7 +800,13 @@ export default {
               uptimes = (that.myBoxPercent[idx][0][0] - that.myBoxPercent[idx][0][1]) / dq;
               downtimes = (that.myBoxPercent[idx][0][3] - that.myBoxPercent[idx][0][4]) / dq;
             }
-            that.setCurIqrTimes([that.myOneData[0], that.myOneData[1], that.myAllStep[idx], uptimes, downtimes]);
+            that.setCurIqrTimes([
+              that.myOneData[0],
+              that.myOneData[1],
+              that.myAllStep[idx],
+              uptimes,
+              downtimes,
+            ]);
           });
         this.drawOneBox(oneBoxSvg, this.boxYScale, i, center, width, padding.top);
       }
@@ -615,7 +819,8 @@ export default {
       const min = boxPercent[index][0][4];
       const max = boxPercent[index][0][0];
 
-      const centerLine = svg.append('g')
+      const centerLine = svg
+        .append('g')
         .append('line')
         .attr('x1', center)
         .attr('x2', center)
@@ -623,113 +828,167 @@ export default {
         .attr('y2', top + y(max))
         .attr('stroke', 'black');
 
-      svg.append('g')
+      svg
+        .append('g')
         .append('rect')
         .attr('x', center - width / 2)
         .attr('y', top + y(q3))
-        .attr('height', (y(q1) - y(q3)))
+        .attr('height', y(q1) - y(q3))
         .attr('width', width)
         .attr('stroke', 'black')
         .style('fill', '#8F8BD8');
 
-      svg.append('g')
+      svg
+        .append('g')
         .append('line')
         .attr('x1', center - width / 2)
         .attr('x2', center + width / 2)
-        .attr('y1',  function _nonName() {
+        .attr('y1', function _nonName() {
           return top + y(median);
         })
-        .attr('y2',  function _nonName() {
+        .attr('y2', function _nonName() {
           return top + y(median);
         })
         .attr('stroke', 'black');
-      const upText = svg.append('g').append('text').attr('x', center - width / 3).attr('stroke', 'black').attr('font-size', '10px'); // 上下线的y值
-      const downText = svg.append('g').append('text').attr('x', center - width / 3).attr('stroke', 'black').attr('font-size', '10px');
+      const upText = svg
+        .append('g')
+        .append('text')
+        .attr('x', center - width / 3)
+        .attr('stroke', 'black')
+        .attr('font-size', '10px'); // 上下线的y值
+      const downText = svg
+        .append('g')
+        .append('text')
+        .attr('x', center - width / 3)
+        .attr('stroke', 'black')
+        .attr('font-size', '10px');
       // min
       const that = this;
       const minUp = y(q1) + top; // min往上走不能超过minUp
       const minDown = y(boxPercent[index][1][0]) + top; // min往下走不能超过minDown
       let curMinPosition = top + y(min);
-      svg.append('g')
+      svg
+        .append('g')
         .append('line')
-        .attr('class', `excepDownLine${  index}`)
+        .attr('class', `excepDownLine${index}`)
         .attr('x1', center - width / 2)
         .attr('x2', center + width / 2)
-        .attr('y1',  function _nonName() {
+        .attr('y1', function _nonName() {
           return top + y(min);
         })
-        .attr('y2',  function _nonName() {
+        .attr('y2', function _nonName() {
           return top + y(min);
         })
         .attr('stroke', 'black')
         .attr('stroke-width', '2')
-        .on('mouseover',  function _nonName() {
+        .on('mouseover', function _nonName() {
           d3.select(this).style('cursor', 's-resize');
         })
-        .call(d3.drag().on('drag',  function _nonName() {
-          curMinPosition = d3.event.y;
-          if (d3.event.y > minDown) {
-            curMinPosition = minDown;
-          } else if (d3.event.y < minUp) {
-            curMinPosition = minUp;
-          }
-          d3.select(this).attr('y1', curMinPosition).attr('y2', curMinPosition);
-          centerLine.attr('y1', curMinPosition);
-          downText.attr('y', curMinPosition + 10).text(y.invert(curMinPosition - top).toFixed(4));
-        })
-          .on('end',  function _nonName() {
-            // 停止拖拽时更新js中的min和max，并向后端请求数据
-            that.getOneStepBoxData('down', y.invert(curMinPosition - top), index);
-            d3.select(`#${  that.excepHistId}`).select('svg').select('.minLine').attr('x', that.histxScale(y.invert(curMinPosition - top)));
-          }),
+        .call(
+          d3
+            .drag()
+            .on('drag', function _nonName() {
+              curMinPosition = d3.event.y;
+              if (d3.event.y > minDown) {
+                curMinPosition = minDown;
+              } else if (d3.event.y < minUp) {
+                curMinPosition = minUp;
+              }
+              d3.select(this)
+                .attr('y1', curMinPosition)
+                .attr('y2', curMinPosition);
+              centerLine.attr('y1', curMinPosition);
+              downText
+                .attr('y', curMinPosition + 10)
+                .text(y.invert(curMinPosition - top).toFixed(4));
+            })
+            .on('end', function _nonName() {
+              // 停止拖拽时更新js中的min和max，并向后端请求数据
+              that.getOneStepBoxData('down', y.invert(curMinPosition - top), index);
+              d3.select(`#${that.excepHistId}`)
+                .select('svg')
+                .select('.minLine')
+                .attr('x', that.histxScale(y.invert(curMinPosition - top)));
+            })
         );
       // max
       const maxDown = y(q3) + top;
       const maxUp = y(boxPercent[index][1][5]) + top;
       let curMaxPosition = top + y(max);
-      svg.append('g')
+      svg
+        .append('g')
         .append('line')
-        .attr('class', `excepUpLine${  index}`)
+        .attr('class', `excepUpLine${index}`)
         .attr('x1', center - width / 2)
         .attr('x2', center + width / 2)
-        .attr('y1',  function _nonName() {
+        .attr('y1', function _nonName() {
           return top + y(max);
         })
-        .attr('y2',  function _nonName() {
+        .attr('y2', function _nonName() {
           return top + y(max);
         })
         .attr('stroke', 'black')
         .attr('stroke-width', '2')
-        .on('mouseover',  function _nonName() {
+        .on('mouseover', function _nonName() {
           d3.select(this).style('cursor', 's-resize');
         })
-        .call(d3.drag().on('drag',  function _nonName() {
-          curMaxPosition = d3.event.y;
-          if (d3.event.y < maxUp) {
-            curMaxPosition = maxUp;
-          } else if (d3.event.y > maxDown) {
-            curMaxPosition = maxDown;
-          }
-          d3.select(this).attr('y1', curMaxPosition).attr('y2', curMaxPosition);
-          centerLine.attr('y2', curMaxPosition);
-          upText.attr('y', curMaxPosition).text(y.invert(curMaxPosition - top).toFixed(4));
-        })
-          .on('end',  function _nonName() {
-            that.getOneStepBoxData('up', y.invert(curMaxPosition - top), index);
-            d3.select(`#${  that.excepHistId}`).select('svg').select('.maxLine').attr('x', that.histxScale(y.invert(curMaxPosition - top)));
-          }),
+        .call(
+          d3
+            .drag()
+            .on('drag', function _nonName() {
+              curMaxPosition = d3.event.y;
+              if (d3.event.y < maxUp) {
+                curMaxPosition = maxUp;
+              } else if (d3.event.y > maxDown) {
+                curMaxPosition = maxDown;
+              }
+              d3.select(this)
+                .attr('y1', curMaxPosition)
+                .attr('y2', curMaxPosition);
+              centerLine.attr('y2', curMaxPosition);
+              upText.attr('y', curMaxPosition).text(y.invert(curMaxPosition - top).toFixed(4));
+            })
+            .on('end', function _nonName() {
+              that.getOneStepBoxData('up', y.invert(curMaxPosition - top), index);
+              d3.select(`#${that.excepHistId}`)
+                .select('svg')
+                .select('.maxLine')
+                .attr('x', that.histxScale(y.invert(curMaxPosition - top)));
+            })
         );
       // 六个百分比
-      svg.append('g').selectAll('circle').data(boxPercent[index][1]).enter()
-        .append('g').append('circle')
-        .attr('r', '3').attr('cx', center).attr('cy',  function _nonName(d) { return top + y(d); })
+      svg
+        .append('g')
+        .selectAll('circle')
+        .data(boxPercent[index][1])
+        .enter()
+        .append('g')
+        .append('circle')
+        .attr('r', '3')
+        .attr('cx', center)
+        .attr('cy', function _nonName(d) {
+          return top + y(d);
+        })
         .attr('fill', 'blue')
         .style('opacity', '0.5');
       // 画异常点
       if (this.curExcepBox.length && this.curStepIndex === index) {
-        svg.append('g').attr('class', 'excepCircles').selectAll('circle').data(this.curExcepBox[0]).enter().append('g').append('circle')
-          .attr('r', '2').attr('cx', center).attr('cy',  function _nonName(d) { return top + y(d); }).attr('fill', '#fe5c66').style('opacity', '0.3')
-          .on('mouseover',  function _nonName(d, i) {
+        svg
+          .append('g')
+          .attr('class', 'excepCircles')
+          .selectAll('circle')
+          .data(this.curExcepBox[0])
+          .enter()
+          .append('g')
+          .append('circle')
+          .attr('r', '2')
+          .attr('cx', center)
+          .attr('cy', function _nonName(d) {
+            return top + y(d);
+          })
+          .attr('fill', '#fe5c66')
+          .style('opacity', '0.3')
+          .on('mouseover', function _nonName(d, i) {
             // 是一维的
             let curRow = 0;
             let curColumn = that.curExcepBox[1][i][0];
@@ -740,7 +999,14 @@ export default {
               // eslint-disable-next-line
               curColumn = that.curExcepBox[1][i][1];
             }
-            that.setRectCurInfo([that.myOneData[0], that.myOneData[1], that.myAllStep[that.curStepIndex], curRow, curColumn, that.oneData[3][4][curRow][curColumn]]);
+            that.setRectCurInfo([
+              that.myOneData[0],
+              that.myOneData[1],
+              that.myAllStep[that.curStepIndex],
+              curRow,
+              curColumn,
+              that.oneData[3][4][curRow][curColumn],
+            ]);
           });
       }
     },
@@ -749,10 +1015,16 @@ export default {
       if (this.curStepIndex === idx) return;
       this.drawRectFinished = false;
       this.curStepIndex = idx;
-      const param = { run: this.myOneData[0], tag: this.myOneData[1], step: this.myAllStep[idx], index: this.index };
+      const param = {
+        run: this.myOneData[0],
+        tag: this.myOneData[1],
+        step: this.myAllStep[idx],
+        index: this.index,
+      };
       this.fetchOneData(param);
     },
-    getOneStepBoxData(flag, value, idx) { // 调整，获取新的异常点
+    getOneStepBoxData(flag, value, idx) {
+      // 调整，获取新的异常点
       this.getCurNewExcepBoxFlag = false;
       const dq = this.myBoxPercent[idx][0][1] - this.myBoxPercent[idx][0][3];
       if (dq === 0) {
@@ -777,7 +1049,7 @@ export default {
           const maxDownTimes = (this.myBoxPercent[idx][0][3] - this.myBoxPercent[idx][1][0]) / dq;
           if (downTimes > maxDownTimes) {
             this.$message({
-              message: `下四分位距的倍数最大只能为：${  maxDownTimes}`,
+              message: `下四分位距的倍数最大只能为：${maxDownTimes}`,
               type: 'warning',
             });
             upTimes = maxDownTimes;
@@ -790,7 +1062,13 @@ export default {
           }
           this.myBoxPercent[idx][0][4] = newDown;
         }
-        this.setCurIqrTimes([this.myOneData[0], this.myOneData[1], this.myAllStep[idx], upTimes, downTimes]);
+        this.setCurIqrTimes([
+          this.myOneData[0],
+          this.myOneData[1],
+          this.myAllStep[idx],
+          upTimes,
+          downTimes,
+        ]);
       } else if (flag === 'down') {
         this.myBoxPercent[idx][0][4] = value;
         // up和down联动
@@ -801,7 +1079,7 @@ export default {
           const maxUpTimes = (this.myBoxPercent[idx][1][5] - this.myBoxPercent[idx][0][1]) / dq;
           if (upTimes > maxUpTimes) {
             this.$message({
-              message: `上四分位距的倍数最大只能为：${  maxUpTimes}`,
+              message: `上四分位距的倍数最大只能为：${maxUpTimes}`,
               type: 'warning',
             });
             upTimes = maxUpTimes;
@@ -814,17 +1092,24 @@ export default {
           }
           this.myBoxPercent[idx][0][0] = newUp;
         }
-        this.setCurIqrTimes([this.myOneData[0], this.myOneData[1], this.myAllStep[idx], upTimes, downTimes]);
+        this.setCurIqrTimes([
+          this.myOneData[0],
+          this.myOneData[1],
+          this.myAllStep[idx],
+          upTimes,
+          downTimes,
+        ]);
       }
     },
-    setRectExcepBox() { // 异常点有数据后,颜色矩阵边界高亮
+    setRectExcepBox() {
+      // 异常点有数据后,颜色矩阵边界高亮
       if (this.curExcepBox.length) {
         const n = this.myOneData[3][0][0];
         // const m = this.myOneData[3][0][1];
         const rectWidth = 10 * this.rectScale;
         const rectHeight = 10 * this.rectScale;
-        const excepCanvas=document.getElementById(this.excepCanvasId);
-        const excepCanvas2d=excepCanvas.getContext("2d");
+        const excepCanvas = document.getElementById(this.excepCanvasId);
+        const excepCanvas2d = excepCanvas.getContext('2d');
         for (let k = 0; k < this.curExcepBox[0].length; k += 1) {
           let leftX = this.curExcepBox[1][k][0] * rectWidth;
           let leftY = 0;
@@ -838,18 +1123,24 @@ export default {
           excepCanvas2d.lineTo(leftX + rectWidth, leftY + rectHeight);
           excepCanvas2d.lineTo(leftX, leftY + rectHeight);
           excepCanvas2d.lineTo(leftX, leftY);
-          excepCanvas2d.strokeStyle="#8933e0";
+          excepCanvas2d.strokeStyle = '#8933e0';
           excepCanvas2d.stroke();
         }
         // 统计异常点:异常点个数，占所有数据的百分比
-        this.setExcepBoxStatistic([this.curExcepBox[0].length, (this.curExcepBox[0].length * 100.0 / (this.myOneData[3][0][0] * this.myOneData[3][0][1])).toFixed(2)]);
+        this.setExcepBoxStatistic([
+          this.curExcepBox[0].length,
+          (
+            (this.curExcepBox[0].length * 100.0) /
+            (this.myOneData[3][0][0] * this.myOneData[3][0][1])
+          ).toFixed(2),
+        ]);
       }
     },
   },
 };
 </script>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
 .exceptionContainer {
   margin: 1%;
 }
@@ -921,5 +1212,4 @@ export default {
 .exceptionContainer /deep/ .el-scrollbar__thumb:hover {
   background-color: #b0b6e6;
 }
-
 </style>
diff --git a/webapp/src/views/visual/Visual/exception/index.js b/webapp/src/views/visual/Visual/exception/index.js
index 900982c..20e3973 100644
--- a/webapp/src/views/visual/Visual/exception/index.js
+++ b/webapp/src/views/visual/Visual/exception/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as Exception } from './Exception';
 export { default as ExceptionPanel } from './ExceptionPanel';
diff --git a/webapp/src/views/visual/Visual/features/Features.vue b/webapp/src/views/visual/Visual/features/Features.vue
index 59e9dc9..9053fa2 100644
--- a/webapp/src/views/visual/Visual/features/Features.vue
+++ b/webapp/src/views/visual/Visual/features/Features.vue
@@ -1,26 +1,26 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <style lang="less" scoped>
-    .temp {
-      position: absolute;
-      width: 70%;
-      height: 96%;
-      overflow-y: auto;
-    }
+.temp {
+  position: absolute;
+  width: 70%;
+  height: 96%;
+  overflow-y: auto;
+}
 </style>
 <template>
   <div>
diff --git a/webapp/src/views/visual/Visual/features/FeaturesPanel.vue b/webapp/src/views/visual/Visual/features/FeaturesPanel.vue
index f1a8153..b82eb1e 100644
--- a/webapp/src/views/visual/Visual/features/FeaturesPanel.vue
+++ b/webapp/src/views/visual/Visual/features/FeaturesPanel.vue
@@ -1,23 +1,23 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <style lang="less" scoped>
-  .temp {
-    height: 100px;
-  }
+.temp {
+  height: 100px;
+}
 </style>
 <template>
   <div class="temp">
diff --git a/webapp/src/views/visual/Visual/features/index.js b/webapp/src/views/visual/Visual/features/index.js
index a7b29c9..97b20e7 100644
--- a/webapp/src/views/visual/Visual/features/index.js
+++ b/webapp/src/views/visual/Visual/features/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as Features } from './Features';
 export { default as FeaturesPanel } from './FeaturesPanel';
diff --git a/webapp/src/views/visual/Visual/graphs/Graphs.vue b/webapp/src/views/visual/Visual/graphs/Graphs.vue
index d2ad1f9..fafd87e 100644
--- a/webapp/src/views/visual/Visual/graphs/Graphs.vue
+++ b/webapp/src/views/visual/Visual/graphs/Graphs.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
@@ -29,17 +29,17 @@
               refX="10"
               refY="10"
             >
-              <circle
-                cx="10"
-                cy="10"
-                r="4"
-                style="fill: black;"
-              />
+              <circle cx="10" cy="10" r="4" style="fill: black;" />
             </marker>
           </defs>
           <g id="draw" />
         </svg>
-        <div v-show="showTag" id="assist" class="assist" style="right: 0%; display: flex; flex-direction: column; width: 20%; height: 100%; background-color: white;">
+        <div
+          v-show="showTag"
+          id="assist"
+          class="assist"
+          style="right: 0%; display: flex; flex-direction: column; width: 20%; height: 100%; background-color: white;"
+        >
           <div style="height: 20px;"><span>删除节点</span></div>
           <div style="height: calc(100% - 20px);"><svg /></div>
         </div>
@@ -57,9 +57,9 @@ import 'jquery-contextmenu/dist/jquery.contextMenu.css';
 import { createNamespacedHelpers } from 'vuex';
 
 let expandNode = [];
-let delStageNode = []; 
-let reserverStageNode = []; 
-let clickDel = []; 
+let delStageNode = [];
+let reserverStageNode = [];
+let clickDel = [];
 let changeTag = 0;
 let tmp = [];
 const {
@@ -116,12 +116,12 @@ export default {
       this.graphData = val;
       this.nodeInfo.splice(0, this.nodeInfo.length);
       expandNode = [];
-      delStageNode = []; 
-      reserverStageNode = []; 
-      clickDel = []; 
+      delStageNode = [];
+      reserverStageNode = [];
+      clickDel = [];
       changeTag = 0;
       tmp = [];
-      this.getNodeInfo(JSON.stringify({ 'info': 'init' }));
+      this.getNodeInfo(JSON.stringify({ info: 'init' }));
       this.drawGraph();
       this.setRunChangeTag(false);
       this.setIsDrawing(false);
@@ -157,7 +157,7 @@ export default {
       const param = { run: val, tag: this.getCurTag };
       this.getFullData(param);
     },
-    getCurTag(val) { 
+    getCurTag(val) {
       if (!this.getRunChangeTag) {
         if (!this.getIsDrawing) {
           this.setIsDrawing(true);
@@ -172,7 +172,7 @@ export default {
     this.retList = this.getRetList;
     this.initDraw += 1;
     this.regularEx('');
-    for(let i = 0; i<reserverStageNode.length; i += 1) {
+    for (let i = 0; i < reserverStageNode.length; i += 1) {
       reserverStageNode[i].sign = 1;
     }
     if (this.getGraphData.length === 0) {
@@ -204,29 +204,28 @@ export default {
     ]),
     drawGraph() {
       const self = this;
-      const {drawCircleTag,getDelNodeInfo,getModifyClick,drawAssist,nodeInfo} = this;
+      const { drawCircleTag, getDelNodeInfo, getModifyClick, drawAssist, nodeInfo } = this;
       const getInfo = this.getNodeInfo;
       const data = this.graphData;
       if (data === undefined) {
         return;
       }
-      const color = d3.scaleOrdinal()
-        .range([
-          '#e8c5df', // Convolution
-          '#daf4cc', // Normalization
-          '#d7dafb', // Math&Activation&Pooling
-          '#b1cbe8', // Sparse Tensors&Tensor Transformations
-          '#cdf6e8', // ControlFlow
-          '#feedd3', // Losses&Metrics
-          '#d2f5f9', // InputsandReaders
-          '#dcdcdc', // default
-          '#dcdcdc', // empty
-          '#dcdcdc', // backup
-          '#dcdcdc', // backup
-        ]);
+      const color = d3.scaleOrdinal().range([
+        '#e8c5df', // Convolution
+        '#daf4cc', // Normalization
+        '#d7dafb', // Math&Activation&Pooling
+        '#b1cbe8', // Sparse Tensors&Tensor Transformations
+        '#cdf6e8', // ControlFlow
+        '#feedd3', // Losses&Metrics
+        '#d2f5f9', // InputsandReaders
+        '#dcdcdc', // default
+        '#dcdcdc', // empty
+        '#dcdcdc', // backup
+        '#dcdcdc', // backup
+      ]);
       const isDashed = {};
       const isLines = {};
-      const titleHeight = 40; 
+      const titleHeight = 40;
       const cornerR = 5;
       const lineWidth = 1;
       const opdata = {};
@@ -245,8 +244,8 @@ export default {
       // 绘制  补上edge的虚节点
       function DrawVirtualNodes(graph) {
         d3.selectAll(`.nodes .node`)
-        // 1:卷积层,2:全连接层,3:池化层,4:归一化
-        // eslint-disable-next-line
+          // 1:卷积层,2:全连接层,3:池化层,4:归一化
+          // eslint-disable-next-line
           .attr('temp', function(uid) {
             if (!nodedata[uid] || !IsVirtualNode(nodedata[uid])) {
               return '';
@@ -255,7 +254,11 @@ export default {
             if (!node) {
               return '';
             }
-            d3.select(this).select('rect').style('stroke-dasharray', '5,3').style('stroke', '#696969').style('stroke-width', '1.5px');
+            d3.select(this)
+              .select('rect')
+              .style('stroke-dasharray', '5,3')
+              .style('stroke', '#696969')
+              .style('stroke-width', '1.5px');
           });
       }
       // 判断是否为计算图特殊节点
@@ -291,9 +294,9 @@ export default {
       // 绘制计算图特殊节点
       function DrawSpecialNodes(graph) {
         d3.selectAll(`.nodes .node`)
-        // eslint-disable-next-line
+          // eslint-disable-next-line
           .attr('temp', function(uid) {
-            const rectColor = {1:"#e8c5df", 2:"#b7d4ae", 3:"#d7dafb", 4:"#daf4cc"};
+            const rectColor = { 1: '#e8c5df', 2: '#b7d4ae', 3: '#d7dafb', 4: '#daf4cc' };
             if (!nodedata[uid]) {
               return '';
             }
@@ -302,7 +305,9 @@ export default {
             if (!node || !(nodeType in rectColor)) {
               return '';
             }
-            d3.select(this).select('rect').style('fill', rectColor[nodeType]);
+            d3.select(this)
+              .select('rect')
+              .style('fill', rectColor[nodeType]);
           });
       }
       // 判断结构图是否要双层节点 或者 特殊颜色
@@ -328,7 +333,7 @@ export default {
       // 绘制特殊节点,绘制结构图双层节点
       function DrawDoubleNodes(graph) {
         d3.selectAll(`.nodes .node`)
-        // eslint-disable-next-line
+          // eslint-disable-next-line
           .attr('temp', function(uid) {
             if (!nodedata[uid] || !IsDoubleNode(nodedata[uid])) {
               return '';
@@ -340,15 +345,20 @@ export default {
             const width = node.width + 20;
             const height = node.height + 30;
             if (IsDoubleNode(nodedata[uid]) !== 4) {
-            // 分层的下层背景
-              d3.select(this).select('.label').attr('transform', `translate(0,-${  height / 4  })`);
-              d3.select(this).selectAll('.special-layer-2').data([0])
+              // 分层的下层背景
+              d3.select(this)
+                .select('.label')
+                .attr('transform', `translate(0,-${height / 4})`);
+              d3.select(this)
+                .selectAll('.special-layer-2')
+                .data([0])
                 .enter()
                 .append('rect')
                 .attr('class', 'special-layer-2')
                 .style('fill', '#ffffff');
               // 下层空白
-              d3.select(this).selectAll('.special-layer-2')
+              d3.select(this)
+                .selectAll('.special-layer-2')
                 .attr('x', -width / 2 + lineWidth)
                 .attr('y', -titleHeight + titleHeight / 2 - lineWidth + 20)
                 .attr('rx', cornerR + 6)
@@ -358,12 +368,15 @@ export default {
                 .style('fill', '#fff')
                 .style('opacity', 1)
                 .style('stroke-width', 0);
-              d3.select(this).selectAll('.special-layer-1').data([0])
+              d3.select(this)
+                .selectAll('.special-layer-1')
+                .data([0])
                 .enter()
                 .append('rect')
                 .attr('class', 'special-layer-1')
                 .style('fill', '#fff');
-              d3.select(this).selectAll('.special-layer-1')
+              d3.select(this)
+                .selectAll('.special-layer-1')
                 .attr('x', -width / 2 + lineWidth)
                 .attr('y', -5)
                 .attr('width', width - lineWidth * 2)
@@ -371,26 +384,33 @@ export default {
                 .style('opacity', 1)
                 .style('fill', '#fff')
                 .style('stroke-width', 0);
-              const text1 = {1:"kernel_size", 2:"units", 3:"pool_size"};
-              const text2 = {1:"strides", 2:"activation", 3:"strides"};
+              const text1 = { 1: 'kernel_size', 2: 'units', 3: 'pool_size' };
+              const text2 = { 1: 'strides', 2: 'activation', 3: 'strides' };
               const nodeType = IsDoubleNode(nodedata[uid]);
               if (nodeType in text1) {
                 const ATTR = nodedata[uid].attrs;
-                d3.select(this).selectAll('.special-layer-text1').data([0])
-                    .enter()
-                    .append('text')
-                    .attr('class', 'special-layer-text')
-                    .attr('x', -width / 2 + 15)
-                    .attr('y', 8);
-                d3.select(this).selectAll('.special-layer-text').html(`● ${text1[nodeType]}: ${JSON.stringify(ATTR[text1[nodeType]])}`).style('font-size', '12px');
-                d3.select(this).selectAll('.special-layer-text2').data([0])
-                    .enter()
-                    .append('text')
-                    .attr('class', 'special-layer-text')
-                    .attr('x', -width / 2 + 15)
-                    .attr('y', 25)
-                    .html(`● ${text2[nodeType]}: : ${JSON.stringify(ATTR[text2[nodeType]])}`)
-                    .style('font-size', '12px');
+                d3.select(this)
+                  .selectAll('.special-layer-text1')
+                  .data([0])
+                  .enter()
+                  .append('text')
+                  .attr('class', 'special-layer-text')
+                  .attr('x', -width / 2 + 15)
+                  .attr('y', 8);
+                d3.select(this)
+                  .selectAll('.special-layer-text')
+                  .html(`● ${text1[nodeType]}: ${JSON.stringify(ATTR[text1[nodeType]])}`)
+                  .style('font-size', '12px');
+                d3.select(this)
+                  .selectAll('.special-layer-text2')
+                  .data([0])
+                  .enter()
+                  .append('text')
+                  .attr('class', 'special-layer-text')
+                  .attr('x', -width / 2 + 15)
+                  .attr('y', 25)
+                  .html(`● ${text2[nodeType]}: : ${JSON.stringify(ATTR[text2[nodeType]])}`)
+                  .style('font-size', '12px');
               }
             }
           });
@@ -407,16 +427,16 @@ export default {
       }
       function GetColorByNode(g, node) {
         let op = '';
-        const {uid} = node;
+        const { uid } = node;
         if (nodedata[uid]) {
           op = nodedata[uid].op;
-        } else { 
+        } else {
           if (g.node(uid)) {
             op = g.node(uid).op;
             nodedata[uid] = g.node(uid);
           }
           if (g.node.sub_net) {
-            const index = g.node.sub_net.findIndex(e => e.uid === uid);
+            const index = g.node.sub_net.findIndex((e) => e.uid === uid);
             if (index >= 0) {
               op = g.node.sub_net[index].op;
               nodedata[uid] = g.node.sub_net[index];
@@ -432,16 +452,22 @@ export default {
       retlist.forEach((d) => {
         d.list.forEach((tk) => {
           opdata[tk] = {
-            op: tk, parent: d.op,
+            op: tk,
+            parent: d.op,
           };
           if (tk.indexOf('_') >= 0) {
             opdata[tk] = {
-              op: tk.replace(/_/g, ''), parent: d.op,
+              op: tk.replace(/_/g, ''),
+              parent: d.op,
             };
           }
         });
       });
-      color.domain(retlist.map((d) => { return d.op; }));
+      color.domain(
+        retlist.map((d) => {
+          return d.op;
+        })
+      );
       // 判断该节点是否可用
       const find = (id) => {
         const names = id.split('/');
@@ -453,25 +479,25 @@ export default {
             }
           }
           return true;
-        } 
-          let sign = 0;
-          const pre = names.slice(0, namesLength - 1).join('/');
-          for (let i = 0; i < expandNode.length; i += 1) {
-            if (pre === expandNode[i].uid) {
-              sign = 1;
-              break;
-            }
+        }
+        let sign = 0;
+        const pre = names.slice(0, namesLength - 1).join('/');
+        for (let i = 0; i < expandNode.length; i += 1) {
+          if (pre === expandNode[i].uid) {
+            sign = 1;
+            break;
           }
-          for (let i = 0; i < expandNode.length; i += 1) {
-            if (id === expandNode[i].uid) {
-              sign = 0;
-              break;
-            }
+        }
+        for (let i = 0; i < expandNode.length; i += 1) {
+          if (id === expandNode[i].uid) {
+            sign = 0;
+            break;
           }
-          if (sign) {
-            return true;
-          } 
-            return false;
+        }
+        if (sign) {
+          return true;
+        }
+        return false;
       };
       // 保存节点及相关边,sign标记保存入边(0)或出边(1)
       const nodeHold = (nodeUid, edgeUid, srcNode, sign, op, attrs) => {
@@ -484,7 +510,7 @@ export default {
               if (srcNode) {
                 nodeInfo[i].outNode.push(srcNode);
               }
-              if (attrs && (JSON.stringify(attrs) !== '{}')) {
+              if (attrs && JSON.stringify(attrs) !== '{}') {
                 nodeInfo[i].attr = attrs;
               }
               nodeInfo[i].op = op;
@@ -492,20 +518,20 @@ export default {
               if (srcNode) {
                 nodeInfo[i].inNode.push(srcNode);
               }
-              if (attrs && (JSON.stringify(attrs) !== '{}')) {
+              if (attrs && JSON.stringify(attrs) !== '{}') {
                 nodeInfo[i].attr = attrs;
               }
             }
             return true;
           }
         }
-        const node = { 'uid': nodeUid, 'inNode': [], 'outNode': [], 'op': '' };
+        const node = { uid: nodeUid, inNode: [], outNode: [], op: '' };
         if (sign) {
           if (srcNode) {
             node.outNode.push(srcNode);
           }
           node.op = op;
-          if (attrs && (JSON.stringify(attrs) !== '{}')) {
+          if (attrs && JSON.stringify(attrs) !== '{}') {
             node.attr = attrs;
           }
           nodeInfo.push(node);
@@ -513,7 +539,7 @@ export default {
           if (srcNode) {
             node.inNode.push(srcNode);
           }
-          if (attrs && (JSON.stringify(attrs) !== '{}')) {
+          if (attrs && JSON.stringify(attrs) !== '{}') {
             node.attr = attrs;
           }
           nodeInfo.push(node);
@@ -525,7 +551,10 @@ export default {
         self.lastClick = '';
         self.lastAssistClick = '';
         nodeInfo.splice(0, nodeInfo.length);
-        d3.select('#svg-canvas').select('g').selectAll('g').remove();
+        d3.select('#svg-canvas')
+          .select('g')
+          .selectAll('g')
+          .remove();
         const g = new dagreD3.graphlib.Graph({ compound: true })
           .setGraph({})
           .setDefaultEdgeLabel(() => {
@@ -541,7 +570,10 @@ export default {
               }
               v.label = v.name;
               let label = `${v.label.slice(0, 13)}\n`;
-              label += v.label.length > 26 ? `...${v.label.substring(v.label.length - 13)}` : `${v.label.substring(13, v.label.length)}`;
+              label +=
+                v.label.length > 26
+                  ? `...${v.label.substring(v.label.length - 13)}`
+                  : `${v.label.substring(13, v.label.length)}`;
               v.label = label;
             }
           }
@@ -549,8 +581,8 @@ export default {
             g.setNode(v.uid, v);
             v.targets.forEach((u) => {
               if (find(u.id)) {
-                const edgeLabel = `${v.uid  }__${  u.id}`;
-                g.setEdge(v.uid, u.id, { 'id': edgeLabel, 'label': u.info, curve: d3.curveBasis });
+                const edgeLabel = `${v.uid}__${u.id}`;
+                g.setEdge(v.uid, u.id, { id: edgeLabel, label: u.info, curve: d3.curveBasis });
                 isDashed[edgeLabel] = u.control;
                 isLines[edgeLabel] = u.num;
                 nodeHold(v.uid, edgeLabel, u.id, 1, v.op, v.attrs);
@@ -560,7 +592,7 @@ export default {
             nodeHold(v.uid, '', '', 1, v.op, v.attrs);
           } else {
             v.clusterLabelPos = 'top';
-            if( v.name ) {
+            if (v.name) {
               v.label = v.name;
             }
             g.setNode(v.uid, v);
@@ -578,7 +610,10 @@ export default {
                 }
                 v.label = v.name;
                 let label = `${v.label.slice(0, 13)}\n`;
-                label += v.label.length > 26 ? `...${v.label.substring(v.label.length - 13)}` : `${v.label.substring(13, v.label.length)}`;
+                label +=
+                  v.label.length > 26
+                    ? `...${v.label.substring(v.label.length - 13)}`
+                    : `${v.label.substring(13, v.label.length)}`;
                 v.label = label;
               }
             }
@@ -587,8 +622,8 @@ export default {
               g.setNode(v.uid, v);
               v.targets.forEach((u) => {
                 if (find(u.id)) {
-                  const edgeLabel = `${v.uid  }__${  u.id}`;
-                  g.setEdge(v.uid, u.id, { 'id': edgeLabel, 'label': u.info, curve: d3.curveBasis });
+                  const edgeLabel = `${v.uid}__${u.id}`;
+                  g.setEdge(v.uid, u.id, { id: edgeLabel, label: u.info, curve: d3.curveBasis });
                   isDashed[edgeLabel] = u.control;
                   isLines[edgeLabel] = u.num;
                   nodeHold(v.uid, edgeLabel, u.id, 1, v.op, v.attrs);
@@ -598,7 +633,7 @@ export default {
               nodeHold(v.uid, '', '', 1, v.op, v.attrs);
             } else {
               v.clusterLabelPos = 'top';
-              if( v.name ) {
+              if (v.name) {
                 v.label = v.name;
               }
               g.setNode(v.uid, v);
@@ -610,14 +645,14 @@ export default {
           const node = g.node(v);
           if (node !== undefined) {
             let fill = GetColorByNode(g, v);
-            const expand = expandNode.find(item => item.uid === v);
+            const expand = expandNode.find((item) => item.uid === v);
             if (expand !== undefined) {
               fill = expand.fill || fill;
             }
-            node.rx = node.ry = 10; 
-            node.width = 125; 
-            node.height = 20; 
-            node.style = `fill:${  fill  };rx:12.5px;ry:12.5px;stroke-width:1px;stroke:#696969`;
+            node.rx = node.ry = 10;
+            node.width = 125;
+            node.height = 20;
+            node.style = `fill:${fill};rx:12.5px;ry:12.5px;stroke-width:1px;stroke:#696969`;
             if (IsDoubleNode(node) && IsDoubleNode(node) !== 4 && self.getCurTag !== 'c_graph') {
               node.height = 50;
             }
@@ -635,10 +670,12 @@ export default {
         const render = new dagreD3.render();
         const svg = d3.select('#svg-canvas');
         render(d3.select('#svg-canvas g'), g);
-        d3.select('#svg-canvas').attr('width', '100%').attr('height', '100%');
+        d3.select('#svg-canvas')
+          .attr('width', '100%')
+          .attr('height', '100%');
         self.srcData = data;
         if (!reserverStageNode.length) {
-          const tmp1 = { 'sign': 1 };
+          const tmp1 = { sign: 1 };
           tmp1.nodeInfo = JSON.parse(JSON.stringify(nodeInfo));
           reserverStageNode.push(tmp1);
           const nnodeInfo = reserverStageNode[0].nodeInfo;
@@ -648,8 +685,8 @@ export default {
               if (nnodeInfo[j].uid === tmpItem.nodeId) {
                 nnodeInfo.splice(j, 1);
               } else {
-                const {inNode} = nnodeInfo[j];
-                const {outNode} = nnodeInfo[j];
+                const { inNode } = nnodeInfo[j];
+                const { outNode } = nnodeInfo[j];
                 for (let z = 0; z <= inNode.length; z += 1) {
                   if (inNode[z] === tmpItem.nodeId) {
                     inNode.splice(z, 1);
@@ -673,14 +710,25 @@ export default {
           init = false;
           const canvas = d3.select('#svg-canvas')._groups[0][0];
           const canvasHeight = canvas.scrollHeight;
-          const canvasWidth = canvas.scrollWidth;        
+          const canvasWidth = canvas.scrollWidth;
           const graph = d3.select('#svg-canvas g')._groups[0][0];
           const graphHeight = graph.getBBox().height;
           const graphWidth = graph.getBBox().width;
-          const index = Math.min((canvasHeight / graphHeight), (canvasWidth / graphWidth), 1);
+          const index = Math.min(canvasHeight / graphHeight, canvasWidth / graphWidth, 1);
           const scale = `scale(${index})`;
-          d3.select('#svg-canvas g').attr('transform', ` translate(${  (canvasWidth - graphWidth*index) / 2  },${  (canvasHeight - graphHeight*index) / 2  }) ${scale}`);
-          const transform = d3.zoomTransform(0).translate((canvasWidth - graphWidth*index) / 2, (canvasHeight - graphHeight*index) / 2).scale(index);
+          d3.select('#svg-canvas g').attr(
+            'transform',
+            ` translate(${(canvasWidth - graphWidth * index) / 2},${(canvasHeight -
+              graphHeight * index) /
+              2}) ${scale}`
+          );
+          const transform = d3
+            .zoomTransform(0)
+            .translate(
+              (canvasWidth - graphWidth * index) / 2,
+              (canvasHeight - graphHeight * index) / 2
+            )
+            .scale(index);
           d3.zoom().transform(svg, transform);
         }
         drawAssist('white');
@@ -690,18 +738,24 @@ export default {
         svg.call(zoom).on('dblclick.zoom', null);
         // 自动调节节点位置
         function PosAdaption(itemnode) {
-            if (itemnode) {
-              const str = d3.select('#svg-canvas g').attr('transform');
-              let [xCoor, yCoor] = str.substring(str.indexOf('(') + 1, str.indexOf(')')).split(',');
-              const { x: xCurrent, y: yCurrent } = itemnode;
-              const svgWidth = d3.select('#svg-canvas').style('width').replace('px', '');
-              const svgHeight = d3.select('#svg-canvas').style('height').replace('px', '');
-              xCoor = Number(svgWidth) / 2 - xCurrent;
-              yCoor = Number(svgHeight) / 2 - yCurrent;
-              d3.select('#svg-canvas g').attr('transform', `translate(${xCoor}, ${yCoor})`);
-              const transform = d3.zoomTransform(0).translate(xCoor, yCoor);
-              d3.zoom().transform(svg, transform);
-            }
+          if (itemnode) {
+            const str = d3.select('#svg-canvas g').attr('transform');
+            let [xCoor, yCoor] = str.substring(str.indexOf('(') + 1, str.indexOf(')')).split(',');
+            const { x: xCurrent, y: yCurrent } = itemnode;
+            const svgWidth = d3
+              .select('#svg-canvas')
+              .style('width')
+              .replace('px', '');
+            const svgHeight = d3
+              .select('#svg-canvas')
+              .style('height')
+              .replace('px', '');
+            xCoor = Number(svgWidth) / 2 - xCurrent;
+            yCoor = Number(svgHeight) / 2 - yCurrent;
+            d3.select('#svg-canvas g').attr('transform', `translate(${xCoor}, ${yCoor})`);
+            const transform = d3.zoomTransform(0).translate(xCoor, yCoor);
+            d3.zoom().transform(svg, transform);
+          }
         }
         // 确定所有节点对应颜色
         d3.selectAll('.node rect')
@@ -716,7 +770,7 @@ export default {
                 nodedata[uid] = JSON.parse(JSON.stringify(g.node(uid)));
               }
               if (g.node.sub_net && g.node.sub_net.length) {
-                const index = g.node.sub_net.findIndex(e => e.uid === uid);
+                const index = g.node.sub_net.findIndex((e) => e.uid === uid);
                 if (index !== -1) {
                   op = g.node.sub_net[index].op;
                   nodedata[uid] = JSON.parse(JSON.stringify(g.node.sub_net[index]));
@@ -738,18 +792,25 @@ export default {
           DrawDoubleNodes(g, data);
         }
         self.glitter(self.restoreNode);
-        d3.selectAll('.path').style('fill-opacity', 1).style('stroke', 'black').style('stroke-opacity', 1).attr('marker-start', 'url(#dot)');
+        d3.selectAll('.path')
+          .style('fill-opacity', 1)
+          .style('stroke', 'black')
+          .style('stroke-opacity', 1)
+          .attr('marker-start', 'url(#dot)');
         // 子节点动作：双击展开，自动调整位置，边框标红
         d3.selectAll('.node').on('dblclick', (v) => {
           if (g.node(v).sub_net.length !== 0) {
             const names = v.split('/');
             const layer = names.length;
-            const fillCurrent = d3.select(`[id="${v}"]`).select('rect').style('fill');
+            const fillCurrent = d3
+              .select(`[id="${v}"]`)
+              .select('rect')
+              .style('fill');
             expandNode.push({
-              'uid': v,
-              'layer': layer,
-              'sub_net': g.node(v).sub_net,
-              'label': g.node(v).label,
+              uid: v,
+              layer,
+              sub_net: g.node(v).sub_net,
+              label: g.node(v).label,
               fill: fillCurrent,
             });
             nodeInfo.splice(0, nodeInfo.length);
@@ -757,15 +818,22 @@ export default {
             delStageNode = [];
             draw(data, init);
             self.lastClick = '';
-            d3.select(`[id="${v}"]`).select('rect').style('stroke-width', '2.5').style('stroke', 'red').style('fill', fillCurrent).style('opacity', '0.8');
+            d3.select(`[id="${v}"]`)
+              .select('rect')
+              .style('stroke-width', '2.5')
+              .style('stroke', 'red')
+              .style('fill', fillCurrent)
+              .style('opacity', '0.8');
             setTimeout(() => {
-              d3.select(`[id="${v}"]`).select('rect').style('stroke-width', '1').style('stroke', '#696969');
+              d3.select(`[id="${v}"]`)
+                .select('rect')
+                .style('stroke-width', '1')
+                .style('stroke', '#696969');
             }, 1000);
-            let currentNode = data.find(item => item.uid === v);
+            let currentNode = data.find((item) => item.uid === v);
             if (!currentNode && expandNode && expandNode.length) {
               // eslint-disable-next-line no-labels
-              loopExpandNode:
-              for (const expand of expandNode) {
+              loopExpandNode: for (const expand of expandNode) {
                 for (const sub of expand.sub_net) {
                   if (sub.uid === v) {
                     currentNode = sub;
@@ -779,141 +847,281 @@ export default {
           }
         });
         // 父节点动作：双击缩小，自动调整位置，边框标红
-        d3.selectAll('.cluster').style('fill-opacity', '0.55').attr('font-weight', '600').on('dblclick', (v) => {
-          const indexRecord = [];
-          const names = v.split('/');
-          const namesLength = names.length;
-          for (let i = expandNode.length - 1; i >= 0; i -= 1) {
-            const {uid} = expandNode[i];
-            const uids = uid.split('/');
-            const uidLength = uids.length;
-            if (uidLength >= namesLength) {
-              if (uids.slice(0, namesLength).join('/') === v) {
-                indexRecord.push(i);
+        d3.selectAll('.cluster')
+          .style('fill-opacity', '0.55')
+          .attr('font-weight', '600')
+          .on('dblclick', (v) => {
+            const indexRecord = [];
+            const names = v.split('/');
+            const namesLength = names.length;
+            for (let i = expandNode.length - 1; i >= 0; i -= 1) {
+              const { uid } = expandNode[i];
+              const uids = uid.split('/');
+              const uidLength = uids.length;
+              if (uidLength >= namesLength) {
+                if (uids.slice(0, namesLength).join('/') === v) {
+                  indexRecord.push(i);
+                }
+              }
+              for (let j = 0; j < indexRecord.length; j += 1) {
+                expandNode.splice(indexRecord[j], 1);
               }
             }
-            for (let j = 0; j < indexRecord.length; j += 1) {
-              expandNode.splice(indexRecord[j], 1);
-            }
-          }
-          nodeInfo.splice(0, nodeInfo.length);
-          reserverStageNode = [];
-          delStageNode = [];
-          draw(data, init);
-          self.lastClick = '';
-          d3.select(`[id="${v}"]`).select('rect').style('stroke-width', '1.5').style('stroke', 'red');
-          setTimeout(() => {
-            d3.select(`[id="${v}"]`).select('rect').style('stroke-width', '1.5').style('stroke', '#696969');
-          }, 1000);
-          // 获取当前点击节点信息, 如果节点是最外层节点, 在 data 中查找, 否则在扩展节点中的 sub_net 中查找
-          let currentNode = data.find(item => item.uid === v);
-          if (!currentNode && expandNode && expandNode.length) {
-            // eslint-disable-next-line no-labels
-            loopExpandNode:
-            for (const expand of expandNode) {
-              for (const sub of expand.sub_net) {
-                if (sub.uid === v) {
-                  currentNode = sub;
-                  // eslint-disable-next-line no-labels
-                  break loopExpandNode;
+            nodeInfo.splice(0, nodeInfo.length);
+            reserverStageNode = [];
+            delStageNode = [];
+            draw(data, init);
+            self.lastClick = '';
+            d3.select(`[id="${v}"]`)
+              .select('rect')
+              .style('stroke-width', '1.5')
+              .style('stroke', 'red');
+            setTimeout(() => {
+              d3.select(`[id="${v}"]`)
+                .select('rect')
+                .style('stroke-width', '1.5')
+                .style('stroke', '#696969');
+            }, 1000);
+            // 获取当前点击节点信息, 如果节点是最外层节点, 在 data 中查找, 否则在扩展节点中的 sub_net 中查找
+            let currentNode = data.find((item) => item.uid === v);
+            if (!currentNode && expandNode && expandNode.length) {
+              // eslint-disable-next-line no-labels
+              loopExpandNode: for (const expand of expandNode) {
+                for (const sub of expand.sub_net) {
+                  if (sub.uid === v) {
+                    currentNode = sub;
+                    // eslint-disable-next-line no-labels
+                    break loopExpandNode;
+                  }
                 }
               }
             }
-          }
             PosAdaption(currentNode);
-        });
+          });
         // eslint-disable-next-line
         d3.select('#assist').select('svg').selectAll('g').on('dblclick', function() {
-          const nodeId = this.id.split('__')[1];
-          self.restoreNode = nodeId;
-          const index = tmp.findIndex(item => item.nodeId === nodeId);
-          drawAssist('white');
-          tmp.splice(index, 1);
-          getModifyClick(nodeId);
-          draw(data, init);
-          // eslint-disable-next-line
+            const nodeId = this.id.split('__')[1];
+            self.restoreNode = nodeId;
+            const index = tmp.findIndex((item) => item.nodeId === nodeId);
+            drawAssist('white');
+            tmp.splice(index, 1);
+            getModifyClick(nodeId);
+            draw(data, init);
+            // eslint-disable-next-line
         }).on('click', function() {
-          const nodeId = this.id.split('__')[1];
-          let info = getDelNodeInfo(nodeId, nodeInfo);
-          if (self.lastClick) {
-            self.restoreLastClick();
-          }
-          if (self.lastAssistClick && self.lastAssistClick !== this.id) {
-            self.restoreLastClickRight();
-          }
-          if (!info) {
-            info = { 'info': '无信息' };
-          } else {
-            const {inNode, outNode} = info;
-            for (let i = 0; i < inNode.length; i += 1) {
-              const nodeId = `#${  inNode[i].replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-              if (!d3.select(nodeId).select('rect').attr('tag')) {
-                const old = d3.select(nodeId).select('rect').style('fill');
-                d3.select(nodeId).select('rect').attr('tag', old);
-                d3.select(nodeId).select('rect').style('fill', 'blue');
-                drawCircleTag(nodeId, 'out', 1);
-              } else {
-                const old = d3.select(nodeId).select('rect').attr('tag');
-                d3.select(nodeId).select('rect').style('fill', old);
-                d3.select(nodeId).select('rect').attr('tag', null);
-                drawCircleTag(nodeId, 'out', 0);
-              }
+            const nodeId = this.id.split('__')[1];
+            let info = getDelNodeInfo(nodeId, nodeInfo);
+            if (self.lastClick) {
+              self.restoreLastClick();
             }
-            if (self.lastAssistClick === this.id) {
-              self.lastAssistClick = '';
-            } else {
-              self.lastAssistClick = this.id;
+            if (self.lastAssistClick && self.lastAssistClick !== this.id) {
+              self.restoreLastClickRight();
             }
-            for (let i = 0; i < outNode.length; i += 1) {
-              const nodeId = `#${  outNode[i].replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-              if (!d3.select(nodeId).select('rect').attr('tag')) {
-                const old = d3.select(nodeId).select('rect').style('fill');
-                d3.select(nodeId).select('rect').attr('tag', old);
-                d3.select(nodeId).select('rect').style('fill', 'red');
-                drawCircleTag(nodeId, 'in', 1);
-              } else {
-                const old = d3.select(nodeId).select('rect').attr('tag');
-                d3.select(nodeId).select('rect').style('fill', old);
-                d3.select(nodeId).select('rect').attr('tag', null);
-                drawCircleTag(nodeId, 'in', 0);
+            if (!info) {
+              info = { info: '无信息' };
+            } else {
+              const { inNode, outNode } = info;
+              for (let i = 0; i < inNode.length; i += 1) {
+                const nodeId = `#${inNode[i]
+                  .replace(/\//g, '\\/')
+                  .replace(/\(/g, '\\(')
+                  .replace(/\)/g, '\\)')}`;
+                if (
+                  !d3
+                    .select(nodeId)
+                    .select('rect')
+                    .attr('tag')
+                ) {
+                  const old = d3
+                    .select(nodeId)
+                    .select('rect')
+                    .style('fill');
+                  d3.select(nodeId)
+                    .select('rect')
+                    .attr('tag', old);
+                  d3.select(nodeId)
+                    .select('rect')
+                    .style('fill', 'blue');
+                  drawCircleTag(nodeId, 'out', 1);
+                } else {
+                  const old = d3
+                    .select(nodeId)
+                    .select('rect')
+                    .attr('tag');
+                  d3.select(nodeId)
+                    .select('rect')
+                    .style('fill', old);
+                  d3.select(nodeId)
+                    .select('rect')
+                    .attr('tag', null);
+                  drawCircleTag(nodeId, 'out', 0);
+                }
               }
-            }
-            let initInfo;
-            for (let i = 0; i < nodeInfo.length; i += 1) {
-              if (nodeInfo[i].uid === info.uid) {
-                initInfo = nodeInfo[i];
-                break;
+              if (self.lastAssistClick === this.id) {
+                self.lastAssistClick = '';
+              } else {
+                self.lastAssistClick = this.id;
               }
-            }
-            for (let i = 0; i < tmp.length; i += 1) {
-              if (initInfo.inNode.indexOf(tmp[i].nodeId) >= 0) {
-                info.inNode.push(tmp[i].nodeId);
-                const oldfill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill');
-                if (oldfill) {
-                  d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', oldfill);
-                  d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', undefined);
+              for (let i = 0; i < outNode.length; i += 1) {
+                const nodeId = `#${outNode[i]
+                  .replace(/\//g, '\\/')
+                  .replace(/\(/g, '\\(')
+                  .replace(/\)/g, '\\)')}`;
+                if (
+                  !d3
+                    .select(nodeId)
+                    .select('rect')
+                    .attr('tag')
+                ) {
+                  const old = d3
+                    .select(nodeId)
+                    .select('rect')
+                    .style('fill');
+                  d3.select(nodeId)
+                    .select('rect')
+                    .attr('tag', old);
+                  d3.select(nodeId)
+                    .select('rect')
+                    .style('fill', 'red');
+                  drawCircleTag(nodeId, 'in', 1);
                 } else {
-                  const fill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('fill');
-                  d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', 'blue');
-                  d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', fill);
+                  const old = d3
+                    .select(nodeId)
+                    .select('rect')
+                    .attr('tag');
+                  d3.select(nodeId)
+                    .select('rect')
+                    .style('fill', old);
+                  d3.select(nodeId)
+                    .select('rect')
+                    .attr('tag', null);
+                  drawCircleTag(nodeId, 'in', 0);
                 }
               }
-              if (initInfo.outNode.indexOf(tmp[i].nodeId) >= 0) {
-                info.outNode.push(tmp[i].nodeId);
-                const oldfill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill');
-                if (oldfill) {
-                  d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', oldfill);
-                  d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', undefined);
-                } else {
-                  const fill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('fill');
-                  d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', 'red');
-                  d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', fill);
+              let initInfo;
+              for (let i = 0; i < nodeInfo.length; i += 1) {
+                if (nodeInfo[i].uid === info.uid) {
+                  initInfo = nodeInfo[i];
+                  break;
+                }
+              }
+              for (let i = 0; i < tmp.length; i += 1) {
+                if (initInfo.inNode.indexOf(tmp[i].nodeId) >= 0) {
+                  info.inNode.push(tmp[i].nodeId);
+                  const oldfill = d3
+                    .select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                    .select('rect')
+                    .attr('oldfill');
+                  if (oldfill) {
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .style('fill', oldfill);
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .attr('oldfill', undefined);
+                  } else {
+                    const fill = d3
+                      .select(
+                        `#del__${tmp[i].nodeId
+                          .replace(/\//g, '\\/')
+                          .replace(/\(/g, '\\(')
+                          .replace(/\)/g, '\\)')}`
+                      )
+                      .select('rect')
+                      .attr('fill');
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .style('fill', 'blue');
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .attr('oldfill', fill);
+                  }
+                }
+                if (initInfo.outNode.indexOf(tmp[i].nodeId) >= 0) {
+                  info.outNode.push(tmp[i].nodeId);
+                  const oldfill = d3
+                    .select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                    .select('rect')
+                    .attr('oldfill');
+                  if (oldfill) {
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .style('fill', oldfill);
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .attr('oldfill', undefined);
+                  } else {
+                    const fill = d3
+                      .select(
+                        `#del__${tmp[i].nodeId
+                          .replace(/\//g, '\\/')
+                          .replace(/\(/g, '\\(')
+                          .replace(/\)/g, '\\)')}`
+                      )
+                      .select('rect')
+                      .attr('fill');
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .style('fill', 'red');
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .attr('oldfill', fill);
+                  }
                 }
               }
             }
-          }
-          getInfo(JSON.stringify(info));
-        });
+            getInfo(JSON.stringify(info));
+          });
         // 功能：为每个节点添加动画
         svg.selectAll('.node')._groups[0].forEach((nodeKey) => {
           let nodeName = nodeKey.id;
@@ -922,15 +1130,30 @@ export default {
           nodeName = nodeName.split('/');
           nodeName = nodeName[nodeName.length - 1];
           nodeName = nodeName.slice(0, nodeName.length);
-          const nodeId = nodeKey.id.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)');
+          const nodeId = nodeKey.id
+            .replace(/\//g, '\\/')
+            .replace(/\(/g, '\\(')
+            .replace(/\)/g, '\\)');
           const nodeThis = d3.select(nodeKey);
           let currName = '';
           let nodeFromID = '';
           let nodeToID = '';
           nodeThis.append('text');
           nodeThis.style('cursor', 'context-menu');
-          const width = parseInt(d3.select(`#${  nodeId}`).select('rect').style('width'),10);
-          const height = parseInt(d3.select(`#${  nodeId}`).select('rect').style('height'),10);
+          const width = parseInt(
+            d3
+              .select(`#${nodeId}`)
+              .select('rect')
+              .style('width'),
+            10
+          );
+          const height = parseInt(
+            d3
+              .select(`#${nodeId}`)
+              .select('rect')
+              .style('height'),
+            10
+          );
           if (nodes.sub_net.length > 0) {
             let isexpand = false;
             for (let i = 0; i < expandNode.length; i += 1) {
@@ -938,32 +1161,62 @@ export default {
                 isexpand = true;
               }
             }
-            const size = d3.select(`#${  nodeId}`).selectAll('text.expand').size();
+            const size = d3
+              .select(`#${nodeId}`)
+              .selectAll('text.expand')
+              .size();
             if (size <= 0) {
-              d3.select(`#${  nodeId}`).append('text').attr('class', 'expand') .attr('x', width / 2 - 15).attr('y', -height / 2 + 12).style('font-size', '14px').style('fill', 'white').attr('font-weight', 'bold');
+              d3.select(`#${nodeId}`)
+                .append('text')
+                .attr('class', 'expand')
+                .attr('x', width / 2 - 15)
+                .attr('y', -height / 2 + 12)
+                .style('font-size', '14px')
+                .style('fill', 'white')
+                .attr('font-weight', 'bold');
             }
             if (!isexpand) {
-              d3.select(`#${  nodeId}`)
+              d3.select(`#${nodeId}`)
                 .selectAll('text.expand')
                 .text('+');
             }
           }
           nodeThis.on('mouseover', () => {
-            const tag = Number(d3.select(`#${  nodeId}`).attr('flag'));
+            const tag = Number(d3.select(`#${nodeId}`).attr('flag'));
             if (tag) {
               return;
             }
             // 快速预览悬浮窗
-            d3.select(`#${  nodeId}`).attr('flag', 1);
-            const oldLength = d3.select(`#${  nodeId}`).select('.label').select('g').select('text').select('tspan')._groups[0][0].textLength.baseVal.value;
-            const newLength = d3.select(`#${  nodeId}`).select('.label').select('g').select('text').select('tspan')._groups[0][0].textLength.baseVal.value;
+            d3.select(`#${nodeId}`).attr('flag', 1);
+            const oldLength = d3
+              .select(`#${nodeId}`)
+              .select('.label')
+              .select('g')
+              .select('text')
+              .select('tspan')._groups[0][0].textLength.baseVal.value;
+            const newLength = d3
+              .select(`#${nodeId}`)
+              .select('.label')
+              .select('g')
+              .select('text')
+              .select('tspan')._groups[0][0].textLength.baseVal.value;
             const gap = (newLength - oldLength) / 2;
-            const nodeTransform = d3.select(`#${  nodeId}`).attr('transform');
-            const messageBox = d3.select('.nodes').append('g').attr('id', 'messageBox').attr('transform', nodeTransform);
+            const nodeTransform = d3.select(`#${nodeId}`).attr('transform');
+            const messageBox = d3
+              .select('.nodes')
+              .append('g')
+              .attr('id', 'messageBox')
+              .attr('transform', nodeTransform);
             const boxComponent = messageBox.append('g').attr('id', 'boxComponent');
-            const nodeWidth = d3.select(`#${  nodeId}`).attr('width');
-            const nodeHeight = d3.select(`#${  nodeId}`).attr('height');
-            const nodeheight = parseInt(d3.select(`#${  nodeId}`).select('rect').style('height'),10);
+            const nodeWidth = d3.select(`#${nodeId}`).attr('width');
+            const nodeHeight = d3.select(`#${nodeId}`).attr('height');
+            const nodeheight = parseInt(
+              d3
+                .select(`#${nodeId}`)
+                .select('rect')
+                .style('height'),
+              10
+            );
             let obj;
             for (let i = 0; i < nodeInfo.length; i += 1) {
               if (nodeInfo[i].uid === nodeKey.id) {
@@ -978,19 +1231,28 @@ export default {
             if (obj.op) {
               info['NODE PROPERTIES'].op = obj.op;
             }
-            const TEXT = boxComponent.append('text').attr('font-size', '14px').attr('fill', 'white');
+            const TEXT = boxComponent
+              .append('text')
+              .attr('font-size', '14px')
+              .attr('fill', 'white');
             let count = 0;
             let maxLength = 0;
             let Count = 0;
             for (const i in info) {
-              const length = TEXT.append('tspan').attr('x', '0').attr('y', count * 14 + Count * 10).text(i)._groups[0][0].textLength.baseVal.value;
+              const length = TEXT.append('tspan')
+                .attr('x', '0')
+                .attr('y', count * 14 + Count * 10)
+                .text(i)._groups[0][0].textLength.baseVal.value;
               if (length > maxLength) {
                 maxLength = length;
               }
               count += 1;
               for (const j in info[i]) {
-                const message = `● ${  j  }:${  info[i][j]}`;
-                const length = TEXT.append('tspan').attr('x', '0').attr('y', count * 20 + Count * 10).text(message)._groups[0][0].textLength.baseVal.value;
+                const message = `● ${j}:${info[i][j]}`;
+                const length = TEXT.append('tspan')
+                  .attr('x', '0')
+                  .attr('y', count * 20 + Count * 10)
+                  .text(message)._groups[0][0].textLength.baseVal.value;
                 if (length > maxLength) {
                   maxLength = length;
                 }
@@ -998,57 +1260,132 @@ export default {
               }
               Count += 1;
             }
-            boxComponent.insert('rect', 'text').attr('height', count * 20 + 15 + Count * 10)
-              .attr('width', maxLength + 50).attr('fill', 'white')
-              .attr('transform', 'translate(-25,-24)').attr('rx', 3)
-              .attr('ry', 3).attr('fill', '#004986').style('opacity', '0.40');
+            boxComponent
+              .insert('rect', 'text')
+              .attr('height', count * 20 + 15 + Count * 10)
+              .attr('width', maxLength + 50)
+              .attr('fill', 'white')
+              .attr('transform', 'translate(-25,-24)')
+              .attr('rx', 3)
+              .attr('ry', 3)
+              .attr('fill', '#004986')
+              .style('opacity', '0.40');
             const boxComponentX = nodeWidth / 2;
             let boxComponentY = -nodeHeight / 2 - (count * 14 + 20 + Count * 10) - 15;
             if (nodeheight === 70) {
               boxComponentY = -nodeHeight / 2 - (count * 14 + 20 + Count * 10) - 30;
             }
-            boxComponent.attr('transform', `translate(${  boxComponentX  },${  boxComponentY  })`);
-            d3.select(`#${  nodeId}`).select('.label').select('g').select('text').attr('transform', `translate(${  -gap  },0)`);
-            if (d3.select(`#${  nodeId}`).select('rect').style('fill') === 'rgb(102, 102, 102)') {
-              d3.select(`#${  nodeId}`).select('rect').style('fill', 'rgb(102, 102, 102)');
-            } else { 
-              d3.select(`#${  nodeId}`).select('rect').style('opacity', '1');
+            boxComponent.attr('transform', `translate(${boxComponentX},${boxComponentY})`);
+            d3.select(`#${nodeId}`)
+              .select('.label')
+              .select('g')
+              .select('text')
+              .attr('transform', `translate(${-gap},0)`);
+            if (
+              d3
+                .select(`#${nodeId}`)
+                .select('rect')
+                .style('fill') === 'rgb(102, 102, 102)'
+            ) {
+              d3.select(`#${nodeId}`)
+                .select('rect')
+                .style('fill', 'rgb(102, 102, 102)');
+            } else {
+              d3.select(`#${nodeId}`)
+                .select('rect')
+                .style('opacity', '1');
             }
-            if (d3.select(`#${  nodeId}`).select('rect').style('stroke') === 'red') {
-              d3.select(`#${  nodeId}`).select('rect').style('stroke-width', '2.5').style('stroke', 'red');
+            if (
+              d3
+                .select(`#${nodeId}`)
+                .select('rect')
+                .style('stroke') === 'red'
+            ) {
+              d3.select(`#${nodeId}`)
+                .select('rect')
+                .style('stroke-width', '2.5')
+                .style('stroke', 'red');
             } else {
-              d3.select(`#${  nodeId}`).select('rect').style('stroke-width', '2.5').style('stroke', '#e4007f');
+              d3.select(`#${nodeId}`)
+                .select('rect')
+                .style('stroke-width', '2.5')
+                .style('stroke', '#e4007f');
             }
           });
           nodeThis.on('mouseleave', () => {
             if (nodeName.length > 12) {
-              currName = `${nodeName.slice(0, 12)  }...`;
+              currName = `${nodeName.slice(0, 12)}...`;
             } else {
               currName = nodeName;
             }
-            d3.select(`#${  nodeId}`).attr('flag', 0);
-            d3.select(`#${  nodeId}`).select('.label').select('g').select('text').select('tspan').text(currName);
-            d3.select(`#${  nodeId}`).select('.label').select('g').select('text').attr('transform', 'translate(0,0)');
+            d3.select(`#${nodeId}`).attr('flag', 0);
+            d3.select(`#${nodeId}`)
+              .select('.label')
+              .select('g')
+              .select('text')
+              .select('tspan')
+              .text(currName);
+            d3.select(`#${nodeId}`)
+              .select('.label')
+              .select('g')
+              .select('text')
+              .attr('transform', 'translate(0,0)');
             d3.select('#messageBox').remove();
-            if (d3.select(`#${  nodeId}`).select('rect').style('fill') === 'rgb(102, 102, 102)') {
-              d3.select(`#${  nodeId}`).select('rect').style('fill', 'rgb(102, 102, 102)');
-            } else if (d3.select(`#${  nodeId}`).select('rect').style('fill') === 'blue') {
-              d3.select(`#${  nodeId}`).select('rect').style('fill', 'blue');
-            } else if (d3.select(`#${  nodeId}`).select('rect').style('fill') === 'red') {
-              d3.select(`#${  nodeId}`).select('rect').style('fill', 'red');
+            if (
+              d3
+                .select(`#${nodeId}`)
+                .select('rect')
+                .style('fill') === 'rgb(102, 102, 102)'
+            ) {
+              d3.select(`#${nodeId}`)
+                .select('rect')
+                .style('fill', 'rgb(102, 102, 102)');
+            } else if (
+              d3
+                .select(`#${nodeId}`)
+                .select('rect')
+                .style('fill') === 'blue'
+            ) {
+              d3.select(`#${nodeId}`)
+                .select('rect')
+                .style('fill', 'blue');
+            } else if (
+              d3
+                .select(`#${nodeId}`)
+                .select('rect')
+                .style('fill') === 'red'
+            ) {
+              d3.select(`#${nodeId}`)
+                .select('rect')
+                .style('fill', 'red');
             } else {
-              d3.select(`#${  nodeId}`).select('rect').style('fill', GetColorByNode(g, nodes));
+              d3.select(`#${nodeId}`)
+                .select('rect')
+                .style('fill', GetColorByNode(g, nodes));
               // 1:卷积层,2:全连接层，3：池化层，4：归一化
-              const nodeColor = {1:"#e8c5df",2:"#b7d4ae",3:"#d7dafb",4:"#daf4cc"};
-              const nodeType = IsSpecialNode(nodes)||IsDoubleNode(nodes);
+              const nodeColor = { 1: '#e8c5df', 2: '#b7d4ae', 3: '#d7dafb', 4: '#daf4cc' };
+              const nodeType = IsSpecialNode(nodes) || IsDoubleNode(nodes);
               if (nodeType in nodeColor) {
-                d3.select(`#${  nodeId}`).select('rect').style('fill', nodeColor[nodeType]);
+                d3.select(`#${nodeId}`)
+                  .select('rect')
+                  .style('fill', nodeColor[nodeType]);
               }
             }
-            if ((d3.select(`#${  nodeId}`).select('rect').style('stroke')) === 'red') {
-              d3.select(`#${  nodeId}`).select('rect').style('stroke-width', '1').style('stroke', 'red');
+            if (
+              d3
+                .select(`#${nodeId}`)
+                .select('rect')
+                .style('stroke') === 'red'
+            ) {
+              d3.select(`#${nodeId}`)
+                .select('rect')
+                .style('stroke-width', '1')
+                .style('stroke', 'red');
             } else {
-              d3.select(`#${  nodeId}`).select('rect').style('stroke-width', '1').style('stroke', '#696969');
+              d3.select(`#${nodeId}`)
+                .select('rect')
+                .style('stroke-width', '1')
+                .style('stroke', '#696969');
             }
           });
           nodeThis.on('click', () => {
@@ -1064,7 +1401,7 @@ export default {
               self.lastClick = nodeKey.id;
               g.node(nodeKey.id).clicked = true;
               edges.forEach((v) => {
-                const edgeID = `${v.v  }__${  v.w}`;
+                const edgeID = `${v.v}__${v.w}`;
                 const edgeGroup = Array.from(d3.selectAll('.edgePath')._groups[0]);
                 const edgeLabelGroup = d3.selectAll('.edgeLabel')._groups[0];
                 let index;
@@ -1074,15 +1411,41 @@ export default {
                     break;
                   }
                 }
-                const dEdgeID = (`#${  edgeID}`).replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)');
-                d3.select(dEdgeID).select('.path').style('stroke', 'red').style('stroke-width', '1.5');
-                d3.select(edgeLabelGroup[index]).select('g').select('text').attr('fill', 'red');
-                nodeFromID = `#${  v.v.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-                nodeToID = `#${  v.w.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-                d3.select(nodeFromID).select('rect').style('stroke', 'red');
-                d3.select(nodeToID).select('rect').style('stroke', 'red');
+                const dEdgeID = `#${edgeID}`
+                  .replace(/\//g, '\\/')
+                  .replace(/\(/g, '\\(')
+                  .replace(/\)/g, '\\)');
+                d3.select(dEdgeID)
+                  .select('.path')
+                  .style('stroke', 'red')
+                  .style('stroke-width', '1.5');
+                d3.select(edgeLabelGroup[index])
+                  .select('g')
+                  .select('text')
+                  .attr('fill', 'red');
+                nodeFromID = `#${v.v
+                  .replace(/\//g, '\\/')
+                  .replace(/\(/g, '\\(')
+                  .replace(/\)/g, '\\)')}`;
+                nodeToID = `#${v.w
+                  .replace(/\//g, '\\/')
+                  .replace(/\(/g, '\\(')
+                  .replace(/\)/g, '\\)')}`;
+                d3.select(nodeFromID)
+                  .select('rect')
+                  .style('stroke', 'red');
+                d3.select(nodeToID)
+                  .select('rect')
+                  .style('stroke', 'red');
               });
-              d3.select((`#${  nodeKey.id}`).replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')).select('rect').style('stroke', 'red');
+              d3.select(
+                `#${nodeKey.id}`
+                  .replace(/\//g, '\\/')
+                  .replace(/\(/g, '\\(')
+                  .replace(/\)/g, '\\)')
+              )
+                .select('rect')
+                .style('stroke', 'red');
               let info;
               if (reserverStageNode.length) {
                 const cur = reserverStageNode[reserverStageNode.length - 1];
@@ -1104,26 +1467,114 @@ export default {
               for (let i = 0; i < tmp.length; i += 1) {
                 if (initInfo.inNode.indexOf(tmp[i].nodeId) >= 0) {
                   info.inNode.push(tmp[i].nodeId);
-                  const oldfill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill');
+                  const oldfill = d3
+                    .select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                    .select('rect')
+                    .attr('oldfill');
                   if (oldfill) {
-                    d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', oldfill);
-                    d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', undefined);
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .style('fill', oldfill);
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .attr('oldfill', undefined);
                   } else {
-                    const fill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('fill');
-                    d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', 'blue');
-                    d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', fill);
+                    const fill = d3
+                      .select(
+                        `#del__${tmp[i].nodeId
+                          .replace(/\//g, '\\/')
+                          .replace(/\(/g, '\\(')
+                          .replace(/\)/g, '\\)')}`
+                      )
+                      .select('rect')
+                      .attr('fill');
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .style('fill', 'blue');
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .attr('oldfill', fill);
                   }
                 }
                 if (initInfo.outNode.indexOf(tmp[i].nodeId) >= 0) {
                   info.outNode.push(tmp[i].nodeId);
-                  const oldfill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill');
+                  const oldfill = d3
+                    .select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                    .select('rect')
+                    .attr('oldfill');
                   if (oldfill) {
-                    d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', oldfill);
-                    d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', undefined);
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .style('fill', oldfill);
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .attr('oldfill', undefined);
                   } else {
-                    const fill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('fill');
-                    d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', 'red');
-                    d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', fill);
+                    const fill = d3
+                      .select(
+                        `#del__${tmp[i].nodeId
+                          .replace(/\//g, '\\/')
+                          .replace(/\(/g, '\\(')
+                          .replace(/\)/g, '\\)')}`
+                      )
+                      .select('rect')
+                      .attr('fill');
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .style('fill', 'red');
+                    d3.select(
+                      `#del__${tmp[i].nodeId
+                        .replace(/\//g, '\\/')
+                        .replace(/\(/g, '\\(')
+                        .replace(/\)/g, '\\)')}`
+                    )
+                      .select('rect')
+                      .attr('oldfill', fill);
                   }
                 }
               }
@@ -1135,14 +1586,33 @@ export default {
           });
         });
         svg.selectAll('.cluster')._groups[0].forEach((nodeKey) => {
-          const nodeId = nodeKey.id.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)');
+          const nodeId = nodeKey.id
+            .replace(/\//g, '\\/')
+            .replace(/\(/g, '\\(')
+            .replace(/\)/g, '\\)');
           const nodeThis = d3.select(nodeKey);
           nodeThis.append('text');
-          const width = parseInt(d3.select(`#${  nodeId}`).select('rect').style('width'),10);
-          const height = parseInt(d3.select(`#${  nodeId}`).select('rect').style('height'),10);
-          const size = d3.select(`#${  nodeId}`).selectAll('text.expand').size();
+          const width = parseInt(
+            d3
+              .select(`#${nodeId}`)
+              .select('rect')
+              .style('width'),
+            10
+          );
+          const height = parseInt(
+            d3
+              .select(`#${nodeId}`)
+              .select('rect')
+              .style('height'),
+            10
+          );
+          const size = d3
+            .select(`#${nodeId}`)
+            .selectAll('text.expand')
+            .size();
           if (size <= 0) {
-            d3.select(`#${  nodeId}`).append('text')
+            d3.select(`#${nodeId}`)
+              .append('text')
               .attr('class', 'expand')
               .attr('x', width / 2 - 35)
               .attr('y', -height / 2 + 30)
@@ -1150,121 +1620,163 @@ export default {
               .style('font-size', '50px')
               .style('fill', 'white');
           }
-          d3.select(`#${  nodeId}`).selectAll('text.expand').text('-');
+          d3.select(`#${nodeId}`)
+            .selectAll('text.expand')
+            .text('-');
         });
         // 为控制边添加虚线
         g.edges().forEach((v) => {
-          const edgeID = `${v.v  }__${  v.w}`;
-          const dEdgeID = `#${  edgeID.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
+          const edgeID = `${v.v}__${v.w}`;
+          const dEdgeID = `#${edgeID
+            .replace(/\//g, '\\/')
+            .replace(/\(/g, '\\(')
+            .replace(/\)/g, '\\)')}`;
           if (isDashed[edgeID] === 'true') {
-            d3.select(dEdgeID).select('.path').style('stroke-dasharray', '5,3');
+            d3.select(dEdgeID)
+              .select('.path')
+              .style('stroke-dasharray', '5,3');
           }
           if (Number(isLines[edgeID]) > 1) {
-            d3.select(dEdgeID).select('.path').style('stroke-width', '2');
+            d3.select(dEdgeID)
+              .select('.path')
+              .style('stroke-width', '2');
           }
         });
-          $("#draw").contextMenu({
-            selector: '.node',
-            items: {
-              'invisible': {
-                name: '隐藏相关边',
-                icon: 'edit',
-                callback() {
-                  const nodeId = this[0].id;
-                  const edges = self.curg.nodeEdges(nodeId);
-                  const oldfill = d3.select(`[id='${  nodeId  }']`).select('rect').style('fill');
-                  if (d3.select(`[id='${  nodeId  }']`).select('rect').attr('oldfill')) {
-                    return;
-                  }
-                  d3.select(`[id='${  nodeId  }']`).select('rect').attr('oldfill', oldfill);
-                  d3.select(`[id='${  nodeId  }']`).select('rect').style('fill', 'rgb(102, 102, 102)');
-                  const edgeGroup = Array.from(d3.selectAll('.edgePath')._groups[0]);
-                  const edgeLabelGroup = d3.selectAll('.edgeLabel')._groups[0];
-                  edges.forEach((v) => {
-                    const edgeId = `#${  (`${v.v  }__${  v.w}`).replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-                    d3.select(edgeId).select('.path').style('stroke', 'black').style('visibility', 'hidden');
-                    const edgeDom = document.getElementById(`${v.v  }__${  v.w}`);
-                    const index = edgeGroup.indexOf(edgeDom);
-                    edgeLabelGroup[index].attributes.style.value = 'opacity: 1;visibility:hidden';
-                  });
-                },
+        $('#draw').contextMenu({
+          selector: '.node',
+          items: {
+            invisible: {
+              name: '隐藏相关边',
+              icon: 'edit',
+              callback() {
+                const nodeId = this[0].id;
+                const edges = self.curg.nodeEdges(nodeId);
+                const oldfill = d3
+                  .select(`[id='${nodeId}']`)
+                  .select('rect')
+                  .style('fill');
+                if (
+                  d3
+                    .select(`[id='${nodeId}']`)
+                    .select('rect')
+                    .attr('oldfill')
+                ) {
+                  return;
+                }
+                d3.select(`[id='${nodeId}']`)
+                  .select('rect')
+                  .attr('oldfill', oldfill);
+                d3.select(`[id='${nodeId}']`)
+                  .select('rect')
+                  .style('fill', 'rgb(102, 102, 102)');
+                const edgeGroup = Array.from(d3.selectAll('.edgePath')._groups[0]);
+                const edgeLabelGroup = d3.selectAll('.edgeLabel')._groups[0];
+                edges.forEach((v) => {
+                  const edgeId = `#${`${v.v}__${v.w}`
+                    .replace(/\//g, '\\/')
+                    .replace(/\(/g, '\\(')
+                    .replace(/\)/g, '\\)')}`;
+                  d3.select(edgeId)
+                    .select('.path')
+                    .style('stroke', 'black')
+                    .style('visibility', 'hidden');
+                  const edgeDom = document.getElementById(`${v.v}__${v.w}`);
+                  const index = edgeGroup.indexOf(edgeDom);
+                  edgeLabelGroup[index].attributes.style.value = 'opacity: 1;visibility:hidden';
+                });
               },
-              'visible': {
-                name: '显示相关边',
-                icon: 'cut',
-                callback() {
-                  const nodeId = this[0].id;
-                  const edges = self.curg.nodeEdges(nodeId);
-                  const oldfill = d3.select(`[id='${  nodeId  }']`).select('rect').attr('oldfill');
-                  if (!oldfill) {
-                    return;
-                  }
-                  d3.select(`[id='${  nodeId  }']`).select('rect').attr('oldfill', null);
-                  d3.select(`[id='${  nodeId  }']`).select('rect').style('fill', oldfill);
-                  const edgeGroup = Array.from(d3.selectAll('.edgePath')._groups[0]);
-                  const edgeLabelGroup = d3.selectAll('.edgeLabel')._groups[0];
-                  edges.forEach((v) => {
-                    const edgeId = `#${  (`${v.v  }__${  v.w}`).replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-                    d3.select(edgeId).select('.path').style('visibility', 'visible');
-                    const edgeDom = document.getElementById(`${v.v  }__${  v.w}`);
-                    const index = edgeGroup.indexOf(edgeDom);
-                    edgeLabelGroup[index].attributes.style.value = 'opacity: 1;visibility:visible';
-                  });
-                },
+            },
+            visible: {
+              name: '显示相关边',
+              icon: 'cut',
+              callback() {
+                const nodeId = this[0].id;
+                const edges = self.curg.nodeEdges(nodeId);
+                const oldfill = d3
+                  .select(`[id='${nodeId}']`)
+                  .select('rect')
+                  .attr('oldfill');
+                if (!oldfill) {
+                  return;
+                }
+                d3.select(`[id='${nodeId}']`)
+                  .select('rect')
+                  .attr('oldfill', null);
+                d3.select(`[id='${nodeId}']`)
+                  .select('rect')
+                  .style('fill', oldfill);
+                const edgeGroup = Array.from(d3.selectAll('.edgePath')._groups[0]);
+                const edgeLabelGroup = d3.selectAll('.edgeLabel')._groups[0];
+                edges.forEach((v) => {
+                  const edgeId = `#${`${v.v}__${v.w}`
+                    .replace(/\//g, '\\/')
+                    .replace(/\(/g, '\\(')
+                    .replace(/\)/g, '\\)')}`;
+                  d3.select(edgeId)
+                    .select('.path')
+                    .style('visibility', 'visible');
+                  const edgeDom = document.getElementById(`${v.v}__${v.w}`);
+                  const index = edgeGroup.indexOf(edgeDom);
+                  edgeLabelGroup[index].attributes.style.value = 'opacity: 1;visibility:visible';
+                });
               },
-              'delete': {
-                name: '隐藏节点',
-                icon: 'delete',
-                callback() {
-                  const {nodeInfo} = self;
-                  // eslint-disable-next-line no-unused-vars
-                  const g = self.curg;
-                  // eslint-disable-next-line no-unused-vars
-                  let delNode = [];
-                  for (let i = 0; i < nodeInfo.length; i += 1) {
-                    if (nodeInfo[i].uid === this[0].id) {
-                      delNode = nodeInfo[i];
-                    }
-                  }
-                  const nodeId = this[0].id;
-                  const reserverStageNode = self.reserve;
-                  if (self.lastClick) {
-                    self.restoreLastClick();
-                  }
-                  if (self.lastAssistClick) {
-                    self.restoreLastClickRight();
+            },
+            delete: {
+              name: '隐藏节点',
+              icon: 'delete',
+              callback() {
+                const { nodeInfo } = self;
+                // eslint-disable-next-line no-unused-vars
+                const g = self.curg;
+                // eslint-disable-next-line no-unused-vars
+                let delNode = [];
+                for (let i = 0; i < nodeInfo.length; i += 1) {
+                  if (nodeInfo[i].uid === this[0].id) {
+                    delNode = nodeInfo[i];
                   }
-                  self.lastClick = '';
-                  self.lastAssistClick = '';
-                  const oldfill = d3.select(`[id='${  nodeId  }']`).select('rect').style('fill');
-                  for (let i = 0; i < reserverStageNode.length; i += 1) {
-                    const curNodeInfo = reserverStageNode[i].nodeInfo;
-                    for (let j = curNodeInfo.length - 1; j >= 0; j -= 1) {
-                      if (curNodeInfo[j].uid === nodeId) {
-                        curNodeInfo.splice(j, 1);
-                      } else {
-                        const {inNode,outNode} = curNodeInfo[j];
-                        for (let k = 0; k < inNode.length; k += 1) {
-                          if (inNode[k] === nodeId) {
-                            inNode.splice(k, 1);
-                            break;
-                          }
+                }
+                const nodeId = this[0].id;
+                const reserverStageNode = self.reserve;
+                if (self.lastClick) {
+                  self.restoreLastClick();
+                }
+                if (self.lastAssistClick) {
+                  self.restoreLastClickRight();
+                }
+                self.lastClick = '';
+                self.lastAssistClick = '';
+                const oldfill = d3
+                  .select(`[id='${nodeId}']`)
+                  .select('rect')
+                  .style('fill');
+                for (let i = 0; i < reserverStageNode.length; i += 1) {
+                  const curNodeInfo = reserverStageNode[i].nodeInfo;
+                  for (let j = curNodeInfo.length - 1; j >= 0; j -= 1) {
+                    if (curNodeInfo[j].uid === nodeId) {
+                      curNodeInfo.splice(j, 1);
+                    } else {
+                      const { inNode, outNode } = curNodeInfo[j];
+                      for (let k = 0; k < inNode.length; k += 1) {
+                        if (inNode[k] === nodeId) {
+                          inNode.splice(k, 1);
+                          break;
                         }
-                        for (let k = 0; k < outNode.length; k += 1) {
-                          if (outNode[k] === nodeId) {
-                            outNode.splice(k, 1);
-                            break;
-                          }
+                      }
+                      for (let k = 0; k < outNode.length; k += 1) {
+                        if (outNode[k] === nodeId) {
+                          outNode.splice(k, 1);
+                          break;
                         }
                       }
                     }
                   }
-                  tmp.push({ nodeId, color: oldfill });
-                  drawAssist(oldfill);
-                  // eslint-disable-next-line
+                }
+                tmp.push({ nodeId, color: oldfill });
+                drawAssist(oldfill);
+                // eslint-disable-next-line
                   d3.select('#assist').select('svg').selectAll('g').on('dblclick', function() {
                     const nodeId = this.id.split('__')[1];
-                    const index = tmp.findIndex(item => item.nodeId === nodeId);
+                    const index = tmp.findIndex((item) => item.nodeId === nodeId);
                     self.restoreNode = nodeId;
                     tmp.splice(index, 1);
                     drawAssist(oldfill);
@@ -1287,34 +1799,78 @@ export default {
                     }
                     let info = getDelNodeInfo(nodeId, nodeInfo);
                     if (!info) {
-                      info = { 'info': '无信息' };
+                      info = { info: '无信息' };
                     } else {
-                      const {inNode,outNode} = info;
+                      const { inNode, outNode } = info;
                       for (let i = 0; i < inNode.length; i += 1) {
-                        const nodeId = `#${  inNode[i].replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-                        if (!d3.select(nodeId).select('rect').attr('tag')) {
-                          const old = d3.select(nodeId).select('rect').style('fill');
-                          d3.select(nodeId).select('rect').attr('tag', old);
-                          d3.select(nodeId).select('rect').style('fill', 'blue');
+                        const nodeId = `#${inNode[i]
+                          .replace(/\//g, '\\/')
+                          .replace(/\(/g, '\\(')
+                          .replace(/\)/g, '\\)')}`;
+                        if (
+                          !d3
+                            .select(nodeId)
+                            .select('rect')
+                            .attr('tag')
+                        ) {
+                          const old = d3
+                            .select(nodeId)
+                            .select('rect')
+                            .style('fill');
+                          d3.select(nodeId)
+                            .select('rect')
+                            .attr('tag', old);
+                          d3.select(nodeId)
+                            .select('rect')
+                            .style('fill', 'blue');
                           drawCircleTag(nodeId, 'out', 1);
                         } else {
-                          const old = d3.select(nodeId).select('rect').attr('tag');
-                          d3.select(nodeId).select('rect').style('fill', old);
-                          d3.select(nodeId).select('rect').attr('tag', null);
+                          const old = d3
+                            .select(nodeId)
+                            .select('rect')
+                            .attr('tag');
+                          d3.select(nodeId)
+                            .select('rect')
+                            .style('fill', old);
+                          d3.select(nodeId)
+                            .select('rect')
+                            .attr('tag', null);
                           drawCircleTag(nodeId, 'out', 0);
                         }
                       }
                       for (let i = 0; i < outNode.length; i += 1) {
-                        const nodeId = `#${  outNode[i].replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-                        if (!d3.select(nodeId).select('rect').attr('tag')) {
-                          const old = d3.select(nodeId).select('rect').style('fill');
-                          d3.select(nodeId).select('rect').attr('tag', old);
-                          d3.select(nodeId).select('rect').style('fill', 'red');
+                        const nodeId = `#${outNode[i]
+                          .replace(/\//g, '\\/')
+                          .replace(/\(/g, '\\(')
+                          .replace(/\)/g, '\\)')}`;
+                        if (
+                          !d3
+                            .select(nodeId)
+                            .select('rect')
+                            .attr('tag')
+                        ) {
+                          const old = d3
+                            .select(nodeId)
+                            .select('rect')
+                            .style('fill');
+                          d3.select(nodeId)
+                            .select('rect')
+                            .attr('tag', old);
+                          d3.select(nodeId)
+                            .select('rect')
+                            .style('fill', 'red');
                           drawCircleTag(nodeId, 'in', 1);
                         } else {
-                          const old = d3.select(nodeId).select('rect').attr('tag');
-                          d3.select(nodeId).select('rect').style('fill', old);
-                          d3.select(nodeId).select('rect').attr('tag', null);
+                          const old = d3
+                            .select(nodeId)
+                            .select('rect')
+                            .attr('tag');
+                          d3.select(nodeId)
+                            .select('rect')
+                            .style('fill', old);
+                          d3.select(nodeId)
+                            .select('rect')
+                            .attr('tag', null);
                           drawCircleTag(nodeId, 'in', 0);
                         }
                       }
@@ -1328,52 +1884,145 @@ export default {
                       for (let i = 0; i < tmp.length; i += 1) {
                         if (initInfo.inNode.indexOf(tmp[i].nodeId) >= 0) {
                           info.inNode.push(tmp[i].nodeId);
-                          const oldfill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill');
+                          const oldfill = d3
+                            .select(
+                              `#del__${tmp[i].nodeId
+                                .replace(/\//g, '\\/')
+                                .replace(/\(/g, '\\(')
+                                .replace(/\)/g, '\\)')}`
+                            )
+                            .select('rect')
+                            .attr('oldfill');
                           if (oldfill) {
-                            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', oldfill);
-                            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', undefined);
+                            d3.select(
+                              `#del__${tmp[i].nodeId
+                                .replace(/\//g, '\\/')
+                                .replace(/\(/g, '\\(')
+                                .replace(/\)/g, '\\)')}`
+                            )
+                              .select('rect')
+                              .style('fill', oldfill);
+                            d3.select(
+                              `#del__${tmp[i].nodeId
+                                .replace(/\//g, '\\/')
+                                .replace(/\(/g, '\\(')
+                                .replace(/\)/g, '\\)')}`
+                            )
+                              .select('rect')
+                              .attr('oldfill', undefined);
                           } else {
-                            const fill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('fill');
-                            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', 'blue');
-                            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', fill);
+                            const fill = d3
+                              .select(
+                                `#del__${tmp[i].nodeId
+                                  .replace(/\//g, '\\/')
+                                  .replace(/\(/g, '\\(')
+                                  .replace(/\)/g, '\\)')}`
+                              )
+                              .select('rect')
+                              .attr('fill');
+                            d3.select(
+                              `#del__${tmp[i].nodeId
+                                .replace(/\//g, '\\/')
+                                .replace(/\(/g, '\\(')
+                                .replace(/\)/g, '\\)')}`
+                            )
+                              .select('rect')
+                              .style('fill', 'blue');
+                            d3.select(
+                              `#del__${tmp[i].nodeId
+                                .replace(/\//g, '\\/')
+                                .replace(/\(/g, '\\(')
+                                .replace(/\)/g, '\\)')}`
+                            )
+                              .select('rect')
+                              .attr('oldfill', fill);
                           }
                         }
                         if (initInfo.outNode.indexOf(tmp[i].nodeId) >= 0) {
                           info.outNode.push(tmp[i].nodeId);
-                          const oldfill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill');
+                          const oldfill = d3
+                            .select(
+                              `#del__${tmp[i].nodeId
+                                .replace(/\//g, '\\/')
+                                .replace(/\(/g, '\\(')
+                                .replace(/\)/g, '\\)')}`
+                            )
+                            .select('rect')
+                            .attr('oldfill');
                           if (oldfill) {
-                            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', oldfill);
-                            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', undefined);
+                            d3.select(
+                              `#del__${tmp[i].nodeId
+                                .replace(/\//g, '\\/')
+                                .replace(/\(/g, '\\(')
+                                .replace(/\)/g, '\\)')}`
+                            )
+                              .select('rect')
+                              .style('fill', oldfill);
+                            d3.select(
+                              `#del__${tmp[i].nodeId
+                                .replace(/\//g, '\\/')
+                                .replace(/\(/g, '\\(')
+                                .replace(/\)/g, '\\)')}`
+                            )
+                              .select('rect')
+                              .attr('oldfill', undefined);
                           } else {
-                            const fill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('fill');
-                            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', 'red');
-                            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', fill);
+                            const fill = d3
+                              .select(
+                                `#del__${tmp[i].nodeId
+                                  .replace(/\//g, '\\/')
+                                  .replace(/\(/g, '\\(')
+                                  .replace(/\)/g, '\\)')}`
+                              )
+                              .select('rect')
+                              .attr('fill');
+                            d3.select(
+                              `#del__${tmp[i].nodeId
+                                .replace(/\//g, '\\/')
+                                .replace(/\(/g, '\\(')
+                                .replace(/\)/g, '\\)')}`
+                            )
+                              .select('rect')
+                              .style('fill', 'red');
+                            d3.select(
+                              `#del__${tmp[i].nodeId
+                                .replace(/\//g, '\\/')
+                                .replace(/\(/g, '\\(')
+                                .replace(/\)/g, '\\)')}`
+                            )
+                              .select('rect')
+                              .attr('oldfill', fill);
                           }
                         }
                       }
                     }
                     getInfo(JSON.stringify(info));
                   });
-                  const edges = d3.selectAll('.edgePath')._groups[0];
-                  const edgeLabel = d3.selectAll('.edgeLabel')._groups[0];
-                  for (let i = 0; i < edges.length; i += 1) {
-                    const v2w = edges[i].id.split('__');
-                    if (v2w[0] === nodeId) {
-                      edgeLabel[i].getElementsByTagName('g')[0].style.opacity = '0';
-                      edges[i].children[0].style = 'opacity: 1;visibility:hidden';
-                    }
-                    if (v2w[1] === nodeId) {
-                      edgeLabel[i].getElementsByTagName('g')[0].style.opacity = '0';
-                      edges[i].children[0].style = 'opacity: 1;visibility:hidden';
-                    }
+                const edges = d3.selectAll('.edgePath')._groups[0];
+                const edgeLabel = d3.selectAll('.edgeLabel')._groups[0];
+                for (let i = 0; i < edges.length; i += 1) {
+                  const v2w = edges[i].id.split('__');
+                  if (v2w[0] === nodeId) {
+                    edgeLabel[i].getElementsByTagName('g')[0].style.opacity = '0';
+                    edges[i].children[0].style = 'opacity: 1;visibility:hidden';
+                  }
+                  if (v2w[1] === nodeId) {
+                    edgeLabel[i].getElementsByTagName('g')[0].style.opacity = '0';
+                    edges[i].children[0].style = 'opacity: 1;visibility:hidden';
                   }
-                  d3.select(`#${  nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).style('visibility', 'hidden');
-                  changeTag = 1;
-                  self.curg.removeNode(nodeId);
-                },
+                }
+                d3.select(
+                  `#${nodeId
+                    .replace(/\//g, '\\/')
+                    .replace(/\(/g, '\\(')
+                    .replace(/\)/g, '\\)')}`
+                ).style('visibility', 'hidden');
+                changeTag = 1;
+                self.curg.removeNode(nodeId);
               },
             },
-          });
+          },
+        });
       };
       const init = true;
       draw(data, init);
@@ -1391,8 +2040,8 @@ export default {
         return subset;
       }
       const reserverStageNode = this.reserve;
-      const {nodeInfo} = this;
-      const {length} = nodeInfo;
+      const { nodeInfo } = this;
+      const { length } = nodeInfo;
       let node;
       for (let i = 0; i < length; i += 1) {
         if (nodeInfo[i].uid === nodeID) {
@@ -1403,7 +2052,7 @@ export default {
       if (!node) {
         return;
       }
-      const {inNode,outNode} = node;
+      const { inNode, outNode } = node;
       const lastStageNode = reserverStageNode[reserverStageNode.length - 1].nodeInfo;
       const curNodes = [];
       lastStageNode.forEach((v) => {
@@ -1422,7 +2071,10 @@ export default {
         d3.select('#assist').style('display', 'none');
         return;
       }
-      d3.select('#assist').select('svg').selectAll('g').remove();
+      d3.select('#assist')
+        .select('svg')
+        .selectAll('g')
+        .remove();
       let maxlength = 0;
       for (let i = 0; i < tmp.length; i += 1) {
         const item = tmp[i];
@@ -1434,15 +2086,34 @@ export default {
         if (rectWidth > maxlength) {
           maxlength = rectWidth;
         }
-        const g = d3.select('#assist').select('svg').append('g').attr('transform', `translate(${  0  },${  50 * i + 20  })`).attr('id', `del__${  item.nodeId}`);
-        g.append('rect').attr('width', rectWidth).attr('height', 25).attr('fill', item.color).attr('stroke-width', '0.5px').attr('rx', 12.5).attr('ry', 12.5).attr('stroke', '#696969');
-        g.append('text').text(nodeName).attr('dy', '1em').attr('text-anchor', 'middle').attr('transform', `translate(${  rectWidth / 2  },0)`);
+        const g = d3
+          .select('#assist')
+          .select('svg')
+          .append('g')
+          .attr('transform', `translate(${0},${50 * i + 20})`)
+          .attr('id', `del__${item.nodeId}`);
+        g.append('rect')
+          .attr('width', rectWidth)
+          .attr('height', 25)
+          .attr('fill', item.color)
+          .attr('stroke-width', '0.5px')
+          .attr('rx', 12.5)
+          .attr('ry', 12.5)
+          .attr('stroke', '#696969');
+        g.append('text')
+          .text(nodeName)
+          .attr('dy', '1em')
+          .attr('text-anchor', 'middle')
+          .attr('transform', `translate(${rectWidth / 2},0)`);
       }
-      d3.select('#assist').select('svg').attr('width', maxlength).attr('height', 50 * tmp.length + 50);
+      d3.select('#assist')
+        .select('svg')
+        .attr('width', maxlength)
+        .attr('height', 50 * tmp.length + 50);
     },
     getModifyClick(val) {
       let ob;
-      const {nodeInfo} = this;
+      const { nodeInfo } = this;
       let obsec;
       for (let i = 0; i < nodeInfo.length; i += 1) {
         if (nodeInfo[i].uid === val) {
@@ -1454,7 +2125,7 @@ export default {
         return;
       }
       const reserverStageNode = this.reserve;
-      const {inNode, outNode} = ob;
+      const { inNode, outNode } = ob;
       for (let i = reserverStageNode.length - 1; i >= 0; i -= 1) {
         if (reserverStageNode[i].sign === 1) {
           reserverStageNode.splice(i + 1, reserverStageNode.length - i - 1);
@@ -1493,7 +2164,10 @@ export default {
       if (!val) {
         return;
       }
-      const nodeId = `#${  val.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
+      const nodeId = `#${val
+        .replace(/\//g, '\\/')
+        .replace(/\(/g, '\\(')
+        .replace(/\)/g, '\\)')}`;
       const node = d3.select(nodeId);
       // eslint-disable-next-line
       if(!node["_groups"][0][0]) {
@@ -1503,10 +2177,19 @@ export default {
       this.restoreNode = '';
       if (node) {
         let old = '';
-        old = d3.select(nodeId).select('rect').style('fill');
-        d3.select(nodeId).select('rect').style('fill', 'red');
+        old = d3
+          .select(nodeId)
+          .select('rect')
+          .style('fill');
+        d3.select(nodeId)
+          .select('rect')
+          .style('fill', 'red');
         setTimeout(() => {
-          old && d3.select(nodeId).select('rect').style('fill', old);
+          old &&
+            d3
+              .select(nodeId)
+              .select('rect')
+              .style('fill', old);
         }, 1000);
       }
     },
@@ -1518,9 +2201,19 @@ export default {
         let cy = nodeRect._groups[0][0].attributes.height.value;
         cy = Number(cy) / 2;
         if (dir === 'out') {
-          node.append('circle').attr('cx', cx).attr('cy', cy).attr('r', 4).attr('fill', 'blue');
+          node
+            .append('circle')
+            .attr('cx', cx)
+            .attr('cy', cy)
+            .attr('r', 4)
+            .attr('fill', 'blue');
         } else if (dir === 'in') {
-          node.append('circle').attr('cx', cx).attr('cy', -cy).attr('r', 4).attr('fill', 'red');
+          node
+            .append('circle')
+            .attr('cx', cx)
+            .attr('cy', -cy)
+            .attr('r', 4)
+            .attr('fill', 'red');
         }
       } else {
         node.select('circle').remove();
@@ -1532,16 +2225,16 @@ export default {
       let curStage;
       const waiting = [];
       if (stages === 0) {
-        curStage = { 'sign': 0 };
+        curStage = { sign: 0 };
         curStage.nodeInfo = JSON.parse(JSON.stringify(this.nodeInfo));
       } else if (reserverStageNode[stages - 1].sign === 0) {
-          this.pre();
-          curStage = JSON.parse(JSON.stringify(reserverStageNode[stages - 2]));
-          curStage.sign = 0;
-        } else {
-          curStage = JSON.parse(JSON.stringify(reserverStageNode[stages - 1]));
-          curStage.sign = 0;
-        }
+        this.pre();
+        curStage = JSON.parse(JSON.stringify(reserverStageNode[stages - 2]));
+        curStage.sign = 0;
+      } else {
+        curStage = JSON.parse(JSON.stringify(reserverStageNode[stages - 1]));
+        curStage.sign = 0;
+      }
       const cNodeInfo = curStage.nodeInfo;
       for (let i = 0; i < cNodeInfo.length; i += 1) {
         // eslint-disable-next-line
@@ -1556,21 +2249,23 @@ export default {
       }
       if (waiting.length === 0) {
         return;
-      } 
-        const edgeGroup = Array.from(d3.selectAll('.edgePath')._groups[0]);
-        const edgeLabelGroup = d3.selectAll('.edgeLabel')._groups[0];
-        for (let i = 0; i < waiting.length; i += 1) {
-          const edges = this.curg.nodeEdges(waiting[i]);
-          edges.forEach((v) => {
-            const edgeId = `#${  (`${v.v  }__${  v.w}`).replace(/\//g, '\\/')}`;
-            d3.select(edgeId).select('.path').style('visibility', 'hidden');
-            const edgeDom = document.getElementById(`${v.v  }__${  v.w}`);
-            const index = edgeGroup.indexOf(edgeDom);
-            edgeLabelGroup[index].attributes.style.value = 'opacity: 1;visibility:hidden';
-          });
-          const nodeId = `#${  waiting[i].replace(/\//g, '\\/')}`;
-          d3.select(nodeId).style('visibility', 'hidden');
-        }
+      }
+      const edgeGroup = Array.from(d3.selectAll('.edgePath')._groups[0]);
+      const edgeLabelGroup = d3.selectAll('.edgeLabel')._groups[0];
+      for (let i = 0; i < waiting.length; i += 1) {
+        const edges = this.curg.nodeEdges(waiting[i]);
+        edges.forEach((v) => {
+          const edgeId = `#${`${v.v}__${v.w}`.replace(/\//g, '\\/')}`;
+          d3.select(edgeId)
+            .select('.path')
+            .style('visibility', 'hidden');
+          const edgeDom = document.getElementById(`${v.v}__${v.w}`);
+          const index = edgeGroup.indexOf(edgeDom);
+          edgeLabelGroup[index].attributes.style.value = 'opacity: 1;visibility:hidden';
+        });
+        const nodeId = `#${waiting[i].replace(/\//g, '\\/')}`;
+        d3.select(nodeId).style('visibility', 'hidden');
+      }
       for (let i = cNodeInfo.length - 1; i >= 0; i -= 1) {
         let tag = 1;
         for (let j = 0; j < waiting.length; j += 1) {
@@ -1581,7 +2276,7 @@ export default {
           }
         }
         if (tag) {
-          const {inNode,outNode} = cNodeInfo[i];
+          const { inNode, outNode } = cNodeInfo[i];
           for (let j = outNode.length - 1; j >= 0; j -= 1) {
             for (let k = 0; k < waiting.length; k += 1) {
               if (outNode[j] === waiting[k]) {
@@ -1604,7 +2299,7 @@ export default {
     run() {
       const stages = reserverStageNode.length;
       const curStage = JSON.parse(JSON.stringify(reserverStageNode[stages - 1]));
-        curStage.sign = 1;
+      curStage.sign = 1;
       let hiddenLayer = 0;
       let tag = 1;
       for (let i = stages - 1; i >= 0; i -= 1) {
@@ -1634,7 +2329,7 @@ export default {
       this.drawGraph();
     },
     pre() {
-      const {length} = reserverStageNode;
+      const { length } = reserverStageNode;
       let lastSign = -1;
       if (length === 1) {
         return;
@@ -1656,17 +2351,22 @@ export default {
           const tNodeInfo = this.getDelNodeInfo(waiting[i]);
           const edges = [];
           for (let j = 0; j < tNodeInfo.inNode.length; j += 1) {
-            edges.push(`${tNodeInfo.inNode[j]  }__${  waiting[i]}`);
+            edges.push(`${tNodeInfo.inNode[j]}__${waiting[i]}`);
           }
           for (let j = 0; j < tNodeInfo.outNode.length; j += 1) {
-            edges.push(`${waiting[i]  }__${  tNodeInfo.outNode[j]}`);
+            edges.push(`${waiting[i]}__${tNodeInfo.outNode[j]}`);
           }
-          d3.select(`#${  waiting[i].replace(/\//, '\\/')}`).style('visibility', 'visible');
+          d3.select(`#${waiting[i].replace(/\//, '\\/')}`).style('visibility', 'visible');
           const edgeGroup = Array.from(d3.selectAll('.edgePath')._groups[0]);
           const edgeLabelGroup = d3.selectAll('.edgeLabel')._groups[0];
           edges.forEach((v) => {
-            const edgeId = `#${  v.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-            d3.select(edgeId).select('.path').style('visibility', 'visible');
+            const edgeId = `#${v
+              .replace(/\//g, '\\/')
+              .replace(/\(/g, '\\(')
+              .replace(/\)/g, '\\)')}`;
+            d3.select(edgeId)
+              .select('.path')
+              .style('visibility', 'visible');
             const edgeDom = document.getElementById(v);
             const index = edgeGroup.indexOf(edgeDom);
             edgeLabelGroup[index].attributes.style.value = 'opacity: 1;visibility:visible';
@@ -1675,12 +2375,12 @@ export default {
       }
     },
     restoreLastClick() {
-      const {nodeInfo} = this;
+      const { nodeInfo } = this;
       const g = this.curg;
       g.node(this.lastClick).clicked = false;
       const lastEdges = g.nodeEdges(this.lastClick);
       lastEdges.forEach((v) => {
-        const edgeID = `${v.v  }__${  v.w}`;
+        const edgeID = `${v.v}__${v.w}`;
         const edgeGroup = Array.from(d3.selectAll('.edgePath')._groups[0]);
         const edgeLabelGroup = d3.selectAll('.edgeLabel')._groups[0];
         let index;
@@ -1690,16 +2390,45 @@ export default {
             break;
           }
         }
-        const dEdgeID = (`#${  edgeID}`).replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)');
-        d3.select(dEdgeID).select('.path').style('stroke', 'black').style('stroke-width', '1');
-        d3.select(edgeLabelGroup[index]).select('g').select('text').attr('fill', 'black');
-        const nodeFromID = `#${  v.v.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-        const nodeToID = `#${  v.w.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-        d3.select(nodeFromID).select('rect').style('stroke', '#696969');
-        d3.select(nodeToID).select('rect').style('stroke', '#696969');
+        const dEdgeID = `#${edgeID}`
+          .replace(/\//g, '\\/')
+          .replace(/\(/g, '\\(')
+          .replace(/\)/g, '\\)');
+        d3.select(dEdgeID)
+          .select('.path')
+          .style('stroke', 'black')
+          .style('stroke-width', '1');
+        d3.select(edgeLabelGroup[index])
+          .select('g')
+          .select('text')
+          .attr('fill', 'black');
+        const nodeFromID = `#${v.v
+          .replace(/\//g, '\\/')
+          .replace(/\(/g, '\\(')
+          .replace(/\)/g, '\\)')}`;
+        const nodeToID = `#${v.w
+          .replace(/\//g, '\\/')
+          .replace(/\(/g, '\\(')
+          .replace(/\)/g, '\\)')}`;
+        d3.select(nodeFromID)
+          .select('rect')
+          .style('stroke', '#696969');
+        d3.select(nodeToID)
+          .select('rect')
+          .style('stroke', '#696969');
       });
-      d3.select(`#${  this.lastClick.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('stroke', '#c9c9c9');
-      d3.select(`[id="${this.lastClick}"]`).select('rect').style('stroke-width', '1').style('stroke', '#696969');
+      d3.select(
+        `#${this.lastClick
+          .replace(/\//g, '\\/')
+          .replace(/\(/g, '\\(')
+          .replace(/\)/g, '\\)')}`
+      )
+        .select('rect')
+        .style('stroke', '#c9c9c9');
+      d3.select(`[id="${this.lastClick}"]`)
+        .select('rect')
+        .style('stroke-width', '1')
+        .style('stroke', '#696969');
       let initInfo;
       for (let i = 0; i < nodeInfo.length; i += 1) {
         if (nodeInfo[i].uid === this.lastClick) {
@@ -1709,35 +2438,99 @@ export default {
       }
       for (let i = 0; i < tmp.length; i += 1) {
         if (initInfo.inNode.indexOf(tmp[i].nodeId) >= 0) {
-          const oldfill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill');
-          d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', oldfill);
-          d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', undefined);
+          const oldfill = d3
+            .select(
+              `#del__${tmp[i].nodeId
+                .replace(/\//g, '\\/')
+                .replace(/\(/g, '\\(')
+                .replace(/\)/g, '\\)')}`
+            )
+            .select('rect')
+            .attr('oldfill');
+          d3.select(
+            `#del__${tmp[i].nodeId
+              .replace(/\//g, '\\/')
+              .replace(/\(/g, '\\(')
+              .replace(/\)/g, '\\)')}`
+          )
+            .select('rect')
+            .style('fill', oldfill);
+          d3.select(
+            `#del__${tmp[i].nodeId
+              .replace(/\//g, '\\/')
+              .replace(/\(/g, '\\(')
+              .replace(/\)/g, '\\)')}`
+          )
+            .select('rect')
+            .attr('oldfill', undefined);
         }
         if (initInfo.outNode.indexOf(tmp[i].nodeId) >= 0) {
-          const oldfill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill');
-          d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', oldfill);
-          d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', undefined);
+          const oldfill = d3
+            .select(
+              `#del__${tmp[i].nodeId
+                .replace(/\//g, '\\/')
+                .replace(/\(/g, '\\(')
+                .replace(/\)/g, '\\)')}`
+            )
+            .select('rect')
+            .attr('oldfill');
+          d3.select(
+            `#del__${tmp[i].nodeId
+              .replace(/\//g, '\\/')
+              .replace(/\(/g, '\\(')
+              .replace(/\)/g, '\\)')}`
+          )
+            .select('rect')
+            .style('fill', oldfill);
+          d3.select(
+            `#del__${tmp[i].nodeId
+              .replace(/\//g, '\\/')
+              .replace(/\(/g, '\\(')
+              .replace(/\)/g, '\\)')}`
+          )
+            .select('rect')
+            .attr('oldfill', undefined);
         }
       }
       this.lastClick = '';
     },
     restoreLastClickRight() {
-      const {nodeInfo} = this;
+      const { nodeInfo } = this;
       const nodeId = this.lastAssistClick.split('__')[1];
       const info = this.getDelNodeInfo(nodeId, nodeInfo);
-      const {inNode,outNode} = info;
+      const { inNode, outNode } = info;
       for (let i = 0; i < inNode.length; i += 1) {
-        const nodeId = `#${  inNode[i].replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-        const old = d3.select(nodeId).select('rect').attr('tag');
-        d3.select(nodeId).select('rect').style('fill', old);
-        d3.select(nodeId).select('rect').attr('tag', null);
+        const nodeId = `#${inNode[i]
+          .replace(/\//g, '\\/')
+          .replace(/\(/g, '\\(')
+          .replace(/\)/g, '\\)')}`;
+        const old = d3
+          .select(nodeId)
+          .select('rect')
+          .attr('tag');
+        d3.select(nodeId)
+          .select('rect')
+          .style('fill', old);
+        d3.select(nodeId)
+          .select('rect')
+          .attr('tag', null);
         this.drawCircleTag(nodeId, 'out', 0);
       }
       for (let i = 0; i < outNode.length; i += 1) {
-        const nodeId = `#${  outNode[i].replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`;
-        const old = d3.select(nodeId).select('rect').attr('tag');
-        d3.select(nodeId).select('rect').style('fill', old);
-        d3.select(nodeId).select('rect').attr('tag', null);
+        const nodeId = `#${outNode[i]
+          .replace(/\//g, '\\/')
+          .replace(/\(/g, '\\(')
+          .replace(/\)/g, '\\)')}`;
+        const old = d3
+          .select(nodeId)
+          .select('rect')
+          .attr('tag');
+        d3.select(nodeId)
+          .select('rect')
+          .style('fill', old);
+        d3.select(nodeId)
+          .select('rect')
+          .attr('tag', null);
         this.drawCircleTag(nodeId, 'in', 0);
       }
       let initInfo;
@@ -1750,18 +2543,62 @@ export default {
       for (let i = 0; i < tmp.length; i += 1) {
         if (initInfo.inNode.indexOf(tmp[i].nodeId) >= 0) {
           info.inNode.push(tmp[i].nodeId);
-          const oldfill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill');
+          const oldfill = d3
+            .select(
+              `#del__${tmp[i].nodeId
+                .replace(/\//g, '\\/')
+                .replace(/\(/g, '\\(')
+                .replace(/\)/g, '\\)')}`
+            )
+            .select('rect')
+            .attr('oldfill');
           if (oldfill) {
-            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', oldfill);
-            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', undefined);
+            d3.select(
+              `#del__${tmp[i].nodeId
+                .replace(/\//g, '\\/')
+                .replace(/\(/g, '\\(')
+                .replace(/\)/g, '\\)')}`
+            )
+              .select('rect')
+              .style('fill', oldfill);
+            d3.select(
+              `#del__${tmp[i].nodeId
+                .replace(/\//g, '\\/')
+                .replace(/\(/g, '\\(')
+                .replace(/\)/g, '\\)')}`
+            )
+              .select('rect')
+              .attr('oldfill', undefined);
           }
         }
         if (initInfo.outNode.indexOf(tmp[i].nodeId) >= 0) {
           info.outNode.push(tmp[i].nodeId);
-          const oldfill = d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill');
+          const oldfill = d3
+            .select(
+              `#del__${tmp[i].nodeId
+                .replace(/\//g, '\\/')
+                .replace(/\(/g, '\\(')
+                .replace(/\)/g, '\\)')}`
+            )
+            .select('rect')
+            .attr('oldfill');
           if (oldfill) {
-            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').style('fill', oldfill);
-            d3.select(`#del__${  tmp[i].nodeId.replace(/\//g, '\\/').replace(/\(/g, '\\(').replace(/\)/g, '\\)')}`).select('rect').attr('oldfill', undefined);
+            d3.select(
+              `#del__${tmp[i].nodeId
+                .replace(/\//g, '\\/')
+                .replace(/\(/g, '\\(')
+                .replace(/\)/g, '\\)')}`
+            )
+              .select('rect')
+              .style('fill', oldfill);
+            d3.select(
+              `#del__${tmp[i].nodeId
+                .replace(/\//g, '\\/')
+                .replace(/\(/g, '\\(')
+                .replace(/\)/g, '\\)')}`
+            )
+              .select('rect')
+              .attr('oldfill', undefined);
           }
         }
       }
@@ -1771,90 +2608,98 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-    .temp {
-      position: absolute;
-      width: calc(100% - 290px);
-      height: 100%;
-      background-color: white;
-    }
+.temp {
+  position: absolute;
+  width: calc(100% - 290px);
+  height: 100%;
+  background-color: white;
+}
 
-    /deep/ .Graph {
-      position: relative;
-      height: 97.5%;
-      margin: 1% 1% 0 1%;
-      overflow-y: auto;
-      background-color: white;
-      border-radius: 5px 5px 0 0;
-      box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
+/deep/ .Graph {
+  position: relative;
+  height: 97.5%;
+  margin: 1% 1% 0 1%;
+  overflow-y: auto;
+  background-color: white;
+  border-radius: 5px 5px 0 0;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
 
-      svg {
-        position: relative;
-      }
-    }
+  svg {
+    position: relative;
+  }
+}
 
-    .assist {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      margin: 0% 0% 0 1%;
-      overflow-y: auto;
-      box-shadow: #8f8fb4 0 0 10px;
-    }
+.assist {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0% 0% 0 1%;
+  overflow-y: auto;
+  box-shadow: #8f8fb4 0 0 10px;
+}
 
-    .clusters rect {
-      opacity: 0.1;
-      fill: #646464;
-      stroke: #fff;
-      stroke-width: 1.5px;
-    }
+.clusters rect {
+  opacity: 0.1;
+  fill: #646464;
+  stroke: #fff;
+  stroke-width: 1.5px;
+}
 
-    .node rect {
-      opacity: 0.85;
-      fill: #fff;
-      stroke: #646464;
-      stroke-width: 2.5px;
-    }
+.node rect {
+  opacity: 0.85;
+  fill: #fff;
+  stroke: #646464;
+  stroke-width: 2.5px;
+}
 
-    g.type-current > rect {
-      fill: #1e9fff;
-    }
+g.type-current > rect {
+  fill: #1e9fff;
+}
 
-    g.type-success > rect {
-      fill: green;
-    }
+g.type-success > rect {
+  fill: green;
+}
 
-    g.type-fail > rect {
-      fill: red;
-    }
+g.type-fail > rect {
+  fill: red;
+}
 
-    text {
-      font-size: 16px;
-      fill: #000;
-    }
+text {
+  font-size: 16px;
+  fill: #000;
+}
 
-    .edgeLabel text {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC";
-      font-size: 1px;
-    }
+.edgeLabel text {
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe WPC',
+    'Segoe UI',
+    'Ubuntu',
+    'Droid Sans',
+    sans-serif,
+    'PingFang SC';
+  font-size: 1px;
+}
 
-    .edgePath path {
-      stroke: #333;
-      stroke-width: 1.5px;
-    }
+.edgePath path {
+  stroke: #333;
+  stroke-width: 1.5px;
+}
 
-    line {
-      stroke: red;
-      stroke-width: 2px;
-    }
+line {
+  stroke: red;
+  stroke-width: 2px;
+}
 
-    .special-layer-1,
-    .special-layer-2 {
-      fill: #fff !important;
-    }
+.special-layer-1,
+.special-layer-2 {
+  fill: #fff !important;
+}
 
-    .icon {
-      font-size: 80px;
-      color: #004986;
-      opacity: 0.4;
-    }
-</style>
\ No newline at end of file
+.icon {
+  font-size: 80px;
+  color: #004986;
+  opacity: 0.4;
+}
+</style>
diff --git a/webapp/src/views/visual/Visual/graphs/GraphsPanel.vue b/webapp/src/views/visual/Visual/graphs/GraphsPanel.vue
index 740212c..e452463 100644
--- a/webapp/src/views/visual/Visual/graphs/GraphsPanel.vue
+++ b/webapp/src/views/visual/Visual/graphs/GraphsPanel.vue
@@ -1,57 +1,55 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
-
   <div class="temp">
-
     <div class="graphPanel">
-
       <div class="graphPanelHead">
         <div
           id="c-graph"
-          :class="[cGraph?'graphhead2':'graphhead1']"
+          :class="[cGraph ? 'graphhead2' : 'graphhead1']"
           @click="changeTag('c_graph')"
-        >计算图</div>
+        >
+          计算图
+        </div>
         <div
           id="s-graph"
-          :class="[cGraph?'graphhead1':'graphhead2']"
+          :class="[cGraph ? 'graphhead1' : 'graphhead2']"
           @click="changeTag('s_graph')"
-        >结构图</div>
+        >
+          结构图
+        </div>
       </div>
       <el-card>
         <div class="graphPanelContent">
           <div v-show="cGraph" class="cGraphPanel">
-
             <el-row style="margin-bottom: 7%; font-size: 15px;">条件过滤</el-row>
 
-            <template v-for="(item1,index1) in item">
-
+            <template v-for="(item1, index1) in item">
               <template v-if="index1">
-                <el-row :key="index1+'orRow'" class="orRow">
+                <el-row :key="index1 + 'orRow'" class="orRow">
                   <el-link disabled>OR</el-link>
                 </el-row>
               </template>
 
-              <el-row :key="index1+'mainSection'" class="mainSection">
-
+              <el-row :key="index1 + 'mainSection'" class="mainSection">
                 <el-row style="height: 5%;">
                   <div style="float: right;">
                     <el-button
-                      :icon="0?'iconfont icon-zise':'iconfont icon-zise-'"
+                      :icon="0 ? 'iconfont icon-zise' : 'iconfont icon-zise-'"
                       style="color: #662d91;"
                       size="mini"
                       class="choose"
@@ -60,20 +58,27 @@
                   </div>
                 </el-row>
 
-                <template v-for="(item2,index2) in item1">
-
+                <template v-for="(item2, index2) in item1">
                   <template v-if="index2">
-                    <el-row :key="index1+'-'+index2+'-seg'" class="andRow">
+                    <el-row :key="index1 + '-' + index2 + '-seg'" class="andRow">
                       <el-link disabled>AND</el-link>
                     </el-row>
                   </template>
 
-                  <div :key="index1+'-'+index2+'-section'" style=" margin-right: 2%; margin-left: 4%;">
-                    <el-row :key="index1+'-'+index2+'-condition'" class="coloredRow">
+                  <div
+                    :key="index1 + '-' + index2 + '-section'"
+                    style=" margin-right: 2%; margin-left: 4%;"
+                  >
+                    <el-row :key="index1 + '-' + index2 + '-condition'" class="coloredRow">
                       <el-col :span="22">
                         <el-row :gutter="7">
                           <el-col :span="8">
-                            <el-select v-model="item2.type" placeholder="入(出)度" size="mini" class="selection1">
+                            <el-select
+                              v-model="item2.type"
+                              placeholder="入(出)度"
+                              size="mini"
+                              class="selection1"
+                            >
                               <el-option
                                 v-for="item0 in options"
                                 :key="item0.value"
@@ -84,7 +89,12 @@
                           </el-col>
 
                           <el-col :span="8">
-                            <el-select v-model="item2.tag" placeholder="符号" size="mini" class="selection2">
+                            <el-select
+                              v-model="item2.tag"
+                              placeholder="符号"
+                              size="mini"
+                              class="selection2"
+                            >
                               <el-option
                                 v-for="item5 in tags"
                                 :key="item5.value"
@@ -95,31 +105,34 @@
                           </el-col>
 
                           <el-col :span="8">
-                            <el-input v-model="item2.num" placeholder="" size="mini" class="selection" />
+                            <el-input
+                              v-model="item2.num"
+                              placeholder=""
+                              size="mini"
+                              class="selection"
+                            />
                           </el-col>
                         </el-row>
-
                       </el-col>
                       <el-col :span="2" style="padding: 0;">
                         <div style="margin-top: 20%;">
                           <el-button
-                            :icon="0?'iconfont icon-huangse':'iconfont icon-huangse-'"
+                            :icon="0 ? 'iconfont icon-huangse' : 'iconfont icon-huangse-'"
                             style="color: #fbb03b;"
                             size="mini"
                             class="choose"
-                            @click="delAnd(item1,item2,index1,index2)"
+                            @click="delAnd(item1, item2, index1, index2)"
                           />
                         </div>
                       </el-col>
                     </el-row>
                   </div>
-
                 </template>
                 <el-row>
                   <div style=" margin-top: 2%; margin-bottom: 2%; margin-left: 47%;">
                     AND
                     <el-button
-                      :icon="1?'iconfont icon-huangse':'iconfont icon-huangse-'"
+                      :icon="1 ? 'iconfont icon-huangse' : 'iconfont icon-huangse-'"
                       style="color: #fbb03b;"
                       size="mini"
                       class="choose"
@@ -128,14 +141,13 @@
                   </div>
                 </el-row>
               </el-row>
-
             </template>
 
             <el-row>
               <div style=" margin-top: 3%; margin-bottom: 3%; margin-left: 47%;">
                 OR
                 <el-button
-                  :icon="1?'iconfont icon-zise':'iconfont icon-zise-'"
+                  :icon="1 ? 'iconfont icon-zise' : 'iconfont icon-zise-'"
                   class="choose"
                   style="color: #662d91;"
                   size="mini"
@@ -143,7 +155,6 @@
                 />
               </div>
             </el-row>
-
           </div>
           <div v-show="!cGraph" class="sGraphPanel">
             <div>
@@ -162,30 +173,54 @@
     </div>
 
     <div class="buttons">
-      <el-tooltip class="item" effect="dark" content="条件过滤后点击该按钮隐藏节点" placement="top-start">
-        <el-button v-show="cGraph" class="buttonOption1" round size="mini" @click="hidde()">隐藏</el-button>
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="条件过滤后点击该按钮隐藏节点"
+        placement="top-start"
+      >
+        <el-button v-show="cGraph" class="buttonOption1" round size="mini" @click="hidde()"
+          >隐藏</el-button
+        >
       </el-tooltip>
       <el-tooltip class="item" effect="dark" content="隐藏节点后点击该按钮" placement="top-start">
-        <el-button v-if="cGraph" class="buttonOption1" round size="mini" @click="Run()">布局</el-button>
-        <el-button v-else class="buttonOption1" style="margin-left: 40%;" round size="mini" @click="Run()">布局</el-button>
+        <el-button v-if="cGraph" class="buttonOption1" round size="mini" @click="Run()"
+          >布局</el-button
+        >
+        <el-button
+          v-else
+          class="buttonOption1"
+          style="margin-left: 40%;"
+          round
+          size="mini"
+          @click="Run()"
+          >布局</el-button
+        >
       </el-tooltip>
-      <el-button v-show="cGraph" class="buttonOption2" round size="mini" @click="Pre()">上一步</el-button>
-      <el-button v-show="cGraph" class="buttonOption2" round size="mini" @click="Clear()">初始化</el-button>
+      <el-button v-show="cGraph" class="buttonOption2" round size="mini" @click="Pre()"
+        >上一步</el-button
+      >
+      <el-button v-show="cGraph" class="buttonOption2" round size="mini" @click="Clear()"
+        >初始化</el-button
+      >
     </div>
 
     <div class="info">
       <div class="infoTitle"><i class="el-icon-chat-line-round dot" />数据信息栏</div>
       <el-card>
         <div class="infoContent">
-          <template v-for="(item3,index) in obj">
-            <div :key="index+'-control'" class="information" style="float: left; width: 100%; clear: both;">
+          <template v-for="(item3, index) in obj">
+            <div
+              :key="index + '-control'"
+              class="information"
+              style="float: left; width: 100%; clear: both;"
+            >
               <el-card class="cardStyle">
                 <el-col :span="24">
-
                   <el-col :span="3">
                     <div style="float: left; margin-bottom: 10px;">
                       <el-button
-                        :icon="tag[index] == 0?'iconfont icon-suohui':'iconfont icon-zhankai1'"
+                        :icon="tag[index] == 0 ? 'iconfont icon-suohui' : 'iconfont icon-zhankai1'"
                         style="color: #6f6bd8;"
                         size="mini"
                         @click="switchTag(index)"
@@ -198,14 +233,13 @@
                       {{ index }}
                     </div>
                   </el-col>
-
                 </el-col>
               </el-card>
             </div>
 
-            <div :id="index" :key="index+'-box'" class="flag" style="display: &quot; clear: both;">
+            <div :id="index" :key="index + '-box'" class="flag" style='display: ";; clear: both;'>
               <ul>
-                <template v-for="(name,value4) in item3">
+                <template v-for="(name, value4) in item3">
                   <div :key="value4" style="padding: 1%; clear: both;">
                     <li>
                       <el-col :span="12">
@@ -219,12 +253,10 @@
               </ul>
             </div>
           </template>
-
         </div>
       </el-card>
     </div>
   </div>
-
 </template>
 
 <script>
@@ -236,13 +268,11 @@ import * as d3 from 'd3';
 
 Vue.use(ElementUI);
 
-const {
-  mapGetters: mapGraphGetters,
-  mapMutations: mapGraphMutations,
-} = createNamespacedHelpers('Visual/graph');
+const { mapGetters: mapGraphGetters, mapMutations: mapGraphMutations } = createNamespacedHelpers(
+  'Visual/graph'
+);
 const { mapState: mapLayoutStates } = createNamespacedHelpers('Visual/layout');
 export default {
-
   name: 'GraphsPanel',
   data() {
     return {
@@ -252,7 +282,8 @@ export default {
         NODE_PROPERTIES: 0,
         INPUTS: 0,
         OUTPUTS: 0,
-        ATTRIBUTES: 0 },
+        ATTRIBUTES: 0,
+      },
       graphDegree: 100,
       reg: '',
       clickNode: [],
@@ -262,30 +293,39 @@ export default {
       text1: '',
       text2: '',
       obj: '',
-      options: [{
-        value: 'input',
-        label: '入度',
-      }, {
-        value: 'output',
-        label: '出度',
-      }],
-      tags: [{
-        value: '<',
-        label: '<',
-      }, {
-        value: '<=',
-        label: '<=',
-      }, {
-        value: '==',
-        label: '=',
-      }, {
-        value: '>',
-        label: '>',
-      }, {
-        value: '>=',
-        label: '>=',
-      }],
-      item: [[{ 'type': '', 'tag': '', 'num': '' }]],
+      options: [
+        {
+          value: 'input',
+          label: '入度',
+        },
+        {
+          value: 'output',
+          label: '出度',
+        },
+      ],
+      tags: [
+        {
+          value: '<',
+          label: '<',
+        },
+        {
+          value: '<=',
+          label: '<=',
+        },
+        {
+          value: '==',
+          label: '=',
+        },
+        {
+          value: '>',
+          label: '>',
+        },
+        {
+          value: '>=',
+          label: '>=',
+        },
+      ],
+      item: [[{ type: '', tag: '', num: '' }]],
       Reg: '',
       tagRadioFlag: true,
       cGraph: true,
@@ -446,9 +486,9 @@ export default {
     },
     addAnd(val) {
       val.push({
-        'type': '',
-        'tag': '',
-        'num': '',
+        type: '',
+        tag: '',
+        num: '',
       });
     },
     delAnd(val1, val2, index1, index2) {
@@ -462,9 +502,7 @@ export default {
       }
     },
     addOr() {
-      this.item.splice(this.item.length, 0, [{ 'type': '',
-        'tag': '',
-        'num': '' }]);
+      this.item.splice(this.item.length, 0, [{ type: '', tag: '', num: '' }]);
     },
     delOr(index1) {
       if (index1 === 0 && this.item.length === 1) {
@@ -478,22 +516,27 @@ export default {
         let inStr = '';
         for (let j = 0; j < this.item[i].length; j += 1) {
           let childStr = '';
-          if (this.item[i][j].type === '' || this.item[i][j].tag === '' || this.item[i][j].num === '' || isNaN(Number(this.item[i][j].num))) {
+          if (
+            this.item[i][j].type === '' ||
+            this.item[i][j].tag === '' ||
+            this.item[i][j].num === '' ||
+            isNaN(Number(this.item[i][j].num))
+          ) {
             childStr = '';
           } else {
             childStr = childStr + this.item[i][j].type + this.item[i][j].tag + this.item[i][j].num;
           }
           if (childStr) {
-            inStr = `${inStr + childStr  }&&`;
+            inStr = `${inStr + childStr}&&`;
           }
         }
         if (inStr.slice(-2) === '&&') {
           inStr = inStr.substring(0, inStr.length - 2);
         }
         if (inStr) {
-          inStr = `(${  inStr  })`;
+          inStr = `(${inStr})`;
           if (i > 0 && outStr !== '') {
-            inStr = `||${  inStr}`;
+            inStr = `||${inStr}`;
           }
 
           outStr += inStr;
@@ -508,12 +551,12 @@ export default {
     },
     switchTag(id) {
       id = id.replace(/\s/, '');
-      const val = d3.select(`#${  id}`)._groups[0][0].style.display;
+      const val = d3.select(`#${id}`)._groups[0][0].style.display;
       if (val === 'none') {
-        d3.select(`#${  id}`).style('display', '');
+        d3.select(`#${id}`).style('display', '');
         this.tag[id] = 1;
       } else {
-        d3.select(`#${  id}`).style('display', 'none');
+        d3.select(`#${id}`).style('display', 'none');
         this.tag[id] = 0;
       }
     },
@@ -521,210 +564,212 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-  .temp {
-    height: 100px;
-  }
-
-  .mainSection {
-    box-shadow: 0 0 4px 0 rgba(143, 143, 180, 0.24);
-  }
-
-  .buttonOption1 {
-    padding: 7px 10px;
-  }
-
-  .buttonOption2 {
-    padding: 7px 7px;
-  }
-
-  .information .el-button {
-    border: none;
-  }
-
-  .buttons {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 6%;
-    margin-right: 4%;
-    margin-left: 4%;
-
-    .el-button {
-      width: 20%;
-      font-size: 10px;
-      color: #270089;
-      background-color: #dfe7fd;
-    }
-
-    .el-button:hover {
-      color: #fff;
-      background-color: #8f8bd8;
-    }
-
-    .el-button:focus {
-      color: #fff;
-      background-color: #8f8bd8;
-    }
-  }
-
-  .graphPanel {
-    width: 94%;
-    margin: 5% 3% 0 3%;
-  }
-
-  .graphPanelHead {
-    display: inline-flex;
-    width: 100%;
-    height: 30px;
-    font-size: 13px;
-  }
-
-  .graphhead1,
-  .graphhead2 {
-    width: 49%;
-    height: 30px;
-    font-weight: 700;
-    line-height: 30px;
-    color: white;
-  }
-
-  .graphhead1 {
-    background-color: #b8c6ff;
-  }
-
-  .graphhead2 {
-    background-color: #625eb3;
-  }
-
-  #c-graph {
-    margin-right: 2%;
-    border-radius: 3px;
-  }
-
-  #s-graph {
-    border-radius: 3px;
-  }
-
-  .graphPanelContent {
-    font-size: 12px;
-    text-align: left;
-    border-radius: 0 0 3px 3px;
-  }
-
-  .andRow,
-  .orRow {
-    margin-top: 2%;
-    margin-bottom: 2%;
-    text-align: center;
-  }
-
-  .el-link.el-link--default.is-disabled {
-    font-size: 20%;
-    color: #000;
-  }
-
-  .info {
-    width: 94%;
-    margin: 8% 3% 0 3%;
-  }
-
-  .infoTitle {
-    height: 30px;
-    padding-left: 5%;
-    font-size: 13px;
-    font-weight: 700;
-    line-height: 30px;
-    color: white;
-    text-align: left;
-    background-color: #625eb3;
-    border-radius: 3px;
-
-    .dot {
-      margin-right: 2%;
-    }
-  }
-
-  .infoContent {
-    font-size: 13px;
-  }
-
-  .el-select-dropdown__item.selected {
-    color: #8f8ad7;
-  }
-
-  .information .el-button--mini {
-    padding: 0;
-  }
-
-  .choose {
-    padding: 0;
-    border: none;
-  }
-
-  .cardStyle {
-    margin-top: 2%;
-    margin-bottom: 2%;
-  }
-
-  .infoTitle .el_card_body {
-    padding-bottom: 20px;
-  }
-
-  .ddot {
-    display: inline-block;
-    width: 5px;
-    height: 5px;
-    margin-right: 5px;
-    overflow: hidden;
-    vertical-align: middle;
-    background: blue;
-  }
-
-  li { list-style: none; }
-
-  /deep/ .information .el-card__body {
-    padding: 10px 20px 20px 10px;
-  }
-
-  /deep/ .el-input__inner {
-    padding: 0 12px;
-    font-size: xx-small;
-    text-align: center;
-    border: #fff;
-    box-shadow: 0 0 4px 0 rgba(143, 143, 180, 0.24);
-  }
-
-  /deep/ .selection1 .el-input__inner {
-    padding: 0 1px;
-  }
-
-  /deep/ .el-input__suffix {
-    right: 0;
-  }
-
-  /deep/ .el-input--suffix .el-input__inner {
-    padding-right: 16px;
-  }
-
-  /deep/ .el-select .el-input .el-select__caret {
+.temp {
+  height: 100px;
+}
+
+.mainSection {
+  box-shadow: 0 0 4px 0 rgba(143, 143, 180, 0.24);
+}
+
+.buttonOption1 {
+  padding: 7px 10px;
+}
+
+.buttonOption2 {
+  padding: 7px 7px;
+}
+
+.information .el-button {
+  border: none;
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 6%;
+  margin-right: 4%;
+  margin-left: 4%;
+
+  .el-button {
+    width: 20%;
     font-size: 10px;
-    color: #662d91;
-  }
-
-  /deep/ .el-input__icon {
-    width: 20px;
-  }
-
-  /deep/ .iconfont {
-    font-family: "iconfont" !important;
-    -webkit-font-smoothing: antialiased;
-    font-size: 20px;
-  }
-
-  /deep/ ul {
-    padding: 0;
-    margin: 0 0 0 7%;
-    text-align: left;
-    list-style-type: none;
+    color: #270089;
+    background-color: #dfe7fd;
+  }
+
+  .el-button:hover {
+    color: #fff;
+    background-color: #8f8bd8;
+  }
+
+  .el-button:focus {
+    color: #fff;
+    background-color: #8f8bd8;
+  }
+}
+
+.graphPanel {
+  width: 94%;
+  margin: 5% 3% 0 3%;
+}
+
+.graphPanelHead {
+  display: inline-flex;
+  width: 100%;
+  height: 30px;
+  font-size: 13px;
+}
+
+.graphhead1,
+.graphhead2 {
+  width: 49%;
+  height: 30px;
+  font-weight: 700;
+  line-height: 30px;
+  color: white;
+}
+
+.graphhead1 {
+  background-color: #b8c6ff;
+}
+
+.graphhead2 {
+  background-color: #625eb3;
+}
+
+#c-graph {
+  margin-right: 2%;
+  border-radius: 3px;
+}
+
+#s-graph {
+  border-radius: 3px;
+}
+
+.graphPanelContent {
+  font-size: 12px;
+  text-align: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.andRow,
+.orRow {
+  margin-top: 2%;
+  margin-bottom: 2%;
+  text-align: center;
+}
+
+.el-link.el-link--default.is-disabled {
+  font-size: 20%;
+  color: #000;
+}
+
+.info {
+  width: 94%;
+  margin: 8% 3% 0 3%;
+}
+
+.infoTitle {
+  height: 30px;
+  padding-left: 5%;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 30px;
+  color: white;
+  text-align: left;
+  background-color: #625eb3;
+  border-radius: 3px;
+
+  .dot {
+    margin-right: 2%;
   }
-</style>
\ No newline at end of file
+}
+
+.infoContent {
+  font-size: 13px;
+}
+
+.el-select-dropdown__item.selected {
+  color: #8f8ad7;
+}
+
+.information .el-button--mini {
+  padding: 0;
+}
+
+.choose {
+  padding: 0;
+  border: none;
+}
+
+.cardStyle {
+  margin-top: 2%;
+  margin-bottom: 2%;
+}
+
+.infoTitle .el_card_body {
+  padding-bottom: 20px;
+}
+
+.ddot {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  margin-right: 5px;
+  overflow: hidden;
+  vertical-align: middle;
+  background: blue;
+}
+
+li {
+  list-style: none;
+}
+
+/deep/ .information .el-card__body {
+  padding: 10px 20px 20px 10px;
+}
+
+/deep/ .el-input__inner {
+  padding: 0 12px;
+  font-size: xx-small;
+  text-align: center;
+  border: #fff;
+  box-shadow: 0 0 4px 0 rgba(143, 143, 180, 0.24);
+}
+
+/deep/ .selection1 .el-input__inner {
+  padding: 0 1px;
+}
+
+/deep/ .el-input__suffix {
+  right: 0;
+}
+
+/deep/ .el-input--suffix .el-input__inner {
+  padding-right: 16px;
+}
+
+/deep/ .el-select .el-input .el-select__caret {
+  font-size: 10px;
+  color: #662d91;
+}
+
+/deep/ .el-input__icon {
+  width: 20px;
+}
+
+/deep/ .iconfont {
+  font-family: 'iconfont' !important;
+  -webkit-font-smoothing: antialiased;
+  font-size: 20px;
+}
+
+/deep/ ul {
+  padding: 0;
+  margin: 0 0 0 7%;
+  text-align: left;
+  list-style-type: none;
+}
+</style>
diff --git a/webapp/src/views/visual/Visual/graphs/index.js b/webapp/src/views/visual/Visual/graphs/index.js
index 09b10bf..6cf6efd 100644
--- a/webapp/src/views/visual/Visual/graphs/index.js
+++ b/webapp/src/views/visual/Visual/graphs/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as Graphs } from './Graphs';
 export { default as GraphsPanel } from './GraphsPanel';
diff --git a/webapp/src/views/visual/Visual/hyperparms/HyperPara.vue b/webapp/src/views/visual/Visual/hyperparms/HyperPara.vue
index 7a1fe3a..dec05b0 100644
--- a/webapp/src/views/visual/Visual/hyperparms/HyperPara.vue
+++ b/webapp/src/views/visual/Visual/hyperparms/HyperPara.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div style="width: 100%; height: 100%;">
@@ -21,11 +21,11 @@
       <el-table
         :data="data"
         :fit="choice"
-        :default-sort="{prop:'accuracy', order:'descending'}"
-        :header-cell-style="{background:'rgb(224, 231, 250)',color:'#606266'}"
+        :default-sort="{ prop: 'accuracy', order: 'descending' }"
+        :header-cell-style="{ background: 'rgb(224, 231, 250)', color: '#606266' }"
         :row-class-name="tableRowClassName"
-        :row-style="{height:'10px'}"
-        :cell-style="{padding:'8px 0'}"
+        :row-style="{ height: '10px' }"
+        :cell-style="{ padding: '8px 0' }"
         style="font-size: 12px;"
         @cell-mouse-enter="highlight"
         @cell-mouse-leave="unhighlight"
@@ -49,7 +49,10 @@ import 'element-ui/lib/theme-chalk/index.css';
 import * as d3 from 'd3';
 import { createNamespacedHelpers } from 'vuex';
 
-const { mapMutations: mapHyperparmMutations, mapGetters: mapHyperparmGatters } = createNamespacedHelpers('Visual/hyperparm');
+const {
+  mapMutations: mapHyperparmMutations,
+  mapGetters: mapHyperparmGatters,
+} = createNamespacedHelpers('Visual/hyperparm');
 export default {
   name: 'HyperPara',
   data() {
@@ -66,7 +69,16 @@ export default {
     };
   },
   computed: {
-    ...mapHyperparmGatters(['getAllData', 'getGlobalChange', 'getKey', 'getSelected', 'getAxisType', 'getGlobalSelectedDatas', 'getHypEmpty', 'getMainParams']),
+    ...mapHyperparmGatters([
+      'getAllData',
+      'getGlobalChange',
+      'getKey',
+      'getSelected',
+      'getAxisType',
+      'getGlobalSelectedDatas',
+      'getHypEmpty',
+      'getMainParams',
+    ]),
   },
   watch: {
     getHypEmpty(val) {
@@ -122,10 +134,12 @@ export default {
   methods: {
     ...mapHyperparmMutations(['setFocusData', 'setGlobalSelectedDatas', 'setHypEmpty']),
     drawPara(colorItem) {
-      d3.select('#hp').selectAll('svg').remove();
+      d3.select('#hp')
+        .selectAll('svg')
+        .remove();
       if (this.data.length === 0) return;
       this.setGlobalSelectedDatas(this.getAllData);
-      const {data} = this;
+      const { data } = this;
       const margin = {
         top: 20,
         right: 20,
@@ -136,71 +150,85 @@ export default {
       const width = 600 - margin.left - margin.right;
       const height = 200 - margin.top - margin.bottom;
 
-      const x = d3.scalePoint().rangeRound([0, width]).padding(1);
+      const x = d3
+        .scalePoint()
+        .rangeRound([0, width])
+        .padding(1);
       const y = {};
       const dragging = {};
       const line = d3.line().curve(d3.curveMonotoneX);
-      const container = d3.select('#hp')
-        .attr('class', 'parcoords');
+      const container = d3.select('#hp').attr('class', 'parcoords');
 
-      const svg = container.append('svg')
+      const svg = container
+        .append('svg')
         .attr('class', 'my_svg')
         .attr('width', '100%')
         .attr('height', '100%')
         .attr('preserveAspectRatio', 'xMidYMid meet')
-        .attr('viewBox', `0 0 ${  width  } 200`)
+        .attr('viewBox', `0 0 ${width} 200`)
         .append('g')
-        .attr('transform', `translate(${  -margin.left  },${  margin.top  })`);
+        .attr('transform', `translate(${-margin.left},${margin.top})`);
 
       function quantP(v) {
-        return (parseFloat(v) === v) || (v === '');
-      };
-      
-      const maxData = d3.max(data, (d) => { return +d[colorItem]; });
-      const minData = d3.min(data, (d) => { return +d[colorItem]; });
+        return parseFloat(v) === v || v === '';
+      }
+
+      const maxData = d3.max(data, (d) => {
+        return +d[colorItem];
+      });
+      const minData = d3.min(data, (d) => {
+        return +d[colorItem];
+      });
       const dimensions = d3.keys(data[0]);
       x.domain(dimensions);
-      dimensions.forEach( (d) => {
-        const vals = data.map( (p) => {
+      dimensions.forEach((d) => {
+        const vals = data.map((p) => {
           return p[d];
         });
         if (vals.every(quantP)) {
-          const tmp = d3.extent(data, (p)=>{
+          const tmp = d3.extent(data, (p) => {
             return +p[d];
           });
           if (_this.localAxisType[d] === 'log') {
             if (tmp[0] === tmp[1]) {
-              y[d] = d3.scaleLog()
+              y[d] = d3
+                .scaleLog()
                 .domain([tmp[0] * 0.9, tmp[1] * 1.1])
                 .range([height - 0.5, 0])
                 .nice();
             } else {
-              y[d] = d3.scaleLog()
+              y[d] = d3
+                .scaleLog()
                 .domain(tmp)
                 .range([height - 0.5, 0])
                 .nice();
             }
           } else if (tmp[0] === tmp[1]) {
-              y[d] = d3.scaleLinear()
-                .domain([tmp[0] - 1, tmp[1] + 1])
-                .range([height, 0])
-                .nice();
-            } else {
-              y[d] = d3.scaleLinear()
-                .domain(tmp)
-                .range([height, 0])
-                .nice();
-            }
+            y[d] = d3
+              .scaleLinear()
+              .domain([tmp[0] - 1, tmp[1] + 1])
+              .range([height, 0])
+              .nice();
+          } else {
+            y[d] = d3
+              .scaleLinear()
+              .domain(tmp)
+              .range([height, 0])
+              .nice();
+          }
         } else {
           vals.sort();
-          y[d] = d3.scalePoint()
-            .domain(vals.filter( (v, i) => {
-              return vals.indexOf(v) === i;
-            }))
+          y[d] = d3
+            .scalePoint()
+            .domain(
+              vals.filter((v, i) => {
+                return vals.indexOf(v) === i;
+              })
+            )
             .range([height, 0], 1);
         }
       });
-      const extents = dimensions.map( () => {
+      const extents = dimensions.map(() => {
         return [0, 0];
       });
       function position(d) {
@@ -214,32 +242,43 @@ export default {
 
       // Returns the path for a given data point.
       function path(d) {
-        return line(dimensions.map( (p) => {
-          return [position(p), y[p](d[p])];
-        }));
+        return line(
+          dimensions.map((p) => {
+            return [position(p), y[p](d[p])];
+          })
+        );
       }
-       // Add grey background lines for context.
-      const background = svg.append('g')
+      // Add grey background lines for context.
+      const background = svg
+        .append('g')
         .attr('class', 'background')
         .selectAll('path')
         .data(data)
-        .enter().append('path')
+        .enter()
+        .append('path')
         .attr('d', path)
         .attr('fill', 'none');
 
-      const linear = d3.scaleLinear().domain([0, 50]).range([maxData, minData]);
-      const colorMap = d3.scaleSequential()
+      const linear = d3
+        .scaleLinear()
+        .domain([0, 50])
+        .range([maxData, minData]);
+      const colorMap = d3
+        .scaleSequential()
         .domain([maxData, minData])
         .interpolator(d3.interpolateSpectral);
-      const foreground = svg.append('g')
+      const foreground = svg
+        .append('g')
         .attr('class', 'foreground')
         .selectAll('path')
         .data(data)
-        .enter().append('path')
+        .enter()
+        .append('path')
         .attr('d', path)
         .attr('stroke', (d) => {
           return colorMap(d[colorItem]);
-        }).attr('fill', 'none')
+        })
+        .attr('fill', 'none')
         .on('mouseover', function _nonName(d) {
           this.parentNode.appendChild(this);
           d3.select(this)
@@ -261,8 +300,8 @@ export default {
 
       function localSelectedData() {
         const tempData = [];
-        foreground.each( (d) => {
-          const isTrue = dimensions.every( (p, i) => {
+        foreground.each((d) => {
+          const isTrue = dimensions.every((p, i) => {
             if (extents[i][0] === 0 && extents[i][0] === 0) {
               return true;
             }
@@ -281,13 +320,15 @@ export default {
 
         extents[dimensionsIndex] = [0, 0];
 
-        foreground.style('display',  (d) => {
-          return dimensions.every( (p, i) => {
+        foreground.style('display', (d) => {
+          return dimensions.every((p, i) => {
             if (extents[i][0] === 0 && extents[i][0] === 0) {
               return true;
             }
             return extents[i][1] <= d[p] && d[p] <= extents[i][0];
-          }) ? null : 'none';
+          })
+            ? null
+            : 'none';
         });
         localSelectedData();
       }
@@ -299,13 +340,15 @@ export default {
             extents[i] = d3.event.selection.map(y[dimensions[i]].invert, y[dimensions[i]]);
           }
         }
-        foreground.style('display',  (d) => {
-          return dimensions.every( (p, i) => {
+        foreground.style('display', (d) => {
+          return dimensions.every((p, i) => {
             if (extents[i][0] === 0 && extents[i][0] === 0) {
               return true;
             }
             return extents[i][1] <= d[p] && d[p] <= extents[i][0];
-          }) ? null : 'none';
+          })
+            ? null
+            : 'none';
         });
         localSelectedData();
       }
@@ -316,7 +359,9 @@ export default {
         for (let i = 0; i < dimensions.length; i += 1) {
           if (d3.event.target === y[dimensions[i]].brush) {
             extents[i] = d3.event.selection.map(y[dimensions[i]].invert, y[dimensions[i]]);
-            d3.select(this).transition().call(d3.event.target.move, extents[i].map(y[dimensions[i]]));
+            d3.select(this)
+              .transition()
+              .call(d3.event.target.move, extents[i].map(y[dimensions[i]]));
           }
         }
         localSelectedData();
@@ -326,21 +371,23 @@ export default {
         for (let i = 0; i < dimensions.length; i += 1) {
           if (d3.event.target === y[dimensions[i]].brush) {
             const yScale = y[dimensions[i]];
-            const selected = yScale.domain().filter( (d) => {
+            const selected = yScale.domain().filter((d) => {
               const s = d3.event.selection;
-              return (s[0] <= yScale(d)) && (yScale(d) <= s[1]);
+              return s[0] <= yScale(d) && yScale(d) <= s[1];
             });
             const temp = selected.sort();
             extents[i] = [temp[temp.length - 1], temp[0]];
           }
         }
-        foreground.style('display',  (d) => {
-          return dimensions.every( (p, i) =>  {
+        foreground.style('display', (d) => {
+          return dimensions.every((p, i) => {
             if (extents[i][0] === 0 && extents[i][0] === 0) {
               return true;
             }
             return extents[i][1] <= d[p] && d[p] <= extents[i][0];
-          }) ? null : 'none';
+          })
+            ? null
+            : 'none';
         });
       }
       function brushEndOrdinal() {
@@ -349,27 +396,38 @@ export default {
         for (let i = 0; i < dimensions.length; i += 1) {
           if (d3.event.target === y[dimensions[i]].brush) {
             const yScale = y[dimensions[i]];
-            const selected = yScale.domain().filter( (d) => {
+            const selected = yScale.domain().filter((d) => {
               const s = d3.event.selection;
-              return (s[0] <= yScale(d)) && (yScale(d) <= s[1]);
+              return s[0] <= yScale(d) && yScale(d) <= s[1];
             });
             const temp = selected.sort();
             extents[i] = [temp[temp.length - 1], temp[0]];
             if (selected.length > 1) {
-              d3.select(this).transition().call(d3.event.target.move, extents[i].map(y[dimensions[i]]));
+              d3.select(this)
+                .transition()
+                .call(d3.event.target.move, extents[i].map(y[dimensions[i]]));
             }
           }
         }
         localSelectedData();
       }
 
-     
       // draw legned
       const minMaxFormat = d3.format('.2f');
-      const legendBox = svg.append('g')
+      const legendBox = svg
+        .append('g')
         .attr('class', 'legend')
-        .attr('transform', `translate(${  x(dimensions[this.keys.length - 1]) + 40  },${  height + margin.top + margin.bottom - 130  })`);
-      legendBox.selectAll('rect').data(d3.range(50)).enter()
+        .attr(
+          'transform',
+          `translate(${x(dimensions[this.keys.length - 1]) + 40},${height +
+            margin.top +
+            margin.bottom -
+            130})`
+        );
+      legendBox
+        .selectAll('rect')
+        .data(d3.range(50))
+        .enter()
         .append('rect')
         .attr('x', '10px')
         .attr('y', (d, i) => i)
@@ -395,45 +453,50 @@ export default {
         .attr('x', '8px')
         .attr('y', '-3px');
       // Add a group element for each dimension.
-      const g = svg.selectAll('.dimension')
+      const g = svg
+        .selectAll('.dimension')
         .data(dimensions)
-        .enter().append('g')
+        .enter()
+        .append('g')
         .attr('class', 'dimension')
         .attr('transform', (d) => {
-          return `translate(${  x(d)  })`;
+          return `translate(${x(d)})`;
         })
-        .call(d3.drag()
-          .subject( (d) => {
-            return {
-              x: x(d),
-            };
-          })
-          .on('start', (d) => {
-            dragging[d] = x(d);
-            background.attr('visibility', 'hidden');
-          })
-          .on('drag', (d) => {
-            dragging[d] = Math.min(width, Math.max(0, d3.event.x));
-            foreground.attr('d', path);
-            dimensions.sort( (a, b) => {
-              return position(a) - position(b);
-            });
-            x.domain(dimensions);
-            g.attr('transform', (d) => {
-              return `translate(${  position(d)  })`;
-            });
-          })
-          .on('end', function _nonName(d) {
-            delete dragging[d];
-            transition(d3.select(this)).attr('transform', `translate(${  x(d)  })`);
-            transition(foreground).attr('d', path);
-            background
-              .attr('d', path)
-              .transition()
-              .delay(500)
-              .duration(0)
-              .attr('visibility', null);
-          }));
+        .call(
+          d3
+            .drag()
+            .subject((d) => {
+              return {
+                x: x(d),
+              };
+            })
+            .on('start', (d) => {
+              dragging[d] = x(d);
+              background.attr('visibility', 'hidden');
+            })
+            .on('drag', (d) => {
+              dragging[d] = Math.min(width, Math.max(0, d3.event.x));
+              foreground.attr('d', path);
+              dimensions.sort((a, b) => {
+                return position(a) - position(b);
+              });
+              x.domain(dimensions);
+              g.attr('transform', (d) => {
+                return `translate(${position(d)})`;
+              });
+            })
+            .on('end', function _nonName(d) {
+              delete dragging[d];
+              transition(d3.select(this)).attr('transform', `translate(${x(d)})`);
+              transition(foreground).attr('d', path);
+              background
+                .attr('d', path)
+                .transition()
+                .delay(500)
+                .duration(0)
+                .attr('visibility', null);
+            })
+        );
       // Add an axis and title.
       const g2 = svg.selectAll('.dimension');
       g2.append('g')
@@ -447,46 +510,65 @@ export default {
         .attr('fill', 'white')
         .style('text-anchor', 'middle')
         .attr('y', height + 18)
-        .text( (d) => {
+        .text((d) => {
           return d;
         });
-      d3.selectAll('.dimension')
-        .each( function _nonName(d) {
-          const t = d3.select(this).select('text.axisText').node().getBBox();
-          d3.select(this).append('rect')
-            .attr('class', 'backgroundRect')
-            .attr('x', () => {
-              return -(t.width + 10) / 2;
-            })
-            .attr('y', height + 10)
-            .attr('height', t.height + 6)
-            .attr('width', t.width + 9)
-            .attr('rx', 3)
-            .attr('ry', 3);
-          d3.select(this).append('text')
-            .attr('class', 'backgroundText')
-            .attr('fill', 'rgb(44, 99, 155)')
-            .attr('font-size', '6px')
-            .style('text-anchor', 'middle')
-            .attr('y', height + 18)
-            .text(d);
-        });
+      d3.selectAll('.dimension').each(function _nonName(d) {
+        const t = d3
+          .select(this)
+          .select('text.axisText')
+          .node()
+          .getBBox();
+        d3.select(this)
+          .append('rect')
+          .attr('class', 'backgroundRect')
+          .attr('x', () => {
+            return -(t.width + 10) / 2;
+          })
+          .attr('y', height + 10)
+          .attr('height', t.height + 6)
+          .attr('width', t.width + 9)
+          .attr('rx', 3)
+          .attr('ry', 3);
+        d3.select(this)
+          .append('text')
+          .attr('class', 'backgroundText')
+          .attr('fill', 'rgb(44, 99, 155)')
+          .attr('font-size', '6px')
+          .style('text-anchor', 'middle')
+          .attr('y', height + 18)
+          .text(d);
+      });
       // Add and store a brush for each axis.
       g2.append('g')
         .attr('class', 'brush')
-        .each( function _nonName(d) {
+        .each(function _nonName(d) {
           if (_this.items.indexOf(d) <= -1) {
-            d3.select(this).call(y[d].brush = d3.brushY().extent([
-              [-4, 0],
-              [4, height],
-            ]).on('brush start', brushStart).on('brush', goBrush).on('brush',
-              brushParallel).on('end', brushEndOrdinal));
+            d3.select(this).call(
+              (y[d].brush = d3
+                .brushY()
+                .extent([
+                  [-4, 0],
+                  [4, height],
+                ])
+                .on('brush start', brushStart)
+                .on('brush', goBrush)
+                .on('brush', brushParallel)
+                .on('end', brushEndOrdinal))
+            );
           } else {
-            d3.select(this).call(y[d].brush = d3.brushY().extent([
-              [-4, 0],
-              [4, height],
-            ]).on('brush start', brushStart).on('brush', goBrush).on('brush',
-              brushParallelChart).on('end', brushEnd));
+            d3.select(this).call(
+              (y[d].brush = d3
+                .brushY()
+                .extent([
+                  [-4, 0],
+                  [4, height],
+                ])
+                .on('brush start', brushStart)
+                .on('brush', goBrush)
+                .on('brush', brushParallelChart)
+                .on('end', brushEnd))
+            );
           }
         })
         .selectAll('rect')
@@ -500,18 +582,19 @@ export default {
     unhighlight(d) {
       d3.select('.foreground')
         .selectAll('path')
-        .each( function _nonName(s){
+        .each(function _nonName(s) {
           let orderedD = {};
           let orderedS = {};
-          Object.keys(d).sort().forEach( (key) => {
-            orderedD[key] = d[key];
-            orderedS[key] = s[key];
-          });
+          Object.keys(d)
+            .sort()
+            .forEach((key) => {
+              orderedD[key] = d[key];
+              orderedS[key] = s[key];
+            });
           orderedS = JSON.stringify(orderedS);
           orderedD = JSON.stringify(orderedD);
           if (orderedS === orderedD) {
-            d3.select(this)
-              .attr('stroke-width', '1px');
+            d3.select(this).attr('stroke-width', '1px');
           }
         });
     },
@@ -519,19 +602,20 @@ export default {
       this.setFocusData(JSON.parse(JSON.stringify(d)));
       d3.select('.foreground')
         .selectAll('path')
-        .each( function _nonName(s) {
+        .each(function _nonName(s) {
           let orderedD = {};
           let orderedS = {};
-          Object.keys(d).sort().forEach( (key) => {
-            orderedD[key] = d[key];
-            orderedS[key] = s[key];
-          });
+          Object.keys(d)
+            .sort()
+            .forEach((key) => {
+              orderedD[key] = d[key];
+              orderedS[key] = s[key];
+            });
           orderedS = JSON.stringify(orderedS);
           orderedD = JSON.stringify(orderedD);
           if (orderedS === orderedD) {
             this.parentNode.appendChild(this);
-            d3.select(this)
-              .attr('stroke-width', '2px');
+            d3.select(this).attr('stroke-width', '2px');
           }
         });
     },
@@ -547,19 +631,17 @@ export default {
       return '';
     },
     leftTransform(leftDim, dimensions) {
-      d3.selectAll('.dimension')
-        .each( function _nonName(d) {
-          if (dimensions[0] === d) {
-            d3.select(this)
-              .attr('transform', `translate(${  leftDim  })`);
-          }
-        });
+      d3.selectAll('.dimension').each(function _nonName(d) {
+        if (dimensions[0] === d) {
+          d3.select(this).attr('transform', `translate(${leftDim})`);
+        }
+      });
     },
   },
 };
 </script>
 
-<style lang='less' scroped>
+<style lang="less" scroped>
 svg {
   font: sans-serif;
 }
diff --git a/webapp/src/views/visual/Visual/hyperparms/Hyperparms.vue b/webapp/src/views/visual/Visual/hyperparms/Hyperparms.vue
index 6f6a75d..fc1f829 100644
--- a/webapp/src/views/visual/Visual/hyperparms/Hyperparms.vue
+++ b/webapp/src/views/visual/Visual/hyperparms/Hyperparms.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="temp">
@@ -25,7 +25,11 @@
 import { createNamespacedHelpers } from 'vuex';
 import HyperPara from './HyperPara';
 
-const { mapActions: maphyperparmActions, mapGetters: maphyperparmGetters, mapMutations: maphyperparmMutations } = createNamespacedHelpers('Visual/hyperparm');
+const {
+  mapActions: maphyperparmActions,
+  mapGetters: maphyperparmGetters,
+  mapMutations: maphyperparmMutations,
+} = createNamespacedHelpers('Visual/hyperparm');
 const { mapState: mapLayoutStates } = createNamespacedHelpers('Visual/layout');
 export default {
   components: {
diff --git a/webapp/src/views/visual/Visual/hyperparms/HyperparmsPanel.vue b/webapp/src/views/visual/Visual/hyperparms/HyperparmsPanel.vue
index 2ebe64b..af70926 100644
--- a/webapp/src/views/visual/Visual/hyperparms/HyperparmsPanel.vue
+++ b/webapp/src/views/visual/Visual/hyperparms/HyperparmsPanel.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="temp">
@@ -27,7 +27,12 @@
             <div class="hypPanelSelect">
               <span>主参数：</span>
               <el-select v-model="selected" placeholder="请选择">
-                <el-option v-for="(item, index) in getMainParams" :key="index" :label="item" :value="item" />
+                <el-option
+                  v-for="(item, index) in getMainParams"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
               </el-select>
             </div>
             <div>
@@ -35,11 +40,31 @@
               <el-row>
                 <div v-for="(item, index) in getAxisParms" :key="index">
                   <div class="hypScale">
-                    <el-col :span="8"><div>{{ item }}:</div></el-col>
-                    <el-col :span="8"><div><el-radio v-model="getAxisType[item]" label="linear" @change="changeData('linear', item)">Linear</el-radio></div></el-col>
-                    <el-col :span="8"><div><el-radio v-model="getAxisType[item]" label="log" @change="changeData('log', item)">Log</el-radio></div></el-col>
+                    <el-col :span="8"
+                      ><div>{{ item }}:</div></el-col
+                    >
+                    <el-col :span="8"
+                      ><div>
+                        <el-radio
+                          v-model="getAxisType[item]"
+                          label="linear"
+                          @change="changeData('linear', item)"
+                          >Linear</el-radio
+                        >
+                      </div></el-col
+                    >
+                    <el-col :span="8"
+                      ><div>
+                        <el-radio
+                          v-model="getAxisType[item]"
+                          label="log"
+                          @change="changeData('log', item)"
+                          >Log</el-radio
+                        >
+                      </div></el-col
+                    >
                   </div>
-                  <br>
+                  <br />
                 </div>
               </el-row>
             </div>
@@ -54,7 +79,7 @@
         </div>
         <div v-show="!panelShow" class="infoContent infoItem">暂无信息</div>
         <div v-show="panelShow" class="infoContent hypTable">
-          <el-table :data="localSelectedDatas" :header-cell-style="{color:'rgb(96, 97, 174)'}">
+          <el-table :data="localSelectedDatas" :header-cell-style="{ color: 'rgb(96, 97, 174)' }">
             <el-table-column
               v-for="(item, index) in localKeys"
               :key="index"
@@ -93,7 +118,10 @@
 import { createNamespacedHelpers } from 'vuex';
 import * as d3 from 'd3';
 
-const { mapMutations: mapHyperparmMutations, mapGetters: mapHyperparmGatters } = createNamespacedHelpers('Visual/hyperparm');
+const {
+  mapMutations: mapHyperparmMutations,
+  mapGetters: mapHyperparmGatters,
+} = createNamespacedHelpers('Visual/hyperparm');
 export default {
   data() {
     return {
@@ -110,7 +138,17 @@ export default {
     };
   },
   computed: {
-    ...mapHyperparmGatters(['getAllData', 'getSelected', 'getFocusData', 'getGlobalSelectedDatas', 'getAxisType', 'getHypEmpty', 'getKey', 'getAxisParms', 'getMainParams']),
+    ...mapHyperparmGatters([
+      'getAllData',
+      'getSelected',
+      'getFocusData',
+      'getGlobalSelectedDatas',
+      'getAxisType',
+      'getHypEmpty',
+      'getKey',
+      'getAxisParms',
+      'getMainParams',
+    ]),
   },
   watch: {
     getHypEmpty(val) {
@@ -155,15 +193,21 @@ export default {
       const calcItems = this.getMainParams;
       const format = d3.format('.2f');
       let res = [];
-      calcItems.forEach( (d) => {
-        const maxData = d3.max(data, (i) => { return +i[d]; });
-        const minData = d3.min(data, (i) => { return +i[d]; });
-        const meanData = d3.mean(data, (i) => { return +i[d]; });
+      calcItems.forEach((d) => {
+        const maxData = d3.max(data, (i) => {
+          return +i[d];
+        });
+        const minData = d3.min(data, (i) => {
+          return +i[d];
+        });
+        const meanData = d3.mean(data, (i) => {
+          return +i[d];
+        });
         const temp = {
-          'Items': d,
-          'Min': format(minData),
-          'Mean': format(meanData),
-          'Max': format(maxData),
+          Items: d,
+          Min: format(minData),
+          Mean: format(meanData),
+          Max: format(maxData),
         };
         res.push(temp);
       });
@@ -301,9 +345,8 @@ export default {
   color: #9492cb;
 }
 
-/deep/ .information [class*=" el-icon-"],
-[class^=el-icon-] {
+/deep/ .information [class*=' el-icon-'],
+[class^='el-icon-'] {
   font-weight: 900;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/visual/Visual/hyperparms/index.js b/webapp/src/views/visual/Visual/hyperparms/index.js
index fc7b5a1..b5dd4a2 100644
--- a/webapp/src/views/visual/Visual/hyperparms/index.js
+++ b/webapp/src/views/visual/Visual/hyperparms/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as Hyperparms } from './Hyperparms';
 export { default as HyperparmsPanel } from './HyperparmsPanel';
diff --git a/webapp/src/views/visual/Visual/medias/Medias.vue b/webapp/src/views/visual/Visual/medias/Medias.vue
index 3b48a28..1d81a7a 100644
--- a/webapp/src/views/visual/Visual/medias/Medias.vue
+++ b/webapp/src/views/visual/Visual/medias/Medias.vue
@@ -1,55 +1,61 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <style lang="less" scoped>
-  .medias {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    background-color: white;
-  }
+.medias {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background-color: white;
+}
 
-  .testDiv {
-    height: 97.5%;
-    margin: 1% 1% 0 1%;
-    overflow-y: auto;
-    background-color: white;
-    border-radius: 5px 5px 0 0;
-  }
+.testDiv {
+  height: 97.5%;
+  margin: 1% 1% 0 1%;
+  overflow-y: auto;
+  background-color: white;
+  border-radius: 5px 5px 0 0;
+}
 
-  .display-panel {
-    min-width: 400px;
-    height: 97.5%;
-    margin: 1% 1% 0 1%;
-    overflow-y: auto;
-    background-color: white;
-    border-radius: 5px 5px 0 0;
-    box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
-  }
+.display-panel {
+  min-width: 400px;
+  height: 97.5%;
+  margin: 1% 1% 0 1%;
+  overflow-y: auto;
+  background-color: white;
+  border-radius: 5px 5px 0 0;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
+}
 
-  .content {
-    margin-bottom: 0.5%;
-  }
+.content {
+  margin-bottom: 0.5%;
+}
 </style>
 <template>
   <div>
     <div class="medias">
       <div :class="['display-panel']">
         <div v-for="(value, name, index) in totaltag" :key="index">
-          <component :is="type[name]" :value="value" :subname="name" :index="index" class="content" />
+          <component
+            :is="type[name]"
+            :value="value"
+            :subname="name"
+            :index="index"
+            class="content"
+          />
         </div>
       </div>
     </div>
@@ -61,20 +67,24 @@ import { images } from './image';
 import { audios } from './audio';
 import { texts } from './text';
 
+const { mapMutations: mapCustomMutations } = createNamespacedHelpers('Visual/custom');
 const {
-  mapMutations: mapCustomMutations,
-} = createNamespacedHelpers('Visual/custom');
-const { mapGetters: mapMediaGetters, mapMutations: mapMediaMutations, mapActions: mapMediaActions } = createNamespacedHelpers('Visual/media');
+  mapGetters: mapMediaGetters,
+  mapMutations: mapMediaMutations,
+  mapActions: mapMediaActions,
+} = createNamespacedHelpers('Visual/media');
 export default {
   components: {
-    images, audios, texts,
+    images,
+    audios,
+    texts,
   },
   data() {
     return {
       type: {
-        'audio': 'audios',
-        'image': 'images',
-        'text': 'texts',
+        audio: 'audios',
+        image: 'images',
+        text: 'texts',
       },
       data: [],
       totaltag: '',
@@ -85,12 +95,7 @@ export default {
     next();
   },
   computed: {
-    ...mapMediaGetters([
-      'categoryInfo',
-      'getTotaltag',
-      'getFreshInfo',
-      'getErrorMessage',
-    ]),
+    ...mapMediaGetters(['categoryInfo', 'getTotaltag', 'getFreshInfo', 'getErrorMessage']),
   },
   watch: {
     categoryInfo() {
@@ -113,9 +118,7 @@ export default {
   methods: {
     ...mapCustomMutations(['setRouter']),
     ...mapMediaMutations(['setTotaltag']),
-    ...mapMediaActions([
-      'getData',
-    ]),
+    ...mapMediaActions(['getData']),
     settotaltag() {
       if (this.categoryInfo === '') {
         return;
@@ -123,9 +126,9 @@ export default {
       this.data = [].concat(JSON.parse(JSON.stringify(this.categoryInfo)));
       this.totaltag = {};
       let param = {};
-      for (let i = 0; i < this.data[1].length; i+=1) {
+      for (let i = 0; i < this.data[1].length; i += 1) {
         param = JSON.parse(JSON.stringify(this.data[1][i]));
-        for (let j = 0; j < Object.keys(param).length; j+=1) {
+        for (let j = 0; j < Object.keys(param).length; j += 1) {
           if (this.totaltag[Object.keys(param)[j]] === undefined) {
             this.totaltag[Object.keys(param)[j]] = [];
           }
diff --git a/webapp/src/views/visual/Visual/medias/MediasPanel.vue b/webapp/src/views/visual/Visual/medias/MediasPanel.vue
index 1c6769b..c342874 100644
--- a/webapp/src/views/visual/Visual/medias/MediasPanel.vue
+++ b/webapp/src/views/visual/Visual/medias/MediasPanel.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="mediaspanel">
@@ -35,65 +35,66 @@
 <script>
 import { createNamespacedHelpers } from 'vuex';
 // eslint-disable-next-line no-unused-vars
-const { mapMutations: mapMediaMutations, mapGetters: mapMediaGetters } = createNamespacedHelpers('media');
-export default {
-};
+const { mapMutations: mapMediaMutations, mapGetters: mapMediaGetters } = createNamespacedHelpers(
+  'media'
+);
+export default {};
 </script>
 
 <style lang="less" scoped>
-  .typeselect {
-    height: 30%;
-  }
+.typeselect {
+  height: 30%;
+}
 
-  select {
-    width: 70%;
-    height: 30%;
-    margin-top: 20%;
-  }
+select {
+  width: 70%;
+  height: 30%;
+  margin-top: 20%;
+}
 
-  .panel {
-    /deep/ .el-card {
-      margin: 3.5% 5% 4% 0%;
-      border-top: 0;
-    }
+.panel {
+  /deep/ .el-card {
+    margin: 3.5% 5% 4% 0%;
+    border-top: 0;
+  }
 
-    /deep/ .el-card__body {
-      padding: 0;
-      border-radius: 0 0 3px 3px;
-    }
+  /deep/ .el-card__body {
+    padding: 0;
+    border-radius: 0 0 3px 3px;
+  }
 
-    .info {
-      .infoTitle {
-        span {
-          font-size: 12px;
-        }
+  .info {
+    .infoTitle {
+      span {
+        font-size: 12px;
+      }
 
-        padding: 2% 2% 2% 5%;
-        color: white;
-        text-align: left;
-        background-color: #625eb3;
-        border-bottom: 1px solid #8f8ad7;
+      padding: 2% 2% 2% 5%;
+      color: white;
+      text-align: left;
+      background-color: #625eb3;
+      border-bottom: 1px solid #8f8ad7;
 
-        .iconfont {
-          margin-right: 7px;
-          font-size: 12px;
-          font-style: normal;
-          -webkit-font-smoothing: antialiased;
-          -moz-osx-font-smoothing: grayscale;
-        }
+      .iconfont {
+        margin-right: 7px;
+        font-size: 12px;
+        font-style: normal;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
       }
     }
+  }
 
-    /deep/ .infoContent {
-      div {
-        padding: 2% 5% 5% 5%;
-      }
+  /deep/ .infoContent {
+    div {
+      padding: 2% 5% 5% 5%;
+    }
 
-      .infoItem {
-        margin-top: 5%;
-        font-size: 11px;
-        text-align: left;
-      }
+    .infoItem {
+      margin-top: 5%;
+      font-size: 11px;
+      text-align: left;
     }
   }
+}
 </style>
diff --git a/webapp/src/views/visual/Visual/medias/audio/Audios.vue b/webapp/src/views/visual/Visual/medias/audio/Audios.vue
index 1fd270b..0ce2d92 100644
--- a/webapp/src/views/visual/Visual/medias/audio/Audios.vue
+++ b/webapp/src/views/visual/Visual/medias/audio/Audios.vue
@@ -1,23 +1,23 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="audioscontainer">
-    <div :class="['audios-title', showFlag?'titleStyle':'']" @click="showContent()">
-      <div :class="[showFlag?'sub':'sub1']">
+    <div :class="['audios-title', showFlag ? 'titleStyle' : '']" @click="showContent()">
+      <div :class="[showFlag ? 'sub' : 'sub1']">
         <div class="my-label">
           <div class="my-text"><span>音频</span></div>
           <div class="circle-father"><div class="circle" /></div>
@@ -27,13 +27,13 @@
         </div>
       </div>
       <div class="line1" />
-      <div :class="['line2', showFlag?'linestyle':'']" />
+      <div :class="['line2', showFlag ? 'linestyle' : '']" />
     </div>
-    <div :class="[showFlag?'showClass':'']">
+    <div :class="[showFlag ? 'showClass' : '']">
       <div class="audioscontent">
         <el-row :gutter="20">
           <audio-container
-            v-for="(item,i) in detailData[subname]"
+            v-for="(item, i) in detailData[subname]"
             v-show="showrun[item.run]"
             :key="item.index"
             :content="item"
@@ -50,7 +50,11 @@
 import { createNamespacedHelpers } from 'vuex';
 import { audioContainer } from './audioContainer';
 
-const { mapGetters: mapMediaGetters, mapActions: mapMediaActions, mapMutations: mapMediaMutations } = createNamespacedHelpers('Visual/media');
+const {
+  mapGetters: mapMediaGetters,
+  mapActions: mapMediaActions,
+  mapMutations: mapMediaMutations,
+} = createNamespacedHelpers('Visual/media');
 const { mapState: mapLayoutStates } = createNamespacedHelpers('Visual/layout');
 export default {
   components: {
@@ -68,12 +72,8 @@ export default {
     };
   },
   computed: {
-    ...mapMediaGetters([
-      'detailData', 'categoryInfo', 'showrun', 'getShowFlag',
-    ]),
-    ...mapLayoutStates([
-      'userSelectRunFile',
-    ]),
+    ...mapMediaGetters(['detailData', 'categoryInfo', 'showrun', 'getShowFlag']),
+    ...mapLayoutStates(['userSelectRunFile']),
   },
   watch: {
     userSelectRunFile(val) {
@@ -89,25 +89,21 @@ export default {
   },
   created() {
     this.setshowrun(this.userSelectRunFile);
-    if (this.index === 0  && this.getShowFlag.firstTime) {
+    if (this.index === 0 && this.getShowFlag.firstTime) {
       this.showFlag = false;
       this.setFreshInfo([this.subname, false]);
       this.getData([this.subname, this.value]);
       this.setShowFlag(['firstTime', false]);
     }
     if (!this.getShowFlag.firstTime) {
-      if (typeof (this.getShowFlag[this.subname]) !== 'undefined') {
+      if (typeof this.getShowFlag[this.subname] !== 'undefined') {
         this.showFlag = this.getShowFlag[this.subname];
       }
     }
   },
   methods: {
-    ...mapMediaActions([
-      'getData',
-    ]),
-    ...mapMediaMutations([
-      'setDetailData', 'setshowrun', 'setFreshInfo', 'setShowFlag',
-    ]),
+    ...mapMediaActions(['getData']),
+    ...mapMediaMutations(['setDetailData', 'setshowrun', 'setFreshInfo', 'setShowFlag']),
     showContent() {
       if (this.showFlag) {
         this.showFlag = false;
@@ -125,134 +121,134 @@ export default {
 </script>
 
 <style lang="less" scoped>
-    .my-label {
-      display: flex;
-      width: 100%;
-      cursor: pointer;
-
-      .triangle {
-        position: absolute;
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        border-color: transparent transparent   transparent #7f7cc1;
-        border-style: dashed  dashed  dashed solid;
-        border-top-width: 15px;
-        border-right-width: 18px;
-        border-bottom-width: 15px;
-        border-left-width: 18px;
-      }
-
-      .triangle-father {
-        position: relative;
-      }
-
-      .circle-father {
-        position: relative;
-        width: 15%;
-        height: 30px;
-        background-color: #7f7cc1;
-      }
-
-      .circle {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 8px;
-        height: 8px;
-        background-color: white;
-        border-radius: 50%;
-        transform: translateX(-50%) translateY(-50%);
-      }
-
-      .my-text {
-        width: 70%;
-        height: 30px;
-        text-align: center;
-        vertical-align: center;
-        background-color: #7f7cc1;
-      }
-
-      span {
-        align-items: center;
-        line-height: 30px;
-        color: white;
-      }
-    }
-
-    .audioscontainer {
-      .audios-title {
-        display: flex;
-        align-items: center;
-        height: auto;
-        color: white;
-        background-color: white;
-
-        span {
-          font-weight: 700;
-          // margin-left: 29%;
-          line-height: 30px;
-        }
-      }
-    }
-
-    .audioscontent {
-      padding: 2%;
-    }
-
-    .showClass {
-      display: none;
-    }
-
-    .sub .triangle {
-      border-color: transparent transparent   transparent #b8c6ff;
-    }
-
-    .sub .circle-father {
-      background-color: #b8c6ff;
-    }
-
-    .sub .my-text {
-      background-color: #b8c6ff;
-    }
-
-    .sub {
-      display: flex;
-      align-items: center;
-      width: 9.5%;
-      height: 30px;
-      font-family: sans-serif;
-      font-size: 12px;
-      color: #fff;
-      // background: url(../../../assets/tag2.png);
-      // background: deeppink; b8c6ff
-      background-size: 100% 100%;
-    }
-
-    .sub1 {
-      display: flex;
-      align-items: center;
-      width: 9.5%;
-      height: 30px;
-      font-family: sans-serif;
-      font-size: 12px;
-      color: #fff;
-      background-size: 100% 100%;
-    }
-
-    .line1 {
-      width: 88%;
-      height: 1px;
-      background-color: #f4f6ff;
-    }
-
-    .line2 {
-      width: 2.5%;
-      height: 5px;
-      background-color: #625eb3;
-    }
-
-    .linestyle {
-      background-color: #b9c6ff;
+.my-label {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+
+  .triangle {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    border-color: transparent transparent transparent #7f7cc1;
+    border-style: dashed dashed dashed solid;
+    border-top-width: 15px;
+    border-right-width: 18px;
+    border-bottom-width: 15px;
+    border-left-width: 18px;
+  }
+
+  .triangle-father {
+    position: relative;
+  }
+
+  .circle-father {
+    position: relative;
+    width: 15%;
+    height: 30px;
+    background-color: #7f7cc1;
+  }
+
+  .circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    background-color: white;
+    border-radius: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+
+  .my-text {
+    width: 70%;
+    height: 30px;
+    text-align: center;
+    vertical-align: center;
+    background-color: #7f7cc1;
+  }
+
+  span {
+    align-items: center;
+    line-height: 30px;
+    color: white;
+  }
+}
+
+.audioscontainer {
+  .audios-title {
+    display: flex;
+    align-items: center;
+    height: auto;
+    color: white;
+    background-color: white;
+
+    span {
+      font-weight: 700;
+      // margin-left: 29%;
+      line-height: 30px;
     }
+  }
+}
+
+.audioscontent {
+  padding: 2%;
+}
+
+.showClass {
+  display: none;
+}
+
+.sub .triangle {
+  border-color: transparent transparent transparent #b8c6ff;
+}
+
+.sub .circle-father {
+  background-color: #b8c6ff;
+}
+
+.sub .my-text {
+  background-color: #b8c6ff;
+}
+
+.sub {
+  display: flex;
+  align-items: center;
+  width: 9.5%;
+  height: 30px;
+  font-family: sans-serif;
+  font-size: 12px;
+  color: #fff;
+  // background: url(../../../assets/tag2.png);
+  // background: deeppink; b8c6ff
+  background-size: 100% 100%;
+}
+
+.sub1 {
+  display: flex;
+  align-items: center;
+  width: 9.5%;
+  height: 30px;
+  font-family: sans-serif;
+  font-size: 12px;
+  color: #fff;
+  background-size: 100% 100%;
+}
+
+.line1 {
+  width: 88%;
+  height: 1px;
+  background-color: #f4f6ff;
+}
+
+.line2 {
+  width: 2.5%;
+  height: 5px;
+  background-color: #625eb3;
+}
+
+.linestyle {
+  background-color: #b9c6ff;
+}
 </style>
diff --git a/webapp/src/views/visual/Visual/medias/audio/audioContainer/AudioContainer.vue b/webapp/src/views/visual/Visual/medias/audio/audioContainer/AudioContainer.vue
index 063ee4e..f8069a6 100644
--- a/webapp/src/views/visual/Visual/medias/audio/audioContainer/AudioContainer.vue
+++ b/webapp/src/views/visual/Visual/medias/audio/audioContainer/AudioContainer.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="audiocontainer">
@@ -20,35 +20,52 @@
       <el-card class="box-card">
         <el-row>
           <el-col :span="6"><el-tag class="top">RUN</el-tag></el-col>
-          <el-col :span="16" class="center"><span>{{ content.run }}</span></el-col>
+          <el-col :span="16" class="center"
+            ><span>{{ content.run }}</span></el-col
+          >
           <el-col :span="2" class="center">
             <div class="leftItem">
-              <el-tooltip class="item" effect="dark" content="勾选后，点击定制按钮会跳转到用户定制界面" placement="top">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="勾选后，点击定制按钮会跳转到用户定制界面"
+                placement="top"
+              >
                 <el-checkbox v-if="parentComponent" v-model="checked" @change="ischeckedLocal" />
               </el-tooltip>
-              <span v-if="!parentComponent" @click="ischecked"><i class="close-i el-icon-circle-close" /></span>
+              <span v-if="!parentComponent" @click="ischecked"
+                ><i class="close-i el-icon-circle-close"
+              /></span>
             </div>
           </el-col>
         </el-row>
         <el-divider />
         <el-row>
           <el-col :span="6"><el-tag class="top">TAG</el-tag></el-col>
-          <el-col :span="18" class="center"><span>{{ Object.keys(content.value)[0] }}</span></el-col>
+          <el-col :span="18" class="center"
+            ><span>{{ Object.keys(content.value)[0] }}</span></el-col
+          >
         </el-row>
         <el-divider />
         <el-row>
           <el-col :span="6"><el-tag class="bottom">STEP</el-tag></el-col>
-          <el-col :span="18" class="center"><span>{{ audiocontent[scrollvalue].step }}</span></el-col>
+          <el-col :span="18" class="center"
+            ><span>{{ audiocontent[scrollvalue].step }}</span></el-col
+          >
         </el-row>
         <el-divider />
         <el-row>
           <el-col :span="6"><el-tag class="bottom">WALL_TIME</el-tag></el-col>
-          <el-col :span="18" class="center"><span>{{ normalTime }}</span></el-col>
+          <el-col :span="18" class="center"
+            ><span>{{ normalTime }}</span></el-col
+          >
         </el-row>
         <el-divider />
         <el-row>
           <el-col :span="6"><el-tag class="bottom">LABEL</el-tag></el-col>
-          <el-col :span="18" class="center"><span>{{ audiocontent[scrollvalue].label }}</span></el-col>
+          <el-col :span="18" class="center"
+            ><span>{{ audiocontent[scrollvalue].label }}</span></el-col
+          >
         </el-row>
       </el-card>
 
@@ -57,7 +74,7 @@
         <el-slider
           v-model="scrollvalue"
           :max="audiocontent.length - 1"
-          :disabled="audiocontent.length - 1===0"
+          :disabled="audiocontent.length - 1 === 0"
           class="slider"
         />
       </div>
@@ -71,14 +88,11 @@ import { getAudioRaw } from '@/api/visual';
 import { unixTimestamp2Normal } from '@/utils';
 import customAudio from './CustomAudio';
 
-const {
-  mapMutations: mapCustomMutations,
-  mapGetters: mapCustomGetters,
-} = createNamespacedHelpers('Visual/custom');
+const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers(
+  'Visual/custom'
+);
 const { mapGetters: mapLayoutGetters } = createNamespacedHelpers('Visual/layout');
-const {
-  mapMutations: mapMediaMutations,
-} = createNamespacedHelpers('Visual/media');
+const { mapMutations: mapMediaMutations } = createNamespacedHelpers('Visual/media');
 export default {
   components: {
     customAudio,
@@ -111,15 +125,14 @@ export default {
         tag: Object.keys(this.content.value)[0],
         trainJobName: this.getParams.trainJobName,
       };
-      await getAudioRaw(params)
-        .then(res => {
-          this.audiourl = res;
-        });
+      await getAudioRaw(params).then((res) => {
+        this.audiourl = res;
+      });
     },
   },
   mounted() {
-    const paramStringIndex = `${this.content.run  }/${  Object.keys(this.content.value)[0]}`;
-    for (let i = 0; i < this.getAudio.length; i+=1) {
+    const paramStringIndex = `${this.content.run}/${Object.keys(this.content.value)[0]}`;
+    for (let i = 0; i < this.getAudio.length; i += 1) {
       if (paramStringIndex === this.getAudio[i].stringIndex) {
         this.checked = true;
         break;
@@ -135,10 +148,9 @@ export default {
       tag: Object.keys(this.content.value)[0],
       trainJobName: this.getParams.trainJobName,
     };
-    await getAudioRaw(params)
-      .then(res => {
-        this.audiourl = res;
-      });
+    await getAudioRaw(params).then((res) => {
+      this.audiourl = res;
+    });
   },
   methods: {
     ...mapCustomMutations(['setAudioData']),
@@ -170,137 +182,137 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .audiocontainer {
-    width: 100%;
-    height: 100%;
-    background-color: rgb(255, 255, 255);
+.audiocontainer {
+  width: 100%;
+  height: 100%;
+  background-color: rgb(255, 255, 255);
+}
+
+.audiocontent {
+  width: 100%;
+  height: 20%;
+  margin-top: 20px;
+}
+
+audio {
+  width: 100%;
+}
+
+.close-i {
+  font-size: 19px;
+}
+
+.el-col {
+  margin-bottom: 20px;
+}
+
+/deep/ .box-card {
+  width: 100%;
+  height: 100%;
+  text-align: left;
+
+  .el-divider--horizontal {
+    margin: 6px 0;
   }
 
-  .audiocontent {
-    width: 100%;
-    height: 20%;
-    margin-top: 20px;
+  .top {
+    font-size: 9px;
+    color: #66cbd7;
+    background-color: #e5fcff;
+    border-color: #e5fcff;
   }
 
-  audio {
-    width: 100%;
+  .bottom {
+    font-size: 9px;
+    color: #48d994;
+    background-color: #def8fb;
+    border-color: #def8fb;
   }
 
-  .close-i {
-    font-size: 19px;
+  .center {
+    align-items: center;
+    font-size: 10px;
+    color: #333;
+    vertical-align: middle;
   }
 
-  .el-col {
-    margin-bottom: 20px;
+  span {
+    height: 30px;
+    font-weight: bold;
+    line-height: 30px;
   }
 
-  /deep/ .box-card {
-    width: 100%;
-    height: 100%;
-    text-align: left;
-
-    .el-divider--horizontal {
-      margin: 6px 0;
-    }
-
-    .top {
-      font-size: 9px;
-      color: #66cbd7;
-      background-color: #e5fcff;
-      border-color: #e5fcff;
-    }
-
-    .bottom {
-      font-size: 9px;
-      color: #48d994;
-      background-color: #def8fb;
-      border-color: #def8fb;
-    }
-
-    .center {
-      align-items: center;
-      font-size: 10px;
-      color: #333;
-      vertical-align: middle;
-    }
-
-    span {
-      height: 30px;
-      font-weight: bold;
-      line-height: 30px;
-    }
-
-    .el-row {
-      margin-bottom: 0;
-    }
-
-    .el-col {
-      margin-bottom: 0;
-    }
+  .el-row {
+    margin-bottom: 0;
   }
 
-  .leftItem {
-    margin-right: 1%;
-    margin-left: auto;
-
-    /deep/ .checked {
-      width: 20px;
-      height: 20px;
-    }
-
-    /deep/ .el-checkbox__inner {
-      font-size: 20px;
-    }
-
-    /deep/ .el-checkbox__inner:hover {
-      border-color: #8f8bd9;
-    }
-
-    /deep/ .el-checkbox {
-      font-size: 20px;
-    }
-
-    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
-      background-color: #8f8bd9;
-      border-color: #8f8bd9;
-    }
+  .el-col {
+    margin-bottom: 0;
+  }
+}
 
-    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after {
-      border-color: #fff;
-    }
+.leftItem {
+  margin-right: 1%;
+  margin-left: auto;
 
-    /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
-      border-color: gray;
-    }
+  /deep/ .checked {
+    width: 20px;
+    height: 20px;
+  }
 
-    /deep/ .el-checkbox__input span {
-      height: 14px !important;
-    }
+  /deep/ .el-checkbox__inner {
+    font-size: 20px;
   }
 
-  .audiotext {
-    margin-left: 2%;
-    text-align: left;
+  /deep/ .el-checkbox__inner:hover {
+    border-color: #8f8bd9;
   }
 
-  .button {
-    align-self: flex-start;
+  /deep/ .el-checkbox {
+    font-size: 20px;
   }
 
-  p {
-    font-size: 10px;
+  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #8f8bd9;
+    border-color: #8f8bd9;
   }
 
-  /deep/ .el-slider__runway {
-    width: 95%;
-    margin: 16px auto;
+  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after {
+    border-color: #fff;
   }
 
-  /deep/ .el-slider__button {
-    border-color: #625eb3;
+  /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
+    border-color: gray;
   }
 
-  /deep/ .el-slider__bar {
-    background-color: #625eb3;
+  /deep/ .el-checkbox__input span {
+    height: 14px !important;
   }
+}
+
+.audiotext {
+  margin-left: 2%;
+  text-align: left;
+}
+
+.button {
+  align-self: flex-start;
+}
+
+p {
+  font-size: 10px;
+}
+
+/deep/ .el-slider__runway {
+  width: 95%;
+  margin: 16px auto;
+}
+
+/deep/ .el-slider__button {
+  border-color: #625eb3;
+}
+
+/deep/ .el-slider__bar {
+  background-color: #625eb3;
+}
 </style>
diff --git a/webapp/src/views/visual/Visual/medias/audio/audioContainer/CustomAudio.vue b/webapp/src/views/visual/Visual/medias/audio/audioContainer/CustomAudio.vue
index 324a437..8573c18 100644
--- a/webapp/src/views/visual/Visual/medias/audio/audioContainer/CustomAudio.vue
+++ b/webapp/src/views/visual/Visual/medias/audio/audioContainer/CustomAudio.vue
@@ -1,6 +1,4 @@
-/**
-* Modified from https://segmentfault.com/a/1190000012453975
-*/
+/** * Modified from https://segmentfault.com/a/1190000012453975 */
 <template>
   <div v-loading="audioStruct.waiting" class="di main-wrap">
     <audio
@@ -21,14 +19,18 @@
           <el-col :span="2">
             <el-button
               type="primary"
-              :icon="audioStruct.playing ?'iconfont icon-zanting':'iconfont icon-ziyuan74'"
+              :icon="audioStruct.playing ? 'iconfont icon-zanting' : 'iconfont icon-ziyuan74'"
               size="medium"
               class="playButton"
               @click="playPause"
             />
           </el-col>
           <el-col :span="6" class="hidden-md-and-down">
-            <span type="info" class="timeInfo">{{ audioStruct.curTime | formatSecond }}/{{ audioStruct.maxTime | formatSecond }}</span>
+            <span type="info" class="timeInfo"
+              >{{ audioStruct.curTime | formatSecond }}/{{
+                audioStruct.maxTime | formatSecond
+              }}</span
+            >
           </el-col>
           <el-col :span="13" class="hidden-sm-and-down">
             <el-slider
@@ -73,7 +75,7 @@ function formatSeconds(second) {
     second = parseInt(second, 10);
     const mimute = Math.floor(second / 60);
     second -= mimute * 60;
-    return `${(`0${mimute}`).slice(-2)}:${(`0${second}`).slice(-2)}`;
+    return `${`0${mimute}`.slice(-2)}:${`0${second}`.slice(-2)}`;
   }
   return '00:00';
 }
@@ -122,8 +124,8 @@ export default {
         }),
         mode: 'cors',
       })
-        .then(res => res.blob())
-        .then(blob => {
+        .then((res) => res.blob())
+        .then((blob) => {
           const blobUrl = window.URL.createObjectURL(blob);
           this.download(blobUrl, filename);
           window.URL.revokeObjectURL(blobUrl);
@@ -142,7 +144,7 @@ export default {
       this.audioStruct.muted = this.$refs.myAudio.muted;
     },
     timeLineToolTip(index = 0) {
-      index = parseInt(this.audioStruct.maxTime / 100 * index, 10);
+      index = parseInt((this.audioStruct.maxTime / 100) * index, 10);
       return formatSeconds(index);
     },
     changeVolume(index = 0) {
@@ -150,7 +152,7 @@ export default {
       this.volume = index;
     },
     changeCurTime(index) {
-      this.$refs.myAudio.currentTime  = parseInt(index / 100 * this.audioStruct.maxTime, 10);
+      this.$refs.myAudio.currentTime = parseInt((index / 100) * this.audioStruct.maxTime, 10);
     },
     playPause() {
       return this.audioStruct.playing ? this.pPlay() : this.sPlay();
@@ -173,7 +175,7 @@ export default {
     },
     timeUpdate(val) {
       this.audioStruct.curTime = val.target.currentTime;
-      this.sliderTime = parseInt(this.audioStruct.curTime / this.audioStruct.maxTime * 100, 10);
+      this.sliderTime = parseInt((this.audioStruct.curTime / this.audioStruct.maxTime) * 100, 10);
     },
     loadAudioData(val) {
       this.audioStruct.waiting = false;
@@ -184,99 +186,99 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .audioSlider {
-    padding-left: 3px;
-  }
+.audioSlider {
+  padding-left: 3px;
+}
 
-  .di {
-    display: block;
-  }
+.di {
+  display: block;
+}
 
-  .download {
-    float: left;
-    color: #8f8ad7;
-  }
+.download {
+  float: left;
+  color: #8f8ad7;
+}
 
-  .shadow {
-    display: none;
-  }
+.shadow {
+  display: none;
+}
 
-  /deep/ .el-button {
-    padding-top: 4px;
-    padding-right: 0;
-    padding-left: 0;
-  }
+/deep/ .el-button {
+  padding-top: 4px;
+  padding-right: 0;
+  padding-left: 0;
+}
 
-  .el-button--primary {
-    font-size: 20px;
-    color: #8f8ad7;
-    background-color: white;
-    border: #8f8ad7;
-  }
+.el-button--primary {
+  font-size: 20px;
+  color: #8f8ad7;
+  background-color: white;
+  border: #8f8ad7;
+}
 
-  .row-bg {
-    align-items: center;
-  }
+.row-bg {
+  align-items: center;
+}
 
-  .mainAudio {
-    width: 100%;
-  }
+.mainAudio {
+  width: 100%;
+}
+
+/deep/ .iconfont {
+  color: #8f8ad7;
+}
 
+.light {
   /deep/ .iconfont {
     color: #8f8ad7;
   }
+}
 
-  .light {
-    /deep/ .iconfont {
-      color: #8f8ad7;
-    }
+.gray {
+  /deep/ .iconfont {
+    color: gray;
   }
+}
 
-  .gray {
-    /deep/ .iconfont {
-      color: gray;
-    }
-  }
+/deep/ .playButton {
+  float: right;
+}
 
-  /deep/ .playButton {
-    float: right;
+/deep/ .myCard {
+  .timeInfo {
+    font-size: 9px;
   }
 
-  /deep/ .myCard {
-    .timeInfo {
-      font-size: 9px;
-    }
-
-    .el-slider__button {
-      border-color: #8f8ad7;
-    }
-
-    .el-button--primary:active {
-      background-color: white;
-    }
-
-    .el-button--primary:hover,
-    .el-button--primary:focus {
-      background-color: white;
-    }
-
-    .el-slider__bar {
-      background-color: #8f8ad7;
-    }
+  .el-slider__button {
+    border-color: #8f8ad7;
+  }
 
-    .el-card__body {
-      padding: 0;
-    }
+  .el-button--primary:active {
+    background-color: white;
+  }
 
-    margin-right: 1%;
-    border-radius: 30px;
+  .el-button--primary:hover,
+  .el-button--primary:focus {
+    background-color: white;
   }
 
-  /deep/ .el-icon-bottom {
-    color: #8f8ad7;
+  .el-slider__bar {
+    background-color: #8f8ad7;
   }
 
-  .audioOut {
-    height: 30%;
+  .el-card__body {
+    padding: 0;
   }
+
+  margin-right: 1%;
+  border-radius: 30px;
+}
+
+/deep/ .el-icon-bottom {
+  color: #8f8ad7;
+}
+
+.audioOut {
+  height: 30%;
+}
 </style>
diff --git a/webapp/src/views/visual/Visual/medias/audio/audioContainer/index.js b/webapp/src/views/visual/Visual/medias/audio/audioContainer/index.js
index a37cae9..35493f8 100644
--- a/webapp/src/views/visual/Visual/medias/audio/audioContainer/index.js
+++ b/webapp/src/views/visual/Visual/medias/audio/audioContainer/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as audioContainer } from './AudioContainer';
 export { default as customAudio } from './CustomAudio';
diff --git a/webapp/src/views/visual/Visual/medias/audio/index.js b/webapp/src/views/visual/Visual/medias/audio/index.js
index dc69aaf..77ba7fd 100644
--- a/webapp/src/views/visual/Visual/medias/audio/index.js
+++ b/webapp/src/views/visual/Visual/medias/audio/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as audios } from './Audios';
diff --git a/webapp/src/views/visual/Visual/medias/image/Images.vue b/webapp/src/views/visual/Visual/medias/image/Images.vue
index 8e2d0b4..129b217 100644
--- a/webapp/src/views/visual/Visual/medias/image/Images.vue
+++ b/webapp/src/views/visual/Visual/medias/image/Images.vue
@@ -1,24 +1,23 @@
-
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="imagescontainer">
-    <div :class="['images-title', showFlag?'titleStyle':'']" @click="showContent()">
-      <div :class="[showFlag?'sub':'sub1']">
+    <div :class="['images-title', showFlag ? 'titleStyle' : '']" @click="showContent()">
+      <div :class="[showFlag ? 'sub' : 'sub1']">
         <div class="my-label">
           <div class="my-text"><span>图像</span></div>
           <div class="circle-father"><div class="circle" /></div>
@@ -28,9 +27,9 @@
         </div>
       </div>
       <div class="line1" />
-      <div :class="['line2', showFlag?'linestyle':'']" />
+      <div :class="['line2', showFlag ? 'linestyle' : '']" />
     </div>
-    <div :class="[showFlag?'showClass':'']">
+    <div :class="[showFlag ? 'showClass' : '']">
       <div class="imagescontent">
         <el-row :gutter="20">
           <image-container
@@ -49,7 +48,11 @@
 import { createNamespacedHelpers } from 'vuex';
 import { ImageContainer } from './imagecontainer';
 
-const { mapGetters: mapMediaGetters, mapActions: mapMediaActions, mapMutations: mapMediaMutations } = createNamespacedHelpers('Visual/media');
+const {
+  mapGetters: mapMediaGetters,
+  mapActions: mapMediaActions,
+  mapMutations: mapMediaMutations,
+} = createNamespacedHelpers('Visual/media');
 const { mapState: mapLayoutStates } = createNamespacedHelpers('Visual/layout');
 export default {
   components: {
@@ -67,12 +70,8 @@ export default {
     };
   },
   computed: {
-    ...mapMediaGetters([
-      'detailData', 'categoryInfo', 'showrun', 'getShowFlag',
-    ]),
-    ...mapLayoutStates([
-      'userSelectRunFile',
-    ]),
+    ...mapMediaGetters(['detailData', 'categoryInfo', 'showrun', 'getShowFlag']),
+    ...mapLayoutStates(['userSelectRunFile']),
   },
   watch: {
     userSelectRunFile(val) {
@@ -95,18 +94,14 @@ export default {
       this.setShowFlag(['firstTime', false]);
     }
     if (!this.getShowFlag.firstTime) {
-      if (typeof (this.getShowFlag[this.subname]) !== 'undefined') {
+      if (typeof this.getShowFlag[this.subname] !== 'undefined') {
         this.showFlag = this.getShowFlag[this.subname];
       }
     }
   },
   methods: {
-    ...mapMediaActions([
-      'getData',
-    ]),
-    ...mapMediaMutations([
-      'setDetailData', 'setshowrun', 'setFreshInfo', 'setShowFlag',
-    ]),
+    ...mapMediaActions(['getData']),
+    ...mapMediaMutations(['setDetailData', 'setshowrun', 'setFreshInfo', 'setShowFlag']),
     showContent() {
       if (this.showFlag) {
         this.showFlag = false;
@@ -123,132 +118,132 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-    .my-label {
-      display: flex;
-      width: 100%;
-      cursor: pointer;
-
-      .triangle {
-        position: absolute;
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        border-color: transparent transparent   transparent #7f7cc1;
-        border-style: dashed  dashed  dashed solid;
-        border-top-width: 15px;
-        border-right-width: 18px;
-        border-bottom-width: 15px;
-        border-left-width: 18px;
-      }
-
-      .triangle-father {
-        position: relative;
-      }
-
-      .circle-father {
-        position: relative;
-        width: 15%;
-        height: 30px;
-        background-color: #7f7cc1;
-      }
-
-      .circle {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 8px;
-        height: 8px;
-        background-color: white;
-        border-radius: 50%;
-        transform: translateX(-50%) translateY(-50%);
-      }
-
-      .my-text {
-        width: 70%;
-        height: 30px;
-        text-align: center;
-        vertical-align: center;
-        background-color: #7f7cc1;
-      }
-
-      span {
-        align-items: center;
-        line-height: 30px;
-        color: white;
-      }
-    }
-
-    .imagescontainer {
-      .images-title {
-        display: flex;
-        align-items: center;
-        height: auto;
-        color: white;
-        background-color: white;
-
-        span {
-          font-weight: 700;
-          // margin-left: 29%;
-          line-height: 30px;
-        }
-      }
-    }
-
-    .imagescontent {
-      padding: 2%;
-    }
-
-    .showClass {
-      display: none;
-    }
-
-    .sub .triangle {
-      border-color: transparent transparent   transparent #b8c6ff;
-    }
-
-    .sub .circle-father {
-      background-color: #b8c6ff;
-    }
-
-    .sub .my-text {
-      background-color: #b8c6ff;
-    }
-
-    .sub {
-      display: flex;
-      align-items: center;
-      width: 9.5%;
-      height: 30px;
-      font-size: 12px;
-      color: #fff;
-      // background: deeppink;
-      background-size: 100% 100%;
-    }
-
-    .sub1 {
-      display: flex;
-      align-items: center;
-      width: 9.5%;
-      height: 30px;
-      font-size: 12px;
-      color: #fff;
-      // background: deeppink;
-      background-size: 100% 100%;
-    }
-
-    .line1 {
-      width: 88%;
-      height: 1px;
-      background-color: #f4f6ff;
-    }
-
-    .line2 {
-      width: 2.5%;
-      height: 5px;
-      background-color: #625eb3;
-    }
-
-    .linestyle {
-      background-color: #b9c6ff;
+.my-label {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+
+  .triangle {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    border-color: transparent transparent transparent #7f7cc1;
+    border-style: dashed dashed dashed solid;
+    border-top-width: 15px;
+    border-right-width: 18px;
+    border-bottom-width: 15px;
+    border-left-width: 18px;
+  }
+
+  .triangle-father {
+    position: relative;
+  }
+
+  .circle-father {
+    position: relative;
+    width: 15%;
+    height: 30px;
+    background-color: #7f7cc1;
+  }
+
+  .circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    background-color: white;
+    border-radius: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+
+  .my-text {
+    width: 70%;
+    height: 30px;
+    text-align: center;
+    vertical-align: center;
+    background-color: #7f7cc1;
+  }
+
+  span {
+    align-items: center;
+    line-height: 30px;
+    color: white;
+  }
+}
+
+.imagescontainer {
+  .images-title {
+    display: flex;
+    align-items: center;
+    height: auto;
+    color: white;
+    background-color: white;
+
+    span {
+      font-weight: 700;
+      // margin-left: 29%;
+      line-height: 30px;
     }
- </style>
+  }
+}
+
+.imagescontent {
+  padding: 2%;
+}
+
+.showClass {
+  display: none;
+}
+
+.sub .triangle {
+  border-color: transparent transparent transparent #b8c6ff;
+}
+
+.sub .circle-father {
+  background-color: #b8c6ff;
+}
+
+.sub .my-text {
+  background-color: #b8c6ff;
+}
+
+.sub {
+  display: flex;
+  align-items: center;
+  width: 9.5%;
+  height: 30px;
+  font-size: 12px;
+  color: #fff;
+  // background: deeppink;
+  background-size: 100% 100%;
+}
+
+.sub1 {
+  display: flex;
+  align-items: center;
+  width: 9.5%;
+  height: 30px;
+  font-size: 12px;
+  color: #fff;
+  // background: deeppink;
+  background-size: 100% 100%;
+}
+
+.line1 {
+  width: 88%;
+  height: 1px;
+  background-color: #f4f6ff;
+}
+
+.line2 {
+  width: 2.5%;
+  height: 5px;
+  background-color: #625eb3;
+}
+
+.linestyle {
+  background-color: #b9c6ff;
+}
+</style>
diff --git a/webapp/src/views/visual/Visual/medias/image/imagecontainer/ImageContainer.vue b/webapp/src/views/visual/Visual/medias/image/imagecontainer/ImageContainer.vue
index bc45c20..02a3bb6 100644
--- a/webapp/src/views/visual/Visual/medias/image/imagecontainer/ImageContainer.vue
+++ b/webapp/src/views/visual/Visual/medias/image/imagecontainer/ImageContainer.vue
@@ -1,146 +1,146 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <style lang="less" scoped>
-    /deep/ .el-icon-circle-close {
-      color: white;
-    }
+/deep/ .el-icon-circle-close {
+  color: white;
+}
 
-    .el-col {
-      margin-bottom: 20px;
-    }
+.el-col {
+  margin-bottom: 20px;
+}
 
-    .imagecontainer {
-      width: 100%;
-      height: 100%;
-      background-color: rgb(255, 255, 255);
+.imagecontainer {
+  width: 100%;
+  height: 100%;
+  background-color: rgb(255, 255, 255);
 
-      /deep/ .el-slider__runway {
-        width: 95%;
-        margin: 16px auto;
-      }
+  /deep/ .el-slider__runway {
+    width: 95%;
+    margin: 16px auto;
+  }
 
-      /deep/ .el-slider__button {
-        border-color: #625eb3;
-      }
+  /deep/ .el-slider__button {
+    border-color: #625eb3;
+  }
 
-      /deep/ .el-slider__bar {
-        background-color: #625eb3;
-      }
-    }
+  /deep/ .el-slider__bar {
+    background-color: #625eb3;
+  }
+}
 
-    .imagecontent {
-      width: 100%;
-      height: auto;
-    }
+.imagecontent {
+  width: 100%;
+  height: auto;
+}
 
-    .scroll {
-      width: 100%;
-      height: auto;
-    }
+.scroll {
+  width: 100%;
+  height: auto;
+}
 
-    /deep/ .el-image {
-      width: 100%;
-      height: auto;
-    }
+/deep/ .el-image {
+  width: 100%;
+  height: auto;
+}
 
-    /deep/ .el-image__preview {
-      width: 100%;
-      height: 400px;
-    }
+/deep/ .el-image__preview {
+  width: 100%;
+  height: 400px;
+}
 
-    /deep/ .el-image-viewer__img {
-      height: 100%;
-    }
+/deep/ .el-image-viewer__img {
+  height: 100%;
+}
 
-    .titleRight {
-      right: 1%;
-      float: right;
+.titleRight {
+  right: 1%;
+  float: right;
 
-      .iconfont {
-        font-size: 12px;
-      }
-    }
+  .iconfont {
+    font-size: 12px;
+  }
+}
 
-    .leftItem {
-      margin-right: 1%;
-      margin-left: auto;
+.leftItem {
+  margin-right: 1%;
+  margin-left: auto;
 
-      /deep/ .checked {
-        width: 20px;
-        height: 20px;
-      }
+  /deep/ .checked {
+    width: 20px;
+    height: 20px;
+  }
 
-      /deep/ .el-checkbox__inner {
-        font-size: 20px;
-      }
+  /deep/ .el-checkbox__inner {
+    font-size: 20px;
+  }
 
-      /deep/ .el-checkbox__inner:hover {
-        border-color: #8f8bd9;
-      }
+  /deep/ .el-checkbox__inner:hover {
+    border-color: #8f8bd9;
+  }
 
-      /deep/ .el-checkbox {
-        font-size: 20px;
-      }
+  /deep/ .el-checkbox {
+    font-size: 20px;
+  }
 
-      /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
-        background-color: #8f8bd9;
-        border-color: #8f8bd9;
-      }
+  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #8f8bd9;
+    border-color: #8f8bd9;
+  }
 
-      /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
-        border-color: gray;
-      }
-    }
+  /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
+    border-color: gray;
+  }
+}
 
-    input {
-      width: 100%;
-      height: auto;
-    }
+input {
+  width: 100%;
+  height: auto;
+}
 
-    .temp {
-      padding: 2%;
-      background-color: #8f8bd8;
-    }
+.temp {
+  padding: 2%;
+  background-color: #8f8bd8;
+}
 
-    .image-container-title {
-      width: 100%;
-      height: auto;
-      font-size: 12px;
-      color: white;
-      background-color: #8f8bd8;
+.image-container-title {
+  width: 100%;
+  height: auto;
+  font-size: 12px;
+  color: white;
+  background-color: #8f8bd8;
 
-      /deep/ .el-col {
-        margin-bottom: 10px;
-      }
-    }
+  /deep/ .el-col {
+    margin-bottom: 10px;
+  }
+}
 
-    .imagetext {
-      margin-left: 1%;
-      text-align: left;
-    }
+.imagetext {
+  margin-left: 1%;
+  text-align: left;
+}
 
-    p {
-      font-size: 10px;
-    }
+p {
+  font-size: 10px;
+}
 
-    .checkedBox {
-      cursor: pointer;
-    }
-  </style>
+.checkedBox {
+  cursor: pointer;
+}
+</style>
 <template>
   <div class="imagecontainer">
     <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
@@ -154,17 +154,39 @@
             </el-col>
             <el-col :span="12">
               <div class="titleRight">
-                <el-tooltip class="item" effect="dark" content="勾选后，点击定制按钮会跳转到用户定制界面" placement="top">
-                  <span v-if="parentComponent" v-show="!checked" class="checkedBox" @click="ischeckedLocal()">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="勾选后，点击定制按钮会跳转到用户定制界面"
+                  placement="top"
+                >
+                  <span
+                    v-if="parentComponent"
+                    v-show="!checked"
+                    class="checkedBox"
+                    @click="ischeckedLocal()"
+                  >
                     <i class="iconfont icon-weixuanzhong1" />
                   </span>
                 </el-tooltip>
-                <el-tooltip class="item" effect="dark" content="勾选后，点击定制按钮会跳转到用户定制界面" placement="top">
-                  <span v-if="parentComponent" v-show="checked" class="checkedBox" @click="ischeckedLocal()">
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="勾选后，点击定制按钮会跳转到用户定制界面"
+                  placement="top"
+                >
+                  <span
+                    v-if="parentComponent"
+                    v-show="checked"
+                    class="checkedBox"
+                    @click="ischeckedLocal()"
+                  >
                     <i class="iconfont icon-xuanzhong1" />
                   </span>
                 </el-tooltip>
-                <span v-if="!parentComponent" class="checkedBox" @click="ischecked()"><i class="close-i el-icon-circle-close" /></span>
+                <span v-if="!parentComponent" class="checkedBox" @click="ischecked()"
+                  ><i class="close-i el-icon-circle-close"
+                /></span>
               </div>
             </el-col>
           </el-row>
@@ -186,15 +208,12 @@
       </div>
       <div class="imagecontent">
         <!-- <img :src="imgurl"> -->
-        <el-image
-          :src="imgurl"
-          :preview-src-list="[imgurl]"
-        />
+        <el-image :src="imgurl" :preview-src-list="[imgurl]" />
       </div>
       <el-slider
         v-model="scrollvalue"
         :max="imagecontent.length - 1"
-        :disabled="imagecontent.length - 1===0"
+        :disabled="imagecontent.length - 1 === 0"
         class="slider"
       />
     </el-col>
@@ -205,14 +224,11 @@ import 'element-ui/lib/theme-chalk/display.css';
 import { createNamespacedHelpers } from 'vuex';
 import { getImageRaw } from '@/api/visual';
 
-const {
-  mapMutations: mapCustomMutations,
-  mapGetters: mapCustomGetters,
-} = createNamespacedHelpers('Visual/custom');
+const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers(
+  'Visual/custom'
+);
 const { mapGetters: mapLayoutGetters } = createNamespacedHelpers('Visual/layout');
-const {
-  mapMutations: mapMediaMutations,
-} = createNamespacedHelpers('Visual/media');
+const { mapMutations: mapMediaMutations } = createNamespacedHelpers('Visual/media');
 export default {
   props: {
     content: Object,
@@ -240,10 +256,9 @@ export default {
         tag: Object.keys(this.content.value)[0],
         trainJobName: this.getParams.trainJobName,
       };
-      await getImageRaw(params)
-        .then(res => {
-          this.imgurl = res;
-        });
+      await getImageRaw(params).then((res) => {
+        this.imgurl = res;
+      });
     },
   },
   async created() {
@@ -254,14 +269,13 @@ export default {
       tag: Object.keys(this.content.value)[0],
       trainJobName: this.getParams.trainJobName,
     };
-    await getImageRaw(params)
-      .then(res => {
-        this.imgurl = res;
-      });
+    await getImageRaw(params).then((res) => {
+      this.imgurl = res;
+    });
   },
   mounted() {
-    const paramStringIndex = `${this.content.run  }/${  Object.keys(this.content.value)[0]}`;
-    for (let i = 0; i < this.getImage.length; i+=1) {
+    const paramStringIndex = `${this.content.run}/${Object.keys(this.content.value)[0]}`;
+    for (let i = 0; i < this.getImage.length; i += 1) {
       if (paramStringIndex === this.getImage[i].stringIndex) {
         this.checked = true;
         break;
@@ -295,6 +309,5 @@ export default {
       this.scaleLargeSmall = false;
     },
   },
-
 };
 </script>
diff --git a/webapp/src/views/visual/Visual/medias/image/imagecontainer/index.js b/webapp/src/views/visual/Visual/medias/image/imagecontainer/index.js
index 2f48f4e..4abf7d7 100644
--- a/webapp/src/views/visual/Visual/medias/image/imagecontainer/index.js
+++ b/webapp/src/views/visual/Visual/medias/image/imagecontainer/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as ImageContainer } from './ImageContainer';
diff --git a/webapp/src/views/visual/Visual/medias/image/index.js b/webapp/src/views/visual/Visual/medias/image/index.js
index f206dbe..074219f 100644
--- a/webapp/src/views/visual/Visual/medias/image/index.js
+++ b/webapp/src/views/visual/Visual/medias/image/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as images } from './Images';
diff --git a/webapp/src/views/visual/Visual/medias/index.js b/webapp/src/views/visual/Visual/medias/index.js
index 7d24f4a..821cc0c 100644
--- a/webapp/src/views/visual/Visual/medias/index.js
+++ b/webapp/src/views/visual/Visual/medias/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as Medias } from './Medias';
 export { default as MediasPanel } from './MediasPanel';
diff --git a/webapp/src/views/visual/Visual/medias/text/Texts.vue b/webapp/src/views/visual/Visual/medias/text/Texts.vue
index 19917d3..1bcdf3f 100644
--- a/webapp/src/views/visual/Visual/medias/text/Texts.vue
+++ b/webapp/src/views/visual/Visual/medias/text/Texts.vue
@@ -1,23 +1,23 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="textscontainer">
-    <div :class="['texts-title', showFlag?'titleStyle':'']" @click="showContent()">
-      <div :class="[showFlag?'sub':'sub1']">
+    <div :class="['texts-title', showFlag ? 'titleStyle' : '']" @click="showContent()">
+      <div :class="[showFlag ? 'sub' : 'sub1']">
         <div class="my-label">
           <div class="my-text"><span>文本</span></div>
           <div class="circle-father"><div class="circle" /></div>
@@ -27,9 +27,9 @@
         </div>
       </div>
       <div class="line1" />
-      <div :class="['line2', showFlag?'linestyle':'']" />
+      <div :class="['line2', showFlag ? 'linestyle' : '']" />
     </div>
-    <div :class="[showFlag?'showClass':'']">
+    <div :class="[showFlag ? 'showClass' : '']">
       <div class="textscontent">
         <el-row :gutter="20">
           <textContainer
@@ -49,7 +49,11 @@
 import { createNamespacedHelpers } from 'vuex';
 import { textContainer } from './textContainer';
 
-const { mapGetters: mapMediaGetters, mapActions: mapMediaActions, mapMutations: mapMediaMutations } = createNamespacedHelpers('Visual/media');
+const {
+  mapGetters: mapMediaGetters,
+  mapActions: mapMediaActions,
+  mapMutations: mapMediaMutations,
+} = createNamespacedHelpers('Visual/media');
 const { mapState: mapLayoutStates } = createNamespacedHelpers('Visual/layout');
 export default {
   components: {
@@ -67,12 +71,8 @@ export default {
     };
   },
   computed: {
-    ...mapMediaGetters([
-      'detailData', 'categoryInfo', 'showrun', 'getShowFlag',
-    ]),
-    ...mapLayoutStates([
-      'userSelectRunFile',
-    ]),
+    ...mapMediaGetters(['detailData', 'categoryInfo', 'showrun', 'getShowFlag']),
+    ...mapLayoutStates(['userSelectRunFile']),
   },
   watch: {
     userSelectRunFile(val) {
@@ -96,18 +96,14 @@ export default {
       this.setShowFlag(['firstTime', false]);
     }
     if (!this.getShowFlag.firstTime) {
-      if (typeof (this.getShowFlag[this.subname]) !== 'undefined') {
+      if (typeof this.getShowFlag[this.subname] !== 'undefined') {
         this.showFlag = this.getShowFlag[this.subname];
       }
     }
   },
   methods: {
-    ...mapMediaActions([
-      'getData',
-    ]),
-    ...mapMediaMutations([
-    'setDetailData', 'setshowrun', 'setFreshInfo', 'setShowFlag',
-    ]),
+    ...mapMediaActions(['getData']),
+    ...mapMediaMutations(['setDetailData', 'setshowrun', 'setFreshInfo', 'setShowFlag']),
     showContent() {
       if (this.showFlag) {
         this.showFlag = false;
@@ -125,130 +121,130 @@ export default {
 </script>
 
 <style lang="less" scoped>
-    .my-label {
-      display: flex;
-      width: 100%;
-      cursor: pointer;
-
-      .triangle {
-        position: absolute;
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        border-color: transparent transparent   transparent #7f7cc1;
-        border-style: dashed  dashed  dashed solid;
-        border-top-width: 15px;
-        border-right-width: 18px;
-        border-bottom-width: 15px;
-        border-left-width: 18px;
-      }
-
-      .triangle-father {
-        position: relative;
-      }
-
-      .circle-father {
-        position: relative;
-        width: 15%;
-        height: 30px;
-        background-color: #7f7cc1;
-      }
-
-      .circle {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 8px;
-        height: 8px;
-        background-color: white;
-        border-radius: 50%;
-        transform: translateX(-50%) translateY(-50%);
-      }
-
-      .my-text {
-        width: 70%;
-        height: 30px;
-        text-align: center;
-        vertical-align: center;
-        background-color: #7f7cc1;
-      }
-
-      span {
-        align-items: center;
-        line-height: 30px;
-        color: white;
-      }
-    }
-
-    .textscontainer {
-      .texts-title {
-        display: flex;
-        align-items: center;
-        height: auto;
-        color: white;
-        background-color: white;
-
-        span {
-          font-weight: 700;
-          // margin-left: 29%;
-          line-height: 30px;
-        }
-      }
-    }
-
-    .textscontent {
-      padding: 2%;
-    }
-
-    .showClass {
-      display: none;
-    }
-
-    .sub .triangle {
-      border-color: transparent transparent   transparent #b8c6ff;
-    }
-
-    .sub .circle-father {
-      background-color: #b8c6ff;
-    }
-
-    .sub .my-text {
-      background-color: #b8c6ff;
-    }
-
-    .sub {
-      display: flex;
-      align-items: center;
-      width: 9.5%;
-      height: 30px;
-      font-size: 12px;
-      color: #fff;
-      background-size: 100% 100%;
-    }
-
-    .sub1 {
-      display: flex;
-      align-items: center;
-      width: 9.5%;
-      height: 30px;
-      font-size: 12px;
-      color: #fff;
-      background-size: 100% 100%;
-    }
-
-    .line1 {
-      width: 88%;
-      height: 1px;
-      background-color: #f4f6ff;
-    }
-
-    .line2 {
-      width: 2.5%;
-      height: 5px;
-      background-color: #625eb3;
-    }
-
-    .linestyle {
-      background-color: #b9c6ff;
+.my-label {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+
+  .triangle {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    border-color: transparent transparent transparent #7f7cc1;
+    border-style: dashed dashed dashed solid;
+    border-top-width: 15px;
+    border-right-width: 18px;
+    border-bottom-width: 15px;
+    border-left-width: 18px;
+  }
+
+  .triangle-father {
+    position: relative;
+  }
+
+  .circle-father {
+    position: relative;
+    width: 15%;
+    height: 30px;
+    background-color: #7f7cc1;
+  }
+
+  .circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    background-color: white;
+    border-radius: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+
+  .my-text {
+    width: 70%;
+    height: 30px;
+    text-align: center;
+    vertical-align: center;
+    background-color: #7f7cc1;
+  }
+
+  span {
+    align-items: center;
+    line-height: 30px;
+    color: white;
+  }
+}
+
+.textscontainer {
+  .texts-title {
+    display: flex;
+    align-items: center;
+    height: auto;
+    color: white;
+    background-color: white;
+
+    span {
+      font-weight: 700;
+      // margin-left: 29%;
+      line-height: 30px;
     }
+  }
+}
+
+.textscontent {
+  padding: 2%;
+}
+
+.showClass {
+  display: none;
+}
+
+.sub .triangle {
+  border-color: transparent transparent transparent #b8c6ff;
+}
+
+.sub .circle-father {
+  background-color: #b8c6ff;
+}
+
+.sub .my-text {
+  background-color: #b8c6ff;
+}
+
+.sub {
+  display: flex;
+  align-items: center;
+  width: 9.5%;
+  height: 30px;
+  font-size: 12px;
+  color: #fff;
+  background-size: 100% 100%;
+}
+
+.sub1 {
+  display: flex;
+  align-items: center;
+  width: 9.5%;
+  height: 30px;
+  font-size: 12px;
+  color: #fff;
+  background-size: 100% 100%;
+}
+
+.line1 {
+  width: 88%;
+  height: 1px;
+  background-color: #f4f6ff;
+}
+
+.line2 {
+  width: 2.5%;
+  height: 5px;
+  background-color: #625eb3;
+}
+
+.linestyle {
+  background-color: #b9c6ff;
+}
 </style>
diff --git a/webapp/src/views/visual/Visual/medias/text/index.js b/webapp/src/views/visual/Visual/medias/text/index.js
index 2b98478..eb2eaa7 100644
--- a/webapp/src/views/visual/Visual/medias/text/index.js
+++ b/webapp/src/views/visual/Visual/medias/text/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as texts } from './Texts';
diff --git a/webapp/src/views/visual/Visual/medias/text/textContainer/TextContainer.vue b/webapp/src/views/visual/Visual/medias/text/textContainer/TextContainer.vue
index 2952bd8..a8d1a10 100644
--- a/webapp/src/views/visual/Visual/medias/text/textContainer/TextContainer.vue
+++ b/webapp/src/views/visual/Visual/medias/text/textContainer/TextContainer.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="textcontainer">
@@ -20,37 +20,52 @@
       <el-card class="box-card">
         <el-row>
           <el-col :span="6"><el-tag class="top">RUN</el-tag></el-col>
-          <el-col :span="16" class="center"><span>{{ content.run }}</span></el-col>
+          <el-col :span="16" class="center"
+            ><span>{{ content.run }}</span></el-col
+          >
           <el-col :span="2" class="center">
             <div class="leftItem">
-              <el-tooltip class="item" effect="dark" content="勾选后，点击定制按钮会跳转到用户定制界面" placement="top">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="勾选后，点击定制按钮会跳转到用户定制界面"
+                placement="top"
+              >
                 <el-checkbox v-if="parentComponent" v-model="checked" @change="ischeckedLocal" />
               </el-tooltip>
-              <span v-if="!parentComponent" @click="ischecked"><i class="close-i el-icon-circle-close" /></span>
+              <span v-if="!parentComponent" @click="ischecked"
+                ><i class="close-i el-icon-circle-close"
+              /></span>
             </div>
           </el-col>
         </el-row>
         <el-divider />
         <el-row>
           <el-col :span="6"><el-tag class="top">TAG</el-tag></el-col>
-          <el-col :span="18" class="center"><span>{{ Object.keys(content.value)[0] }}</span></el-col>
+          <el-col :span="18" class="center"
+            ><span>{{ Object.keys(content.value)[0] }}</span></el-col
+          >
         </el-row>
         <el-divider />
         <el-row>
           <el-col :span="6"><el-tag class="bottom">STEP</el-tag></el-col>
-          <el-col :span="18" class="center"><span>{{ textcontent[scrollvalue].step }}</span></el-col>
+          <el-col :span="18" class="center"
+            ><span>{{ textcontent[scrollvalue].step }}</span></el-col
+          >
         </el-row>
         <el-divider />
         <el-row>
           <el-col :span="6"><el-tag class="bottom">WALL_TIME</el-tag></el-col>
-          <el-col :span="18" class="center"><span>{{ normalTime }}</span></el-col>
+          <el-col :span="18" class="center"
+            ><span>{{ normalTime }}</span></el-col
+          >
         </el-row>
         <el-divider />
         <el-row>
           <el-col :span="6"><el-tag class="bottom">VALUE</el-tag></el-col>
           <el-col :span="18" class="center" style="height: 100px; overflow: scroll;">
             <div
-              v-for="(item,index) in textcontent[scrollvalue].value"
+              v-for="(item, index) in textcontent[scrollvalue].value"
               :key="index"
               class="my-label"
             >
@@ -68,7 +83,7 @@
         <el-slider
           v-model="scrollvalue"
           :max="textcontent.length - 1"
-          :disabled="textcontent.length - 1===0"
+          :disabled="textcontent.length - 1 === 0"
           :format-tooltip="formatTooltip"
         />
       </div>
@@ -77,14 +92,12 @@
 </template>
 
 <script>
-
 import { createNamespacedHelpers } from 'vuex';
 import { unixTimestamp2Normal } from '@/utils';
 
-const {
-  mapMutations: mapCustomMutations,
-  mapGetters: mapCustomGetters,
-} = createNamespacedHelpers('Visual/custom');
+const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers(
+  'Visual/custom'
+);
 export default {
   name: 'TextContainer',
   props: {
@@ -113,8 +126,8 @@ export default {
     this.scrollvalue = 0;
   },
   mounted() {
-    const paramStringIndex = `${this.content.run  }/${  Object.keys(this.content.value)[0]}`;
-    for (let i = 0; i < this.getText.length; i+=1) {
+    const paramStringIndex = `${this.content.run}/${Object.keys(this.content.value)[0]}`;
+    for (let i = 0; i < this.getText.length; i += 1) {
       if (paramStringIndex === this.getText[i].stringIndex) {
         this.checked = true;
         break;
@@ -155,175 +168,175 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .textcontainer {
-    width: 100%;
-    height: 100%;
-    background-color: rgb(255, 255, 255);
+.textcontainer {
+  width: 100%;
+  height: 100%;
+  background-color: rgb(255, 255, 255);
+}
+
+.textcontent {
+  width: 100%;
+  height: 20%;
+}
+
+.text-container-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(137, 194, 247);
+}
+
+p {
+  font-size: 18px;
+}
+
+.my-label {
+  display: flex;
+  width: 100%;
+
+  .circle-father {
+    position: relative;
+    width: 19.5px;
   }
 
-  .textcontent {
-    width: 100%;
-    height: 20%;
+  .circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    background-color: #7f7cc1;
+    border-radius: 50%;
+    transform: translateX(-50%) translateY(-50%);
   }
 
-  .text-container-title {
-    display: flex;
+  .my-text {
     align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(137, 194, 247);
+    width: 259.84px;
+    font-size: 10px;
+    vertical-align: middle;
+  }
+
+  span {
+    height: 25px;
+    line-height: 25px;
   }
 
   p {
-    font-size: 18px;
+    font-size: 10px;
   }
+}
 
-  .my-label {
-    display: flex;
-    width: 100%;
+.el-col {
+  margin-bottom: 20px;
+}
 
-    .circle-father {
-      position: relative;
-      width: 19.5px;
-    }
+/deep/ .box-card {
+  width: 100%;
+  height: 100%;
+  text-align: left;
 
-    .circle {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 8px;
-      height: 8px;
-      background-color: #7f7cc1;
-      border-radius: 50%;
-      transform: translateX(-50%) translateY(-50%);
-    }
+  .el-divider--horizontal {
+    margin: 6px 0;
+  }
 
-    .my-text {
-      align-items: center;
-      width: 259.84px;
-      font-size: 10px;
-      vertical-align: middle;
-    }
+  .top {
+    font-size: 9px;
+    color: #f18425;
+    background-color: #fff7ec;
+    border-color: #fff7ec;
+  }
 
-    span {
-      height: 25px;
-      line-height: 25px;
-    }
+  .bottom {
+    font-size: 9px;
+    color: #1363a0;
+    background-color: #e9ecff;
+    border-color: #e9ecff;
+  }
 
-    p {
-      font-size: 10px;
-    }
+  .center {
+    align-items: center;
+    font-size: 10px;
+    color: #333;
+    // justify-content: space-around;
+    vertical-align: middle;
+  }
+
+  span {
+    height: 30px;
+    font-weight: bold;
+    line-height: 30px;
+  }
+
+  .el-row {
+    margin-bottom: 0;
   }
 
   .el-col {
-    margin-bottom: 20px;
+    margin-bottom: 0;
   }
 
-  /deep/ .box-card {
-    width: 100%;
-    height: 100%;
-    text-align: left;
+  .leftItem {
+    margin-right: 1%;
+    margin-left: auto;
 
-    .el-divider--horizontal {
-      margin: 6px 0;
+    /deep/ .checked {
+      width: 20px;
+      height: 20px;
     }
 
-    .top {
-      font-size: 9px;
-      color: #f18425;
-      background-color: #fff7ec;
-      border-color: #fff7ec;
+    /deep/ .el-checkbox__inner {
+      font-size: 20px;
     }
 
-    .bottom {
-      font-size: 9px;
-      color: #1363a0;
-      background-color: #e9ecff;
-      border-color: #e9ecff;
+    /deep/ .el-checkbox__inner:hover {
+      border-color: #8f8bd9;
     }
 
-    .center {
-      align-items: center;
-      font-size: 10px;
-      color: #333;
-      // justify-content: space-around;
-      vertical-align: middle;
+    /deep/ .el-checkbox {
+      font-size: 20px;
     }
 
-    span {
-      height: 30px;
-      font-weight: bold;
-      line-height: 30px;
+    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
+      background-color: #8f8bd9;
+      border-color: #8f8bd9;
     }
 
-    .el-row {
-      margin-bottom: 0;
+    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after {
+      border-color: #fff;
     }
 
-    .el-col {
-      margin-bottom: 0;
+    /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
+      border-color: gray;
     }
 
-    .leftItem {
-      margin-right: 1%;
-      margin-left: auto;
-
-      /deep/ .checked {
-        width: 20px;
-        height: 20px;
-      }
-
-      /deep/ .el-checkbox__inner {
-        font-size: 20px;
-      }
-
-      /deep/ .el-checkbox__inner:hover {
-        border-color: #8f8bd9;
-      }
-
-      /deep/ .el-checkbox {
-        font-size: 20px;
-      }
-
-      /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
-        background-color: #8f8bd9;
-        border-color: #8f8bd9;
-      }
-
-      /deep/ .el-checkbox__input.is-checked .el-checkbox__inner::after {
-        border-color: #fff;
-      }
-
-      /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
-        border-color: gray;
-      }
-
-      /deep/ .el-checkbox__input span {
-        height: 14px !important;
-      }
+    /deep/ .el-checkbox__input span {
+      height: 14px !important;
     }
   }
+}
 
-  .close-i {
-    font-size: 19px;
-  }
+.close-i {
+  font-size: 19px;
+}
 
-  .texttext {
-    margin-left: 2%;
-    text-align: left;
-  }
+.texttext {
+  margin-left: 2%;
+  text-align: left;
+}
 
-  /deep/ .el-slider__runway {
-    width: 95%;
-    margin: 16px auto;
-  }
+/deep/ .el-slider__runway {
+  width: 95%;
+  margin: 16px auto;
+}
 
-  /deep/ .el-slider__button {
-    border-color: #625eb3;
-  }
+/deep/ .el-slider__button {
+  border-color: #625eb3;
+}
 
-  /deep/ .el-slider__bar {
-    background-color: #625eb3;
-  }
+/deep/ .el-slider__bar {
+  background-color: #625eb3;
+}
 </style>
diff --git a/webapp/src/views/visual/Visual/medias/text/textContainer/index.js b/webapp/src/views/visual/Visual/medias/text/textContainer/index.js
index 3fd5699..4eee2e8 100644
--- a/webapp/src/views/visual/Visual/medias/text/textContainer/index.js
+++ b/webapp/src/views/visual/Visual/medias/text/textContainer/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as textContainer } from './TextContainer';
diff --git a/webapp/src/views/visual/Visual/rocs/ROCs.vue b/webapp/src/views/visual/Visual/rocs/ROCs.vue
index 66705df..7eb2a16 100644
--- a/webapp/src/views/visual/Visual/rocs/ROCs.vue
+++ b/webapp/src/views/visual/Visual/rocs/ROCs.vue
@@ -1,26 +1,26 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <style lang="less" scoped>
-    .temp {
-      position: absolute;
-      width: 70%;
-      height: 96%;
-      overflow-y: auto;
-    }
+.temp {
+  position: absolute;
+  width: 70%;
+  height: 96%;
+  overflow-y: auto;
+}
 </style>
 <template>
   <div>
@@ -31,6 +31,6 @@
   </div>
 </template>
 <script>
-export default {
-};
-</script>>
+export default {};
+</script>
+>
diff --git a/webapp/src/views/visual/Visual/rocs/ROCsPanel.vue b/webapp/src/views/visual/Visual/rocs/ROCsPanel.vue
index 893cbe0..e840361 100644
--- a/webapp/src/views/visual/Visual/rocs/ROCsPanel.vue
+++ b/webapp/src/views/visual/Visual/rocs/ROCsPanel.vue
@@ -1,23 +1,23 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <style lang="less" scoped>
-  .temp {
-    height: 100px;
-  }
+.temp {
+  height: 100px;
+}
 </style>
 <template>
   <div class="temp">
@@ -25,6 +25,6 @@
   </div>
 </template>
 <script>
-export default {
-};
-</script>>
+export default {};
+</script>
+>
diff --git a/webapp/src/views/visual/Visual/rocs/index.js b/webapp/src/views/visual/Visual/rocs/index.js
index 158ce33..6f8681e 100644
--- a/webapp/src/views/visual/Visual/rocs/index.js
+++ b/webapp/src/views/visual/Visual/rocs/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as ROCs } from './ROCs';
 export { default as ROCsPanel } from './ROCsPanel';
diff --git a/webapp/src/views/visual/Visual/scalars/Scalars.vue b/webapp/src/views/visual/Visual/scalars/Scalars.vue
index a896619..d8cdc0f 100644
--- a/webapp/src/views/visual/Visual/scalars/Scalars.vue
+++ b/webapp/src/views/visual/Visual/scalars/Scalars.vue
@@ -1,24 +1,30 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
     <div class="scalars">
       <div class="display-panel">
-        <subScalars v-for="(value, name, index) in totaltag" :key="name" :subname="name" :value="value" :index="index" />
+        <subScalars
+          v-for="(value, name, index) in totaltag"
+          :key="name"
+          :subname="name"
+          :value="value"
+          :index="index"
+        />
       </div>
     </div>
   </div>
@@ -27,7 +33,11 @@
 import { createNamespacedHelpers } from 'vuex';
 import { subScalars } from './subscalar';
 
-const { mapGetters: mapScalarGetters, mapMutations: mapScalarMutations, mapActions: mapScalarActions } = createNamespacedHelpers('Visual/scalar');
+const {
+  mapGetters: mapScalarGetters,
+  mapMutations: mapScalarMutations,
+  mapActions: mapScalarActions,
+} = createNamespacedHelpers('Visual/scalar');
 export default {
   components: {
     subScalars,
@@ -40,9 +50,7 @@ export default {
     };
   },
   computed: {
-    ...mapScalarGetters([
-      'categoryInfo', 'getTotaltag', 'getErrorMessage', 'getFreshInfo',
-    ]),
+    ...mapScalarGetters(['categoryInfo', 'getTotaltag', 'getErrorMessage', 'getFreshInfo']),
   },
   watch: {
     categoryInfo() {
@@ -62,16 +70,10 @@ export default {
       this.settotaltag();
     }
   },
-  mounted() {
-
-  },
+  mounted() {},
   methods: {
-    ...mapScalarMutations([
-      'setTotaltag',
-    ]),
-    ...mapScalarActions([
-      'getData',
-    ]),
+    ...mapScalarMutations(['setTotaltag']),
+    ...mapScalarActions(['getData']),
     settotaltag() {
       if (this.categoryInfo === '') {
         return;
@@ -79,9 +81,9 @@ export default {
       this.data = [].concat(JSON.parse(JSON.stringify(this.categoryInfo)));
       this.totaltag = {};
       let param = {};
-      for (let i = 0; i < this.data[1].length; i+=1) {
+      for (let i = 0; i < this.data[1].length; i += 1) {
         param = JSON.parse(JSON.stringify(this.data[1][i]));
-        for (let j = 0; j < Object.keys(param).length; j+=1) {
+        for (let j = 0; j < Object.keys(param).length; j += 1) {
           if (this.totaltag[Object.keys(param)[j]] === undefined) {
             this.totaltag[Object.keys(param)[j]] = [];
           }
@@ -102,19 +104,19 @@ export default {
 </script>
 
 <style lang="less" scoped>
-    .scalars {
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-      background-color: white;
-    }
+.scalars {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background-color: white;
+}
 
-    .display-panel {
-      height: 97.5%;
-      margin: 1% 1% 0 1%;
-      overflow-y: auto;
-      background-color: white;
-      border-radius: 5px 5px 0 0;
-      box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
-    }
-</style>
\ No newline at end of file
+.display-panel {
+  height: 97.5%;
+  margin: 1% 1% 0 1%;
+  overflow-y: auto;
+  background-color: white;
+  border-radius: 5px 5px 0 0;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
+}
+</style>
diff --git a/webapp/src/views/visual/Visual/scalars/ScalarsPanel.vue b/webapp/src/views/visual/Visual/scalars/ScalarsPanel.vue
index 2a8baff..8e80052 100644
--- a/webapp/src/views/visual/Visual/scalars/ScalarsPanel.vue
+++ b/webapp/src/views/visual/Visual/scalars/ScalarsPanel.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="temp">
@@ -46,7 +46,9 @@
 <script>
 import { createNamespacedHelpers } from 'vuex';
 
-const { mapMutations: mapScalarMutations, mapGetters: mapScalarGetters } = createNamespacedHelpers('Visual/scalar');
+const { mapMutations: mapScalarMutations, mapGetters: mapScalarGetters } = createNamespacedHelpers(
+  'Visual/scalar'
+);
 const { mapMutations: mapCustomMutations } = createNamespacedHelpers('Visual/custom');
 export default {
   data() {
@@ -57,7 +59,12 @@ export default {
   },
   computed: {
     ...mapScalarGetters([
-      'categoryInfo', 'smoothvalue', 'yaxis', 'checkeditem', 'checkedorder', 'backednumber',
+      'categoryInfo',
+      'smoothvalue',
+      'yaxis',
+      'checkeditem',
+      'checkedorder',
+      'backednumber',
     ]),
     smooth: {
       get() {
@@ -76,25 +83,23 @@ export default {
       },
     },
   },
-  created() {
-  },
+  created() {},
   methods: {
-    ...mapScalarMutations([
-      'setsmoothvalue', 'setyaxis', 'merge', 'back',
-    ]),
-    ...mapCustomMutations([
-      'cleanScalar',
-    ]),
+    ...mapScalarMutations(['setsmoothvalue', 'setyaxis', 'merge', 'back']),
+    ...mapCustomMutations(['cleanScalar']),
     startmerge() {
       if (Object.keys(this.checkeditem).length > 2) {
         this.$alert('选择图表种类至多为两种', '警告', {
-          confirmButtonText: '确定' });
+          confirmButtonText: '确定',
+        });
       } else if (this.checkedorder.length > 6) {
         this.$alert('选择图表数量至多为六幅', '警告', {
-          confirmButtonText: '确定' });
+          confirmButtonText: '确定',
+        });
       } else if (this.checkedorder.length < 2) {
         this.$alert('请选择至少两幅图表', '提示', {
-          confirmButtonText: '确定' });
+          confirmButtonText: '确定',
+        });
       } else {
         this.merge();
       }
@@ -104,7 +109,8 @@ export default {
         this.back();
       } else {
         this.$alert('未选中可还原的图表', '提示', {
-          confirmButtonText: '确定' });
+          confirmButtonText: '确定',
+        });
       }
     },
   },
@@ -169,7 +175,7 @@ export default {
 
 .iconfont {
   margin-right: 7px;
-  font-family: "iconfont" !important;
+  font-family: 'iconfont' !important;
   font-size: 13px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -252,9 +258,8 @@ export default {
   color: #9492cb;
 }
 
-.information [class*=" el-icon-"],
-[class^=el-icon-] {
+.information [class*=' el-icon-'],
+[class^='el-icon-'] {
   font-weight: 900;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/visual/Visual/scalars/index.js b/webapp/src/views/visual/Visual/scalars/index.js
index ab54574..910e56c 100644
--- a/webapp/src/views/visual/Visual/scalars/index.js
+++ b/webapp/src/views/visual/Visual/scalars/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as Scalars } from './Scalars';
 export { default as ScalarsPanel } from './ScalarsPanel';
diff --git a/webapp/src/views/visual/Visual/scalars/scalarcontainer/ScalarContainer.vue b/webapp/src/views/visual/Visual/scalars/scalarcontainer/ScalarContainer.vue
index cf333dc..31c7fac 100644
--- a/webapp/src/views/visual/Visual/scalars/scalarcontainer/ScalarContainer.vue
+++ b/webapp/src/views/visual/Visual/scalars/scalarcontainer/ScalarContainer.vue
@@ -1,36 +1,45 @@
- /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div v-show="isshow[chartgrade]" class="scalarcontainer">
     <el-col :span="size">
       <el-card :body-style="{ padding: '0px' }" class="box-card">
-        <div :class="[scaleLargeSmall?'scalarContainerTitleLarge':'scalarContainerTitle']">
+        <div :class="[scaleLargeSmall ? 'scalarContainerTitleLarge' : 'scalarContainerTitle']">
           <div>
             <span class="tagShow">{{ info }}</span>
           </div>
           <div class="titleRight">
             <el-tooltip class="item" effect="dark" content="点击可放大此图表" placement="top">
-              <span class="scale" @click="sizebig()"><i class="iconfont icon-fangda" /></span>
+              <span class="scale" @click="sizebig()"><i class="iconfont icon-fangda"/></span>
             </el-tooltip>
             <el-tooltip class="item" effect="dark" content="点击可缩小此图表" placement="top">
-              <span class="scale" @click="sizesmall()"><i class="iconfont icon-suoxiao1" /></span>
+              <span class="scale" @click="sizesmall()"><i class="iconfont icon-suoxiao1"/></span>
             </el-tooltip>
-            <el-tooltip class="item" effect="dark" content="勾选图表参与合并，或选中后点击定制按钮会跳转到用户定制界面" placement="top">
-              <span class="scale"><i :class="['iconfont',chartchecked?'icon-xuanzhong1':'icon-weixuanzhong1']" @click="ischecked()" /></span>
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="勾选图表参与合并，或选中后点击定制按钮会跳转到用户定制界面"
+              placement="top"
+            >
+              <span class="scale"
+                ><i
+                  :class="['iconfont', chartchecked ? 'icon-xuanzhong1' : 'icon-weixuanzhong1']"
+                  @click="ischecked()"
+              /></span>
             </el-tooltip>
           </div>
         </div>
@@ -52,8 +61,12 @@
 import { createNamespacedHelpers } from 'vuex';
 import { Scalarchart } from './scalarchart';
 
-const { mapMutations: mapScalarMutations, mapGetters: mapScalarGetters } = createNamespacedHelpers('Visual/scalar');
-const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers('Visual/custom');
+const { mapMutations: mapScalarMutations, mapGetters: mapScalarGetters } = createNamespacedHelpers(
+  'Visual/scalar'
+);
+const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers(
+  'Visual/custom'
+);
 const { mapGetters: mapLayoutGetters } = createNamespacedHelpers('Visual/layout');
 export default {
   components: {
@@ -69,14 +82,14 @@ export default {
       size: 8,
       ytext: '',
       thisitem: {},
-      isshow: { 'main': true, 'subordinate': false, 'general': true, 'undefined': true },
+      isshow: { main: true, subordinate: false, general: true, undefined: true },
       start: false,
       end: false,
       chartchecked: false,
       chartgrade: 'general',
       info: '',
       id: '',
-      chartdata: { 'run': '', 'value': {}},
+      chartdata: { run: '', value: {} },
       classname: '',
       isaddmain: false,
     };
@@ -96,16 +109,17 @@ export default {
       'checked',
       'mergeditem',
     ]),
-    ...mapCustomGetters([
-      'getScalar',
-    ]),
-    ...mapLayoutGetters([
-      'setDownloadSvgClass',
-    ]),
+    ...mapCustomGetters(['getScalar']),
+    ...mapLayoutGetters(['setDownloadSvgClass']),
   },
   watch: {
     mergestep(val) {
-      if (val === this.checkedorder.length && val !== 0 && this.mergedorder[this.classname] === this.mergednumber && this.grade[this.classname] === 'main') {
+      if (
+        val === this.checkedorder.length &&
+        val !== 0 &&
+        this.mergedorder[this.classname] === this.mergednumber &&
+        this.grade[this.classname] === 'main'
+      ) {
         this.setdatainit();
       }
     },
@@ -118,7 +132,7 @@ export default {
           this.setmergestep();
           this.setchecked([this.classname, false]);
           this.deleteScalar(this.id);
-          this.deleteDownLoadArray(`#svg${  this.classname}`);
+          this.deleteDownLoadArray(`#svg${this.classname}`);
           this.setDownloadSvgClass.scalar = this.getDownLoadArray;
           this.chartchecked = this.checked[this.classname];
         } else if (this.classname === this.checkedorder[0]) {
@@ -128,7 +142,7 @@ export default {
           this.deleteScalar(this.id);
           this.start = val;
           this.setchecked([this.classname, false]);
-          this.deleteDownLoadArray(`#svg${  this.classname}`);
+          this.deleteDownLoadArray(`#svg${this.classname}`);
           this.setDownloadSvgClass.scalar = this.getDownLoadArray;
           this.chartchecked = this.checked[this.classname];
         }
@@ -139,7 +153,7 @@ export default {
         if (this.grade[this.classname] === 'main') {
           this.end = val;
           this.reducemergeditem(this.classname);
-          this.deleteDownLoadArray(`#svg${  this.classname}`);
+          this.deleteDownLoadArray(`#svg${this.classname}`);
           this.setDownloadSvgClass.scalar = this.getDownLoadArray;
         }
         this.setgrade([this.classname, 'general']);
@@ -162,14 +176,18 @@ export default {
     } else {
       this.chartdata.value = this.content.value;
     }
-    this.id = `${this.chartdata.run  } ${  Object.keys(this.chartdata.value)[0]}`;
+    this.id = `${this.chartdata.run} ${Object.keys(this.chartdata.value)[0]}`;
     this.info = this.id;
     if (this.info.length > 20) {
-      this.info = `${this.info.slice(0, 17)  }...`;
+      this.info = `${this.info.slice(0, 17)}...`;
     }
     const arr = Object.keys(this.chartdata.value)[0].split('/');
     this.ytext = arr[arr.length - 1];
-    this.classname = this.chartdata.run.replace(/\//g, '').replace(/\./g, '') + Object.keys(this.chartdata.value)[0].replace(/\//g, '').replace(/\./g, '');
+    this.classname =
+      this.chartdata.run.replace(/\//g, '').replace(/\./g, '') +
+      Object.keys(this.chartdata.value)[0]
+        .replace(/\//g, '')
+        .replace(/\./g, '');
     this.thisitem.run = this.chartdata.run;
     const foo = Object.keys(this.chartdata.value)[0];
     this.thisitem.tag = foo;
@@ -205,9 +223,7 @@ export default {
       'setchecked',
       'reducemergeditem',
     ]),
-    ...mapCustomMutations([
-      'setScalar', 'deleteScalar',
-    ]),
+    ...mapCustomMutations(['setScalar', 'deleteScalar']),
     sizebig() {
       this.size = 24;
       this.info = this.id;
@@ -217,14 +233,14 @@ export default {
       this.size = 8;
       this.scaleLargeSmall = false;
       if (this.info.length > 20) {
-        this.info = `${this.info.slice(0, 17)  }...`;
+        this.info = `${this.info.slice(0, 17)}...`;
       }
     },
     ischecked() {
       if (this.checked[this.classname]) {
         this.setchecked([this.classname, false]);
         this.chartchecked = this.checked[this.classname];
-        this.deleteDownLoadArray(`#svg${  this.classname}`);
+        this.deleteDownLoadArray(`#svg${this.classname}`);
         this.setDownloadSvgClass.scalar = this.getDownLoadArray;
         if (this.grade[this.classname] === 'general') {
           this.deleteScalar(this.id);
@@ -239,7 +255,7 @@ export default {
         this.chartchecked = this.checked[this.classname];
         this.start = false;
         this.end = false;
-        this.setDownLoadArray(`#svg${  this.classname}`);
+        this.setDownLoadArray(`#svg${this.classname}`);
         this.setDownloadSvgClass.scalar = this.getDownLoadArray;
         if (this.grade[this.classname] === 'general') {
           this.setScalar([this.id, this.content]);
@@ -256,50 +272,50 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .scalarcontainer {
-    width: 100%;
-    height: 100%;
-    background-color: white;
-  }
+.scalarcontainer {
+  width: 100%;
+  height: 100%;
+  background-color: white;
+}
 
-  .scalarContainerTitle,
-  .scalarContainerTitleLarge {
-    display: flex;
-    height: 30px;
-    padding: 0% 2% 0 2%;
-    line-height: 30px;
-    color: white;
-    text-align: left;
-    background-color: #9fa5fa;
-    border-radius: 2px;
+.scalarContainerTitle,
+.scalarContainerTitleLarge {
+  display: flex;
+  height: 30px;
+  padding: 0% 2% 0 2%;
+  line-height: 30px;
+  color: white;
+  text-align: left;
+  background-color: #9fa5fa;
+  border-radius: 2px;
 
-    .scale:hover {
-      cursor: pointer;
-    }
+  .scale:hover {
+    cursor: pointer;
+  }
 
-    .titleRight {
-      margin-right: 1%;
-      margin-left: auto;
-    }
+  .titleRight {
+    margin-right: 1%;
+    margin-left: auto;
   }
+}
 
-  .scalarContainerTitle {
-    font-size: 11px;
+.scalarContainerTitle {
+  font-size: 11px;
 
-    .iconfont {
-      font-size: 11px;
-    }
+  .iconfont {
+    font-size: 11px;
   }
+}
 
-  .scalarContainerTitleLarge {
-    font-size: 16px;
+.scalarContainerTitleLarge {
+  font-size: 16px;
 
-    .iconfont {
-      font-size: 16px;
-    }
+  .iconfont {
+    font-size: 16px;
   }
+}
 
-  .el-col {
-    margin-bottom: 20px;
-  }
-</style>
\ No newline at end of file
+.el-col {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/webapp/src/views/visual/Visual/scalars/scalarcontainer/ScalarCustom.vue b/webapp/src/views/visual/Visual/scalars/scalarcontainer/ScalarCustom.vue
index 931e325..a5ae83e 100644
--- a/webapp/src/views/visual/Visual/scalars/scalarcontainer/ScalarCustom.vue
+++ b/webapp/src/views/visual/Visual/scalars/scalarcontainer/ScalarCustom.vue
@@ -1,34 +1,41 @@
- /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="scalarcontainer">
     <el-col :span="size">
       <el-card :body-style="{ padding: '0px' }" class="box-card">
-        <div :class="[scaleLargeSmall?'scalarContainerTitleLarge':'scalarContainerTitle']">
+        <div :class="[scaleLargeSmall ? 'scalarContainerTitleLarge' : 'scalarContainerTitle']">
           <div>
             <span class="tagShow">{{ info }}</span>
           </div>
           <div class="titleRight">
-            <span class="scale" @click="sizebig()"><i class="iconfont icon-fangda" /></span>
-            <span class="scale" @click="sizesmall()"><i class="iconfont icon-suoxiao1" /></span>
-            <span class="scale"><i class="close-i el-icon-circle-close" @click="deletethis()" /></span>
+            <span class="scale" @click="sizebig()"><i class="iconfont icon-fangda"/></span>
+            <span class="scale" @click="sizesmall()"><i class="iconfont icon-suoxiao1"/></span>
+            <span class="scale"
+              ><i class="close-i el-icon-circle-close" @click="deletethis()"
+            /></span>
           </div>
         </div>
-        <scalarchart :chartdata="chartdata" :ytext="ytext" :scaleLargeSmall="scaleLargeSmall" :classname="classname" />
+        <scalarchart
+          :chartdata="chartdata"
+          :ytext="ytext"
+          :scaleLargeSmall="scaleLargeSmall"
+          :classname="classname"
+        />
       </el-card>
     </el-col>
   </div>
@@ -37,7 +44,9 @@
 import { createNamespacedHelpers } from 'vuex';
 import { Scalarchart } from './scalarchart';
 
-const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers('Visual/custom');
+const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers(
+  'Visual/custom'
+);
 export default {
   components: {
     Scalarchart,
@@ -53,50 +62,55 @@ export default {
       ytext: '',
       info: '',
       id: '',
-      chartdata: { 'run': '', 'value': {}},
+      chartdata: { run: '', value: {} },
       classname: '',
     };
   },
   computed: {
-    ...mapCustomGetters([
-      'getScalarData',
-    ]),
+    ...mapCustomGetters(['getScalarData']),
   },
   created() {
     if (Object.keys(this.content).length === 2) {
       this.chartdata = JSON.parse(JSON.stringify(this.content));
-      this.id = `${this.chartdata.run  } ${  Object.keys(this.chartdata.value)[0]}`;
+      this.id = `${this.chartdata.run} ${Object.keys(this.chartdata.value)[0]}`;
       this.info = this.id;
       if (this.info.length > 20) {
-        this.info = `${this.info.slice(0, 17)  }...`;
+        this.info = `${this.info.slice(0, 17)}...`;
       }
       const arr = Object.keys(this.chartdata.value)[0].split('/');
       this.ytext = arr[arr.length - 1];
-      this.classname = this.id.replace(/\//g, '').replace(/\s*/g, '').replace(/\./g, '');
+      this.classname = this.id
+        .replace(/\//g, '')
+        .replace(/\s*/g, '')
+        .replace(/\./g, '');
     } else if (Object.keys(this.content).length === 4) {
       this.chartdata = JSON.parse(JSON.stringify(this.content));
       this.id = this.chartdata.title;
       this.info = this.id;
       if (this.info.length > 20) {
-        this.info = `${this.info.slice(0, 17)  }...`;
+        this.info = `${this.info.slice(0, 17)}...`;
       }
       const arr = this.id.split(' ', '/');
       this.ytext = arr[arr.length - 1];
-      this.classname = this.chartname.replace(/\//g, '').replace(/\s*/g, '').replace(/\./g, '');
+      this.classname = this.chartname
+        .replace(/\//g, '')
+        .replace(/\s*/g, '')
+        .replace(/\./g, '');
     } else if (Object.keys(this.content).length === 5) {
       this.chartdata = JSON.parse(JSON.stringify(this.content));
       this.id = this.chartdata.title;
       this.info = this.id;
       if (this.info.length > 20) {
-        this.info = `${this.info.slice(0, 17)  }...`;
+        this.info = `${this.info.slice(0, 17)}...`;
       }
-      this.classname = this.chartname.replace(/\//g, '').replace(/\s*/g, '').replace(/\./g, '');
+      this.classname = this.chartname
+        .replace(/\//g, '')
+        .replace(/\s*/g, '')
+        .replace(/\./g, '');
     }
   },
   methods: {
-    ...mapCustomMutations([
-      'deleteScalarData',
-    ]),
+    ...mapCustomMutations(['deleteScalarData']),
     sizebig() {
       this.size = 24;
       this.info = this.id;
@@ -106,7 +120,7 @@ export default {
       this.size = 8;
       this.scaleLargeSmall = false;
       if (this.info.length > 20) {
-        this.info = `${this.info.slice(0, 17)  }...`;
+        this.info = `${this.info.slice(0, 17)}...`;
       }
     },
     deletethis() {
@@ -117,50 +131,50 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .scalarcontainer {
-    width: 100%;
-    height: 100%;
-    background-color: white;
-  }
+.scalarcontainer {
+  width: 100%;
+  height: 100%;
+  background-color: white;
+}
 
-  .scalarContainerTitle,
-  .scalarContainerTitleLarge {
-    display: flex;
-    height: 30px;
-    padding: 0% 2% 0 2%;
-    line-height: 30px;
-    color: white;
-    text-align: left;
-    background-color: #9fa5fa;
-    border-radius: 2px;
+.scalarContainerTitle,
+.scalarContainerTitleLarge {
+  display: flex;
+  height: 30px;
+  padding: 0% 2% 0 2%;
+  line-height: 30px;
+  color: white;
+  text-align: left;
+  background-color: #9fa5fa;
+  border-radius: 2px;
 
-    .scale:hover {
-      cursor: pointer;
-    }
+  .scale:hover {
+    cursor: pointer;
+  }
 
-    .titleRight {
-      margin-right: 1%;
-      margin-left: auto;
-    }
+  .titleRight {
+    margin-right: 1%;
+    margin-left: auto;
   }
+}
 
-  .scalarContainerTitle {
-    font-size: 11px;
+.scalarContainerTitle {
+  font-size: 11px;
 
-    .iconfont {
-      font-size: 11px;
-    }
+  .iconfont {
+    font-size: 11px;
   }
+}
 
-  .scalarContainerTitleLarge {
-    font-size: 16px;
+.scalarContainerTitleLarge {
+  font-size: 16px;
 
-    .iconfont {
-      font-size: 16px;
-    }
+  .iconfont {
+    font-size: 16px;
   }
+}
 
-  .el-col {
-    margin-bottom: 20px;
-  }
-</style>
\ No newline at end of file
+.el-col {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/webapp/src/views/visual/Visual/scalars/scalarcontainer/index.js b/webapp/src/views/visual/Visual/scalars/scalarcontainer/index.js
index 27e11d8..24e4849 100644
--- a/webapp/src/views/visual/Visual/scalars/scalarcontainer/index.js
+++ b/webapp/src/views/visual/Visual/scalars/scalarcontainer/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as ScalarContainer } from './ScalarContainer';
diff --git a/webapp/src/views/visual/Visual/scalars/scalarcontainer/scalarchart/Scalarchart.vue b/webapp/src/views/visual/Visual/scalars/scalarcontainer/scalarchart/Scalarchart.vue
index 1607393..1075db9 100644
--- a/webapp/src/views/visual/Visual/scalars/scalarcontainer/scalarchart/Scalarchart.vue
+++ b/webapp/src/views/visual/Visual/scalars/scalarcontainer/scalarchart/Scalarchart.vue
@@ -1,22 +1,22 @@
- /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div :id="classname" class="chart">
-    <div :class="['tooltip',scaleLargeSmall?'font1':'font2']" :scale="scaleLargeSmall">
+    <div :class="['tooltip', scaleLargeSmall ? 'font1' : 'font2']" :scale="scaleLargeSmall">
       <table>
         <tr>
           <td class="td1">wall_time</td>
@@ -24,26 +24,25 @@
           <td class="td1">value</td>
         </tr>
         <tr>
-          <td :id="'td1'+ classname" class="td1" />
-          <td :id="'td2'+ classname" class="td2" />
-          <td :id="'td3'+ classname" class="td1" />
+          <td :id="'td1' + classname" class="td1" />
+          <td :id="'td2' + classname" class="td2" />
+          <td :id="'td3' + classname" class="td1" />
         </tr>
       </table>
     </div>
   </div>
-
 </template>
 <script>
-
 import * as d3 from 'd3';
 import { createNamespacedHelpers } from 'vuex';
 import { unixTimestamp2Normal, scientificNotation } from '@/utils';
 
-const { mapMutations: mapScalarMutations, mapGetters: mapScalarGetters } = createNamespacedHelpers('Visual/scalar');
+const { mapMutations: mapScalarMutations, mapGetters: mapScalarGetters } = createNamespacedHelpers(
+  'Visual/scalar'
+);
 const { mapMutations: mapCustomMutations } = createNamespacedHelpers('Visual/custom');
 
 export default {
-
   props: {
     chartdata: Object,
     start: Boolean,
@@ -72,13 +71,18 @@ export default {
   },
   computed: {
     ...mapScalarGetters([
-      'smoothvalue', 'yaxis', 'mergeditem', 'checkedorder', 'freshnumber', 'grade',
+      'smoothvalue',
+      'yaxis',
+      'mergeditem',
+      'checkedorder',
+      'freshnumber',
+      'grade',
     ]),
   },
   watch: {
     freshnumber() {
       if (this.mergetype === '') {
-        d3.select(`#svg${  this.classname}`).remove();
+        d3.select(`#svg${this.classname}`).remove();
         this.SvgDraw();
       }
     },
@@ -86,20 +90,31 @@ export default {
       if (val) {
         if (this.mergetype === 'single') {
           this.thisid = '';
-          for (let i = 0; i < this.mergeddata.length; i+=1) {
+          for (let i = 0; i < this.mergeddata.length; i += 1) {
             this.thisid = this.thisid + this.mergeddata[i].run + this.mergeddata[i].tag;
           }
-          this.customcontent = { 'title': this.title, 'mergetype': this.mergetype, 'legendnumber': this.legendnumber, 'value': this.mergeddata };
+          this.customcontent = {
+            title: this.title,
+            mergetype: this.mergetype,
+            legendnumber: this.legendnumber,
+            value: this.mergeddata,
+          };
           this.setScalar([this.thisid, this.customcontent]);
         } else if (this.mergetype === 'double') {
           this.thisid = '';
-          for (let i = 0; i < this.mergeddata0.length; i+=1) {
+          for (let i = 0; i < this.mergeddata0.length; i += 1) {
             this.thisid = this.thisid + this.mergeddata0[i].run + this.mergeddata0[i].tag;
           }
-          for (let i = 0; i < this.mergeddata1.length; i+=1) {
+          for (let i = 0; i < this.mergeddata1.length; i += 1) {
             this.thisid = this.thisid + this.mergeddata1[i].run + this.mergeddata1[i].tag;
           }
-          this.customcontent = { 'title': this.title, 'mergetype': this.mergetype, 'legendnumber': this.legendnumber, 'value0': this.mergeddata0, 'value1': this.mergeddata1 };
+          this.customcontent = {
+            title: this.title,
+            mergetype: this.mergetype,
+            legendnumber: this.legendnumber,
+            value0: this.mergeddata0,
+            value1: this.mergeddata1,
+          };
           this.setScalar([this.thisid, this.customcontent]);
         }
       } else {
@@ -109,28 +124,28 @@ export default {
     smoothvalue() {
       if (this.grade[this.classname] === 'main') {
         if (this.mergetype === 'single') {
-          d3.select(`#svg${  this.classname}`).remove();
+          d3.select(`#svg${this.classname}`).remove();
           this.MergeSvgDraw();
         } else if (this.mergetype === 'double') {
-          d3.select(`#svg${  this.classname}`).remove();
+          d3.select(`#svg${this.classname}`).remove();
           this.DYMergeSvgDraw();
         }
       } else {
-        d3.select(`#svg${  this.classname}`).remove();
+        d3.select(`#svg${this.classname}`).remove();
         this.SvgDraw();
       }
     },
     yaxis() {
       if (this.grade[this.classname] === 'main') {
         if (this.mergetype === 'single') {
-          d3.select(`#svg${  this.classname}`).remove();
+          d3.select(`#svg${this.classname}`).remove();
           this.MergeSvgDraw();
         } else if (this.mergetype === 'double') {
-          d3.select(`#svg${  this.classname}`).remove();
+          d3.select(`#svg${this.classname}`).remove();
           this.DYMergeSvgDraw();
         }
       } else {
-        d3.select(`#svg${  this.classname}`).remove();
+        d3.select(`#svg${this.classname}`).remove();
         this.SvgDraw();
       }
     },
@@ -139,21 +154,27 @@ export default {
         if (Object.keys(this.mergeditem[this.classname]).length === 1) {
           this.mergetype = 'single';
           this.legendnumber = this.checkedorder.length;
-          this.mergeddata = [].concat(this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[0]]);
-          d3.select(`#svg${  this.classname}`).remove();
+          this.mergeddata = [].concat(
+            this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[0]]
+          );
+          d3.select(`#svg${this.classname}`).remove();
           this.MergeSvgDraw();
         } else if (Object.keys(this.mergeditem[this.classname]).length === 2) {
           this.mergetype = 'double';
           this.legendnumber = this.checkedorder.length;
-          this.mergeddata0 = [].concat(this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[0]]);
-          this.mergeddata1 = [].concat(this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[1]]);
-          d3.select(`#svg${  this.classname}`).remove();
+          this.mergeddata0 = [].concat(
+            this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[0]]
+          );
+          this.mergeddata1 = [].concat(
+            this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[1]]
+          );
+          d3.select(`#svg${this.classname}`).remove();
           const foo0 = Object.keys(this.mergeditem[this.classname])[0];
           this.yname0[0] = foo0;
-          this.yname0[1] = `log(${  this.yname0[0]  })`;
+          this.yname0[1] = `log(${this.yname0[0]})`;
           const foo1 = Object.keys(this.mergeditem[this.classname])[1];
           this.yname1[0] = foo1;
-          this.yname1[1] = `log(${  this.yname1[0]  })`;
+          this.yname1[1] = `log(${this.yname1[0]})`;
           this.DYMergeSvgDraw();
         }
         this.setmergestep();
@@ -170,8 +191,8 @@ export default {
         this.yname1 = [];
         this.data = this.chartdata.value[Object.keys(this.chartdata.value)[0]];
         this.yname[0] = this.ytext;
-        this.yname[1] = `log(${  this.ytext  })`;
-        d3.select(`#svg${  this.classname}`).remove();
+        this.yname[1] = `log(${this.ytext})`;
+        d3.select(`#svg${this.classname}`).remove();
         this.SvgDraw();
       }
     },
@@ -180,42 +201,48 @@ export default {
     if (this.grade[this.classname] === 'main') {
       if (Object.keys(this.mergeditem[this.classname]).length === 1) {
         this.mergetype = 'single';
-        this.mergeddata = [].concat(this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[0]]);
+        this.mergeddata = [].concat(
+          this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[0]]
+        );
         this.legendnumber = this.mergeddata.length;
         this.MergeSvgDraw();
       } else if (Object.keys(this.mergeditem[this.classname]).length === 2) {
         this.mergetype = 'double';
-        this.mergeddata0 = [].concat(this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[0]]);
-        this.mergeddata1 = [].concat(this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[1]]);
+        this.mergeddata0 = [].concat(
+          this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[0]]
+        );
+        this.mergeddata1 = [].concat(
+          this.mergeditem[this.classname][Object.keys(this.mergeditem[this.classname])[1]]
+        );
         this.legendnumber = this.mergeddata0.length + this.mergeddata1.length;
         const foo0 = Object.keys(this.mergeditem[this.classname])[0];
         this.yname0[0] = foo0;
-        this.yname0[1] = `log(${  this.yname0[0]  })`;
+        this.yname0[1] = `log(${this.yname0[0]})`;
         const foo1 = Object.keys(this.mergeditem[this.classname])[1];
         this.yname1[0] = foo1;
-        this.yname1[1] = `log(${  this.yname1[0]  })`;
+        this.yname1[1] = `log(${this.yname1[0]})`;
         this.DYMergeSvgDraw();
       }
     } else if (Object.keys(this.chartdata).length === 2) {
-        this.data = this.chartdata.value[Object.keys(this.chartdata.value)[0]];
-        this.yname[0] = this.ytext;
-        this.yname[1] = `log(${  this.ytext  })`;
-      } else if (Object.keys(this.chartdata).length === 4) {
-        this.mergetype = 'single';
-        this.legendnumber = this.chartdata.legendnumber;
-        this.mergeddata = this.chartdata.value;
-      } else if (Object.keys(this.chartdata).length === 5) {
-        this.mergetype = 'double';
-        this.legendnumber = this.chartdata.legendnumber;
-        this.mergeddata0 = this.chartdata.value0;
-        this.mergeddata1 = this.chartdata.value1;
-        const arr0 = this.mergeddata0[0].tag.split('/');
-        const arr1 = this.mergeddata1[0].tag.split('/');
-        this.yname0[0] = arr0[arr0.length - 1];
-        this.yname0[1] = `log(${  this.yname0[0]  })`;
-        this.yname1[0] = arr1[arr1.length - 1];
-        this.yname1[1] = `log(${  this.yname1[0]  })`;
-      }
+      this.data = this.chartdata.value[Object.keys(this.chartdata.value)[0]];
+      this.yname[0] = this.ytext;
+      this.yname[1] = `log(${this.ytext})`;
+    } else if (Object.keys(this.chartdata).length === 4) {
+      this.mergetype = 'single';
+      this.legendnumber = this.chartdata.legendnumber;
+      this.mergeddata = this.chartdata.value;
+    } else if (Object.keys(this.chartdata).length === 5) {
+      this.mergetype = 'double';
+      this.legendnumber = this.chartdata.legendnumber;
+      this.mergeddata0 = this.chartdata.value0;
+      this.mergeddata1 = this.chartdata.value1;
+      const arr0 = this.mergeddata0[0].tag.split('/');
+      const arr1 = this.mergeddata1[0].tag.split('/');
+      this.yname0[0] = arr0[arr0.length - 1];
+      this.yname0[1] = `log(${this.yname0[0]})`;
+      this.yname1[0] = arr1[arr1.length - 1];
+      this.yname1[1] = `log(${this.yname1[0]})`;
+    }
   },
   mounted() {
     if (this.mergetype === 'double') {
@@ -227,12 +254,8 @@ export default {
     }
   },
   methods: {
-    ...mapScalarMutations([
-      'setmergestep',
-    ]),
-    ...mapCustomMutations([
-      'setScalar', 'deleteScalar',
-    ]),
+    ...mapScalarMutations(['setmergestep']),
+    ...mapCustomMutations(['setScalar', 'deleteScalar']),
     SvgDraw() {
       let data = [].concat(JSON.parse(JSON.stringify(this.data)));
       const datamid = [].concat(JSON.parse(JSON.stringify(this.data)));
@@ -240,7 +263,7 @@ export default {
       let yaxis = this.yname[0];
       if (this.yaxis === 'log-linear') {
         let flag = 0;
-        for (let i = 0; i < data.length; i+=1) {
+        for (let i = 0; i < data.length; i += 1) {
           if (datamid[i].value > 0) {
             datamid[i].value = Math.log(datamid[i].value);
           } else {
@@ -256,7 +279,7 @@ export default {
       }
       const smoothdata = [].concat(JSON.parse(JSON.stringify(data)));
       let last = smoothdata[0].value;
-      for (let i = 1; i < smoothdata.length; i+=1) {
+      for (let i = 1; i < smoothdata.length; i += 1) {
         smoothdata[i].value = last * smooth + (1 - smooth) * smoothdata[i].value;
         last = smoothdata[i].value;
       }
@@ -266,20 +289,22 @@ export default {
       const height = 270 - margin.top - margin.bottom;
 
       // append the svg object to the body of the page
-      const svg = d3.select(`#${  this.classname}`)
+      const svg = d3
+        .select(`#${this.classname}`)
         .append('svg')
-        .attr('id', `svg${  this.classname}`)
+        .attr('id', `svg${this.classname}`)
         .attr('width', '100%')
         .attr('height', '100%')
         .attr('preserveAspectRatio', 'xMidYMid meet')
         .attr('viewBox', '0 0 350 270')
         .append('g')
-        .attr('transform',
-          `translate(${  margin.left  },${  margin.top  })`);
+        .attr('transform', `translate(${margin.left},${margin.top})`);
 
       // add arrow
-      svg.append('defs').append('marker')
-        .attr('id', `xarrowhead${  this.classname}`)
+      svg
+        .append('defs')
+        .append('marker')
+        .attr('id', `xarrowhead${this.classname}`)
         .attr('markerUnits', 'strokeWidth')
         .attr('markerWidth', '15')
         .attr('markerHeight', '15')
@@ -289,8 +314,10 @@ export default {
         .append('path')
         .attr('d', 'M2,2 L10,6 L2,10 L6,6 L2,2');
 
-      svg.append('defs').append('marker')
-        .attr('id', `yarrowhead${  this.classname}`)
+      svg
+        .append('defs')
+        .append('marker')
+        .attr('id', `yarrowhead${this.classname}`)
         .attr('markerUnits', 'strokeWidth')
         .attr('markerWidth', '15')
         .attr('markerHeight', '15')
@@ -302,49 +329,59 @@ export default {
         .attr('d', 'M2,2 L10,6 L2,10 L6,6 L2,2');
 
       // Add X axis
-      const xdomain = d3.extent(data, function my1(d) { return d.step; });
+      const xdomain = d3.extent(data, function my1(d) {
+        return d.step;
+      });
       const xgap = xdomain[1] - xdomain[0];
       // xdomain[0] = xdomain[0] - xgap / 4
       xdomain[1] += xgap / 4;
-      const x = d3.scaleLinear()
+      const x = d3
+        .scaleLinear()
         .domain(xdomain)
         .rangeRound([0, width]);
-      const xAxis = svg.append('g')
-        .attr('transform', `translate(0,${  height  })`)
+      const xAxis = svg
+        .append('g')
+        .attr('transform', `translate(0,${height})`)
         .call(
-          d3.axisBottom(x)
+          d3
+            .axisBottom(x)
             .tickSizeOuter(0)
             .ticks(5)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               return scientificNotation(d, 1);
-            }),
+            })
         );
-      xAxis.select('path').attr('marker-end', `url(#xarrowhead${  this.classname  })`);
-      svg.append('text')
+      xAxis.select('path').attr('marker-end', `url(#xarrowhead${this.classname})`);
+      svg
+        .append('text')
         .attr('text-anchor', 'middle')
         .attr('x', width / 2)
         .attr('y', height + margin.top + 20)
         .text('step');
 
       // Add Y axis
-      const ydomain = d3.extent(data, function my2(d) { return d.value; });
+      const ydomain = d3.extent(data, function my2(d) {
+        return d.value;
+      });
       const ygap = ydomain[1] - ydomain[0];
       ydomain[0] -= ygap / 4;
       ydomain[1] += ygap / 4;
-      const y = d3.scaleLinear()
+      const y = d3
+        .scaleLinear()
         .domain(ydomain)
         .rangeRound([height, 0]);
-      const yAxis = svg.append('g')
-        .call(
-          d3.axisLeft(y)
-            .tickSizeOuter(0)
-            .ticks(5)
-            .tickFormat(d => {
-              return scientificNotation(d, 1);
-            }),
-        );
-      yAxis.select('path').attr('marker-end', `url(#yarrowhead${  this.classname  })`);
-      svg.append('text')
+      const yAxis = svg.append('g').call(
+        d3
+          .axisLeft(y)
+          .tickSizeOuter(0)
+          .ticks(5)
+          .tickFormat((d) => {
+            return scientificNotation(d, 1);
+          })
+      );
+      yAxis.select('path').attr('marker-end', `url(#yarrowhead${this.classname})`);
+      svg
+        .append('text')
         .attr('text-anchor', 'middle')
         .attr('transform', 'rotate(-90)')
         .attr('y', -margin.left + 20)
@@ -352,8 +389,10 @@ export default {
         .text(yaxis);
 
       // Add a clipPath: everything out of this area won't be drawn.
-      svg.append('defs').append('svg:clipPath')
-        .attr('id', `clip${  this.classname}`)
+      svg
+        .append('defs')
+        .append('svg:clipPath')
+        .attr('id', `clip${this.classname}`)
         .append('svg:rect')
         .attr('width', width)
         .attr('height', height)
@@ -361,34 +400,51 @@ export default {
         .attr('y', 0);
 
       // Add brushing
-      const brush = d3.brush()
-        .extent([[0, 0], [width, height]]);
+      const brush = d3.brush().extent([
+        [0, 0],
+        [width, height],
+      ]);
 
       // Create the line variable: where both the line and the brush take place
-      const line = svg.append('g')
-        .attr('clip-path', `url(#clip${  this.classname  })`);
+      const line = svg.append('g').attr('clip-path', `url(#clip${this.classname})`);
       // Add the original line
-      line.append('path')
+      line
+        .append('path')
         .datum(data)
         .attr('class', 'originalline')
         .attr('fill', 'none')
         .attr('stroke', 'blue')
         .attr('stroke-width', 1.5)
         .attr('stroke-opacity', 0.2)
-        .attr('d', d3.line()
-          .x(function my3(d) { return x(d.step); })
-          .y(function my4(d) { return y(d.value); }),
+        .attr(
+          'd',
+          d3
+            .line()
+            .x(function my3(d) {
+              return x(d.step);
+            })
+            .y(function my4(d) {
+              return y(d.value);
+            })
         );
       // Add the smooth line
-      line.append('path')
+      line
+        .append('path')
         .datum(smoothdata)
         .attr('class', 'smoothline')
         .attr('fill', 'none')
         .attr('stroke', 'blue')
         .attr('stroke-width', 1.5)
-        .attr('d', d3.line()
-          .x(function my5(d) { return x(d.step); })
-          .y(function my6(d) { return y(d.value); }),
+        .attr(
+          'd',
+          d3
+            .line()
+            .x(function my5(d) {
+              return x(d.step);
+            })
+            .y(function my6(d) {
+              return y(d.value);
+            })
         );
       // Add the brushing
       line
@@ -396,10 +452,10 @@ export default {
         .attr('class', 'brush')
         .call(brush);
       // create a tooltip
-      const Tooltip = d3.select(`#${  this.classname}`).select('.tooltip');
-      const td1 = d3.select(`#td1${  this.classname}`);
-      const td2 = d3.select(`#td2${  this.classname}`);
-      const td3 = d3.select(`#td3${  this.classname}`);
+      const Tooltip = d3.select(`#${this.classname}`).select('.tooltip');
+      const td1 = d3.select(`#td1${this.classname}`);
+      const td2 = d3.select(`#td2${this.classname}`);
+      const td3 = d3.select(`#td3${this.classname}`);
 
       line
         .selectAll('.myCircle')
@@ -407,8 +463,12 @@ export default {
         .enter()
         .append('circle')
         .attr('class', 'myCircle')
-        .attr('cx', function my7(d) { return x(d.step); })
-        .attr('cy', function my8(d) { return y(d.value); })
+        .attr('cx', function my7(d) {
+          return x(d.step);
+        })
+        .attr('cy', function my8(d) {
+          return y(d.value);
+        })
         .attr('r', 3)
         .attr('stroke-width', 10)
         .attr('stroke', 'black')
@@ -432,7 +492,9 @@ export default {
         });
       // A function that set idleTimeOut to null
       let idleTimeout;
-      function idled() { idleTimeout = null; }
+      function idled() {
+        idleTimeout = null;
+      }
 
       // A function that update the chart for given boundaries
       function updateChart() {
@@ -441,7 +503,7 @@ export default {
           if (!idleTimeout) {
             idleTimeout = setTimeout(idled, 350);
             return idleTimeout;
-          } 
+          }
           x.domain(xdomain);
           y.domain(ydomain);
         } else {
@@ -449,102 +511,148 @@ export default {
           y.domain([y.invert(extent[1][1]), y.invert(extent[0][1])]);
           line.select('.brush').call(brush.move, null);
         }
-        xAxis.transition().duration(1000).call(
-          d3.axisBottom(x)
-            .tickSizeOuter(0)
-            .ticks(5)
-            .tickFormat(d => {
-              return scientificNotation(d, 1);
-            }),
-        );
-        yAxis.transition().duration(1000).call(
-          d3.axisLeft(y)
-            .tickSizeOuter(0)
-            .ticks(5)
-            .tickFormat(d => {
-              return scientificNotation(d, 1);
-            }),
-        );
+        xAxis
+          .transition()
+          .duration(1000)
+          .call(
+            d3
+              .axisBottom(x)
+              .tickSizeOuter(0)
+              .ticks(5)
+              .tickFormat((d) => {
+                return scientificNotation(d, 1);
+              })
+          );
+        yAxis
+          .transition()
+          .duration(1000)
+          .call(
+            d3
+              .axisLeft(y)
+              .tickSizeOuter(0)
+              .ticks(5)
+              .tickFormat((d) => {
+                return scientificNotation(d, 1);
+              })
+          );
         line
           .select('.smoothline')
           .transition()
           .duration(1000)
-          .attr('d', d3.line()
-            .x(function my81(d) { return x(d.step); })
-            .y(function my82(d) { return y(d.value); }),
+          .attr(
+            'd',
+            d3
+              .line()
+              .x(function my81(d) {
+                return x(d.step);
+              })
+              .y(function my82(d) {
+                return y(d.value);
+              })
           );
         line
           .select('.originalline')
           .transition()
           .duration(1000)
-          .attr('d', d3.line()
-            .x(function my83(d) { return x(d.step); })
-            .y(function my84(d) { return y(d.value); }),
+          .attr(
+            'd',
+            d3
+              .line()
+              .x(function my83(d) {
+                return x(d.step);
+              })
+              .y(function my84(d) {
+                return y(d.value);
+              })
           );
         line
           .selectAll('.myCircle')
           .transition()
           .duration(1000)
-          .attr('cx', function my85(d) { return x(d.step); })
-          .attr('cy', function my86(d) { return y(d.value); });
+          .attr('cx', function my85(d) {
+            return x(d.step);
+          })
+          .attr('cy', function my86(d) {
+            return y(d.value);
+          });
       }
       brush.on('end', updateChart);
       // If user double click, reinitialize the chart
       svg.on('dblclick', function my12() {
         x.domain(xdomain);
         xAxis.transition().call(
-          d3.axisBottom(x)
+          d3
+            .axisBottom(x)
             .tickSizeOuter(0)
             .ticks(5)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               return scientificNotation(d, 1);
-            }),
+            })
         );
         y.domain(ydomain);
         yAxis.transition().call(
-          d3.axisLeft(y)
+          d3
+            .axisLeft(y)
             .tickSizeOuter(0)
             .ticks(5)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               return scientificNotation(d, 1);
-            }),
+            })
         );
         line
           .selectAll('.smoothline')
           .transition()
           .duration(1000)
-          .attr('d', d3.line()
-            .x(function my13(d) { return x(d.step); })
-            .y(function my14(d) { return y(d.value); }),
+          .attr(
+            'd',
+            d3
+              .line()
+              .x(function my13(d) {
+                return x(d.step);
+              })
+              .y(function my14(d) {
+                return y(d.value);
+              })
           );
         line
           .selectAll('.originalline')
           .transition()
           .duration(1000)
-          .attr('d', d3.line()
-            .x(function my15(d) { return x(d.step); })
-            .y(function my16(d) { return y(d.value); }),
+          .attr(
+            'd',
+            d3
+              .line()
+              .x(function my15(d) {
+                return x(d.step);
+              })
+              .y(function my16(d) {
+                return y(d.value);
+              })
           );
         line
           .selectAll('.myCircle')
           .transition()
           .duration(1000)
-          .attr('cx', function my17(d) { return x(d.step); })
-          .attr('cy', function my18(d) { return y(d.value); });
+          .attr('cx', function my17(d) {
+            return x(d.step);
+          })
+          .attr('cy', function my18(d) {
+            return y(d.value);
+          });
       });
     },
     MergeSvgDraw() {
-      const {legendnumber} = this;
+      const { legendnumber } = this;
       let data = [].concat(JSON.parse(JSON.stringify(this.mergeddata)));
       const datamid = [].concat(JSON.parse(JSON.stringify(this.mergeddata)));
       const smooth = this.smoothvalue * 1;
       let yaxis = this.yname[0];
       if (this.yaxis === 'log-linear') {
         let flag = 0;
-        for (let i = 0; i < data.length; i+=1) {
-          for (let j = 0; j < data[i].value.length; j+=1) {
-            if ((datamid[i].value)[j].value > 0) {
-              (datamid[i].value)[j].value = Math.log((datamid[i].value)[j].value);
+        for (let i = 0; i < data.length; i += 1) {
+          for (let j = 0; j < data[i].value.length; j += 1) {
+            if (datamid[i].value[j].value > 0) {
+              datamid[i].value[j].value = Math.log(datamid[i].value[j].value);
             } else {
               flag = 1;
               break;
@@ -559,24 +667,28 @@ export default {
         }
       }
       const smoothdata = [].concat(JSON.parse(JSON.stringify(data)));
-      for (let i = 0; i < smoothdata.length; i+=1) {
-        let last = (smoothdata[i].value)[0].value;
-        for (let j = 1; j < smoothdata[i].value.length; j+=1) {
-          (smoothdata[i].value)[j].value = last * smooth + (1 - smooth) * (smoothdata[i].value)[j].value;
-          last = (smoothdata[i].value)[j].value;
+      for (let i = 0; i < smoothdata.length; i += 1) {
+        let last = smoothdata[i].value[0].value;
+        for (let j = 1; j < smoothdata[i].value.length; j += 1) {
+          smoothdata[i].value[j].value =
+            last * smooth + (1 - smooth) * smoothdata[i].value[j].value;
+          last = smoothdata[i].value[j].value;
         }
       }
       let dataset0 = [];
       let dataset = [];
-      for (let i = 0; i < data.length; i+=1) {
+      for (let i = 0; i < data.length; i += 1) {
         data[i].order = i;
         smoothdata[i].order = i;
         dataset0 = dataset0.concat(data[i].value);
         dataset = dataset.concat(smoothdata[i].value);
       }
       // color palette
-      const res = data.map(function my19(d) { return d.order; }); // list of group names
-      const color = d3.scaleOrdinal()
+      const res = data.map(function my19(d) {
+        return d.order;
+      }); // list of group names
+      const color = d3
+        .scaleOrdinal()
         .domain(res)
         .range(['#ed357b', '#1d276e', '#6ec6d0', '#0c9257', '#ffdf1e', '#fe8325']);
       // set the dimensions and margins of the graph
@@ -585,20 +697,22 @@ export default {
       const height = 250 + 20 * legendnumber - margin.top - margin.bottom;
 
       // append the svg object to the body of the page
-      const svg = d3.select(`#${  this.classname}`)
+      const svg = d3
+        .select(`#${this.classname}`)
         .append('svg')
-        .attr('id', `svg${  this.classname}`)
+        .attr('id', `svg${this.classname}`)
         .attr('width', '100%')
         .attr('height', '100%')
         .attr('preserveAspectRatio', 'xMidYMid meet')
-        .attr('viewBox', `0 0 350 ${  (250 + 20 * legendnumber).toString()}`)
+        .attr('viewBox', `0 0 350 ${(250 + 20 * legendnumber).toString()}`)
         .append('g')
-        .attr('transform',
-          `translate(${  margin.left  },${  margin.top  })`);
+        .attr('transform', `translate(${margin.left},${margin.top})`);
 
       // add arrow
-      svg.append('defs').append('marker')
-        .attr('id', `xarrowhead${  this.classname}`)
+      svg
+        .append('defs')
+        .append('marker')
+        .attr('id', `xarrowhead${this.classname}`)
         .attr('markerUnits', 'strokeWidth')
         .attr('markerWidth', '15')
         .attr('markerHeight', '15')
@@ -608,8 +722,10 @@ export default {
         .append('path')
         .attr('d', 'M2,2 L10,6 L2,10 L6,6 L2,2');
 
-      svg.append('defs').append('marker')
-        .attr('id', `yarrowhead${  this.classname}`)
+      svg
+        .append('defs')
+        .append('marker')
+        .attr('id', `yarrowhead${this.classname}`)
         .attr('markerUnits', 'strokeWidth')
         .attr('markerWidth', '15')
         .attr('markerHeight', '15')
@@ -621,49 +737,59 @@ export default {
         .attr('d', 'M2,2 L10,6 L2,10 L6,6 L2,2');
 
       // Add X axis
-      const xdomain = d3.extent(dataset0, function my20(d) { return d.step; });
+      const xdomain = d3.extent(dataset0, function my20(d) {
+        return d.step;
+      });
       const xgap = xdomain[1] - xdomain[0];
       xdomain[0] -= xgap / 4;
       xdomain[1] += xgap / 4;
-      const x = d3.scaleLinear()
+      const x = d3
+        .scaleLinear()
         .domain(xdomain)
         .rangeRound([0, width]);
-      const xAxis = svg.append('g')
-        .attr('transform', `translate(0,${  height  })`)
+      const xAxis = svg
+        .append('g')
+        .attr('transform', `translate(0,${height})`)
         .call(
-          d3.axisBottom(x)
+          d3
+            .axisBottom(x)
             .tickSizeOuter(0)
             .ticks(5)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               return scientificNotation(d, 1);
-            }),
+            })
         );
-      xAxis.select('path').attr('marker-end', `url(#xarrowhead${  this.classname  })`);
-      svg.append('text')
+      xAxis.select('path').attr('marker-end', `url(#xarrowhead${this.classname})`);
+      svg
+        .append('text')
         .attr('text-anchor', 'middle')
         .attr('x', width / 2)
         .attr('y', height + margin.top + 20)
         .text('step');
 
       // Add Y axis
-      const ydomain = d3.extent(dataset0, function my21(d) { return d.value; });
+      const ydomain = d3.extent(dataset0, function my21(d) {
+        return d.value;
+      });
       const ygap = ydomain[1] - ydomain[0];
       ydomain[0] -= ygap / 4;
       ydomain[1] += ygap / 4;
-      const y = d3.scaleLinear()
+      const y = d3
+        .scaleLinear()
         .domain(ydomain)
         .rangeRound([height, 0]);
-      const yAxis = svg.append('g')
-        .call(
-          d3.axisLeft(y)
-            .tickSizeOuter(0)
-            .ticks(5)
-            .tickFormat(d => {
-              return scientificNotation(d, 1);
-            }),
-        );
-      yAxis.select('path').attr('marker-end', `url(#yarrowhead${  this.classname  })`);
-      svg.append('text')
+      const yAxis = svg.append('g').call(
+        d3
+          .axisLeft(y)
+          .tickSizeOuter(0)
+          .ticks(5)
+          .tickFormat((d) => {
+            return scientificNotation(d, 1);
+          })
+      );
+      yAxis.select('path').attr('marker-end', `url(#yarrowhead${this.classname})`);
+      svg
+        .append('text')
         .attr('text-anchor', 'middle')
         .attr('transform', 'rotate(-90)')
         .attr('y', -margin.left + 20)
@@ -671,8 +797,10 @@ export default {
         .text(yaxis);
 
       // Add a clipPath: everything out of this area won't be drawn.
-      svg.append('defs').append('svg:clipPath')
-        .attr('id', `clip${  this.classname}`)
+      svg
+        .append('defs')
+        .append('svg:clipPath')
+        .attr('id', `clip${this.classname}`)
         .append('svg:rect')
         .attr('width', width)
         .attr('height', height)
@@ -680,24 +808,33 @@ export default {
         .attr('y', 0);
 
       // Add brushing
-      const brush = d3.brush() 
-        .extent([[0, 0], [width, height]]);
+      const brush = d3.brush().extent([
+        [0, 0],
+        [width, height],
+      ]);
 
-      const line = svg.append('g')
-        .attr('clip-path', `url(#clip${  this.classname  })`);
+      const line = svg.append('g').attr('clip-path', `url(#clip${this.classname})`);
       // Add the smooth line
-      line.selectAll('.smoothline')
+      line
+        .selectAll('.smoothline')
         .data(smoothdata)
         .enter()
         .append('path')
         .attr('class', 'smoothline')
         .attr('fill', 'none')
-        .attr('stroke', function my22(d) { return color(d.order); })
+        .attr('stroke', function my22(d) {
+          return color(d.order);
+        })
         .attr('stroke-width', 1.5)
         .attr('d', function my23(d) {
-          return d3.line()
-            .x(function my24(d) { return x(d.step); })
-            .y(function my25(d) { return y(d.value); })(d.value);
+          return d3
+            .line()
+            .x(function my24(d) {
+              return x(d.step);
+            })
+            .y(function my25(d) {
+              return y(d.value);
+            })(d.value);
         });
       // Add the brushing
       line
@@ -706,10 +843,10 @@ export default {
         .call(brush);
       // create a tooltip
 
-      const Tooltip = d3.select(`#${  this.classname}`).select('.tooltip');
-      const td1 = d3.select(`#td1${  this.classname}`);
-      const td2 = d3.select(`#td2${  this.classname}`);
-      const td3 = d3.select(`#td3${  this.classname}`);
+      const Tooltip = d3.select(`#${this.classname}`).select('.tooltip');
+      const td1 = d3.select(`#td1${this.classname}`);
+      const td2 = d3.select(`#td2${this.classname}`);
+      const td3 = d3.select(`#td3${this.classname}`);
 
       line
         .selectAll('.myCircle')
@@ -717,8 +854,12 @@ export default {
         .enter()
         .append('circle')
         .attr('class', 'myCircle')
-        .attr('cx', function my26(d) { return x(d.step); })
-        .attr('cy', function my27(d) { return y(d.value); })
+        .attr('cx', function my26(d) {
+          return x(d.step);
+        })
+        .attr('cy', function my27(d) {
+          return y(d.value);
+        })
         .attr('r', 3)
         .attr('stroke', 'black')
         .attr('stroke-width', 10)
@@ -742,16 +883,18 @@ export default {
         });
 
       // add the legend
-      const legend = svg.selectAll('.legend')
+      const legend = svg
+        .selectAll('.legend')
         .data(smoothdata)
         .enter()
         .append('g')
         .attr('class', 'legend')
         .attr('transform', function my31(d, i) {
-          return `translate(0,${  i * 20  })`;
+          return `translate(0,${i * 20})`;
         });
 
-      legend.append('rect')
+      legend
+        .append('rect')
         .attr('x', -40)
         .attr('y', height + margin.top + 40)
         .attr('width', 18)
@@ -760,16 +903,21 @@ export default {
           return color(d.order);
         });
 
-      legend.append('text')
+      legend
+        .append('text')
         .attr('x', -16)
         .attr('y', height + margin.top + 40)
         .attr('dy', '.5em')
         .attr('font-size', '10px')
         .style('text-anchor', 'start')
-        .text(function my33(d) { return `${d.run  },${  d.tag}`; });
+        .text(function my33(d) {
+          return `${d.run},${d.tag}`;
+        });
       // A function that set idleTimeOut to null
       let idleTimeout;
-      function idled() { idleTimeout = null; }
+      function idled() {
+        idleTimeout = null;
+      }
 
       // A function that update the chart for given boundaries
       function updateChart() {
@@ -786,78 +934,106 @@ export default {
           y.domain([y.invert(extent[1][1]), y.invert(extent[0][1])]);
           line.select('.brush').call(brush.move, null);
         }
-        xAxis.transition().duration(1000).call(
-          d3.axisBottom(x)
-            .tickSizeOuter(0)
-            .ticks(5)
-            .tickFormat(d => {
-              return scientificNotation(d, 1);
-            }),
-        );
-        yAxis.transition().duration(1000).call(
-          d3.axisLeft(y)
-            .tickSizeOuter(0)
-            .ticks(5)
-            .tickFormat(d => {
-              return scientificNotation(d, 1);
-            }),
-        );
+        xAxis
+          .transition()
+          .duration(1000)
+          .call(
+            d3
+              .axisBottom(x)
+              .tickSizeOuter(0)
+              .ticks(5)
+              .tickFormat((d) => {
+                return scientificNotation(d, 1);
+              })
+          );
+        yAxis
+          .transition()
+          .duration(1000)
+          .call(
+            d3
+              .axisLeft(y)
+              .tickSizeOuter(0)
+              .ticks(5)
+              .tickFormat((d) => {
+                return scientificNotation(d, 1);
+              })
+          );
         line
           .selectAll('.smoothline')
           .transition()
           .duration(1000)
           .attr('d', function my87(d) {
-            return d3.line()
-              .x(function my88(d) { return x(d.step); })
-              .y(function my89(d) { return y(d.value); })(d.value);
+            return d3
+              .line()
+              .x(function my88(d) {
+                return x(d.step);
+              })
+              .y(function my89(d) {
+                return y(d.value);
+              })(d.value);
           });
         line
           .selectAll('.myCircle')
           .transition()
           .duration(1000)
-          .attr('cx', function my90(d) { return x(d.step); })
-          .attr('cy', function my91(d) { return y(d.value); });
+          .attr('cx', function my90(d) {
+            return x(d.step);
+          })
+          .attr('cy', function my91(d) {
+            return y(d.value);
+          });
       }
       brush.on('end', updateChart);
       // If user double click, reinitialize the chart
       svg.on('dblclick', function my34() {
         x.domain(xdomain);
         xAxis.transition().call(
-          d3.axisBottom(x)
+          d3
+            .axisBottom(x)
             .tickSizeOuter(0)
             .ticks(5)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               return scientificNotation(d, 1);
-            }),
+            })
         );
         y.domain(ydomain);
         yAxis.transition().call(
-          d3.axisLeft(y)
+          d3
+            .axisLeft(y)
             .tickSizeOuter(0)
             .ticks(5)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               return scientificNotation(d, 1);
-            }),
+            })
         );
         line
           .selectAll('.smoothline')
           .transition()
           .duration(1000)
           .attr('d', function my35(d) {
-            return d3.line()
-              .x(function my36(d) { return x(d.step); })
-              .y(function my37(d) { return y(d.value); })(d.value);
+            return d3
+              .line()
+              .x(function my36(d) {
+                return x(d.step);
+              })
+              .y(function my37(d) {
+                return y(d.value);
+              })(d.value);
           });
         line
           .selectAll('.myCircle')
           .transition()
           .duration(1000)
-          .attr('cx', function my38(d) { return x(d.step); })
-          .attr('cy', function my39(d) { return y(d.value); });
+          .attr('cx', function my38(d) {
+            return x(d.step);
+          })
+          .attr('cy', function my39(d) {
+            return y(d.value);
+          });
       });
     },
     DYMergeSvgDraw() {
-      const {legendnumber} = this;
+      const { legendnumber } = this;
       let data0 = [].concat(JSON.parse(JSON.stringify(this.mergeddata0)));
       let data1 = [].concat(JSON.parse(JSON.stringify(this.mergeddata1)));
       const datamid0 = [].concat(JSON.parse(JSON.stringify(this.mergeddata0)));
@@ -867,22 +1043,22 @@ export default {
       let yaxis1 = this.yname1[0];
       if (this.yaxis === 'log-linear') {
         let flag = 0;
-        for (let i = 0; i < data0.length; i+=1) {
+        for (let i = 0; i < data0.length; i += 1) {
           if (flag === 1) break;
-          for (let j = 0; j < data0[i].value.length; j+=1) {
-            if ((datamid0[i].value)[j].value > 0) {
-              (datamid0[i].value)[j].value = Math.log((datamid0[i].value)[j].value);
+          for (let j = 0; j < data0[i].value.length; j += 1) {
+            if (datamid0[i].value[j].value > 0) {
+              datamid0[i].value[j].value = Math.log(datamid0[i].value[j].value);
             } else {
               flag = 1;
               break;
             }
           }
         }
-        for (let i = 0; i < data1.length; i+=1) {
+        for (let i = 0; i < data1.length; i += 1) {
           if (flag === 1) break;
-          for (let j = 0; j < data1[i].value.length; j+=1) {
-            if ((datamid1[i].value)[j].value > 0) {
-              (datamid1[i].value)[j].value = Math.log((datamid1[i].value)[j].value);
+          for (let j = 0; j < data1[i].value.length; j += 1) {
+            if (datamid1[i].value[j].value > 0) {
+              datamid1[i].value[j].value = Math.log(datamid1[i].value[j].value);
             } else {
               flag = 1;
               break;
@@ -900,43 +1076,51 @@ export default {
       }
       const smoothdata0 = [].concat(JSON.parse(JSON.stringify(data0)));
       const smoothdata1 = [].concat(JSON.parse(JSON.stringify(data1)));
-      for (let i = 0; i < smoothdata0.length; i+=1) {
-        let last = (smoothdata0[i].value)[0].value;
-        for (let j = 1; j < smoothdata0[i].value.length; j+=1) {
-          (smoothdata0[i].value)[j].value = last * smooth + (1 - smooth) * (smoothdata0[i].value)[j].value;
-          last = (smoothdata0[i].value)[j].value;
+      for (let i = 0; i < smoothdata0.length; i += 1) {
+        let last = smoothdata0[i].value[0].value;
+        for (let j = 1; j < smoothdata0[i].value.length; j += 1) {
+          smoothdata0[i].value[j].value =
+            last * smooth + (1 - smooth) * smoothdata0[i].value[j].value;
+          last = smoothdata0[i].value[j].value;
         }
       }
-      for (let i = 0; i < smoothdata1.length; i+=1) {
-        let last = (smoothdata1[i].value)[0].value;
-        for (let j = 1; j < smoothdata1[i].value.length; j+=1) {
-          (smoothdata1[i].value)[j].value = last * smooth + (1 - smooth) * (smoothdata1[i].value)[j].value;
-          last = (smoothdata1[i].value)[j].value;
+      for (let i = 0; i < smoothdata1.length; i += 1) {
+        let last = smoothdata1[i].value[0].value;
+        for (let j = 1; j < smoothdata1[i].value.length; j += 1) {
+          smoothdata1[i].value[j].value =
+            last * smooth + (1 - smooth) * smoothdata1[i].value[j].value;
+          last = smoothdata1[i].value[j].value;
         }
       }
       let dataset00 = [];
       let dataset11 = [];
       let dataset0 = [];
       let dataset1 = [];
-      for (let i = 0; i < data0.length; i+=1) {
+      for (let i = 0; i < data0.length; i += 1) {
         data0[i].order = i;
         smoothdata0[i].order = i;
         dataset00 = dataset00.concat(data0[i].value);
         dataset0 = dataset0.concat(smoothdata0[i].value);
       }
-      for (let i = 0; i < data1.length; i+=1) {
+      for (let i = 0; i < data1.length; i += 1) {
         data1[i].order = i;
         smoothdata1[i].order = i;
         dataset11 = dataset11.concat(data1[i].value);
         dataset1 = dataset1.concat(smoothdata1[i].value);
       }
       // color palette
-      const res0 = data0.map(function my40(d) { return d.order; }); // list of group names
-      const color0 = d3.scaleOrdinal()
+      const res0 = data0.map(function my40(d) {
+        return d.order;
+      }); // list of group names
+      const color0 = d3
+        .scaleOrdinal()
         .domain(res0)
         .range(['#ed357b', '#1d276e', '#6ec6d0', '#0c9257', '#ffdf1e', '#fe8325']);
-      const res1 = data1.map(function my41(d) { return d.order; }); // list of group names
-      const color1 = d3.scaleOrdinal()
+      const res1 = data1.map(function my41(d) {
+        return d.order;
+      }); // list of group names
+      const color1 = d3
+        .scaleOrdinal()
         .domain(res1)
         .range(['#fe8325', '#ffdf1e', '#0c9257', '#6ec6d0', '#1d276e', '#ed357b']);
 
@@ -946,20 +1130,22 @@ export default {
       const height = 250 + 20 * legendnumber - margin.top - margin.bottom;
 
       // append the svg object to the body of the page
-      const svg = d3.select(`#${  this.classname}`)
+      const svg = d3
+        .select(`#${this.classname}`)
         .append('svg')
-        .attr('id', `svg${  this.classname}`)
+        .attr('id', `svg${this.classname}`)
         .attr('width', '100%')
         .attr('height', '100%')
         .attr('preserveAspectRatio', 'xMidYMid meet')
-        .attr('viewBox', `0 0 350 ${  (250 + 20 * legendnumber).toString()}`)
+        .attr('viewBox', `0 0 350 ${(250 + 20 * legendnumber).toString()}`)
         .append('g')
-        .attr('transform',
-          `translate(${  margin.left  },${  margin.top  })`);
+        .attr('transform', `translate(${margin.left},${margin.top})`);
 
       // add arrow
-      svg.append('defs').append('marker')
-        .attr('id', `yarrowhead${  this.classname}`)
+      svg
+        .append('defs')
+        .append('marker')
+        .attr('id', `yarrowhead${this.classname}`)
         .attr('markerUnits', 'strokeWidth')
         .attr('markerWidth', '15')
         .attr('markerHeight', '15')
@@ -971,52 +1157,64 @@ export default {
         .attr('d', 'M2,2 L10,6 L2,10 L6,6 L2,2');
 
       // Add X axis
-      const xdomain0 = d3.extent(dataset00, function my42(d) { return d.step; });
-      const xdomain1 = d3.extent(dataset11, function my43(d) { return d.step; });
+      const xdomain0 = d3.extent(dataset00, function my42(d) {
+        return d.step;
+      });
+      const xdomain1 = d3.extent(dataset11, function my43(d) {
+        return d.step;
+      });
       const xdomain = [];
       xdomain[0] = Math.min(xdomain0[0], xdomain1[0]);
       xdomain[1] = Math.max(xdomain0[1], xdomain1[1]);
       const xgap = xdomain[1] - xdomain[0];
       xdomain[0] -= xgap / 4;
       xdomain[1] += xgap / 4;
-      const x = d3.scaleLinear()
+      const x = d3
+        .scaleLinear()
         .domain(xdomain)
         .rangeRound([0, width]);
-      const xAxis = svg.append('g')
-        .attr('transform', `translate(0,${  height  })`)
+      const xAxis = svg
+        .append('g')
+        .attr('transform', `translate(0,${height})`)
         .call(
-          d3.axisBottom(x)
+          d3
+            .axisBottom(x)
             .tickSizeOuter(0)
             .ticks(5)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               return scientificNotation(d, 1);
-            }),
+            })
         );
-      svg.append('text')
+      svg
+        .append('text')
         .attr('text-anchor', 'middle')
         .attr('x', width / 2)
         .attr('y', height + margin.top + 20)
         .text('step');
 
       // Add Y0 axis
-      const ydomain0 = d3.extent(dataset00, function my44(d) { return d.value; });
+      const ydomain0 = d3.extent(dataset00, function my44(d) {
+        return d.value;
+      });
       const ygap0 = ydomain0[1] - ydomain0[0];
       ydomain0[0] -= ygap0 / 4;
       ydomain0[1] += ygap0 / 4;
-      const y0 = d3.scaleLinear()
+      const y0 = d3
+        .scaleLinear()
         .domain(ydomain0)
         .rangeRound([height, 0]);
-      const yAxis0 = svg.append('g')
-        .call(
-          d3.axisLeft(y0)
-            .tickSizeOuter(0)
-            .ticks(5)
-            .tickFormat(d => {
-              return scientificNotation(d, 1);
-            }),
-        );
-      yAxis0.select('path').attr('marker-end', `url(#yarrowhead${  this.classname  })`);
-      svg.append('text')
+      const yAxis0 = svg.append('g').call(
+        d3
+          .axisLeft(y0)
+          .tickSizeOuter(0)
+          .ticks(5)
+          .tickFormat((d) => {
+            return scientificNotation(d, 1);
+          })
+      );
+      yAxis0.select('path').attr('marker-end', `url(#yarrowhead${this.classname})`);
+      svg
+        .append('text')
         .attr('text-anchor', 'middle')
         .attr('transform', 'rotate(-90)')
         .attr('y', -margin.left + 20)
@@ -1024,33 +1222,41 @@ export default {
         .text(yaxis0);
 
       // Add Y1 axis
-      const ydomain1 = d3.extent(dataset11, function my45(d) { return d.value; });
+      const ydomain1 = d3.extent(dataset11, function my45(d) {
+        return d.value;
+      });
       const ygap1 = ydomain1[1] - ydomain1[0];
       ydomain1[0] -= ygap1 / 4;
       ydomain1[1] += ygap1 / 4;
-      const y1 = d3.scaleLinear()
+      const y1 = d3
+        .scaleLinear()
         .domain(ydomain1)
         .rangeRound([height, 0]);
-      const yAxis1 = svg.append('g')
-        .attr('transform', `translate(${  width  },0)`)
+      const yAxis1 = svg
+        .append('g')
+        .attr('transform', `translate(${width},0)`)
         .call(
-          d3.axisRight(y1)
+          d3
+            .axisRight(y1)
             .tickSizeOuter(0)
             .ticks(5)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               return scientificNotation(d, 1);
-            }),
+            })
         );
-      yAxis1.select('path').attr('marker-end', `url(#yarrowhead${  this.classname  })`);
-      svg.append('text')
+      yAxis1.select('path').attr('marker-end', `url(#yarrowhead${this.classname})`);
+      svg
+        .append('text')
         .attr('text-anchor', 'middle')
         .attr('transform', 'rotate(-90)')
         .attr('y', width + margin.left - 10)
         .attr('x', -height / 2)
         .text(yaxis1);
       // Add a clipPath: everything out of this area won't be drawn.
-      svg.append('defs').append('svg:clipPath')
-        .attr('id', `clip${  this.classname}`)
+      svg
+        .append('defs')
+        .append('svg:clipPath')
+        .attr('id', `clip${this.classname}`)
         .append('svg:rect')
         .attr('width', width)
         .attr('height', height)
@@ -1058,39 +1264,56 @@ export default {
         .attr('y', 0);
 
       // Add brushing
-      const brush = d3.brush()
-        .extent([[0, 0], [width, height]]);
+      const brush = d3.brush().extent([
+        [0, 0],
+        [width, height],
+      ]);
 
       // Create the line variable: where both the line and the brush take place
-      const line = svg.append('g')
-        .attr('clip-path', `url(#clip${  this.classname  })`);
+      const line = svg.append('g').attr('clip-path', `url(#clip${this.classname})`);
 
       // Add the smooth line
-      line.selectAll('.smoothline0')
+      line
+        .selectAll('.smoothline0')
         .data(smoothdata0)
         .enter()
         .append('path')
         .attr('class', 'smoothline0')
         .attr('fill', 'none')
-        .attr('stroke', function my46(d) { return color0(d.order); })
+        .attr('stroke', function my46(d) {
+          return color0(d.order);
+        })
         .attr('stroke-width', 1.5)
         .attr('d', function my47(d) {
-          return d3.line()
-            .x(function my48(d) { return x(d.step); })
-            .y(function my49(d) { return y0(d.value); })(d.value);
+          return d3
+            .line()
+            .x(function my48(d) {
+              return x(d.step);
+            })
+            .y(function my49(d) {
+              return y0(d.value);
+            })(d.value);
         });
-      line.selectAll('.smoothline1')
+      line
+        .selectAll('.smoothline1')
         .data(smoothdata1)
         .enter()
         .append('path')
         .attr('class', 'smoothline1')
         .attr('fill', 'none')
-        .attr('stroke', function my50(d) { return color1(d.order); })
+        .attr('stroke', function my50(d) {
+          return color1(d.order);
+        })
         .attr('stroke-width', 1.5)
         .attr('d', function my51(d) {
-          return d3.line()
-            .x(function my52(d) { return x(d.step); })
-            .y(function my53(d) { return y1(d.value); })(d.value);
+          return d3
+            .line()
+            .x(function my52(d) {
+              return x(d.step);
+            })
+            .y(function my53(d) {
+              return y1(d.value);
+            })(d.value);
         });
       // Add the brushing
       line
@@ -1099,10 +1322,10 @@ export default {
         .call(brush);
       // create a tooltip
 
-      const Tooltip = d3.select(`#${  this.classname}`).select('.tooltip');
-      const td1 = d3.select(`#td1${  this.classname}`);
-      const td2 = d3.select(`#td2${  this.classname}`);
-      const td3 = d3.select(`#td3${  this.classname}`);
+      const Tooltip = d3.select(`#${this.classname}`).select('.tooltip');
+      const td1 = d3.select(`#td1${this.classname}`);
+      const td2 = d3.select(`#td2${this.classname}`);
+      const td3 = d3.select(`#td3${this.classname}`);
 
       line
         .selectAll('.myCircle0')
@@ -1110,8 +1333,12 @@ export default {
         .enter()
         .append('circle')
         .attr('class', 'myCircle0')
-        .attr('cx', function my54(d) { return x(d.step); })
-        .attr('cy', function my55(d) { return y0(d.value); })
+        .attr('cx', function my54(d) {
+          return x(d.step);
+        })
+        .attr('cy', function my55(d) {
+          return y0(d.value);
+        })
         .attr('r', 3)
         .attr('stroke', 'black')
         .attr('stroke-width', 10)
@@ -1139,8 +1366,12 @@ export default {
         .enter()
         .append('circle')
         .attr('class', 'myCircle1')
-        .attr('cx', function my59(d) { return x(d.step); })
-        .attr('cy', function my60(d) { return y1(d.value); })
+        .attr('cx', function my59(d) {
+          return x(d.step);
+        })
+        .attr('cy', function my60(d) {
+          return y1(d.value);
+        })
         .attr('r', 3)
         .attr('stroke', 'black')
         .attr('stroke-width', 10)
@@ -1165,16 +1396,18 @@ export default {
 
       const firstdatanumber = smoothdata0.length;
       // add the legend0
-      const legend0 = svg.selectAll('.legend0')
+      const legend0 = svg
+        .selectAll('.legend0')
         .data(smoothdata0)
         .enter()
         .append('g')
         .attr('class', 'legend0')
         .attr('transform', function my64(d, i) {
-          return `translate(0,${  i * 20  })`;
+          return `translate(0,${i * 20})`;
         });
 
-      legend0.append('rect')
+      legend0
+        .append('rect')
         .attr('x', -40)
         .attr('y', height + margin.top + 40)
         .attr('width', 18)
@@ -1183,24 +1416,29 @@ export default {
           return color0(d.order);
         });
 
-      legend0.append('text')
+      legend0
+        .append('text')
         .attr('x', -16)
         .attr('y', height + margin.top + 40)
         .attr('dy', '.5em')
         .attr('font-size', '10px')
         .style('text-anchor', 'start')
-        .text(function my66(d) { return `${d.run  },${  d.tag}`; });
+        .text(function my66(d) {
+          return `${d.run},${d.tag}`;
+        });
       // add the legend0
-      const legend1 = svg.selectAll('.legend1')
+      const legend1 = svg
+        .selectAll('.legend1')
         .data(smoothdata1)
         .enter()
         .append('g')
         .attr('class', 'legend1')
         .attr('transform', function my67(d, i) {
-          return `translate(0,${  (firstdatanumber + i) * 20  })`;
+          return `translate(0,${(firstdatanumber + i) * 20})`;
         });
 
-      legend1.append('rect')
+      legend1
+        .append('rect')
         .attr('x', -40)
         .attr('y', height + margin.top + 40)
         .attr('width', 18)
@@ -1209,16 +1447,21 @@ export default {
           return color1(d.order);
         });
 
-      legend1.append('text')
+      legend1
+        .append('text')
         .attr('x', -16)
         .attr('y', height + margin.top + 40)
         .attr('dy', '.5em')
         .attr('font-size', '10px')
         .style('text-anchor', 'start')
-        .text(function my69(d) { return `${d.run  },${  d.tag}`; });
+        .text(function my69(d) {
+          return `${d.run},${d.tag}`;
+        });
       // A function that set idleTimeOut to null
       let idleTimeout;
-      function idled() { idleTimeout = null; }
+      function idled() {
+        idleTimeout = null;
+      }
 
       // A function that update the chart for given boundaries
       function updateChart() {
@@ -1237,121 +1480,172 @@ export default {
           y1.domain([y1.invert(extent[1][1]), y1.invert(extent[0][1])]);
           line.select('.brush').call(brush.move, null);
         }
-        xAxis.transition().duration(1000).call(
-          d3.axisBottom(x)
-            .tickSizeOuter(0)
-            .ticks(5)
-            .tickFormat(d => {
-              return scientificNotation(d, 1);
-            }),
-        );
-        yAxis0.transition().duration(1000).call(
-          d3.axisLeft(y0)
-            .tickSizeOuter(0)
-            .ticks(5)
-            .tickFormat(d => {
-              return scientificNotation(d, 1);
-            }),
-        );
-        yAxis1.transition().duration(1000).call(
-          d3.axisRight(y1)
-            .tickSizeOuter(0)
-            .ticks(5)
-            .tickFormat(d => {
-              return scientificNotation(d, 1);
-            }),
-        );
+        xAxis
+          .transition()
+          .duration(1000)
+          .call(
+            d3
+              .axisBottom(x)
+              .tickSizeOuter(0)
+              .ticks(5)
+              .tickFormat((d) => {
+                return scientificNotation(d, 1);
+              })
+          );
+        yAxis0
+          .transition()
+          .duration(1000)
+          .call(
+            d3
+              .axisLeft(y0)
+              .tickSizeOuter(0)
+              .ticks(5)
+              .tickFormat((d) => {
+                return scientificNotation(d, 1);
+              })
+          );
+        yAxis1
+          .transition()
+          .duration(1000)
+          .call(
+            d3
+              .axisRight(y1)
+              .tickSizeOuter(0)
+              .ticks(5)
+              .tickFormat((d) => {
+                return scientificNotation(d, 1);
+              })
+          );
         line
           .selectAll('.smoothline0')
           .transition()
           .duration(1000)
           .attr('d', function my92(d) {
-            return d3.line()
-              .x(function my93(d) { return x(d.step); })
-              .y(function my94(d) { return y0(d.value); })(d.value);
+            return d3
+              .line()
+              .x(function my93(d) {
+                return x(d.step);
+              })
+              .y(function my94(d) {
+                return y0(d.value);
+              })(d.value);
           });
         line
           .selectAll('.smoothline1')
           .transition()
           .duration(1000)
           .attr('d', function my95(d) {
-            return d3.line()
-              .x(function my96(d) { return x(d.step); })
-              .y(function my97(d) { return y1(d.value); })(d.value);
+            return d3
+              .line()
+              .x(function my96(d) {
+                return x(d.step);
+              })
+              .y(function my97(d) {
+                return y1(d.value);
+              })(d.value);
           });
         line
           .selectAll('.myCircle0')
           .transition()
           .duration(1000)
-          .attr('cx', function my98(d) { return x(d.step); })
-          .attr('cy', function my99(d) { return y0(d.value); });
+          .attr('cx', function my98(d) {
+            return x(d.step);
+          })
+          .attr('cy', function my99(d) {
+            return y0(d.value);
+          });
         line
           .selectAll('.myCircle1')
           .transition()
           .duration(1000)
-          .attr('cx', function my100(d) { return x(d.step); })
-          .attr('cy', function my101(d) { return y1(d.value); });
+          .attr('cx', function my100(d) {
+            return x(d.step);
+          })
+          .attr('cy', function my101(d) {
+            return y1(d.value);
+          });
       }
       brush.on('end', updateChart);
       // If user double click, reinitialize the chart
       svg.on('dblclick', function my70() {
         x.domain(xdomain);
         xAxis.transition().call(
-          d3.axisBottom(x)
+          d3
+            .axisBottom(x)
             .tickSizeOuter(0)
             .ticks(5)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               return scientificNotation(d, 1);
-            }),
+            })
         );
         y0.domain(ydomain0);
         yAxis0.transition().call(
-          d3.axisLeft(y0)
+          d3
+            .axisLeft(y0)
             .tickSizeOuter(0)
             .ticks(5)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               return scientificNotation(d, 1);
-            }),
+            })
         );
         y1.domain(ydomain1);
         yAxis1.transition().call(
-          d3.axisRight(y1)
+          d3
+            .axisRight(y1)
             .tickSizeOuter(0)
             .ticks(5)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               return scientificNotation(d, 1);
-            }),
+            })
         );
         line
           .selectAll('.smoothline0')
           .transition()
           .duration(1000)
           .attr('d', function my71(d) {
-            return d3.line()
-              .x(function my72(d) { return x(d.step); })
-              .y(function my73(d) { return y0(d.value); })(d.value);
+            return d3
+              .line()
+              .x(function my72(d) {
+                return x(d.step);
+              })
+              .y(function my73(d) {
+                return y0(d.value);
+              })(d.value);
           });
         line
           .selectAll('.myCircle0')
           .transition()
           .duration(1000)
-          .attr('cx', function my74(d) { return x(d.step); })
-          .attr('cy', function my75(d) { return y0(d.value); });
+          .attr('cx', function my74(d) {
+            return x(d.step);
+          })
+          .attr('cy', function my75(d) {
+            return y0(d.value);
+          });
         line
           .selectAll('.smoothline1')
           .transition()
           .duration(1000)
           .attr('d', function my76(d) {
-            return d3.line()
-              .x(function my77(d) { return x(d.step); })
-              .y(function my78(d) { return y1(d.value); })(d.value);
+            return d3
+              .line()
+              .x(function my77(d) {
+                return x(d.step);
+              })
+              .y(function my78(d) {
+                return y1(d.value);
+              })(d.value);
           });
         line
           .selectAll('.myCircle1')
           .transition()
           .duration(1000)
-          .attr('cx', function my79(d) { return x(d.step); })
-          .attr('cy', function my80(d) { return y1(d.value); });
+          .attr('cx', function my79(d) {
+            return x(d.step);
+          })
+          .attr('cy', function my80(d) {
+            return y1(d.value);
+          });
       });
     },
   },
@@ -1359,47 +1653,47 @@ export default {
 </script>
 
 <style lang="less" scoped>
-    .chart {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      background-color: white;
-    }
+.chart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+}
 
-    .tooltip {
-      position: absolute;
-      bottom: 5%;
-      width: 90%;
-      padding: 5px;
-      margin-right: 5%;
-      margin-left: 5%;
-      color: white;
-      visibility: hidden;
-      background-color: rgba(0, 73, 134);
-      border-radius: 5px;
-    }
+.tooltip {
+  position: absolute;
+  bottom: 5%;
+  width: 90%;
+  padding: 5px;
+  margin-right: 5%;
+  margin-left: 5%;
+  color: white;
+  visibility: hidden;
+  background-color: rgba(0, 73, 134);
+  border-radius: 5px;
+}
 
-    .font1 {
-      font-size: 30px;
-    }
+.font1 {
+  font-size: 30px;
+}
 
-    .font2 {
-      font-size: 10px;
-    }
+.font2 {
+  font-size: 10px;
+}
 
-    table {
-      width: 100%;
-    }
+table {
+  width: 100%;
+}
 
-    td {
-      text-align: center;
-    }
+td {
+  text-align: center;
+}
 
-    .td1 {
-      width: 40%;
-    }
+.td1 {
+  width: 40%;
+}
 
-    .td2 {
-      width: 20%;
-    }
- </style>
\ No newline at end of file
+.td2 {
+  width: 20%;
+}
+</style>
diff --git a/webapp/src/views/visual/Visual/scalars/scalarcontainer/scalarchart/index.js b/webapp/src/views/visual/Visual/scalars/scalarcontainer/scalarchart/index.js
index 6599eb1..268f748 100644
--- a/webapp/src/views/visual/Visual/scalars/scalarcontainer/scalarchart/index.js
+++ b/webapp/src/views/visual/Visual/scalars/scalarcontainer/scalarchart/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as Scalarchart } from './Scalarchart';
diff --git a/webapp/src/views/visual/Visual/scalars/subscalar/SubScalars.vue b/webapp/src/views/visual/Visual/scalars/subscalar/SubScalars.vue
index 5e37f74..a636d65 100644
--- a/webapp/src/views/visual/Visual/scalars/subscalar/SubScalars.vue
+++ b/webapp/src/views/visual/Visual/scalars/subscalar/SubScalars.vue
@@ -1,25 +1,27 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div v-show="subshow" class="scalars-container">
     <div class="scalars-title" @click="showContent()">
-      <div :class="[show?'sub':'sub1']">
+      <div :class="[show ? 'sub' : 'sub1']">
         <div class="my-label">
-          <div class="my-text"><span>{{ info }}</span></div>
+          <div class="my-text">
+            <span>{{ info }}</span>
+          </div>
           <div class="circle-father"><div class="circle" /></div>
           <div class="triangle-father">
             <div class="triangle" />
@@ -27,12 +29,18 @@
         </div>
       </div>
       <div class="line1" />
-      <div :class="['line2', show?'linestyle':'']" />
+      <div :class="['line2', show ? 'linestyle' : '']" />
     </div>
-    <div :class="[show?'showClass':'']">
+    <div :class="[show ? 'showClass' : '']">
       <div class="scalarscontent">
         <el-row :gutter="20">
-          <scalar-container v-for="item in data" v-show="isshow[item.run]" :key="item.index" :content="item" :subname="subname" />
+          <scalar-container
+            v-for="item in data"
+            v-show="isshow[item.run]"
+            :key="item.index"
+            :content="item"
+            :subname="subname"
+          />
         </el-row>
       </div>
     </div>
@@ -42,7 +50,11 @@
 import { createNamespacedHelpers } from 'vuex';
 import { ScalarContainer } from '../scalarcontainer';
 
-const { mapGetters: mapScalarGetters, mapActions: mapScalarActions, mapMutations: mapScalarMutations } = createNamespacedHelpers('Visual/scalar');
+const {
+  mapGetters: mapScalarGetters,
+  mapActions: mapScalarActions,
+  mapMutations: mapScalarMutations,
+} = createNamespacedHelpers('Visual/scalar');
 const { mapState: mapLayoutStates } = createNamespacedHelpers('Visual/layout');
 export default {
   components: {
@@ -63,17 +75,13 @@ export default {
     };
   },
   computed: {
-    ...mapScalarGetters([
-      'detailData', 'categoryInfo', 'initshowrun', 'showFlag', 'subisshow',
-    ]),
-    ...mapLayoutStates([
-      'userSelectRunFile',
-    ]),
+    ...mapScalarGetters(['detailData', 'categoryInfo', 'initshowrun', 'showFlag', 'subisshow']),
+    ...mapLayoutStates(['userSelectRunFile']),
   },
   watch: {
     userSelectRunFile(val) {
       let flag = 1;
-      for (let i = 0; i < Object.keys(this.isshow).length; i+=1) {
+      for (let i = 0; i < Object.keys(this.isshow).length; i += 1) {
         if (val.indexOf(Object.keys(this.isshow)[i]) > -1) {
           this.isshow[Object.keys(this.isshow)[i]] = true;
           flag -= 1;
@@ -93,7 +101,7 @@ export default {
   created() {
     this.info = this.subname;
     if (this.info.length > 10) {
-      this.info = `${this.info.slice(0, 7)  }...`;
+      this.info = `${this.info.slice(0, 7)}...`;
     }
     this.isshow = this.initshowrun[this.subname];
     if (!(this.subname in this.showFlag)) {
@@ -121,11 +129,14 @@ export default {
     }
   },
   methods: {
-    ...mapScalarActions([
-      'getData',
-    ]),
+    ...mapScalarActions(['getData']),
     ...mapScalarMutations([
-      'setDetailData', 'setshowrun', 'back', 'setFreshInfo', 'setshowFlag', 'setsubisshow',
+      'setDetailData',
+      'setshowrun',
+      'back',
+      'setFreshInfo',
+      'setshowFlag',
+      'setsubisshow',
     ]),
     showContent() {
       if (this.showFlag[this.subname]) {
@@ -142,7 +153,8 @@ export default {
     },
   },
 };
-</script>>
+</script>
+>
 
 <style lang="less" scoped>
 .scalars-container {
@@ -176,8 +188,8 @@ export default {
     width: 0;
     height: 0;
     overflow: hidden;
-    border-color: transparent transparent   transparent #7f7cc1;
-    border-style: dashed  dashed  dashed solid;
+    border-color: transparent transparent transparent #7f7cc1;
+    border-style: dashed dashed dashed solid;
     border-top-width: 15px;
     border-right-width: 18px;
     border-bottom-width: 15px;
@@ -223,7 +235,7 @@ export default {
 }
 
 .sub .triangle {
-  border-color: transparent transparent   transparent #b8c6ff;
+  border-color: transparent transparent transparent #b8c6ff;
 }
 
 .sub .circle-father {
@@ -275,4 +287,4 @@ export default {
 .scalars-title:hover {
   cursor: pointer;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/visual/Visual/scalars/subscalar/index.js b/webapp/src/views/visual/Visual/scalars/subscalar/index.js
index 2020faa..f87d076 100644
--- a/webapp/src/views/visual/Visual/scalars/subscalar/index.js
+++ b/webapp/src/views/visual/Visual/scalars/subscalar/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as subScalars } from './SubScalars';
diff --git a/webapp/src/views/visual/Visual/statistics/Statistics.vue b/webapp/src/views/visual/Visual/statistics/Statistics.vue
index ddddc48..d301372 100644
--- a/webapp/src/views/visual/Visual/statistics/Statistics.vue
+++ b/webapp/src/views/visual/Visual/statistics/Statistics.vue
@@ -1,28 +1,26 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div>
     <div class="temp">
       <div :class="['display-panel']">
-        <subStatistics
-          v-for="(item,index) in getCategoryInfo"
-          :key="index"
-          :categoryInfo="item"
-        >{{ item }}</subStatistics>
+        <subStatistics v-for="(item, index) in getCategoryInfo" :key="index" :categoryInfo="item">{{
+          item
+        }}</subStatistics>
       </div>
     </div>
   </div>
@@ -38,10 +36,7 @@ export default {
     subStatistics,
   },
   computed: {
-    ...mapStatisticGatters([
-      'getCategoryInfo',
-      'getErrorMessage',
-    ]),
+    ...mapStatisticGatters(['getCategoryInfo', 'getErrorMessage']),
   },
   watch: {
     getErrorMessage(val) {
@@ -70,4 +65,4 @@ export default {
   border-radius: 5px 5px 0 0;
   box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/webapp/src/views/visual/Visual/statistics/StatisticsPanel.vue b/webapp/src/views/visual/Visual/statistics/StatisticsPanel.vue
index 018ca64..2944938 100644
--- a/webapp/src/views/visual/Visual/statistics/StatisticsPanel.vue
+++ b/webapp/src/views/visual/Visual/statistics/StatisticsPanel.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="temp statisticPanelTemp">
@@ -21,7 +21,6 @@
         <div class="statisticPanel">
           <div class="infoTitle" @click="scrollToTop(0)">直方图</div>
           <div class="statisticPanelContent">
-
             <div class="histPanel">
               <div class="scroll scroll1">
                 <span>数据显示比率({{ showNumber }}%)</span>
@@ -181,7 +180,8 @@ export default {
       document.getElementsByClassName('statistics-container')[index].scrollIntoView(true);
     },
     myChangeShownumber(showNumber) {
-      if (!this.getDrawAllSvgFinished) { // 没有绘制完，不允许操作控制面板，并还原数据
+      if (!this.getDrawAllSvgFinished) {
+        // 没有绘制完，不允许操作控制面板，并还原数据
         this.$message({
           message: '统计分析页面还在渲染中，勿操作控制面板',
           type: 'warning',
@@ -215,7 +215,8 @@ export default {
     },
   },
 };
-</script>>
+</script>
+>
 
 <style lang="less" scoped>
 .statisticPanel {
@@ -345,8 +346,8 @@ export default {
   color: #9492cb;
 }
 
-/deep/ .histmodeselect [class*=" el-icon-"],
-[class^=el-icon-] {
+/deep/ .histmodeselect [class*=' el-icon-'],
+[class^='el-icon-'] {
   font-weight: 900;
 }
 
diff --git a/webapp/src/views/visual/Visual/statistics/drawStatistic/HisOrtho.vue b/webapp/src/views/visual/Visual/statistics/drawStatistic/HisOrtho.vue
index 5965909..8183597 100644
--- a/webapp/src/views/visual/Visual/statistics/drawStatistic/HisOrtho.vue
+++ b/webapp/src/views/visual/Visual/statistics/drawStatistic/HisOrtho.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div :class="className" />
@@ -21,7 +21,10 @@
 import { createNamespacedHelpers } from 'vuex';
 import * as d3 from 'd3';
 
-const { mapGetters: mapStatisticGetters, mapMutations: mapStatisticMutations } = createNamespacedHelpers('Visual/statistic');
+const {
+  mapGetters: mapStatisticGetters,
+  mapMutations: mapStatisticMutations,
+} = createNamespacedHelpers('Visual/statistic');
 export default {
   name: 'Oneorthographic',
   props: {
@@ -34,7 +37,7 @@ export default {
   },
   data() {
     return {
-      id: `overlay${  this.itemp}`,
+      id: `overlay${this.itemp}`,
     };
   },
   computed: {
@@ -62,15 +65,15 @@ export default {
     drawOverlay() {
       // label是这组数据的标签，ttlabel是这组数据属于哪个集合
       const label = this.id;
-      const {data} = this;
-      const className = `.${  this.className}`;
+      const { data } = this;
+      const className = `.${this.className}`;
       const that = this;
       // 先找到value和number的最大值和最小值
       let numberMin = 10000;
       let numberMax = 0;
-      for (let i = 0; i < data.length; i+=1) {
-        for (let j = 0; j < data[i].length; j+=1) {
-          const pixel= data[i][j][1];
+      for (let i = 0; i < data.length; i += 1) {
+        for (let j = 0; j < data[i].length; j += 1) {
+          const pixel = data[i][j][1];
           if (numberMin > pixel) numberMin = pixel;
           if (numberMax < pixel) numberMax = pixel;
         }
@@ -86,7 +89,7 @@ export default {
       const div = d3
         .select(className)
         .append('div')
-        .attr('id', `${label  }div`);
+        .attr('id', `${label}div`);
       const outersvg = div
         .append('svg')
         .attr('id', label) // 在放大缩小时有用
@@ -110,23 +113,20 @@ export default {
       svg
         .append('g')
         .attr('class', 'axis')
-        .attr(
-          'transform',
-          `translate(${  padding.left  },${  padding.top + height  })`,
-        )
+        .attr('transform', `translate(${padding.left},${padding.top + height})`)
         .call(
           d3
             .axisBottom()
             .scale(xscale)
             .ticks(5)
             .tickSize(-height)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               if (d > 10000) {
                 const numLen = d.toString().length - 1;
-                return `${d / (10 ** numLen)  }e+${  numLen}`;
+                return `${d / 10 ** numLen}e+${numLen}`;
               }
               return d;
-            }),
+            })
         );
       const yscale = d3
         .scaleLinear()
@@ -136,34 +136,34 @@ export default {
       svg
         .append('g')
         .attr('class', 'axis')
-        .attr(
-          'transform',
-          `translate(${  padding.left + width  },${  padding.top  })`,
-        )
+        .attr('transform', `translate(${padding.left + width},${padding.top})`)
         .call(
           d3
             .axisRight()
             .scale(yscale)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               if (d > 10000) {
                 const numLen = d.toString().length - 1;
-                return `${d / (10 ** numLen)  }e+${  numLen}`;
-              } if (d < 0.001) {
+                return `${d / 10 ** numLen}e+${numLen}`;
+              }
+              if (d < 0.001) {
                 if (d === 0) return d;
                 const dString = d.toString();
                 let i = 3;
-                for (; i < dString.length; i+=1) {
+                for (; i < dString.length; i += 1) {
                   if (dString[i] !== '0') {
                     break;
                   }
                 }
-                return `${(d * (10 ** (i - 1))).toFixed(1)  }e-${  i - 1}`;
+                return `${(d * 10 ** (i - 1)).toFixed(1)}e-${i - 1}`;
               }
               return d;
             })
-            .tickSize(-width),
+            .tickSize(-width)
         );
-      svg.append('g').append('text')
+      svg
+        .append('g')
+        .append('text')
         .attr('transform', 'rotate(90)')
         .attr('y', -(svgWidth - 13))
         .attr('x', svgHeight / 2)
@@ -268,10 +268,7 @@ export default {
         if (ytext > 10000) {
           ytext = Math.ceil(ytext);
           const numLen = ytext.toString().length - 1;
-          ytext =
-            `${Math.ceil((ytext / (10 ** numLen)) * 100) / 100 
-            }e+${ 
-            numLen}`;
+          ytext = `${Math.ceil((ytext / 10 ** numLen) * 100) / 100}e+${numLen}`;
         }
         svg
           .select('.ycoord')
@@ -286,7 +283,7 @@ export default {
         svg
           .select('.textbox')
           .attr('visibility', 'visible')
-          .text(`step:${  myData[0][2]}`)
+          .text(`step:${myData[0][2]}`)
           .attr('x', curX + 5)
           .attr('y', curY - 10);
 
@@ -311,13 +308,18 @@ export default {
           return d[1];
         });
         let curCountMax = 0;
-        for (let it = 0; it < myData.length; it+=1) {
+        for (let it = 0; it < myData.length; it += 1) {
           const pixel = myData[it][1];
           if (curCountMax < pixel) {
             curCountMax = pixel;
           }
         }
-        that.setStatisticInfo([myData[0][2], Math.ceil(curDataCountSum), curCountMin, curCountMax.toFixed(2)]);
+        that.setStatisticInfo([
+          myData[0][2],
+          Math.ceil(curDataCountSum),
+          curCountMin,
+          curCountMax.toFixed(2),
+        ]);
       }
       pathg
         .selectAll('path')
@@ -325,21 +327,17 @@ export default {
         .enter()
         .append('g')
         .append('path')
-        .attr(
-          'transform',
-          `translate(${  padding.left  },${  padding.top  })`,
-        )
+        .attr('transform', `translate(${padding.left},${padding.top})`)
         .attr('fill', 'none')
         .attr('d', function _nonName(d) {
           return lineFunction(d);
         })
         .attr('stroke', function _nonName(d, i) {
           if (i % 2 === 0) return 'white';
-          
-            const redcolor = 255 - i * dc;
-            const bluecolor = i * dc;
-            return `rgb(${  redcolor  },0,${  bluecolor  })`;
-          
+
+          const redcolor = 255 - i * dc;
+          const bluecolor = i * dc;
+          return `rgb(${redcolor},0,${bluecolor})`;
         })
         .attr('stroke-width', function _nonName(d, i) {
           if (i % 2 === 0) return 0.8;
@@ -351,7 +349,7 @@ export default {
         })
         .attr('id', function _nonName(d, i) {
           // 白线也要给id，方便隐藏
-          return `${label  }step${  i}`;
+          return `${label}step${i}`;
         })
         .attr('class', function _nonName(d, i) {
           return i;
@@ -363,10 +361,7 @@ export default {
             .select('.lastline')
             .attr('visibility', 'visible')
             .attr('d', lineFunction(d))
-            .attr(
-              'transform',
-              `translate(${  padding.left  },${  padding.top  })`,
-            )
+            .attr('transform', `translate(${padding.left},${padding.top})`)
             .on('mousemove', function _nonName() {
               mouseMoveFunc(lastLineData);
             });
diff --git a/webapp/src/views/visual/Visual/statistics/drawStatistic/HisOverlook.vue b/webapp/src/views/visual/Visual/statistics/drawStatistic/HisOverlook.vue
index a0bd7df..5bab712 100644
--- a/webapp/src/views/visual/Visual/statistics/drawStatistic/HisOverlook.vue
+++ b/webapp/src/views/visual/Visual/statistics/drawStatistic/HisOverlook.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div :class="className" />
@@ -35,7 +35,7 @@ export default {
   },
   data() {
     return {
-      id: `dist${  this.itemp}`,
+      id: `dist${this.itemp}`,
     };
   },
   computed: {
@@ -53,8 +53,8 @@ export default {
   methods: {
     drawDistri() {
       const label = this.id;
-      const {data} = this;
-      const className = `.${  this.className}`;
+      const { data } = this;
+      const className = `.${this.className}`;
 
       const svgwidth = 290;
       const svgheight = 250;
@@ -62,7 +62,7 @@ export default {
       const div = d3
         .select(className)
         .append('div')
-        .attr('id', `${label  }div`);
+        .attr('id', `${label}div`);
       const svg = div
         .append('svg')
         .attr('width', '100%')
@@ -78,11 +78,11 @@ export default {
       const stepMax = data[0][data[0].length - 1][0];
       let valueMin = 10000;
       let valueMax = -10000;
-      for (let j = 0; j < data[0].length; j+=1) {
+      for (let j = 0; j < data[0].length; j += 1) {
         const pixel = data[0][j][1];
         if (pixel < valueMin) valueMin = pixel;
       }
-      for (let j = 0; j < data[dataLen - 1].length; j+=1) {
+      for (let j = 0; j < data[dataLen - 1].length; j += 1) {
         const pixel2 = data[dataLen - 1][j][1];
         if (pixel2 > valueMax) {
           valueMax = pixel2;
@@ -101,39 +101,39 @@ export default {
       svg
         .append('g')
         .attr('class', 'axis')
-        .attr(
-          'transform',
-          `translate(${  padding.left  },${  height + padding.top  })`,
-        )
+        .attr('transform', `translate(${padding.left},${height + padding.top})`)
         .call(
           d3
             .axisBottom()
             .scale(xscale)
             .tickSize(-height)
-            .tickFormat(d => {
+            .tickFormat((d) => {
               if (d > 10000) {
                 const numLen = d.toString().length - 1;
                 // eslint-disable-next-line no-restricted-properties
-                return `${d / Math.pow(10, numLen)  }e+${  numLen}`;
+                return `${d / Math.pow(10, numLen)}e+${numLen}`;
               }
               return d;
-            }),
+            })
         );
       svg
         .append('g')
         .attr('class', 'axis')
-        .attr(
-          'transform',
-          `translate(${  padding.left  },${  padding.top  })`,
-        )
+        .attr('transform', `translate(${padding.left},${padding.top})`)
         .call(
           d3
             .axisLeft()
             .scale(yscale)
-            .tickSize(-width),
+            .tickSize(-width)
         );
-      svg.append('g').append('text').text('step').attr('fill', 'grey')
-        .attr('x', svgwidth / 2).attr('y', svgheight - padding.bottom / 5).attr('font-size', '10px');
+      svg
+        .append('g')
+        .append('text')
+        .text('step')
+        .attr('fill', 'grey')
+        .attr('x', svgwidth / 2)
+        .attr('y', svgheight - padding.bottom / 5)
+        .attr('font-size', '10px');
       const pathg = svg.append('g');
       const areaFunction = d3
         .area()
@@ -148,15 +148,12 @@ export default {
         });
       const dopa = (1.0 / dataLen) * 2;
       const middle = Math.ceil(dataLen / 2);
-      for (let j = 1; j < dataLen; j+=1) {
+      for (let j = 1; j < dataLen; j += 1) {
         let opacity = dopa * j;
         if (j >= middle) opacity = dopa * (dataLen - j);
         pathg
           .append('path')
-          .attr(
-            'transform',
-            `translate(${  padding.left  },${  padding.top  })`,
-          )
+          .attr('transform', `translate(${padding.left},${padding.top})`)
           .attr('fill', this.runColor)
           .attr('stroke', this.runColor)
           .attr('stroke-width', '0.5')
@@ -174,10 +171,7 @@ export default {
         });
       pathg
         .append('path')
-        .attr(
-          'transform',
-          `translate(${  padding.left  },${  padding.top  })`,
-        )
+        .attr('transform', `translate(${padding.left},${padding.top})`)
         .attr('fill', 'none')
         .style('stroke', 'white')
         .style('stroke-width', '0.5')
diff --git a/webapp/src/views/visual/Visual/statistics/drawStatistic/HisThreeD.vue b/webapp/src/views/visual/Visual/statistics/drawStatistic/HisThreeD.vue
index 8728ed8..a04a702 100644
--- a/webapp/src/views/visual/Visual/statistics/drawStatistic/HisThreeD.vue
+++ b/webapp/src/views/visual/Visual/statistics/drawStatistic/HisThreeD.vue
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div :class="className" style="width: 100%; height: 100%;" />
@@ -22,7 +22,10 @@
 import * as d3 from 'd3';
 import { createNamespacedHelpers } from 'vuex';
 
-const { mapGetters: mapStatisticGetters, mapMutations: mapStatisticMutations } = createNamespacedHelpers('Visual/statistic');
+const {
+  mapGetters: mapStatisticGetters,
+  mapMutations: mapStatisticMutations,
+} = createNamespacedHelpers('Visual/statistic');
 
 export default {
   name: 'Onethreed',
@@ -36,7 +39,7 @@ export default {
   },
   data() {
     return {
-      id: `offset${  this.itemp}`,
+      id: `offset${this.itemp}`,
     };
   },
   computed: {
@@ -61,14 +64,14 @@ export default {
     // 显示比率
     drawOffset() {
       const label = this.id;
-      const {data} = this;
-      const className = `.${  this.className}`;
+      const { data } = this;
+      const className = `.${this.className}`;
       const that = this;
       // 先找到value和number的最大值和最小值
       let numberMin = 10000;
       let numberMax = 0;
-      for (let i = 0; i < data.length; i+=1) {
-        for (let j = 0; j < data[i].length; j+=1) {
+      for (let i = 0; i < data.length; i += 1) {
+        for (let j = 0; j < data[i].length; j += 1) {
           const pixel = data[i][j][1];
           if (numberMin > pixel) numberMin = pixel;
           if (numberMax < pixel) numberMax = pixel;
@@ -88,7 +91,7 @@ export default {
       const div = d3
         .select(className)
         .append('div')
-        .attr('id', `${label  }div`)
+        .attr('id', `${label}div`)
         .attr('width', '100%')
         .attr('height', '100%');
       const outersvg = div
@@ -109,13 +112,12 @@ export default {
       svg
         .append('g')
         .attr('class', 'axis')
-        .attr(
-          'transform',
-          `translate(${  padding.left  },${  padding.top + height  })`,
-        )
-        .call(d3.axisBottom()
-          .scale(xscale)
-          .ticks(5),
+        .attr('transform', `translate(${padding.left},${padding.top + height})`)
+        .call(
+          d3
+            .axisBottom()
+            .scale(xscale)
+            .ticks(5)
         );
       const stepscale = d3
         .scaleLinear()
@@ -125,38 +127,40 @@ export default {
       svg
         .append('g')
         .attr('class', 'axis stepaxis')
-        .attr(
-          'transform',
-          `translate(${  padding.left + width  },${  padding.top  })`,
-        )
-        .call(d3.axisRight()
-          .scale(stepscale)
-          .tickFormat(d => {
-            if (d > 10000) {
-              const numLen = d.toString().length - 1;
-              // eslint-disable-next-line no-restricted-properties
-              return `${d / Math.pow(10, numLen)  }e+${  numLen}`;
-            } if (d < 0.001) {
-              if (d === 0) return d;
-              const dString = d.toString();
-              let i = 3;
-              for (; i < dString.length; i+=1) {
-                if (dString[i] !== '0') {
-                  break;
+        .attr('transform', `translate(${padding.left + width},${padding.top})`)
+        .call(
+          d3
+            .axisRight()
+            .scale(stepscale)
+            .tickFormat((d) => {
+              if (d > 10000) {
+                const numLen = d.toString().length - 1;
+                // eslint-disable-next-line no-restricted-properties
+                return `${d / Math.pow(10, numLen)}e+${numLen}`;
+              }
+              if (d < 0.001) {
+                if (d === 0) return d;
+                const dString = d.toString();
+                let i = 3;
+                for (; i < dString.length; i += 1) {
+                  if (dString[i] !== '0') {
+                    break;
+                  }
                 }
+                // eslint-disable-next-line no-restricted-properties
+                return `${(d * Math.pow(10, i - 1)).toFixed(1)}e-${i - 1}`;
               }
-              // eslint-disable-next-line no-restricted-properties
-              return `${(d * Math.pow(10, i - 1)).toFixed(1)  }e-${  i - 1}`;
-            }
-            return d;
-          }),
+              return d;
+            })
         );
       const yscale = d3
         .scaleLinear()
         .domain([numberMin, numberMax])
         .rangeRound([areaHeight, 0]);
       // 显示信息
-      svg.append('g').append('text')
+      svg
+        .append('g')
+        .append('text')
         .attr('transform', 'rotate(90)')
         .attr('y', -(svgWidth - 13))
         .attr('x', svgHeight / 2)
@@ -243,14 +247,14 @@ export default {
         })
         .attr('transform', function _nonName(d) {
           const translateHeight = stepscale(d[0][2]) + heightTop;
-          return `translate(${  padding.left  },${  translateHeight  })`;
+          return `translate(${padding.left},${translateHeight})`;
         })
         .attr('fill', this.runColor)
         .attr('class', function _nonName(d, i) {
-          return `step${  i}`;
+          return `step${i}`;
         })
         .attr('id', function _nonName(d, i) {
-          return `${label  }step${  i}`;
+          return `${label}step${i}`;
         })
         // 添加鼠标操作:珠子+数值
         .on('mousemove', function _nonName(d, i) {
@@ -267,7 +271,7 @@ export default {
               break;
             }
           }
-          if ((curXValue - d[minDistIndex - 1]) < (d[minDistIndex] - curXValue)) {
+          if (curXValue - d[minDistIndex - 1] < d[minDistIndex] - curXValue) {
             minDistIndex -= 1;
           }
           const minDistX = padding.left + xscale(d[minDistIndex][0]);
@@ -284,12 +288,16 @@ export default {
               return d;
             });
           // 当前选中的直方图边界高亮
-          svg.select('.areapathg')
+          svg
+            .select('.areapathg')
             .selectAll('path')
             .style('opacity', 1.0)
             .attr('stroke', 'gainsboro')
             .attr('stroke-width', '0.5');
-          svg.select(`.step${  i}`).attr('stroke', '#fff45a').attr('stroke-width', '1');
+          svg
+            .select(`.step${i}`)
+            .attr('stroke', '#fff45a')
+            .attr('stroke-width', '1');
           // 控制面板需要显示数据
           // 当前step，是对多少个数据进行统计的，统计个数的最小值和最大值，和最大值对应的区间
           // 这个数据不准确，把所有相加
@@ -300,13 +308,18 @@ export default {
             return d[1];
           });
           let curCountMax = 0;
-          for (let it = 0; it < data[i].length; it+=1) {
+          for (let it = 0; it < data[i].length; it += 1) {
             const pixel = data[i][it][1];
             if (curCountMax < pixel) {
               curCountMax = pixel;
             }
           }
-          that.setStatisticInfo([data[i][0][2], Math.ceil(curDataCountSum), curCountMin, curCountMax.toFixed(2)]);
+          that.setStatisticInfo([
+            data[i][0][2],
+            Math.ceil(curDataCountSum),
+            curCountMin,
+            curCountMax.toFixed(2),
+          ]);
           svg
             .select('.xrect')
             .attr('visibility', 'visible')
@@ -330,7 +343,7 @@ export default {
           svg
             .select('.textbox')
             .attr('visibility', 'visible')
-            .text(`count:${  d[minDistIndex][1].toFixed(2)}`)
+            .text(`count:${d[minDistIndex][1].toFixed(2)}`)
             .attr('x', curX + 5)
             .attr('y', curY - 10);
 
@@ -340,15 +353,15 @@ export default {
           const count = Math.ceil(areaHeight / dh);
           const curHeight = [];
           // yscale，值越大高度越小
-          for (let j = 0; j < d.length; j+=1) {
+          for (let j = 0; j < d.length; j += 1) {
             curHeight.push(stepscale(d[j][2]) - (areaHeight - yscale(d[j][1])));
           }
-          for (let j = i + 1; j <= i + count && j < data.length; j+=1) {
+          for (let j = i + 1; j <= i + count && j < data.length; j += 1) {
             const onedata = data[j];
-            for (let k = 0; k < onedata.length; k+=1) {
+            for (let k = 0; k < onedata.length; k += 1) {
               const heightk = stepscale(onedata[k][2]) - (areaHeight - yscale(onedata[k][1]));
               if (heightk <= curHeight[k]) {
-                svg.select(`.step${  j}`).style('opacity', 0.5);
+                svg.select(`.step${j}`).style('opacity', 0.5);
                 break;
               }
             }
@@ -382,7 +395,7 @@ export default {
         const curY = d3.mouse(svg.node())[1];
         const step = parseInt(stepscale.invert(curY - padding.top), 0);
         let k = 0;
-        for (let i = 0; i < data.length; i+=1) {
+        for (let i = 0; i < data.length; i += 1) {
           if (data[i][0][2] > step) {
             k = i;
             if (i !== 0 && data[i][0][2] - step > step - data[i - 1][0][2]) {
@@ -396,7 +409,7 @@ export default {
           .selectAll('path')
           .attr('stroke', 'gainsboro')
           .attr('stroke-width', '0.5');
-        d3.select(`#${  label  }step${  k}`)
+        d3.select(`#${label}step${k}`)
           .attr('stroke', '#fff45a')
           .attr('visibility', 'visible')
           .attr('stroke-width', '1');
diff --git a/webapp/src/views/visual/Visual/statistics/drawStatistic/index.js b/webapp/src/views/visual/Visual/statistics/drawStatistic/index.js
index 37b7e63..140402a 100644
--- a/webapp/src/views/visual/Visual/statistics/drawStatistic/index.js
+++ b/webapp/src/views/visual/Visual/statistics/drawStatistic/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as statisticContainer } from './statisticContainer';
diff --git a/webapp/src/views/visual/Visual/statistics/drawStatistic/statisticContainer.vue b/webapp/src/views/visual/Visual/statistics/drawStatistic/statisticContainer.vue
index 72d08ad..61d0907 100644
--- a/webapp/src/views/visual/Visual/statistics/drawStatistic/statisticContainer.vue
+++ b/webapp/src/views/visual/Visual/statistics/drawStatistic/statisticContainer.vue
@@ -1,33 +1,50 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="statisticContainer">
     <el-card>
-      <div :class="[scaleLargeSmall?'statisticContainerTitleLarge':'statisticContainerTitle']" :style="{'background-color':runColor}">
+      <div
+        :class="[scaleLargeSmall ? 'statisticContainerTitleLarge' : 'statisticContainerTitle']"
+        :style="{ 'background-color': runColor }"
+      >
         <div>
           <span style="font-weight: 600;">{{ ttlabel }}</span>
           <span class="tagShow">{{ newTag }}</span>
         </div>
         <div class="titleRight">
-          <span class="scale" @click="scaleLarge()"><i class="iconfont icon-fangda" /></span>
-          <span class="scale" @click="scaleSmall()"><i class="iconfont icon-suoxiao1" /></span>
-          <span v-if="!parentComponent" class="checkedBox" @click="setRightTopShow()"><i class="close-i el-icon-circle-close" /></span>
-          <span v-if="parentComponent" v-show="!rightTopShow" class="checkedBox" @click="setRightTopShow()"><i class="iconfont icon-weixuanzhong1" /></span>
-          <span v-if="parentComponent" v-show="rightTopShow" class="checkedBox" @click="setRightTopShow()"><i class="iconfont icon-xuanzhong1" /></span>
+          <span class="scale" @click="scaleLarge()"><i class="iconfont icon-fangda"/></span>
+          <span class="scale" @click="scaleSmall()"><i class="iconfont icon-suoxiao1"/></span>
+          <span v-if="!parentComponent" class="checkedBox" @click="setRightTopShow()"
+            ><i class="close-i el-icon-circle-close"
+          /></span>
+          <span
+            v-if="parentComponent"
+            v-show="!rightTopShow"
+            class="checkedBox"
+            @click="setRightTopShow()"
+            ><i class="iconfont icon-weixuanzhong1"
+          /></span>
+          <span
+            v-if="parentComponent"
+            v-show="rightTopShow"
+            class="checkedBox"
+            @click="setRightTopShow()"
+            ><i class="iconfont icon-xuanzhong1"
+          /></span>
         </div>
       </div>
       <component
@@ -39,7 +56,7 @@
         :className="className"
         :runColor="runColor"
       />
-    <!--添加一个缩放flag，告诉子组件坐标文字的大小应该选取多少，:scaleFlag='scaleLargeSmall'-->
+      <!--添加一个缩放flag，告诉子组件坐标文字的大小应该选取多少，:scaleFlag='scaleLargeSmall'-->
     </el-card>
   </div>
 </template>
@@ -50,8 +67,13 @@ import threed from './HisThreeD';
 import orthographic from './HisOrtho';
 import overlook from './HisOverlook';
 
-const { mapGetters: mapStatisticGetters, mapMutations: mapStatisticMutations } = createNamespacedHelpers('Visual/statistic');
-const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers('Visual/custom');
+const {
+  mapGetters: mapStatisticGetters,
+  mapMutations: mapStatisticMutations,
+} = createNamespacedHelpers('Visual/statistic');
+const { mapMutations: mapCustomMutations, mapGetters: mapCustomGetters } = createNamespacedHelpers(
+  'Visual/custom'
+);
 const { mapGetters: mapLayoutGetters } = createNamespacedHelpers('Visual/layout');
 export default {
   components: {
@@ -92,7 +114,8 @@ export default {
     getShowNumber() {
       this.setRangeNumber();
     },
-    getStatisticShowNumber() { // 用户定制控制面板
+    getStatisticShowNumber() {
+      // 用户定制控制面板
       this.setRangeNumber();
     },
     data() {
@@ -112,7 +135,7 @@ export default {
     }
     let idx = this.itemp;
     if (this.itemp >= 1000) idx -= 1000; // 这是用户定制的itemp
-    if (this.tag.length > 20) this.newTag = `${this.tag.slice(0, 20)  }...`; // 省略显示字符
+    if (this.tag.length > 20) this.newTag = `${this.tag.slice(0, 20)}...`; // 省略显示字符
     if (this.componentName === 'threed' || this.componentName === 'orthographic') {
       this.rightTopShow = this.getHistCheckedArray[idx];
     } else {
@@ -125,14 +148,14 @@ export default {
     ...mapCustomMutations(['setStatisticData']),
     scaleLarge() {
       this.scaleLargeSmall = true;
-      d3.select(`#${  this.divId}`).style('width', '63.5%');
-      if (this.tag.length > 40) this.newTag = `${this.tag.slice(0, 40)  }...`;
+      d3.select(`#${this.divId}`).style('width', '63.5%');
+      if (this.tag.length > 40) this.newTag = `${this.tag.slice(0, 40)}...`;
       else this.newTag = this.tag;
     },
     scaleSmall() {
       this.scaleLargeSmall = false;
-      d3.select(`#${  this.divId}`).style('width', '31%');
-      if (this.tag.length > 20) this.newTag = `${this.tag.slice(0, 20)  }...`;
+      d3.select(`#${this.divId}`).style('width', '31%');
+      if (this.tag.length > 20) this.newTag = `${this.tag.slice(0, 20)}...`;
     },
     setRightTopShow() {
       if (this.rightTopShow || this.parentComponent) {
@@ -152,33 +175,42 @@ export default {
       // custom中的×点击直接操作在statisticData上
       let componentNameTemp = this.componentName;
       if (componentNameTemp === 'orthographic') componentNameTemp = 'threed';
-      const param = { componentName: componentNameTemp, ttlabel: this.ttlabel, tag: this.tag, data: this.data, runColor: this.runColor, itemp: this.itemp, divId: '', delete: false }; // delete表示不直接删除statisticData中的, checked: this.rightTopShow,
+      const param = {
+        componentName: componentNameTemp,
+        ttlabel: this.ttlabel,
+        tag: this.tag,
+        data: this.data,
+        runColor: this.runColor,
+        itemp: this.itemp,
+        divId: '',
+        delete: false,
+      }; // delete表示不直接删除statisticData中的, checked: this.rightTopShow,
       if (!this.parentComponent) param.delete = true;
       this.setStatisticData(param);
       // 复选框复用，下载按钮
       // 不用考虑用户定制里的
       if (this.itemp > 1000) return;
-      let idTemp = `#dist${  this.itemp}`;
+      let idTemp = `#dist${this.itemp}`;
       if (this.componentName === 'threed') {
-        idTemp = `#offset${  this.itemp}`;
+        idTemp = `#offset${this.itemp}`;
       } else if (this.componentName === 'orthographic') {
-        idTemp = `#overlay${  this.itemp}`;
+        idTemp = `#overlay${this.itemp}`;
       }
       this.setDownLoadArray([this.rightTopShow, idTemp]);
       this.setDownloadSvgClass.statistic = this.getDownLoadArray;
     },
     setRangeNumber() {
-      if(this.componentName==='overlook'){
-        this.rateData=this.data;
+      if (this.componentName === 'overlook') {
+        this.rateData = this.data;
         return;
       }
       let newNumber = this.getShowNumber;
       if (!this.parentComponent) newNumber = this.getStatisticShowNumber;
       const datalen = this.data.length;
-      const count = Math.ceil(newNumber / 100.0 * datalen);
+      const count = Math.ceil((newNumber / 100.0) * datalen);
       const stepspace = datalen / count;
       this.rateData = [];
-      for (let j = 0; j < count; j+=1) {
+      for (let j = 0; j < count; j += 1) {
         const step = Math.floor(stepspace * j);
         this.rateData.push(this.data[step]);
       }
@@ -187,7 +219,7 @@ export default {
 };
 </script>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
 .statisticContainer {
   width: 100%;
   height: 100%;
diff --git a/webapp/src/views/visual/Visual/statistics/index.js b/webapp/src/views/visual/Visual/statistics/index.js
index b48ca7b..7abe2c7 100644
--- a/webapp/src/views/visual/Visual/statistics/index.js
+++ b/webapp/src/views/visual/Visual/statistics/index.js
@@ -1,18 +1,18 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as Statistics } from './Statistics';
 export { default as StatisticsPanel } from './StatisticsPanel';
diff --git a/webapp/src/views/visual/Visual/statistics/substatistic/SubStatistics.vue b/webapp/src/views/visual/Visual/statistics/substatistic/SubStatistics.vue
index 7ba61cf..a4e5bd8 100644
--- a/webapp/src/views/visual/Visual/statistics/substatistic/SubStatistics.vue
+++ b/webapp/src/views/visual/Visual/statistics/substatistic/SubStatistics.vue
@@ -1,25 +1,27 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 <template>
   <div class="statistics-container">
     <div class="statistics-title" @click="showContent()">
-      <div :class="[showFlag?'sub1':'sub']">
+      <div :class="[showFlag ? 'sub1' : 'sub']">
         <div class="my-label">
-          <div class="my-text"><span>{{ categoryName }}</span></div>
+          <div class="my-text">
+            <span>{{ categoryName }}</span>
+          </div>
           <div class="circle-father"><div class="circle" /></div>
           <div class="triangle-father">
             <div class="triangle" />
@@ -27,12 +29,18 @@
         </div>
       </div>
       <div class="line1" />
-      <div :class="['line2', showFlag?'':'linestyle']" />
+      <div :class="['line2', showFlag ? '' : 'linestyle']" />
     </div>
-    <div :class="[showFlag?'':'showClass']">
+    <div :class="[showFlag ? '' : 'showClass']">
       <div>
         <div v-for="(oneRunData, runIdx) in runData" :key="runIdx" :class="['statistics-content']">
-          <div v-for="(item, index) in oneRunData" v-show="getDataSetsState[item[0]]" :id="[idArray[item[4]]]" :key="index" class="allStatisticContainer">
+          <div
+            v-for="(item, index) in oneRunData"
+            v-show="getDataSetsState[item[0]]"
+            :id="[idArray[item[4]]]"
+            :key="index"
+            class="allStatisticContainer"
+          >
             <statisticContainer
               :data="item[2]"
               :ttlabel="item[0]"
@@ -93,9 +101,7 @@ export default {
       'getHistShow',
       'getDistShow',
     ]),
-    ...mapLayoutStates([
-      'userSelectRunFile',
-    ]),
+    ...mapLayoutStates(['userSelectRunFile']),
   },
   watch: {
     getMode(curMode) {
@@ -116,8 +122,8 @@ export default {
       if (this.categoryInfo === 'histogram') {
         this.allData = data;
         this.idArray = [];
-        for (let i = 0; i < this.allData.length; i+=1) {
-          this.idArray.push(`myHistogramScale${  i}`);
+        for (let i = 0; i < this.allData.length; i += 1) {
+          this.idArray.push(`myHistogramScale${i}`);
         }
         this.setRunData();
       }
@@ -126,8 +132,8 @@ export default {
       if (this.categoryInfo === 'distribution') {
         this.allData = data;
         this.idArray = [];
-        for (let i = 0; i < this.allData.length; i+=1) {
-          this.idArray.push(`myDistributionScale${  i}`);
+        for (let i = 0; i < this.allData.length; i += 1) {
+          this.idArray.push(`myDistributionScale${i}`);
         }
         this.setRunData();
       }
@@ -203,8 +209,8 @@ export default {
       // 有数据
       this.allData = this.getHistData;
       this.idArray = [];
-      for (let i = 0; i < this.allData.length; i+=1) {
-        this.idArray.push(`myHistogramScale${  i}`);
+      for (let i = 0; i < this.allData.length; i += 1) {
+        this.idArray.push(`myHistogramScale${i}`);
       }
       this.setRunData();
     },
@@ -216,14 +222,17 @@ export default {
       }
       this.allData = this.getDistData;
       this.idArray = [];
-      for (let i = 0; i < this.allData.length; i+=1) {
-        this.idArray.push(`myDistributionScale${  i}`);
+      for (let i = 0; i < this.allData.length; i += 1) {
+        this.idArray.push(`myDistributionScale${i}`);
       }
       this.setRunData();
     },
-    handleScroll() { // 页面滑动过程中修改histDist标志，高亮右侧控制面板
+    handleScroll() {
+      // 页面滑动过程中修改histDist标志，高亮右侧控制面板
       if (document.getElementsByClassName('statistics-container')[1] !== undefined) {
-        const curDistHeight = document.getElementsByClassName('statistics-container')[1].getBoundingClientRect().top;
+        const curDistHeight = document
+          .getElementsByClassName('statistics-container')[1]
+          .getBoundingClientRect().top;
         if (curDistHeight < window.innerHeight * 0.7) {
           this.setDistShow(true);
         } else if (curDistHeight > window.innerHeight) {
@@ -233,25 +242,26 @@ export default {
     },
     setDatasetsShow() {
       const stateTemp = [];
-      for (let i = 0; i < this.getDataSets.length; i+=1) {
+      for (let i = 0; i < this.getDataSets.length; i += 1) {
         stateTemp[this.getDataSets[i]] = false;
       }
-      for (let i = 0; i < this.userSelectRunFile.length; i+=1) {
+      for (let i = 0; i < this.userSelectRunFile.length; i += 1) {
         stateTemp[this.userSelectRunFile[i]] = true;
       }
       // userselectRunFiles没有保存状态，statistic保存run状态
       this.setDataSetsState(stateTemp);
     },
-    setRunData() { // 按run对得到的数据再处理一下
+    setRunData() {
+      // 按run对得到的数据再处理一下
       if (this.allData.length === 0) {
         this.runData = [];
         return;
       }
       let count = 0;
       const runDataTemp = [[this.allData[0]]];
-      for (let i = 1; i < this.allData.length; i+=1) {
+      for (let i = 1; i < this.allData.length; i += 1) {
         if (this.allData[i][0] !== this.allData[i - 1][0]) {
-          count+=1;
+          count += 1;
           runDataTemp.push([]);
         }
         runDataTemp[count].push(this.allData[i]);
@@ -262,7 +272,7 @@ export default {
 };
 </script>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
 .statistics-container {
   margin-bottom: 0.5%;
   background-color: #fff;
@@ -316,8 +326,8 @@ export default {
     width: 0;
     height: 0;
     overflow: hidden;
-    border-color: transparent transparent   transparent #7f7cc1;
-    border-style: dashed  dashed  dashed solid;
+    border-color: transparent transparent transparent #7f7cc1;
+    border-style: dashed dashed dashed solid;
     border-top-width: 15px;
     border-right-width: 18px;
     border-bottom-width: 15px;
@@ -362,7 +372,7 @@ export default {
 }
 
 .sub .triangle {
-  border-color: transparent transparent   transparent #b8c6ff;
+  border-color: transparent transparent transparent #b8c6ff;
 }
 
 .sub .circle-father {
diff --git a/webapp/src/views/visual/Visual/statistics/substatistic/index.js b/webapp/src/views/visual/Visual/statistics/substatistic/index.js
index f098c85..1832afe 100644
--- a/webapp/src/views/visual/Visual/statistics/substatistic/index.js
+++ b/webapp/src/views/visual/Visual/statistics/substatistic/index.js
@@ -1,17 +1,17 @@
 /** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* =============================================================
-*/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================
+ */
 
 export { default as subStatistics } from './SubStatistics';
diff --git a/webapp/vue.config.js b/webapp/vue.config.js
index 10ba3b0..5a1a31d 100644
--- a/webapp/vue.config.js
+++ b/webapp/vue.config.js
@@ -36,7 +36,7 @@ module.exports = {
           delete require.cache[require.resolve(module)];
           return require(module);
         } catch (e) {
-          console.log(`can't load module in ${module}`);
+          // console.log(`can't load module in ${module}`);
           return false
         }
       }
@@ -93,7 +93,6 @@ module.exports = {
           }) > -1
           // 如果匹配到 restApi 走本地 mock
           if(matchRESTApi) return false
-
           // 其他路径
           const mockPath = path.join(__dirname, 'mock', req.path);
           const value = requireUncached(mockPath);
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 28db58f..18371e3 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -2,12 +2,17 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.11":
-  version "7.12.11"
-  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
-  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.35", "@babel/code-frame@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
+  integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
   dependencies:
-    "@babel/highlight" "^7.10.4"
+    "@babel/highlight" "^7.12.13"
+
+"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.13.15", "@babel/compat-data@^7.13.8":
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.0.tgz#a901128bce2ad02565df95e6ecbf195cf9465919"
+  integrity sha512-vu9V3uMM/1o5Hl5OekMUowo3FqXLJSw+s+66nt0fSWVWTtmosdzn45JHOB3cPtZoe6CTBDzvSw0RdOY85Q37+Q==
 
 "@babel/core@7.0.0":
   version "7.0.0"
@@ -30,174 +35,190 @@
     source-map "^0.5.0"
 
 "@babel/core@>=7.9.0", "@babel/core@^7.0.0":
-  version "7.12.10"
-  resolved "https://registry.npmjs.org/@babel/core/-/core-7.12.10.tgz#b79a2e1b9f70ed3d84bbfb6d8c4ef825f606bccd"
-  integrity sha512-eTAlQKq65zHfkHZV0sIVODCPGVgoo1HdBlbSLi9CqOzuZanMv2ihzY+4paiKr1mH+XmYESMAmJ/dpZ68eN6d8w==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/generator" "^7.12.10"
-    "@babel/helper-module-transforms" "^7.12.1"
-    "@babel/helpers" "^7.12.5"
-    "@babel/parser" "^7.12.10"
-    "@babel/template" "^7.12.7"
-    "@babel/traverse" "^7.12.10"
-    "@babel/types" "^7.12.10"
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/core/-/core-7.14.0.tgz#47299ff3ec8d111b493f1a9d04bf88c04e728d88"
+  integrity sha512-8YqpRig5NmIHlMLw09zMlPTvUVMILjqCOtVgu+TVNWEBvy9b5I3RRyhqnrV4hjgEK7n8P9OqvkWJAFmEL6Wwfw==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/generator" "^7.14.0"
+    "@babel/helper-compilation-targets" "^7.13.16"
+    "@babel/helper-module-transforms" "^7.14.0"
+    "@babel/helpers" "^7.14.0"
+    "@babel/parser" "^7.14.0"
+    "@babel/template" "^7.12.13"
+    "@babel/traverse" "^7.14.0"
+    "@babel/types" "^7.14.0"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
+    gensync "^1.0.0-beta.2"
     json5 "^2.1.2"
-    lodash "^4.17.19"
-    semver "^5.4.1"
+    semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/generator@^7.0.0", "@babel/generator@^7.12.10", "@babel/generator@^7.12.11":
-  version "7.12.11"
-  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz#98a7df7b8c358c9a37ab07a24056853016aba3af"
-  integrity sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==
+"@babel/generator@^7.0.0", "@babel/generator@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.14.0.tgz#0f35d663506c43e4f10898fbda0d752ec75494be"
+  integrity sha512-C6u00HbmsrNPug6A+CiNl8rEys7TsdcXwg12BHi2ca5rUfAs3+UwZsuDQSXnc+wCElCXMB8gMaJ3YXDdh8fAlg==
   dependencies:
-    "@babel/types" "^7.12.11"
+    "@babel/types" "^7.14.0"
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.10.4":
-  version "7.12.10"
-  resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz#54ab9b000e60a93644ce17b3f37d313aaf1d115d"
-  integrity sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ==
+"@babel/helper-annotate-as-pure@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz#0f58e86dfc4bb3b1fcd7db806570e177d439b6ab"
+  integrity sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw==
   dependencies:
-    "@babel/types" "^7.12.10"
+    "@babel/types" "^7.12.13"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3"
-  integrity sha512-L0zGlFrGWZK4PbT8AszSfLTM5sDU1+Az/En9VrdT8/LmEiJt4zXt+Jve9DCAnQcbqDhCI+29y/L93mrDzddCcg==
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.12.13.tgz#6bc20361c88b0a74d05137a65cac8d3cbf6f61fc"
+  integrity sha512-CZOv9tGphhDRlVjVkAgm8Nhklm9RzSmWpX2my+t7Ua/KT616pEzXsQCjinzvkRvHWJ9itO4f296efroX23XCMA==
   dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/helper-explode-assignable-expression" "^7.12.13"
+    "@babel/types" "^7.12.13"
 
-"@babel/helper-create-class-features-plugin@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz#3c45998f431edd4a9214c5f1d3ad1448a6137f6e"
-  integrity sha512-hkL++rWeta/OVOBTRJc9a5Azh5mt5WgZUGAKMD8JM141YsE08K//bp1unBBieO6rUKkIPyUE0USQ30jAy3Sk1w==
+"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.13.16", "@babel/helper-compilation-targets@^7.13.8":
+  version "7.13.16"
+  resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.16.tgz#6e91dccf15e3f43e5556dffe32d860109887563c"
+  integrity sha512-3gmkYIrpqsLlieFwjkGgLaSHmhnvlAYzZLlYVjlW+QwI+1zE17kGxuJGmIqDQdYp56XdmGeD+Bswx0UTyG18xA==
+  dependencies:
+    "@babel/compat-data" "^7.13.15"
+    "@babel/helper-validator-option" "^7.12.17"
+    browserslist "^4.14.5"
+    semver "^6.3.0"
+
+"@babel/helper-create-class-features-plugin@^7.13.0", "@babel/helper-create-class-features-plugin@^7.13.11":
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.0.tgz#38367d3dab125b12f94273de418f4df23a11a15e"
+  integrity sha512-6pXDPguA5zC40Y8oI5mqr+jEUpjMJonKvknvA+vD8CYDz5uuXEwWBK8sRAsE/t3gfb1k15AQb9RhwpscC4nUJQ==
   dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-member-expression-to-functions" "^7.12.1"
-    "@babel/helper-optimise-call-expression" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.12.1"
-    "@babel/helper-split-export-declaration" "^7.10.4"
+    "@babel/helper-annotate-as-pure" "^7.12.13"
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-member-expression-to-functions" "^7.13.12"
+    "@babel/helper-optimise-call-expression" "^7.12.13"
+    "@babel/helper-replace-supers" "^7.13.12"
+    "@babel/helper-split-export-declaration" "^7.12.13"
 
-"@babel/helper-create-regexp-features-plugin@^7.12.1":
-  version "7.12.7"
-  resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.7.tgz#2084172e95443fa0a09214ba1bb328f9aea1278f"
-  integrity sha512-idnutvQPdpbduutvi3JVfEgcVIHooQnhvhx0Nk9isOINOIGYkZea1Pk2JlJRiUnMefrlvr0vkByATBY/mB4vjQ==
+"@babel/helper-create-regexp-features-plugin@^7.12.13":
+  version "7.12.17"
+  resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.17.tgz#a2ac87e9e319269ac655b8d4415e94d38d663cb7"
+  integrity sha512-p2VGmBu9oefLZ2nQpgnEnG0ZlRPvL8gAGvPUMQwUdaE8k49rOMuZpOwdQoy5qJf6K8jL3bcAMhVUlHAjIgJHUg==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-annotate-as-pure" "^7.12.13"
     regexpu-core "^4.7.1"
 
-"@babel/helper-define-map@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.10.5.tgz#b53c10db78a640800152692b13393147acb9bb30"
-  integrity sha512-fMw4kgFB720aQFXSVaXr79pjjcW5puTCM16+rECJ/plGS+zByelE8l9nCpV1GibxTnFVmUuYG9U8wYfQHdzOEQ==
+"@babel/helper-define-polyfill-provider@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.0.tgz#a640051772045fedaaecc6f0c6c69f02bdd34bf1"
+  integrity sha512-JT8tHuFjKBo8NnaUbblz7mIu1nnvUDiHVjXXkulZULyidvo/7P6TY7+YqpV37IfF+KUFxmlK04elKtGKXaiVgw==
   dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/types" "^7.10.5"
-    lodash "^4.17.19"
+    "@babel/helper-compilation-targets" "^7.13.0"
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/traverse" "^7.13.0"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+    semver "^6.1.2"
 
-"@babel/helper-explode-assignable-expression@^7.10.4":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.12.1.tgz#8006a466695c4ad86a2a5f2fb15b5f2c31ad5633"
-  integrity sha512-dmUwH8XmlrUpVqgtZ737tK88v07l840z9j3OEhCLwKTkjlvKpfqXVIZ0wpK3aeOxspwGrf/5AP5qLx4rO3w5rA==
+"@babel/helper-explode-assignable-expression@^7.12.13":
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.13.0.tgz#17b5c59ff473d9f956f40ef570cf3a76ca12657f"
+  integrity sha512-qS0peLTDP8kOisG1blKbaoBg/o9OSa1qoumMjTK5pM+KDTtpxpsiubnCGP34vK8BXGcb2M9eigwgvoJryrzwWA==
   dependencies:
-    "@babel/types" "^7.12.1"
+    "@babel/types" "^7.13.0"
 
-"@babel/helper-function-name@^7.10.4", "@babel/helper-function-name@^7.12.11":
-  version "7.12.11"
-  resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz#1fd7738aee5dcf53c3ecff24f1da9c511ec47b42"
-  integrity sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==
+"@babel/helper-function-name@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz#93ad656db3c3c2232559fd7b2c3dbdcbe0eb377a"
+  integrity sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==
   dependencies:
-    "@babel/helper-get-function-arity" "^7.12.10"
-    "@babel/template" "^7.12.7"
-    "@babel/types" "^7.12.11"
+    "@babel/helper-get-function-arity" "^7.12.13"
+    "@babel/template" "^7.12.13"
+    "@babel/types" "^7.12.13"
 
-"@babel/helper-get-function-arity@^7.12.10":
-  version "7.12.10"
-  resolved "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz#b158817a3165b5faa2047825dfa61970ddcc16cf"
-  integrity sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==
+"@babel/helper-get-function-arity@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz#bc63451d403a3b3082b97e1d8b3fe5bd4091e583"
+  integrity sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==
   dependencies:
-    "@babel/types" "^7.12.10"
+    "@babel/types" "^7.12.13"
 
-"@babel/helper-hoist-variables@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e"
-  integrity sha512-wljroF5PgCk2juF69kanHVs6vrLwIPNp6DLD+Lrl3hoQ3PpPPikaDRNFA+0t81NOoMt2DL6WW/mdU8k4k6ZzuA==
+"@babel/helper-hoist-variables@^7.13.0":
+  version "7.13.16"
+  resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.16.tgz#1b1651249e94b51f8f0d33439843e33e39775b30"
+  integrity sha512-1eMtTrXtrwscjcAeO4BVK+vvkxaLJSPFz1w1KLawz6HLNi9bPFGBNwwDyVfiu1Tv/vRRFYfoGaKhmAQPGPn5Wg==
   dependencies:
-    "@babel/types" "^7.10.4"
+    "@babel/traverse" "^7.13.15"
+    "@babel/types" "^7.13.16"
 
-"@babel/helper-member-expression-to-functions@^7.12.1", "@babel/helper-member-expression-to-functions@^7.12.7":
-  version "7.12.7"
-  resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz#aa77bd0396ec8114e5e30787efa78599d874a855"
-  integrity sha512-DCsuPyeWxeHgh1Dus7APn7iza42i/qXqiFPWyBDdOFtvS581JQePsc1F/nD+fHrcswhLlRc2UpYS1NwERxZhHw==
+"@babel/helper-member-expression-to-functions@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz#dfe368f26d426a07299d8d6513821768216e6d72"
+  integrity sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==
   dependencies:
-    "@babel/types" "^7.12.7"
+    "@babel/types" "^7.13.12"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5":
-  version "7.12.5"
-  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
-  integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz#c6a369a6f3621cb25da014078684da9196b61977"
+  integrity sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==
   dependencies:
-    "@babel/types" "^7.12.5"
+    "@babel/types" "^7.13.12"
 
-"@babel/helper-module-transforms@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz#7954fec71f5b32c48e4b303b437c34453fd7247c"
-  integrity sha512-QQzehgFAZ2bbISiCpmVGfiGux8YVFXQ0abBic2Envhej22DVXV9nCFaS5hIQbkyo1AdGb+gNME2TSh3hYJVV/w==
-  dependencies:
-    "@babel/helper-module-imports" "^7.12.1"
-    "@babel/helper-replace-supers" "^7.12.1"
-    "@babel/helper-simple-access" "^7.12.1"
-    "@babel/helper-split-export-declaration" "^7.11.0"
-    "@babel/helper-validator-identifier" "^7.10.4"
-    "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.12.1"
-    "@babel/types" "^7.12.1"
-    lodash "^4.17.19"
+"@babel/helper-module-transforms@^7.13.0", "@babel/helper-module-transforms@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.0.tgz#8fcf78be220156f22633ee204ea81f73f826a8ad"
+  integrity sha512-L40t9bxIuGOfpIGA3HNkJhU9qYrf4y5A5LUSw7rGMSn+pcG8dfJ0g6Zval6YJGd2nEjI7oP00fRdnhLKndx6bw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.13.12"
+    "@babel/helper-replace-supers" "^7.13.12"
+    "@babel/helper-simple-access" "^7.13.12"
+    "@babel/helper-split-export-declaration" "^7.12.13"
+    "@babel/helper-validator-identifier" "^7.14.0"
+    "@babel/template" "^7.12.13"
+    "@babel/traverse" "^7.14.0"
+    "@babel/types" "^7.14.0"
 
-"@babel/helper-optimise-call-expression@^7.10.4", "@babel/helper-optimise-call-expression@^7.12.10":
-  version "7.12.10"
-  resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.10.tgz#94ca4e306ee11a7dd6e9f42823e2ac6b49881e2d"
-  integrity sha512-4tpbU0SrSTjjt65UMWSrUOPZTsgvPgGG4S8QSTNHacKzpS51IVWGDj0yCwyeZND/i+LSN2g/O63jEXEWm49sYQ==
+"@babel/helper-optimise-call-expression@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz#5c02d171b4c8615b1e7163f888c1c81c30a2aaea"
+  integrity sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==
   dependencies:
-    "@babel/types" "^7.12.10"
+    "@babel/types" "^7.12.13"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.8.0":
-  version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
-  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
+  integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
 
-"@babel/helper-remap-async-to-generator@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.12.1.tgz#8c4dbbf916314f6047dc05e6a2217074238347fd"
-  integrity sha512-9d0KQCRM8clMPcDwo8SevNs+/9a8yWVVmaE80FGJcEP8N1qToREmWEGnBn8BUlJhYRFz6fqxeRL1sl5Ogsed7A==
+"@babel/helper-remap-async-to-generator@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.13.0.tgz#376a760d9f7b4b2077a9dd05aa9c3927cadb2209"
+  integrity sha512-pUQpFBE9JvC9lrQbpX0TmeNIy5s7GnZjna2lhhcHC7DzgBs6fWn722Y5cfwgrtrqc7NAJwMvOa0mKhq6XaE4jg==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-wrap-function" "^7.10.4"
-    "@babel/types" "^7.12.1"
+    "@babel/helper-annotate-as-pure" "^7.12.13"
+    "@babel/helper-wrap-function" "^7.13.0"
+    "@babel/types" "^7.13.0"
 
-"@babel/helper-replace-supers@^7.12.1":
-  version "7.12.11"
-  resolved "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.11.tgz#ea511658fc66c7908f923106dd88e08d1997d60d"
-  integrity sha512-q+w1cqmhL7R0FNzth/PLLp2N+scXEK/L2AHbXUyydxp828F4FEa5WcVoqui9vFRiHDQErj9Zof8azP32uGVTRA==
+"@babel/helper-replace-supers@^7.12.13", "@babel/helper-replace-supers@^7.13.0", "@babel/helper-replace-supers@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz#6442f4c1ad912502481a564a7386de0c77ff3804"
+  integrity sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==
   dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.12.7"
-    "@babel/helper-optimise-call-expression" "^7.12.10"
-    "@babel/traverse" "^7.12.10"
-    "@babel/types" "^7.12.11"
+    "@babel/helper-member-expression-to-functions" "^7.13.12"
+    "@babel/helper-optimise-call-expression" "^7.12.13"
+    "@babel/traverse" "^7.13.0"
+    "@babel/types" "^7.13.12"
 
-"@babel/helper-simple-access@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.1.tgz#32427e5aa61547d38eb1e6eaf5fd1426fdad9136"
-  integrity sha512-OxBp7pMrjVewSSC8fXDFrHrBcJATOOFssZwv16F3/6Xtc138GHybBfPbm9kfiqQHKhYQrlamWILwlDCeyMFEaA==
+"@babel/helper-simple-access@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz#dd6c538afb61819d205a012c31792a39c7a5eaf6"
+  integrity sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==
   dependencies:
-    "@babel/types" "^7.12.1"
+    "@babel/types" "^7.13.12"
 
 "@babel/helper-skip-transparent-expression-wrappers@^7.12.1":
   version "7.12.1"
@@ -206,132 +227,139 @@
   dependencies:
     "@babel/types" "^7.12.1"
 
-"@babel/helper-split-export-declaration@^7.10.4", "@babel/helper-split-export-declaration@^7.11.0", "@babel/helper-split-export-declaration@^7.12.11":
-  version "7.12.11"
-  resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz#1b4cc424458643c47d37022223da33d76ea4603a"
-  integrity sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==
+"@babel/helper-split-export-declaration@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz#e9430be00baf3e88b0e13e6f9d4eaf2136372b05"
+  integrity sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==
   dependencies:
-    "@babel/types" "^7.12.11"
+    "@babel/types" "^7.12.13"
+
+"@babel/helper-validator-identifier@^7.12.11", "@babel/helper-validator-identifier@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
+  integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
 
-"@babel/helper-validator-identifier@^7.10.4", "@babel/helper-validator-identifier@^7.12.11":
-  version "7.12.11"
-  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
-  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
+"@babel/helper-validator-option@^7.12.17":
+  version "7.12.17"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz#d1fbf012e1a79b7eebbfdc6d270baaf8d9eb9831"
+  integrity sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==
 
-"@babel/helper-wrap-function@^7.10.4":
-  version "7.12.3"
-  resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.12.3.tgz#3332339fc4d1fbbf1c27d7958c27d34708e990d9"
-  integrity sha512-Cvb8IuJDln3rs6tzjW3Y8UeelAOdnpB8xtQ4sme2MSZ9wOxrbThporC0y/EtE16VAtoyEfLM404Xr1e0OOp+ow==
+"@babel/helper-wrap-function@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.13.0.tgz#bdb5c66fda8526ec235ab894ad53a1235c79fcc4"
+  integrity sha512-1UX9F7K3BS42fI6qd2A4BjKzgGjToscyZTdp1DjknHLCIvpgne6918io+aL5LXFcER/8QWiwpoY902pVEqgTXA==
   dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/template" "^7.12.13"
+    "@babel/traverse" "^7.13.0"
+    "@babel/types" "^7.13.0"
 
-"@babel/helpers@^7.0.0", "@babel/helpers@^7.12.5":
-  version "7.12.5"
-  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.12.5.tgz#1a1ba4a768d9b58310eda516c449913fe647116e"
-  integrity sha512-lgKGMQlKqA8meJqKsW6rUnc4MdUk35Ln0ATDqdM1a/UpARODdI4j5Y5lVfUScnSNkJcdCRAaWkspykNoFg9sJA==
+"@babel/helpers@^7.0.0", "@babel/helpers@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.0.tgz#ea9b6be9478a13d6f961dbb5f36bf75e2f3b8f62"
+  integrity sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==
   dependencies:
-    "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.12.5"
-    "@babel/types" "^7.12.5"
+    "@babel/template" "^7.12.13"
+    "@babel/traverse" "^7.14.0"
+    "@babel/types" "^7.14.0"
 
-"@babel/highlight@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
-  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+"@babel/highlight@^7.12.13":
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz#3197e375711ef6bf834e67d0daec88e4f46113cf"
+  integrity sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
+    "@babel/helper-validator-identifier" "^7.14.0"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.12.10", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.7.0":
-  version "7.12.11"
-  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz#9ce3595bcd74bc5c466905e86c535b8b25011e79"
-  integrity sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==
+"@babel/parser@^7.0.0", "@babel/parser@^7.12.13", "@babel/parser@^7.14.0", "@babel/parser@^7.7.0":
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.14.0.tgz#2f0ebfed92bcddcc8395b91f1895191ce2760380"
+  integrity sha512-AHbfoxesfBALg33idaTBVUkLnfXtsgvJREf93p4p0Lwsz4ppfE7g1tpEXVm4vrxUcH4DVhAa9Z1m1zqf9WUC7Q==
 
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
-  version "7.12.12"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.12.tgz#04b8f24fd4532008ab4e79f788468fd5a8476566"
-  integrity sha512-nrz9y0a4xmUrRq51bYkWJIO5SBZyG2ys2qinHsN0zHDHVsUaModrkpyWWWXfGqYQmOL3x9sQIcTNN/pBGpo09A==
+  version "7.13.15"
+  resolved "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.13.15.tgz#80e549df273a3b3050431b148c892491df1bcc5b"
+  integrity sha512-VapibkWzFeoa6ubXy/NgV5U2U4MVnUlvnx6wo1XhlsaTrLYWE0UFpDQsVrmn22q5CzeloqJ8gEMHSKxuee6ZdA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-remap-async-to-generator" "^7.12.1"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/helper-remap-async-to-generator" "^7.13.0"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
 
 "@babel/plugin-proposal-class-properties@^7.0.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz#a082ff541f2a29a4821065b8add9346c0c16e5de"
-  integrity sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.13.0.tgz#146376000b94efd001e57a40a88a525afaab9f37"
+  integrity sha512-KnTDjFNC1g+45ka0myZNvSBFLhNCLN+GeGYLDEA8Oq7MZ6yMgfLoIRh86GRT0FjtJhZw8JyUskP9uvj5pHM9Zg==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-create-class-features-plugin" "^7.13.0"
+    "@babel/helper-plugin-utils" "^7.13.0"
 
 "@babel/plugin-proposal-decorators@^7.1.0":
-  version "7.12.12"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.12.tgz#067a6d3d6ca86d54cf56bb183239199c20daeafe"
-  integrity sha512-fhkE9lJYpw2mjHelBpM2zCbaA11aov2GJs7q4cFaXNrWx0H3bW58H9Esy2rdtYOghFBEYUDRIpvlgi+ZD+AvvQ==
+  version "7.13.15"
+  resolved "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.13.15.tgz#e91ccfef2dc24dd5bd5dcc9fc9e2557c684ecfb8"
+  integrity sha512-ibAMAqUm97yzi+LPgdr5Nqb9CMkeieGHvwPg1ywSGjZrZHQEGqE01HmOio8kxRpA/+VtOHouIVy2FMpBbtltjA==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-decorators" "^7.12.1"
+    "@babel/helper-create-class-features-plugin" "^7.13.11"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/plugin-syntax-decorators" "^7.12.13"
 
 "@babel/plugin-proposal-json-strings@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.12.1.tgz#d45423b517714eedd5621a9dfdc03fa9f4eb241c"
-  integrity sha512-GoLDUi6U9ZLzlSda2Df++VSqDJg3CG+dR0+iWsv6XRw1rEq+zwt4DirM9yrxW6XWaTpmai1cWJLMfM8qQJf+yw==
+  version "7.13.8"
+  resolved "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.13.8.tgz#bf1fb362547075afda3634ed31571c5901afef7b"
+  integrity sha512-w4zOPKUFPX1mgvTmL/fcEqy34hrQ1CRcGxdphBc6snDnnqJ47EZDIyop6IwXzAC8G916hsIuXB2ZMBCExC5k7Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
 
 "@babel/plugin-proposal-object-rest-spread@^7.3.4":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz#def9bd03cea0f9b72283dac0ec22d289c7691069"
-  integrity sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==
+  version "7.13.8"
+  resolved "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.13.8.tgz#5d210a4d727d6ce3b18f9de82cc99a3964eed60a"
+  integrity sha512-DhB2EuB1Ih7S3/IRX5AFVgZ16k3EzfRbq97CxAVI1KSYcW+lexV8VZb7G7L8zuPVSdQMRn0kiBpf/Yzu9ZKH0g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-transform-parameters" "^7.12.1"
+    "@babel/compat-data" "^7.13.8"
+    "@babel/helper-compilation-targets" "^7.13.8"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.13.0"
 
 "@babel/plugin-proposal-optional-catch-binding@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.12.1.tgz#ccc2421af64d3aae50b558a71cede929a5ab2942"
-  integrity sha512-hFvIjgprh9mMw5v42sJWLI1lzU5L2sznP805zeT6rySVRA0Y18StRhDqhSxlap0oVgItRsB6WSROp4YnJTJz0g==
+  version "7.13.8"
+  resolved "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.13.8.tgz#3ad6bd5901506ea996fc31bdcf3ccfa2bed71107"
+  integrity sha512-0wS/4DUF1CuTmGo+NiaHfHcVSeSLj5S3e6RivPTg/2k3wOv3jO35tZ6/ZWsQhQMvdgI7CwphjQa/ccarLymHVA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
 "@babel/plugin-proposal-optional-chaining@^7.9.0":
-  version "7.12.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.7.tgz#e02f0ea1b5dc59d401ec16fb824679f683d3303c"
-  integrity sha512-4ovylXZ0PWmwoOvhU2vhnzVNnm88/Sm9nx7V8BPgMvAzn5zDou3/Awy0EjglyubVHasJj+XCEkr/r1X3P5elCA==
+  version "7.13.12"
+  resolved "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.12.tgz#ba9feb601d422e0adea6760c2bd6bbb7bfec4866"
+  integrity sha512-fcEdKOkIB7Tf4IxrgEVeFC4zeJSTr78no9wTdBuZZbqF64kzllU0ybo2zrzm7gUQfxGhBgq4E39oRs8Zx/RMYQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
 "@babel/plugin-proposal-unicode-property-regex@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.1.tgz#2a183958d417765b9eae334f47758e5d6a82e072"
-  integrity sha512-MYq+l+PvHuw/rKUz1at/vb6nCnQ2gmJBNaM62z0OgH7B2W1D9pvkpYtlti9bGtizNIU1K3zm4bZF9F91efVY0w==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.13.tgz#bebde51339be829c17aaaaced18641deb62b39ba"
+  integrity sha512-XyJmZidNfofEkqFV5VC/bLabGmO5QzenPO/YOfGuEbgU+2sSwMmio3YLb4WtBgcmmdwZHyVyv8on77IUjQ5Gvg==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-syntax-async-generators@^7.2.0", "@babel/plugin-syntax-async-generators@^7.8.0":
+"@babel/plugin-syntax-async-generators@^7.2.0", "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
   integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-decorators@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.12.1.tgz#81a8b535b284476c41be6de06853a8802b98c5dd"
-  integrity sha512-ir9YW5daRrTYiy9UJ2TzdNIJEZu8KclVzDcfSt4iEmOtwQ4llPtWInNKJyKnVXp1vE4bbVd5S31M/im3mYMO1w==
+"@babel/plugin-syntax-decorators@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.12.13.tgz#fac829bf3c7ef4a1bc916257b403e58c6bdaf648"
+  integrity sha512-Rw6aIXGuqDLr6/LoBBYE57nKOzQpz/aDkKlMqEwH+Vp0MXbG6H/TfRjaY343LKxzAKAMXIHsQ8JzaZKuDZ9MwA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-syntax-dynamic-import@^7.0.0":
   version "7.8.3"
@@ -340,7 +368,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-json-strings@^7.2.0", "@babel/plugin-syntax-json-strings@^7.8.0":
+"@babel/plugin-syntax-json-strings@^7.2.0", "@babel/plugin-syntax-json-strings@^7.8.3":
   version "7.8.3"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
   integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
@@ -348,27 +376,27 @@
     "@babel/helper-plugin-utils" "^7.8.0"
 
 "@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz#9d9d357cc818aa7ae7935917c1257f67677a0926"
-  integrity sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz#044fb81ebad6698fe62c478875575bcbb9b70f15"
+  integrity sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.8.0":
+"@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
   version "7.8.3"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
   integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.2.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.0":
+"@babel/plugin-syntax-optional-catch-binding@^7.2.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
   version "7.8.3"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
   integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-chaining@^7.8.0":
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
   version "7.8.3"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
   integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
@@ -376,234 +404,236 @@
     "@babel/helper-plugin-utils" "^7.8.0"
 
 "@babel/plugin-transform-arrow-functions@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz#8083ffc86ac8e777fbe24b5967c4b2521f3cb2b3"
-  integrity sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A==
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.13.0.tgz#10a59bebad52d637a027afa692e8d5ceff5e3dae"
+  integrity sha512-96lgJagobeVmazXFaDrbmCLQxBysKu7U6Do3mLsx27gf5Dk85ezysrs2BZUpXD703U/Su1xTBDxxar2oa4jAGg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.13.0"
 
 "@babel/plugin-transform-async-to-generator@^7.3.4":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.12.1.tgz#3849a49cc2a22e9743cbd6b52926d30337229af1"
-  integrity sha512-SDtqoEcarK1DFlRJ1hHRY5HvJUj5kX4qmtpMAm2QnhOlyuMC4TMdCRgW6WXpv93rZeYNeLP22y8Aq2dbcDRM1A==
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.13.0.tgz#8e112bf6771b82bf1e974e5e26806c5c99aa516f"
+  integrity sha512-3j6E004Dx0K3eGmhxVJxwwI89CTJrce7lg3UrtFuDAVQ/2+SJ/h/aSFOeE6/n0WB1GsOffsJp6MnPQNQ8nmwhg==
   dependencies:
-    "@babel/helper-module-imports" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-remap-async-to-generator" "^7.12.1"
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/helper-remap-async-to-generator" "^7.13.0"
 
 "@babel/plugin-transform-block-scoped-functions@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.1.tgz#f2a1a365bde2b7112e0a6ded9067fdd7c07905d9"
-  integrity sha512-5OpxfuYnSgPalRpo8EWGPzIYf0lHBWORCkj5M0oLBwHdlux9Ri36QqGW3/LR13RSVOAoUUMzoPI/jpE4ABcHoA==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.13.tgz#a9bf1836f2a39b4eb6cf09967739de29ea4bf4c4"
+  integrity sha512-zNyFqbc3kI/fVpqwfqkg6RvBgFpC4J18aKKMmv7KdQ/1GgREapSJAykLMVNwfRGO3BtHj3YQZl8kxCXPcVMVeg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-block-scoping@^7.3.4":
-  version "7.12.12"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.12.tgz#d93a567a152c22aea3b1929bb118d1d0a175cdca"
-  integrity sha512-VOEPQ/ExOVqbukuP7BYJtI5ZxxsmegTwzZ04j1aF0dkSypGo9XpDHuOrABsJu+ie+penpSJheDJ11x1BEZNiyQ==
+  version "7.13.16"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.13.16.tgz#a9c0f10794855c63b1d629914c7dcfeddd185892"
+  integrity sha512-ad3PHUxGnfWF4Efd3qFuznEtZKoBp0spS+DgqzVzRPV7urEBvPLue3y2j80w4Jf2YLzZHj8TOv/Lmvdmh3b2xg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.13.0"
 
 "@babel/plugin-transform-classes@^7.3.4":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.12.1.tgz#65e650fcaddd3d88ddce67c0f834a3d436a32db6"
-  integrity sha512-/74xkA7bVdzQTBeSUhLLJgYIcxw/dpEpCdRDiHgPJ3Mv6uC11UhjpOhl72CgqbBCmt1qtssCyB2xnJm1+PFjog==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-define-map" "^7.10.4"
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-optimise-call-expression" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.12.1"
-    "@babel/helper-split-export-declaration" "^7.10.4"
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.13.0.tgz#0265155075c42918bf4d3a4053134176ad9b533b"
+  integrity sha512-9BtHCPUARyVH1oXGcSJD3YpsqRLROJx5ZNP6tN5vnk17N0SVf9WCtf8Nuh1CFmgByKKAIMstitKduoCmsaDK5g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.12.13"
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-optimise-call-expression" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/helper-replace-supers" "^7.13.0"
+    "@babel/helper-split-export-declaration" "^7.12.13"
     globals "^11.1.0"
 
 "@babel/plugin-transform-computed-properties@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.12.1.tgz#d68cf6c9b7f838a8a4144badbe97541ea0904852"
-  integrity sha512-vVUOYpPWB7BkgUWPo4C44mUQHpTZXakEqFjbv8rQMg7TC6S6ZhGZ3otQcRH6u7+adSlE5i0sp63eMC/XGffrzg==
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.13.0.tgz#845c6e8b9bb55376b1fa0b92ef0bdc8ea06644ed"
+  integrity sha512-RRqTYTeZkZAz8WbieLTvKUEUxZlUTdmL5KGMyZj7FnMfLNKV4+r5549aORG/mgojRmFlQMJDUupwAMiF2Q7OUg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.13.0"
 
 "@babel/plugin-transform-destructuring@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.12.1.tgz#b9a570fe0d0a8d460116413cb4f97e8e08b2f847"
-  integrity sha512-fRMYFKuzi/rSiYb2uRLiUENJOKq4Gnl+6qOv5f8z0TZXg3llUwUhsNNwrwaT/6dUhJTzNpBr+CUvEWBtfNY1cw==
+  version "7.13.17"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.13.17.tgz#678d96576638c19d5b36b332504d3fd6e06dea27"
+  integrity sha512-UAUqiLv+uRLO+xuBKKMEpC+t7YRNVRqBsWWq1yKXbBZBje/t3IXCiSinZhjn/DC3qzBfICeYd2EFGEbHsh5RLA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.13.0"
 
 "@babel/plugin-transform-dotall-regex@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.1.tgz#a1d16c14862817b6409c0a678d6f9373ca9cd975"
-  integrity sha512-B2pXeRKoLszfEW7J4Hg9LoFaWEbr/kzo3teWHmtFCszjRNa/b40f9mfeqZsIDLLt/FjwQ6pz/Gdlwy85xNckBA==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.13.tgz#3f1601cc29905bfcb67f53910f197aeafebb25ad"
+  integrity sha512-foDrozE65ZFdUC2OfgeOCrEPTxdB3yjqxpXh8CH+ipd9CHd4s/iq81kcUpyH8ACGNEPdFqbtzfgzbT/ZGlbDeQ==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-duplicate-keys@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.1.tgz#745661baba295ac06e686822797a69fbaa2ca228"
-  integrity sha512-iRght0T0HztAb/CazveUpUQrZY+aGKKaWXMJ4uf9YJtqxSUe09j3wteztCUDRHs+SRAL7yMuFqUsLoAKKzgXjw==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.13.tgz#6f06b87a8b803fd928e54b81c258f0a0033904de"
+  integrity sha512-NfADJiiHdhLBW3pulJlJI2NB0t4cci4WTZ8FtdIuNc2+8pslXdPtRRAEWqUY+m9kNOk2eRYbTAOipAxlrOcwwQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-exponentiation-operator@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.1.tgz#b0f2ed356ba1be1428ecaf128ff8a24f02830ae0"
-  integrity sha512-7tqwy2bv48q+c1EHbXK0Zx3KXd2RVQp6OC7PbwFNt/dPTAV3Lu5sWtWuAj8owr5wqtWnqHfl2/mJlUmqkChKug==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.13.tgz#4d52390b9a273e651e4aba6aee49ef40e80cd0a1"
+  integrity sha512-fbUelkM1apvqez/yYx1/oICVnGo2KM5s63mhGylrmXUxK/IAXSIf87QIxVfZldWf4QsOafY6vV3bX8aMHSvNrA==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-for-of@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.12.1.tgz#07640f28867ed16f9511c99c888291f560921cfa"
-  integrity sha512-Zaeq10naAsuHo7heQvyV0ptj4dlZJwZgNAtBYBnu5nNKJoW62m0zKcIEyVECrUKErkUkg6ajMy4ZfnVZciSBhg==
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.13.0.tgz#c799f881a8091ac26b54867a845c3e97d2696062"
+  integrity sha512-IHKT00mwUVYE0zzbkDgNRP6SRzvfGCYsOxIRz8KsiaaHCcT9BWIkO+H9QRJseHBLOGBZkHUdHiqj6r0POsdytg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.13.0"
 
 "@babel/plugin-transform-function-name@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.1.tgz#2ec76258c70fe08c6d7da154003a480620eba667"
-  integrity sha512-JF3UgJUILoFrFMEnOJLJkRHSk6LUSXLmEFsA23aR2O5CSLUxbeUX1IZ1YQ7Sn0aXb601Ncwjx73a+FVqgcljVw==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.13.tgz#bb024452f9aaed861d374c8e7a24252ce3a50051"
+  integrity sha512-6K7gZycG0cmIwwF7uMK/ZqeCikCGVBdyP2J5SKNCXO5EOHcqi+z7Jwf8AmyDNcBgxET8DrEtCt/mPKPyAzXyqQ==
   dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-literals@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.1.tgz#d73b803a26b37017ddf9d3bb8f4dc58bfb806f57"
-  integrity sha512-+PxVGA+2Ag6uGgL0A5f+9rklOnnMccwEBzwYFL3EUaKuiyVnUipyXncFcfjSkbimLrODoqki1U9XxZzTvfN7IQ==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.13.tgz#2ca45bafe4a820197cf315794a4d26560fe4bdb9"
+  integrity sha512-FW+WPjSR7hiUxMcKqyNjP05tQ2kmBCdpEpZHY1ARm96tGQCCBvXKnpjILtDplUnJ/eHZ0lALLM+d2lMFSpYJrQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-modules-amd@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.12.1.tgz#3154300b026185666eebb0c0ed7f8415fefcf6f9"
-  integrity sha512-tDW8hMkzad5oDtzsB70HIQQRBiTKrhfgwC/KkJeGsaNFTdWhKNt/BiE8c5yj19XiGyrxpbkOfH87qkNg1YGlOQ==
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.0.tgz#589494b5b290ff76cf7f59c798011f6d77026553"
+  integrity sha512-CF4c5LX4LQ03LebQxJ5JZes2OYjzBuk1TdiF7cG7d5dK4lAdw9NZmaxq5K/mouUdNeqwz3TNjnW6v01UqUNgpQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.14.0"
+    "@babel/helper-plugin-utils" "^7.13.0"
     babel-plugin-dynamic-import-node "^2.3.3"
 
 "@babel/plugin-transform-modules-commonjs@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.12.1.tgz#fa403124542636c786cf9b460a0ffbb48a86e648"
-  integrity sha512-dY789wq6l0uLY8py9c1B48V8mVL5gZh/+PQ5ZPrylPYsnAvnEMjqsUXkuoDVPeVK+0VyGar+D08107LzDQ6pag==
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.0.tgz#52bc199cb581e0992edba0f0f80356467587f161"
+  integrity sha512-EX4QePlsTaRZQmw9BsoPeyh5OCtRGIhwfLquhxGp5e32w+dyL8htOcDwamlitmNFK6xBZYlygjdye9dbd9rUlQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-simple-access" "^7.12.1"
+    "@babel/helper-module-transforms" "^7.14.0"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/helper-simple-access" "^7.13.12"
     babel-plugin-dynamic-import-node "^2.3.3"
 
 "@babel/plugin-transform-modules-systemjs@^7.3.4":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.12.1.tgz#663fea620d593c93f214a464cd399bf6dc683086"
-  integrity sha512-Hn7cVvOavVh8yvW6fLwveFqSnd7rbQN3zJvoPNyNaQSvgfKmDBO9U1YL9+PCXGRlZD9tNdWTy5ACKqMuzyn32Q==
+  version "7.13.8"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.13.8.tgz#6d066ee2bff3c7b3d60bf28dec169ad993831ae3"
+  integrity sha512-hwqctPYjhM6cWvVIlOIe27jCIBgHCsdH2xCJVAYQm7V5yTMoilbVMi9f6wKg0rpQAOn6ZG4AOyvCqFF/hUh6+A==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.10.4"
-    "@babel/helper-module-transforms" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-validator-identifier" "^7.10.4"
+    "@babel/helper-hoist-variables" "^7.13.0"
+    "@babel/helper-module-transforms" "^7.13.0"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/helper-validator-identifier" "^7.12.11"
     babel-plugin-dynamic-import-node "^2.3.3"
 
 "@babel/plugin-transform-modules-umd@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.12.1.tgz#eb5a218d6b1c68f3d6217b8fa2cc82fec6547902"
-  integrity sha512-aEIubCS0KHKM0zUos5fIoQm+AZUMt1ZvMpqz0/H5qAQ7vWylr9+PLYurT+Ic7ID/bKLd4q8hDovaG3Zch2uz5Q==
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.0.tgz#2f8179d1bbc9263665ce4a65f305526b2ea8ac34"
+  integrity sha512-nPZdnWtXXeY7I87UZr9VlsWme3Y0cfFFE41Wbxz4bbaexAjNMInXPFUpRRUJ8NoMm0Cw+zxbqjdPmLhcjfazMw==
   dependencies:
-    "@babel/helper-module-transforms" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.14.0"
+    "@babel/helper-plugin-utils" "^7.13.0"
 
 "@babel/plugin-transform-named-capturing-groups-regex@^7.3.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.1.tgz#b407f5c96be0d9f5f88467497fa82b30ac3e8753"
-  integrity sha512-tB43uQ62RHcoDp9v2Nsf+dSM8sbNodbEicbQNA53zHz8pWUhsgHSJCGpt7daXxRydjb0KnfmB+ChXOv3oADp1Q==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.13.tgz#2213725a5f5bbbe364b50c3ba5998c9599c5c9d9"
+  integrity sha512-Xsm8P2hr5hAxyYblrfACXpQKdQbx4m2df9/ZZSQ8MAhsadw06+jW7s9zsSw6he+mJZXRlVMyEnVktJo4zjk1WA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
+    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
 
 "@babel/plugin-transform-new-target@^7.0.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.1.tgz#80073f02ee1bb2d365c3416490e085c95759dec0"
-  integrity sha512-+eW/VLcUL5L9IvJH7rT1sT0CzkdUTvPrXC2PXTn/7z7tXLBuKvezYbGdxD5WMRoyvyaujOq2fWoKl869heKjhw==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.13.tgz#e22d8c3af24b150dd528cbd6e685e799bf1c351c"
+  integrity sha512-/KY2hbLxrG5GTQ9zzZSc3xWiOy379pIETEhbtzwZcw9rvuaVV4Fqy7BYGYOWZnaoXIQYbbJ0ziXLa/sKcGCYEQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-object-super@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.1.tgz#4ea08696b8d2e65841d0c7706482b048bed1066e"
-  integrity sha512-AvypiGJH9hsquNUn+RXVcBdeE3KHPZexWRdimhuV59cSoOt5kFBmqlByorAeUlGG2CJWd0U+4ZtNKga/TB0cAw==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.13.tgz#b4416a2d63b8f7be314f3d349bd55a9c1b5171f7"
+  integrity sha512-JzYIcj3XtYspZDV8j9ulnoMPZZnF/Cj0LUxPOjR89BdBVx+zYJI9MdMIlUZjbXDX+6YVeS6I3e8op+qQ3BYBoQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.12.13"
+    "@babel/helper-replace-supers" "^7.12.13"
 
-"@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.12.1.tgz#d2e963b038771650c922eff593799c96d853255d"
-  integrity sha512-xq9C5EQhdPK23ZeCdMxl8bbRnAgHFrw5EOC3KJUsSylZqdkCaFEXxGSBuTSObOpiiHHNyb82es8M1QYgfQGfNg==
+"@babel/plugin-transform-parameters@^7.13.0", "@babel/plugin-transform-parameters@^7.2.0":
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.13.0.tgz#8fa7603e3097f9c0b7ca1a4821bc2fb52e9e5007"
+  integrity sha512-Jt8k/h/mIwE2JFEOb3lURoY5C85ETcYPnbuAJ96zRBzh1XHtQZfs62ChZ6EP22QlC8c7Xqr9q+e1SU5qttwwjw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.13.0"
 
 "@babel/plugin-transform-regenerator@^7.3.4":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.1.tgz#5f0a28d842f6462281f06a964e88ba8d7ab49753"
-  integrity sha512-gYrHqs5itw6i4PflFX3OdBPMQdPbF4bj2REIUxlMRUFk0/ZOAIpDFuViuxPjUL7YC8UPnf+XG7/utJvqXdPKng==
+  version "7.13.15"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.13.15.tgz#e5eb28945bf8b6563e7f818945f966a8d2997f39"
+  integrity sha512-Bk9cOLSz8DiurcMETZ8E2YtIVJbFCPGW28DJWUakmyVWtQSm6Wsf0p4B4BfEr/eL2Nkhe/CICiUiMOCi1TPhuQ==
   dependencies:
     regenerator-transform "^0.14.2"
 
 "@babel/plugin-transform-runtime@^7.4.0":
-  version "7.12.10"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.10.tgz#af0fded4e846c4b37078e8e5d06deac6cd848562"
-  integrity sha512-xOrUfzPxw7+WDm9igMgQCbO3cJKymX7dFdsgRr1eu9n3KjjyU4pptIXbXPseQDquw+W+RuJEJMHKHNsPNNm3CA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.12.5"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    semver "^5.5.1"
+  version "7.13.15"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.13.15.tgz#2eddf585dd066b84102517e10a577f24f76a9cd7"
+  integrity sha512-d+ezl76gx6Jal08XngJUkXM4lFXK/5Ikl9Mh4HKDxSfGJXmZ9xG64XT2oivBzfxb/eQ62VfvoMkaCZUKJMVrBA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.13.12"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    babel-plugin-polyfill-corejs2 "^0.2.0"
+    babel-plugin-polyfill-corejs3 "^0.2.0"
+    babel-plugin-polyfill-regenerator "^0.2.0"
+    semver "^6.3.0"
 
 "@babel/plugin-transform-shorthand-properties@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.1.tgz#0bf9cac5550fce0cfdf043420f661d645fdc75e3"
-  integrity sha512-GFZS3c/MhX1OusqB1MZ1ct2xRzX5ppQh2JU1h2Pnfk88HtFTM+TWQqJNfwkmxtPQtb/s1tk87oENfXJlx7rSDw==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.13.tgz#db755732b70c539d504c6390d9ce90fe64aff7ad"
+  integrity sha512-xpL49pqPnLtf0tVluuqvzWIgLEhuPpZzvs2yabUHSKRNlN7ScYU7aMlmavOeyXJZKgZKQRBlh8rHbKiJDraTSw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-spread@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.12.1.tgz#527f9f311be4ec7fdc2b79bb89f7bf884b3e1e1e"
-  integrity sha512-vuLp8CP0BE18zVYjsEBZ5xoCecMK6LBMMxYzJnh01rxQRvhNhH1csMMmBfNo5tGpGO+NhdSNW2mzIvBu3K1fng==
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.13.0.tgz#84887710e273c1815ace7ae459f6f42a5d31d5fd"
+  integrity sha512-V6vkiXijjzYeFmQTr3dBxPtZYLPcUfY34DebOU27jIl2M/Y8Egm52Hw82CSjjPqd54GTlJs5x+CR7HeNr24ckg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
 
 "@babel/plugin-transform-sticky-regex@^7.2.0":
-  version "7.12.7"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.7.tgz#560224613ab23987453948ed21d0b0b193fa7fad"
-  integrity sha512-VEiqZL5N/QvDbdjfYQBhruN0HYjSPjC4XkeqW4ny/jNtH9gcbgaqBIXYEZCNnESMAGs0/K/R7oFGMhOyu/eIxg==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.13.tgz#760ffd936face73f860ae646fb86ee82f3d06d1f"
+  integrity sha512-Jc3JSaaWT8+fr7GRvQP02fKDsYk4K/lYwWq38r/UGfaxo89ajud321NH28KRQ7xy1Ybc0VUE5Pz8psjNNDUglg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-template-literals@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.12.1.tgz#b43ece6ed9a79c0c71119f576d299ef09d942843"
-  integrity sha512-b4Zx3KHi+taXB1dVRBhVJtEPi9h1THCeKmae2qP0YdUHIFhVjtpqqNfxeVAa1xeHVhAy4SbHxEwx5cltAu5apw==
+  version "7.13.0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.13.0.tgz#a36049127977ad94438dee7443598d1cefdf409d"
+  integrity sha512-d67umW6nlfmr1iehCcBv69eSUSySk1EsIS8aTDX4Xo9qajAh6mYtcl4kJrBkGXuxZPEgVr7RVfAvNW6YQkd4Mw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.13.0"
 
 "@babel/plugin-transform-typeof-symbol@^7.2.0":
-  version "7.12.10"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.10.tgz#de01c4c8f96580bd00f183072b0d0ecdcf0dec4b"
-  integrity sha512-JQ6H8Rnsogh//ijxspCjc21YPd3VLVoYtAwv3zQmqAt8YGYUtdo5usNhdl4b9/Vir2kPFZl6n1h0PfUz4hJhaA==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.13.tgz#785dd67a1f2ea579d9c2be722de8c84cb85f5a7f"
+  integrity sha512-eKv/LmUJpMnu4npgfvs3LiHhJua5fo/CysENxa45YCQXZwKnGCQKAg87bvoqSW1fFT+HA32l03Qxsm8ouTY3ZQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-unicode-regex@^7.2.0":
-  version "7.12.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.1.tgz#cc9661f61390db5c65e3febaccefd5c6ac3faecb"
-  integrity sha512-SqH4ClNngh/zGwHZOOQMTD+e8FGWexILV+ePMyiDJttAWRh5dhDL8rcl5lSgU3Huiq6Zn6pWTMvdPAb21Dwdyg==
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.13.tgz#b52521685804e155b1202e83fc188d34bb70f5ac"
+  integrity sha512-mDRzSNY7/zopwisPZ5kM9XKCfhchqIYwAKRERtEnhYscZB79VRekuRSoYbN0+KVe3y8+q1h6A4svXtP7N+UoCA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-create-regexp-features-plugin" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/preset-env@^7.0.0 < 7.4.0":
   version "7.3.4"
@@ -668,9 +698,9 @@
     source-map-support "^0.5.9"
 
 "@babel/runtime-corejs2@^7.2.0":
-  version "7.12.5"
-  resolved "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.12.5.tgz#382ec38f0826365e96118e28b81249c1c61bace3"
-  integrity sha512-kt5YpZ7F5A05LOgQuaMXXmcxakK/qttf5C/E1BJPA3Kf5PanbjPzDoXN+PIslUnjUxpuKblCsXyP0QfMiqyKqA==
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.14.0.tgz#5519b92ccc819bd3d0a1ecb25ab3cb5a775485f8"
+  integrity sha512-btR4E8JiGlmmDI5YgirlG9z3T91rBdxnVh2YuEStrHDcekffaaIeK+CE0S4IaYUyYhMa7rFDfF2GEO79XNbLEA==
   dependencies:
     core-js "^2.6.5"
     regenerator-runtime "^0.13.4"
@@ -683,43 +713,41 @@
     regenerator-runtime "^0.12.0"
 
 "@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.8.4":
-  version "7.12.5"
-  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
-  integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/template@^7.0.0", "@babel/template@^7.10.4", "@babel/template@^7.12.7":
-  version "7.12.7"
-  resolved "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
-  integrity sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/parser" "^7.12.7"
-    "@babel/types" "^7.12.7"
-
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.10", "@babel/traverse@^7.12.5", "@babel/traverse@^7.7.0":
-  version "7.12.12"
-  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.12.tgz#d0cd87892704edd8da002d674bc811ce64743376"
-  integrity sha512-s88i0X0lPy45RrLM8b9mz8RPH5FqO9G9p7ti59cToE44xFm1Q+Pjh5Gq4SXBbtb88X7Uy7pexeqRIQDDMNkL0w==
-  dependencies:
-    "@babel/code-frame" "^7.12.11"
-    "@babel/generator" "^7.12.11"
-    "@babel/helper-function-name" "^7.12.11"
-    "@babel/helper-split-export-declaration" "^7.12.11"
-    "@babel/parser" "^7.12.11"
-    "@babel/types" "^7.12.12"
+"@babel/template@^7.0.0", "@babel/template@^7.12.13":
+  version "7.12.13"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
+  integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/parser" "^7.12.13"
+    "@babel/types" "^7.12.13"
+
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.13.15", "@babel/traverse@^7.14.0", "@babel/traverse@^7.7.0":
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.0.tgz#cea0dc8ae7e2b1dec65f512f39f3483e8cc95aef"
+  integrity sha512-dZ/a371EE5XNhTHomvtuLTUyx6UEoJmYX+DT5zBCQN3McHemsuIaKKYqsc/fs26BEkHs/lBZy0J571LP5z9kQA==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/generator" "^7.14.0"
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-split-export-declaration" "^7.12.13"
+    "@babel/parser" "^7.14.0"
+    "@babel/types" "^7.14.0"
     debug "^4.1.0"
     globals "^11.1.0"
-    lodash "^4.17.19"
 
-"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.12.1", "@babel/types@^7.12.10", "@babel/types@^7.12.11", "@babel/types@^7.12.12", "@babel/types@^7.12.5", "@babel/types@^7.12.7", "@babel/types@^7.7.0":
-  version "7.12.12"
-  resolved "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz#4608a6ec313abbd87afa55004d373ad04a96c299"
-  integrity sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==
+"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.16", "@babel/types@^7.14.0", "@babel/types@^7.7.0":
+  version "7.14.0"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.14.0.tgz#3fc3fc74e0cdad878182e5f66cc6bcab1915a802"
+  integrity sha512-O2LVLdcnWplaGxiPBz12d0HcdN8QdxdsWYhz5LSeuukV/5mn2xUUc3gBeU4QBYPJ18g/UToe8F532XJ608prmg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
-    lodash "^4.17.19"
+    "@babel/helper-validator-identifier" "^7.14.0"
     to-fast-properties "^2.0.0"
 
 "@commitlint/cli@^8.3.5":
@@ -991,9 +1019,9 @@
     "@types/node" "*"
 
 "@types/json-schema@^7.0.5":
-  version "7.0.6"
-  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
-  integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
+  version "7.0.7"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
+  integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
@@ -1008,9 +1036,9 @@
     "@types/unist" "*"
 
 "@types/minimatch@*":
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
-  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz#f0ec25dbf2f0e4b18647313ac031134ca5b24b21"
+  integrity sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==
 
 "@types/minimist@^1.2.0":
   version "1.2.1"
@@ -1018,9 +1046,9 @@
   integrity sha512-fZQQafSREFyuZcdWFAExYjBiCL7AUCdgsk80iO0q4yihYYdcIiH28CcuPTGFgLOCC8RlW49GSQxdHwZP+I7CNg==
 
 "@types/node@*":
-  version "14.14.20"
-  resolved "https://registry.npmjs.org/@types/node/-/node-14.14.20.tgz#f7974863edd21d1f8a494a73e8e2b3658615c340"
-  integrity sha512-Y93R97Ouif9JEOWPIUyU+eyIdyRqQR0I8Ez1dzku4hDx34NWh4HbtIc3WNzwB1Y9ULvNGeu5B8h8bVL5cAk4/A==
+  version "15.0.1"
+  resolved "https://registry.npmjs.org/@types/node/-/node-15.0.1.tgz#ef34dea0881028d11398be5bf4e856743e3dc35a"
+  integrity sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -1302,12 +1330,12 @@
   optionalDependencies:
     prettier "^1.18.2"
 
-"@vue/composition-api@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.npmjs.org/@vue/composition-api/-/composition-api-0.5.0.tgz#2dbaa02a5d1f5d0d407d53d5529fe444aa8362f3"
-  integrity sha512-9QDFWq7q839G1CTTaxeruPOTrrVOPSaVipJ2TxxK9QAruePNTHOGbOOFRpc8WLl4YPsu1/c29yBhMVmrXz8BZw==
+"@vue/composition-api@^1.0.0-rc.1":
+  version "1.0.0-rc.8"
+  resolved "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-rc.8.tgz#ace0f1c8cc7d5b193825fabdc7c4b919bb182a9e"
+  integrity sha512-9ZW2+2WW7iNywVFeaz9K18DW/aA4MLncz+FiUpjtMUKzHpiN1GtYQ8rRYOhHfGXD2Hmp4tTFjqaTM4WeAbB1ig==
   dependencies:
-    tslib "^1.9.3"
+    tslib "^2.2.0"
 
 "@vue/preload-webpack-plugin@^1.1.0":
   version "1.1.2"
@@ -1323,9 +1351,9 @@
     lodash "^4.17.4"
 
 "@vue/web-component-wrapper@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.2.0.tgz#bb0e46f1585a7e289b4ee6067dcc5a6ae62f1dd1"
-  integrity sha512-Xn/+vdm9CjuC9p3Ae+lTClNutrVhsXpzxvoTXXtoys6kVRX9FkueSUAqSWAyZntmVLlR4DosBV4pH8y5Z/HbUw==
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
+  integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
 "@webassemblyjs/ast@1.7.11":
   version "1.7.11"
@@ -1587,6 +1615,14 @@ address@^1.0.3:
   resolved "https://registry.npmjs.org/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
   integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
 
+adler-32@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz#6a3e6bf0a63900ba15652808cb15c6813d1a5f25"
+  integrity sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=
+  dependencies:
+    exit-on-epipe "~1.0.1"
+    printj "~1.1.0"
+
 aggregate-error@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
@@ -1630,10 +1666,10 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^7.0.2:
-  version "7.0.3"
-  resolved "https://registry.npmjs.org/ajv/-/ajv-7.0.3.tgz#13ae747eff125cafb230ac504b2406cf371eece2"
-  integrity sha512-R50QRlXSxqXcQP5SvKUrw8VZeypvo12i2IX0EeR5PiZ7bEKeHWgzgo264LDadUsCU42lTJVhFikTqJwNeH34gQ==
+ajv@^8.0.1:
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-8.2.0.tgz#c89d3380a784ce81b2085f48811c4c101df4c602"
+  integrity sha512-WSNGFuyWd//XO8n/m/EaOlNLtO0yL8EXT/74LqT4khdhpZjP7lkj/kT5uwRmGitKEVp/Oj7ZUHeGfPtgHhQ5CA==
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
@@ -1656,11 +1692,11 @@ ansi-escapes@^3.0.0:
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
 ansi-escapes@^4.2.1:
-  version "4.3.1"
-  resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61"
-  integrity sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==
+  version "4.3.2"
+  resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
   dependencies:
-    type-fest "^0.11.0"
+    type-fest "^0.21.3"
 
 ansi-html@0.0.7:
   version "0.0.7"
@@ -1725,9 +1761,9 @@ anymatch@^2.0.0:
     normalize-path "^2.1.1"
 
 anymatch@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
-  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
@@ -1783,6 +1819,11 @@ array-equal@^1.0.0:
   resolved "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-find-index@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
@@ -1809,14 +1850,14 @@ array-ify@^1.0.0:
   integrity sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=
 
 array-includes@^3.1.1:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.2.tgz#a8db03e0b88c8c6aeddc49cb132f9bcab4ebf9c8"
-  integrity sha512-w2GspexNQpx+PutG3QpT437/BenZBj0M/MZGn5mzv/MofYqo0xmRHzn4lFsoDlWJ+THYsGJmFlW68WlDFx7VRw==
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
+  integrity sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-    get-intrinsic "^1.0.1"
+    es-abstract "^1.18.0-next.2"
+    get-intrinsic "^1.1.1"
     is-string "^1.0.5"
 
 array-union@^1.0.1, array-union@^1.0.2:
@@ -1855,7 +1896,7 @@ array.prototype.flat@^1.2.3:
     define-properties "^1.1.3"
     es-abstract "^1.18.0-next.1"
 
-array.prototype.map@^1.0.1:
+array.prototype.map@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/array.prototype.map/-/array.prototype.map-1.0.3.tgz#1609623618d3d84134a37d4a220030c2bd18420b"
   integrity sha512-nNcb30v0wfDyIe26Yif3PcV1JXQp4zEeEfupG7L4SRjnD6HLbO5b2a7eVSba53bOx4YCHYMBHt+Fp4vYstneRA==
@@ -1901,6 +1942,16 @@ assert@^1.1.1:
     object-assign "^4.1.1"
     util "0.10.3"
 
+assert@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz#95fc1c616d48713510680f2eaf2d10dd22e02d32"
+  integrity sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==
+  dependencies:
+    es6-object-assign "^1.1.0"
+    is-nan "^1.2.1"
+    object-is "^1.0.1"
+    util "^0.12.0"
+
 assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
@@ -1968,6 +2019,13 @@ autoprefixer@^9.4.8, autoprefixer@^9.5.1, autoprefixer@^9.8.6:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
+available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2134,6 +2192,30 @@ babel-plugin-module-resolver@3.2.0:
     reselect "^3.0.1"
     resolve "^1.4.0"
 
+babel-plugin-polyfill-corejs2@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.0.tgz#686775bf9a5aa757e10520903675e3889caeedc4"
+  integrity sha512-9bNwiR0dS881c5SHnzCmmGlMkJLl0OUZvxrxHo9w/iNoRuqaPjqlvBf4HrovXtQs/au5yKkpcdgfT1cC5PAZwg==
+  dependencies:
+    "@babel/compat-data" "^7.13.11"
+    "@babel/helper-define-polyfill-provider" "^0.2.0"
+    semver "^6.1.1"
+
+babel-plugin-polyfill-corejs3@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.0.tgz#f4b4bb7b19329827df36ff56f6e6d367026cb7a2"
+  integrity sha512-zZyi7p3BCUyzNxLx8KV61zTINkkV65zVkDAFNZmrTCRVhjo1jAS+YLvDJ9Jgd/w2tsAviCwFHReYfxO3Iql8Yg==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.2.0"
+    core-js-compat "^3.9.1"
+
+babel-plugin-polyfill-regenerator@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.0.tgz#853f5f5716f4691d98c84f8069c7636ea8da7ab8"
+  integrity sha512-J7vKbCuD2Xi/eEHxquHN14bXAW9CXtecwuLrOIDJtcZzTaPzV1VdEfoUf9AzcRBMolKUQKM9/GVojeh0hFiqMg==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.2.0"
+
 babel-plugin-syntax-object-rest-spread@^6.13.0:
   version "6.13.0"
   resolved "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -2247,9 +2329,14 @@ bail@^1.0.0:
   integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
 
 balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+balanced-match@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
+  integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
 base64-js@^1.0.2:
   version "1.5.1"
@@ -2319,9 +2406,9 @@ bindings@^1.5.0:
     file-uri-to-path "1.0.0"
 
 block-stream2@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/block-stream2/-/block-stream2-2.0.0.tgz#680b9d357ca8b9d5637f4ec8a41fb5968029108f"
-  integrity sha512-1oI+RHHUEo64xomy1ozLgVJetFlHkIfQfJzTBQrj6xWnEMEPooeo2fZoqFjp0yzfHMBrgxwgh70tKp6T17+i3g==
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/block-stream2/-/block-stream2-2.1.0.tgz#ac0c5ef4298b3857796e05be8ebed72196fa054b"
+  integrity sha512-suhjmLI57Ewpmq00qaygS8UgEq2ly2PCItenIyhMqVjo4t4pGzqMvfgJuX8iWTeSDdfSSqS6j38fL4ToNL7Pfg==
   dependencies:
     readable-stream "^3.4.0"
 
@@ -2330,15 +2417,15 @@ bluebird@^3.1.1, bluebird@^3.5.1, bluebird@^3.5.5:
   resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
-  version "4.11.9"
-  resolved "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
-  integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
+  version "4.12.0"
+  resolved "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
 
 bn.js@^5.0.0, bn.js@^5.1.1:
-  version "5.1.3"
-  resolved "https://registry.npmjs.org/bn.js/-/bn.js-5.1.3.tgz#beca005408f642ebebea80b042b4d18d2ac0ee6b"
-  integrity sha512-GkTiFpjFtUzU9CbMeJ5iazkCzGL3jrhzerzZIuqLABjbwRaFt33I9tUdSNryIptM+RxDet6OKm2WnLXzW51KsQ==
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
+  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
 
 body-parser@1.19.0:
   version "1.19.0"
@@ -2413,7 +2500,7 @@ braces@^3.0.1, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-brorand@^1.0.1:
+brorand@^1.0.1, brorand@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
@@ -2491,16 +2578,16 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.3.4:
-  version "4.16.1"
-  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.16.1.tgz#bf757a2da376b3447b800a16f0f1c96358138766"
-  integrity sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==
+browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.5, browserslist@^4.3.4:
+  version "4.16.5"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.16.5.tgz#952825440bca8913c62d0021334cbe928ef062ae"
+  integrity sha512-C2HAjrM1AI/djrpAUU/tr4pml1DqLIzJKSLDBXBrNErl9ZCCTXdhwxdJjYc16953+mBWf7Lw+uUJgpgb8cN71A==
   dependencies:
-    caniuse-lite "^1.0.30001173"
-    colorette "^1.2.1"
-    electron-to-chromium "^1.3.634"
+    caniuse-lite "^1.0.30001214"
+    colorette "^1.2.2"
+    electron-to-chromium "^1.3.719"
     escalade "^3.1.1"
-    node-releases "^1.1.69"
+    node-releases "^1.1.71"
 
 bser@2.1.1:
   version "2.1.1"
@@ -2614,7 +2701,7 @@ cache-loader@^2.0.1:
     normalize-path "^3.0.0"
     schema-utils "^1.0.0"
 
-call-bind@^1.0.0:
+call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
   integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
@@ -2709,10 +2796,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001173:
-  version "1.0.30001174"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001174.tgz#0f2aca2153fd88ceb07a2bb982fc2acb787623c4"
-  integrity sha512-tqClL/4ThQq6cfFXH3oJL4rifFBeM6gTkphjao5kgwMaW9yn0tKgQLAEfKzDwj6HQWCB/aWo8kTFlSvIN8geEA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001214:
+  version "1.0.30001219"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001219.tgz#5bfa5d0519f41f993618bd318f606a4c4c16156b"
+  integrity sha512-c0yixVG4v9KBc/tQ2rlbB3A/bgBFRvl8h8M4IeUbqCca4gsiCfvtaheUssbnux/Mb66Vjz7x8yYjDgYcNQOhyQ==
 
 capture-exit@^1.2.0:
   version "1.2.0"
@@ -2722,15 +2809,24 @@ capture-exit@^1.2.0:
     rsvp "^3.3.3"
 
 case-sensitive-paths-webpack-plugin@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz#23ac613cc9a856e4f88ff8bb73bbb5e989825cf7"
-  integrity sha512-/4YgnZS8y1UXXmC02xD5rRrBEu6T5ub+mQHLNRj0fzTRbgdBYhsNo2V5EqwgqrExjxsjtF/OpAKAMkKsxbD5XQ==
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
+  integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
 
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+cfb@^1.1.4:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/cfb/-/cfb-1.2.0.tgz#6a4d0872b525ed60349e1ef51fb4b0bf73eca9a8"
+  integrity sha512-sXMvHsKCICVR3Naq+J556K+ExBo9n50iKl6LGarlnvuA2035uMlGA/qVrc0wQtow5P1vJEw9UyrKLCbtIKz+TQ==
+  dependencies:
+    adler-32 "~1.2.0"
+    crc-32 "~1.2.0"
+    printj "~1.1.2"
+
 chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -2752,9 +2848,9 @@ chalk@^1.0.0, chalk@^1.1.3:
     supports-color "^2.0.0"
 
 chalk@^4.0.0, chalk@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
-  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad"
+  integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==
   dependencies:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
@@ -2789,10 +2885,10 @@ check-types@^8.0.3:
   resolved "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
   integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
 
-"chokidar@>=2.0.0 <4.0.0", chokidar@^3.4.1:
-  version "3.5.0"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.0.tgz#458a4816a415e9d3b3caa4faec2b96a6935a9e65"
-  integrity sha512-JgQM9JS92ZbFR4P90EvmzNpSGhpPBGBSj10PILeDyYFwp4h2/D9OM03wsJ4zW1fEp4ka2DGrnUeD7FuvQ2aZ2Q==
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
+  version "3.5.1"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
+  integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
   dependencies:
     anymatch "~3.1.1"
     braces "~3.0.2"
@@ -2829,18 +2925,16 @@ chownr@^1.0.1, chownr@^1.1.1:
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
 chroma-js@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/chroma-js/-/chroma-js-2.1.0.tgz#c0be48a21fe797ef8965608c1c4f911ef2da49d5"
-  integrity sha512-uiRdh4ZZy+UTPSrAdp8hqEdVb1EllLtTHOt5TMaOjJUvi+O54/83Fc5K2ld1P+TJX+dw5B+8/sCgzI6eaur/lg==
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/chroma-js/-/chroma-js-2.1.1.tgz#413c8fbcc4c0988dc7c77bb59c4de36573b8fe97"
+  integrity sha512-gYc5/Dooshun2OikK7oY/hYnoEiZ0dxqRpXosEdYRYm505vU5mRsHFqIW062C9nMtr32DVErP6mlxuepo2kNkw==
   dependencies:
     cross-env "^6.0.3"
 
 chrome-trace-event@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
-  integrity sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==
-  dependencies:
-    tslib "^1.9.0"
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
+  integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
 
 ci-info@^1.5.0:
   version "1.6.0"
@@ -2876,9 +2970,9 @@ class-utils@^0.3.5:
     static-extend "^0.1.1"
 
 classnames@^2.2.6:
-  version "2.2.6"
-  resolved "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
 claygl@^1.2.1:
   version "1.3.0"
@@ -2912,9 +3006,9 @@ cli-cursor@^3.1.0:
     restore-cursor "^3.1.0"
 
 cli-spinners@^2.0.0:
-  version "2.5.0"
-  resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.5.0.tgz#12763e47251bf951cb75c201dfa58ff1bcb2d047"
-  integrity sha512-PC+AmIuK04E6aeSs/pUccSujsTzBhu4HzC2dL+CfJB/Jcc2qTRbEwZQDfIUpt2Xl8BodYBEq8w4fc0kU2I9DjQ==
+  version "2.6.0"
+  resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz#36c7dc98fb6a9a76bd6238ec3f77e2425627e939"
+  integrity sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==
 
 cli-truncate@^0.2.1:
   version "0.2.1"
@@ -2935,9 +3029,9 @@ cli-width@^3.0.0:
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
 clipboard@^2.0.0, clipboard@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
-  integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
+  version "2.0.8"
+  resolved "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
+  integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
   dependencies:
     good-listener "^1.2.2"
     select "^1.1.2"
@@ -3014,6 +3108,14 @@ code-point-at@^1.0.0:
   resolved "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+codepage@~1.14.0:
+  version "1.14.0"
+  resolved "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz#8cbe25481323559d7d307571b0fff91e7a1d2f99"
+  integrity sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=
+  dependencies:
+    commander "~2.14.1"
+    exit-on-epipe "~1.0.1"
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -3047,9 +3149,9 @@ color-name@^1.0.0, color-name@~1.1.4:
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
 color-string@^1.5.4:
-  version "1.5.4"
-  resolved "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
-  integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
+  version "1.5.5"
+  resolved "https://registry.npmjs.org/color-string/-/color-string-1.5.5.tgz#65474a8f0e7439625f3d27a6a19d89fc45223014"
+  integrity sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==
   dependencies:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
@@ -3062,10 +3164,10 @@ color@^3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.4"
 
-colorette@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
-  integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
+colorette@^1.2.1, colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
 combined-stream@^1.0.6, combined-stream@~1.0.6:
   version "1.0.8"
@@ -3079,7 +3181,7 @@ commander@2, commander@^2.14.1, commander@^2.18.0, commander@^2.19.0, commander@
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@2.17.x:
+commander@2.17.x, commander@~2.17.1:
   version "2.17.1"
   resolved "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
@@ -3089,6 +3191,11 @@ commander@^6.1.0:
   resolved "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
+commander@~2.14.1:
+  version "2.14.1"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz#2235123e37af8ca3c65df45b026dbd357b01b9aa"
+  integrity sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw==
+
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
@@ -3231,15 +3338,15 @@ conventional-changelog-conventionalcommits@4.2.1:
     q "^1.5.1"
 
 conventional-commits-parser@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-3.2.0.tgz#9e261b139ca4b7b29bcebbc54460da36894004ca"
-  integrity sha512-XmJiXPxsF0JhAKyfA2Nn+rZwYKJ60nanlbSWwwkGwLQFbugsc0gv1rzc7VbbUWAzJfR1qR87/pNgv9NgmxtBMQ==
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-3.2.1.tgz#ba44f0b3b6588da2ee9fd8da508ebff50d116ce2"
+  integrity sha512-OG9kQtmMZBJD/32NEw5IhN5+HnBqVjy03eC+I71I0oQRFA5rOgA4OtPOYG7mz1GkCfCNxn3gKIX8EiHJYuf1cA==
   dependencies:
     JSONStream "^1.0.4"
     is-text-path "^1.0.1"
     lodash "^4.17.15"
     meow "^8.0.0"
-    split2 "^2.0.0"
+    split2 "^3.0.0"
     through2 "^4.0.0"
     trim-off-newlines "^1.0.0"
 
@@ -3261,11 +3368,11 @@ cookie@0.4.0:
   integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
 
 copy-anything@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.1.tgz#2afbce6da684bdfcbec93752fa762819cb480d9a"
-  integrity sha512-lA57e7viQHOdPQcrytv5jFeudZZOXuyk47lZym279FiDQ8jeZomXiGuVf6ffMKkJ+3TIai3J1J3yi6M+/4U35g==
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz#842407ba02466b0df844819bbe3baebbe5d45d87"
+  integrity sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==
   dependencies:
-    is-what "^3.7.1"
+    is-what "^3.12.0"
 
 copy-concurrently@^1.0.0:
   version "1.0.5"
@@ -3305,6 +3412,14 @@ copy-webpack-plugin@^4.6.0:
     p-limit "^1.0.0"
     serialize-javascript "^1.4.0"
 
+core-js-compat@^3.9.1:
+  version "3.11.1"
+  resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.11.1.tgz#57a91e9b02d3bb8cf37f82eceaf44a3d646fa614"
+  integrity sha512-aZ0e4tmlG/aOBHj92/TuOuZwp6jFvn1WNabU5VOVixzhu5t5Ao+JZkQOPlgNXu6ynwLrwJxklT4Gw1G1VGEh+g==
+  dependencies:
+    browserslist "^4.16.5"
+    semver "7.0.0"
+
 core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.7, core-js@^2.6.5:
   version "2.6.12"
   resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
@@ -3336,6 +3451,14 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+crc-32@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz#cb2db6e29b88508e32d9dd0ec1693e7b41a18208"
+  integrity sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==
+  dependencies:
+    exit-on-epipe "~1.0.1"
+    printj "~1.1.0"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -3483,9 +3606,9 @@ css-tree@1.0.0-alpha.37:
     source-map "^0.6.1"
 
 css-tree@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz#9ae393b5dafd7dae8a622475caec78d3d8fbd7b5"
-  integrity sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
   dependencies:
     mdn-data "2.0.14"
     source-map "^0.6.1"
@@ -3515,10 +3638,10 @@ cssesc@^3.0.0:
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssnano-preset-default@^4.0.0, cssnano-preset-default@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
-  integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
+cssnano-preset-default@^4.0.0, cssnano-preset-default@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz#920622b1fc1e95a34e8838203f1397a504f2d3ff"
+  integrity sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==
   dependencies:
     css-declaration-sorter "^4.0.1"
     cssnano-util-raw-cache "^4.0.1"
@@ -3548,7 +3671,7 @@ cssnano-preset-default@^4.0.0, cssnano-preset-default@^4.0.7:
     postcss-ordered-values "^4.1.2"
     postcss-reduce-initial "^4.0.3"
     postcss-reduce-transforms "^4.0.2"
-    postcss-svgo "^4.0.2"
+    postcss-svgo "^4.0.3"
     postcss-unique-selectors "^4.0.1"
 
 cssnano-util-get-arguments@^4.0.0:
@@ -3574,12 +3697,12 @@ cssnano-util-same-parent@^4.0.0:
   integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
 
 cssnano@^4.0.0, cssnano@^4.1.10:
-  version "4.1.10"
-  resolved "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
-  integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
+  version "4.1.11"
+  resolved "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz#c7b5f5b81da269cb1fd982cb960c1200910c9a99"
+  integrity sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==
   dependencies:
     cosmiconfig "^5.0.0"
-    cssnano-preset-default "^4.0.7"
+    cssnano-preset-default "^4.0.8"
     is-resolvable "^1.0.0"
     postcss "^7.0.0"
 
@@ -3907,9 +4030,9 @@ date-fns@^1.27.2:
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
 date-fns@^2.13.0:
-  version "2.16.1"
-  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b"
-  integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==
+  version "2.21.1"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.21.1.tgz#679a4ccaa584c0706ea70b3fa92262ac3009d2b0"
+  integrity sha512-m1WR0xGiC6j6jNFAyW4Nvh4WxAi4JF4w9jRJwSI8nBmNcyZXPcP9VUQG+6gHQXAmqaGEKDKhOqAtENDC941UkA==
 
 de-indent@^1.0.2:
   version "1.0.2"
@@ -3945,7 +4068,7 @@ debug@^3.0.1, debug@^3.1.0, debug@^3.1.1, debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0:
+debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
   version "4.3.1"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
   integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
@@ -4114,9 +4237,9 @@ detect-newline@^2.1.0:
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
 detect-node@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
-  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.0.5.tgz#9d270aa7eaa5af0b72c4c9d9b814e7f4ce738b79"
+  integrity sha512-qi86tE6hRcFHy8jI1m2VG+LaPUR1LhqDa5G8tVjuUXmOrpuAgqsA1pN0+ldgr3aKUH+QLI9hCY/OcRYisERejw==
 
 dicom-parser@^1.8.7:
   version "1.8.7"
@@ -4229,9 +4352,9 @@ domelementtype@1, domelementtype@^1.3.1:
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
 domelementtype@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz#a851c080a6d1c3d94344aed151d99f669edf585e"
-  integrity sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
 
 domexception@^1.0.1:
   version "1.0.1"
@@ -4347,10 +4470,10 @@ ejs@^2.6.1:
   resolved "https://registry.npmjs.org/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
-electron-to-chromium@^1.3.634:
-  version "1.3.636"
-  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.636.tgz#6980bd90813a9fb744e43f5e848f16cea4930058"
-  integrity sha512-Adcvng33sd3gTjNIDNXGD1G4H6qCImIy2euUJAQHtLNplEKU5WEz5KRJxupRNIIT8sD5oFZLTKBWAf12Bsz24A==
+electron-to-chromium@^1.3.719:
+  version "1.3.723"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.723.tgz#52769a75635342a4db29af5f1e40bd3dad02c877"
+  integrity sha512-L+WXyXI7c7+G1V8ANzRsPI5giiimLAUDC6Zs1ojHHPhYXb3k/iTABFmWjivEtsWrRQymjnO66/rO2ZTABGdmWg==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -4370,17 +4493,17 @@ element-ui@2.13.2:
     throttle-debounce "^1.0.1"
 
 elliptic@^6.5.3:
-  version "6.5.3"
-  resolved "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
-  integrity sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==
+  version "6.5.4"
+  resolved "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
   dependencies:
-    bn.js "^4.4.0"
-    brorand "^1.0.1"
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
     hash.js "^1.0.0"
-    hmac-drbg "^1.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
 
 emoji-regex@^7.0.1:
   version "7.0.3"
@@ -4438,9 +4561,9 @@ entities@^1.1.1:
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
 
 entities@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
-  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
 errno@^0.1.1, errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
@@ -4463,40 +4586,27 @@ error-stack-parser@^2.0.2:
   dependencies:
     stackframe "^1.1.1"
 
-es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
-  version "1.17.7"
-  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
-  integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
+es-abstract@^1.17.2, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
+  version "1.18.0"
+  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz#ab80b359eecb7ede4c298000390bc5ac3ec7b5a4"
+  integrity sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==
   dependencies:
+    call-bind "^1.0.2"
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
+    get-intrinsic "^1.1.1"
     has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.2"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
-es-abstract@^1.18.0-next.1:
-  version "1.18.0-next.1"
-  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
-  integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.2"
-    is-negative-zero "^2.0.0"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
+    has-symbols "^1.0.2"
+    is-callable "^1.2.3"
+    is-negative-zero "^2.0.1"
+    is-regex "^1.1.2"
+    is-string "^1.0.5"
+    object-inspect "^1.9.0"
     object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
+    object.assign "^4.1.2"
+    string.prototype.trimend "^1.0.4"
+    string.prototype.trimstart "^1.0.4"
+    unbox-primitive "^1.0.0"
 
 es-array-method-boxes-properly@^1.0.0:
   version "1.0.0"
@@ -4504,16 +4614,16 @@ es-array-method-boxes-properly@^1.0.0:
   integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
 
 es-get-iterator@^1.0.2:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
-  integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.2.tgz#9234c54aba713486d7ebde0220864af5e2b283f7"
+  integrity sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==
   dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.1"
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.0"
     has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
+    is-arguments "^1.1.0"
+    is-map "^2.0.2"
+    is-set "^2.0.2"
     is-string "^1.0.5"
     isarray "^2.0.5"
 
@@ -4531,6 +4641,11 @@ es6-error@^4.1.1:
   resolved "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
   integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
 
+es6-object-assign@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz#c2c3582656247c39ea107cb1e6652b6f9f24523c"
+  integrity sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=
+
 es6-promise@^4.1.1:
   version "4.2.8"
   resolved "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
@@ -4815,10 +4930,10 @@ esprima@^4.0.0, esprima@^4.0.1:
   resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.0.0, esquery@^1.0.1:
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
-  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
+esquery@^1.0.0, esquery@^1.0.1, esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
   dependencies:
     estraverse "^5.1.0"
 
@@ -4860,14 +4975,14 @@ eventemitter3@^4.0.0:
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
 events@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/events/-/events-3.2.0.tgz#93b87c18f8efcd4202a461aec4dfc0556b639379"
-  integrity sha512-/46HWwbfCX2xTawVfkKLGxMifJYQBWMwY1mjywRtb4c9x8l5NP3KoJtnIOiL1hfdRkIuYhETxQlo62IF8tcnlg==
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
 eventsource@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.npmjs.org/eventsource/-/eventsource-1.0.7.tgz#8fbc72c93fcd34088090bc0a4e64f4b5cee6d8d0"
-  integrity sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/eventsource/-/eventsource-1.1.0.tgz#00e8ca7c92109e94b0ddf32dac677d841028cfaf"
+  integrity sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==
   dependencies:
     original "^1.0.0"
 
@@ -4919,6 +5034,11 @@ execall@^2.0.0:
   dependencies:
     clone-regexp "^2.1.0"
 
+exit-on-epipe@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692"
+  integrity sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -5111,10 +5231,10 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.1.1, fast-glob@^3.2.4:
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
-  integrity sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==
+fast-glob@^3.1.1, fast-glob@^3.2.5:
+  version "3.2.5"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
+  integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -5144,9 +5264,9 @@ fastparse@^1.1.2:
   integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
 
 fastq@^1.6.0:
-  version "1.10.0"
-  resolved "https://registry.npmjs.org/fastq/-/fastq-1.10.0.tgz#74dbefccade964932cdf500473ef302719c652bb"
-  integrity sha512-NL2Qc5L3iQEsyYzweq7qfgy5OtXCmGzGvhElGEd/SoFWEMOEczNh5s5ocaF01HDetxz+p8ecjNPA6cZxxIHmzA==
+  version "1.11.0"
+  resolved "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz#bb9fb955a07130a918eb63c1f5161cc32a5d0858"
+  integrity sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==
   dependencies:
     reusify "^1.0.4"
 
@@ -5164,6 +5284,11 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fflate@^0.3.8:
+  version "0.3.11"
+  resolved "https://registry.npmjs.org/fflate/-/fflate-0.3.11.tgz#2c440d7180fdeb819e64898d8858af327b042a5d"
+  integrity sha512-Rr5QlUeGN1mbOHlaqcSYMKVpPbgLy0AWT/W0EHxA6NGI12yO1jpoui2zBBvU2G824ltM6Ut8BFgfHSBGfkmS0A==
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -5206,10 +5331,10 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
-file-entry-cache@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.0.tgz#7921a89c391c6d93efec2169ac6bf300c527ea0a"
-  integrity sha512-fqoO76jZ3ZnYrXLDRxBR1YvOvc0k844kcOg40bgsPrE25LAb/PDqTY+ho64Xh2c8ZXgIKldchCFHczG2UVRcWA==
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
   dependencies:
     flat-cache "^3.0.4"
 
@@ -5430,9 +5555,9 @@ flatted@^2.0.0:
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
 flatted@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/flatted/-/flatted-3.1.0.tgz#a5d06b4a8b01e3a63771daa5cb7a1903e2e57067"
-  integrity sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA==
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
+  integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
 
 flush-write-stream@^1.0.0:
   version "1.1.1"
@@ -5455,9 +5580,9 @@ follow-redirects@1.5.10:
     debug "=3.1.0"
 
 follow-redirects@^1.0.0:
-  version "1.13.1"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7"
-  integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==
+  version "1.14.0"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.0.tgz#f5d260f95c5f8c105894491feee5dc8993b402fe"
+  integrity sha512-0vRwd7RKQBTt+mgu87mtYeofLFZpTas2S9zY+jIeuLJMNvudIgF52nr19q40HOwH5RrhWIPuj9puybzSJiRrVg==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -5478,6 +5603,11 @@ for-own@^0.1.4:
   dependencies:
     for-in "^1.0.1"
 
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
+
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -5497,6 +5627,11 @@ forwarded@~0.1.2:
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+frac@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz#3d74f7f6478c88a1b5020306d747dc6313c74d0b"
+  integrity sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -5550,9 +5685,9 @@ fsevents@^1.2.3, fsevents@^1.2.7:
     nan "^2.12.1"
 
 fsevents@~2.3.1:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz#b209ab14c61012636c8863507edf7fb68cc54e9f"
-  integrity sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
 function-bind@^1.1.1:
   version "1.1.1"
@@ -5578,7 +5713,7 @@ g-status@^2.0.2:
     matcher "^1.0.0"
     simple-git "^1.85.0"
 
-gensync@^1.0.0-beta.1:
+gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
@@ -5593,10 +5728,10 @@ get-caller-file@^2.0.1:
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.1, get-intrinsic@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.2.tgz#6820da226e50b24894e08859469dc68361545d49"
-  integrity sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
   dependencies:
     function-bind "^1.1.1"
     has "^1.0.3"
@@ -5647,12 +5782,12 @@ getpass@^0.1.1:
     assert-plus "^1.0.0"
 
 git-raw-commits@^2.0.0:
-  version "2.0.9"
-  resolved "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.9.tgz#5cbc707a615cb77b71e687f8a1ee54af46208b22"
-  integrity sha512-hSpNpxprVno7IOd4PZ93RQ+gNdzPAIrW0x8av6JQDJGV4k1mR9fE01dl8sEqi2P7aKmmwiGUn1BCPuf16Ae0Qw==
+  version "2.0.10"
+  resolved "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.10.tgz#e2255ed9563b1c9c3ea6bd05806410290297bbc1"
+  integrity sha512-sHhX5lsbG9SOO6yXdlwgEMQ/ljIn7qMpAbJZCGfXX2fq5T8M5SrDnpYk9/4HswTildcIqatsWa91vty6VhWSaQ==
   dependencies:
     dargs "^7.0.0"
-    lodash.template "^4.0.2"
+    lodash "^4.17.15"
     meow "^8.0.0"
     split2 "^3.0.0"
     through2 "^4.0.0"
@@ -5681,9 +5816,9 @@ glob-parent@^3.1.0:
     path-dirname "^1.0.0"
 
 glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
-  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
@@ -5744,10 +5879,10 @@ globals@^9.18.0:
   resolved "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
   integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
 
-globby@^11.0.1:
-  version "11.0.2"
-  resolved "https://registry.npmjs.org/globby/-/globby-11.0.2.tgz#1af538b766a3b540ebfb58a32b2e2d5897321d83"
-  integrity sha512-2ZThXDvvV8fYFRVIxnrMQBipZQDr7MxKAmQK1vujaj9/7eF0efG7BPUKJ7jP7G5SLF37xKDXvO4S/KKLj/Z0og==
+globby@^11.0.3:
+  version "11.0.3"
+  resolved "https://registry.npmjs.org/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
+  integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
   dependencies:
     array-union "^2.1.0"
     dir-glob "^3.0.1"
@@ -5813,9 +5948,9 @@ good-listener@^1.2.2:
     delegate "^3.1.2"
 
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6:
-  version "4.2.4"
-  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
-  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
+  version "4.2.6"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
+  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
 graphlib@^2.1.8:
   version "2.1.8"
@@ -5843,9 +5978,9 @@ handle-thing@^2.0.0:
   integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
 handlebars@^4.0.3:
-  version "4.7.6"
-  resolved "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz#d4c05c1baf90e9945f77aa68a7a219aa4a7df74e"
-  integrity sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==
+  version "4.7.7"
+  resolved "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
+  integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
   dependencies:
     minimist "^1.2.5"
     neo-async "^2.6.0"
@@ -5879,6 +6014,11 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
+has-bigints@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
+  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+
 has-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
@@ -5894,10 +6034,10 @@ has-flag@^4.0.0:
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-symbols@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
-  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
+has-symbols@^1.0.1, has-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
 
 has-value@^0.3.1:
   version "0.3.1"
@@ -5969,7 +6109,7 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-hmac-drbg@^1.0.0:
+hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
   integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
@@ -5997,14 +6137,14 @@ hoopy@^0.1.4:
   integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
 
 hosted-git-info@^2.1.4:
-  version "2.8.8"
-  resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
-  integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
+  version "2.8.9"
+  resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
-hosted-git-info@^3.0.6:
-  version "3.0.7"
-  resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.7.tgz#a30727385ea85acfcee94e0aad9e368c792e036c"
-  integrity sha512-fWqc0IcuXs+BmE9orLDyVykAG9GJtGLGuZAAqgcckPgv5xad4AcXGIv8galtQvlwutxSlaMcdw7BUtq2EIvqCQ==
+hosted-git-info@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz#5e425507eede4fea846b7262f0838456c4209961"
+  integrity sha512-c9OGXbZ3guC/xOlCg1Ci/VgWlwsqDv1yMQL1CWqXDL0hDjXuNcq0zuR4xqPSuasI3kqFDhqSyTjREz5gzq0fXg==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -6028,11 +6168,6 @@ hsla-regex@^1.0.0:
   resolved "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
   integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
 
-html-comment-regex@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
-  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
-
 html-encoding-sniffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
@@ -6169,9 +6304,9 @@ https-browserify@^1.0.0:
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
 husky@^4.2.5:
-  version "4.3.7"
-  resolved "https://registry.npmjs.org/husky/-/husky-4.3.7.tgz#ca47bbe6213c1aa8b16bbd504530d9600de91e88"
-  integrity sha512-0fQlcCDq/xypoyYSJvEuzbDPHFf8ZF9IXKJxlrnvxABTSzK1VPT2RKYQKrcgJ+YD39swgoB6sbzywUqFxUiqjw==
+  version "4.3.8"
+  resolved "https://registry.npmjs.org/husky/-/husky-4.3.8.tgz#31144060be963fd6850e5cc8f019a1dfe194296d"
+  integrity sha512-LCqqsB0PzJQ/AlCgfrfzRe3e3+NvmefAdKQhRYpxS4u6clblBoDdzzvHi8fmxKRzvMxPY/1WZWzomPZww0Anow==
   dependencies:
     chalk "^4.0.0"
     ci-info "^2.0.0"
@@ -6253,6 +6388,11 @@ immediate@~3.0.5:
   resolved "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
 
+immutability-helper@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz#2b86b2286ed3b1241c9e23b7b21e0444f52f77b7"
+  integrity sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -6473,7 +6613,7 @@ is-alphanumerical@^1.0.0:
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
 
-is-arguments@^1.0.4:
+is-arguments@^1.0.4, is-arguments@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
   integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
@@ -6490,6 +6630,11 @@ is-arrayish@^0.3.1:
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
   integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
+is-bigint@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
+  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
+
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -6504,6 +6649,13 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
+  integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
+  dependencies:
+    call-bind "^1.0.0"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -6514,10 +6666,10 @@ is-buffer@^2.0.0, is-buffer@^2.0.2:
   resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
   integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
 
-is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
-  integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
+is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
+  integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
 
 is-ci@^1.0.10:
   version "1.2.1"
@@ -6538,10 +6690,10 @@ is-color-stop@^1.0.0:
     rgb-regex "^1.0.1"
     rgba-regex "^1.0.0"
 
-is-core-module@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
-  integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
+is-core-module@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz#d341652e3408bca69c4671b79a0954a3d349f887"
+  integrity sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==
   dependencies:
     has "^1.0.3"
 
@@ -6653,6 +6805,11 @@ is-generator-fn@^1.0.0:
   resolved "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-1.0.0.tgz#969d49e1bb3329f6bb7f09089be26578b2ddd46a"
   integrity sha1-lp1J4bszKfa7fwkIm+JleLLd1Go=
 
+is-generator-function@^1.0.7:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.8.tgz#dfb5c2b120e02b0a8d9d2c6806cd5621aa922f7b"
+  integrity sha512-2Omr/twNtufVZFr1GhxjOMFPAj2sjc/dKaIqBhvo4qciXfJmITGH6ZGd8eZYNHza8t1y0e01AuqRhJwfWp26WQ==
+
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@@ -6679,16 +6836,29 @@ is-hexadecimal@^1.0.0:
   resolved "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
-is-map@^2.0.1:
+is-map@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
   integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
 
-is-negative-zero@^2.0.0:
+is-nan@^1.2.1:
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz#043a54adea31748b55b6cd4e09aadafa69bd9e1d"
+  integrity sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
+is-negative-zero@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
   integrity sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==
 
+is-number-object@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
@@ -6800,11 +6970,12 @@ is-promise@^2.1.0:
   resolved "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
   integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
 
-is-regex@^1.0.4, is-regex@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
-  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
+is-regex@^1.0.4, is-regex@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"
+  integrity sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==
   dependencies:
+    call-bind "^1.0.2"
     has-symbols "^1.0.1"
 
 is-regexp@^1.0.0:
@@ -6822,7 +6993,7 @@ is-resolvable@^1.0.0:
   resolved "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
   integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
 
-is-set@^2.0.1:
+is-set@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
   integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
@@ -6837,14 +7008,7 @@ is-string@^1.0.5:
   resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
   integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
 
-is-svg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
-  integrity sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==
-  dependencies:
-    html-comment-regex "^1.1.0"
-
-is-symbol@^1.0.2:
+is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
@@ -6858,20 +7022,36 @@ is-text-path@^1.0.1:
   dependencies:
     text-extensions "^1.0.0"
 
+is-typed-array@^1.1.3:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.5.tgz#f32e6e096455e329eb7b423862456aa213f0eb4e"
+  integrity sha512-S+GRDgJlR3PyEbsX/Fobd9cqpZBuvUS+8asRqYDMLCb2qMzt1oz5m5oxQCxOgUDxiWsOVNi4yaF+/uvdlHlYug==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.2"
+    es-abstract "^1.18.0-next.2"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-unicode-supported@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
+  integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
+
 is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
-is-what@^3.7.1:
-  version "3.12.0"
-  resolved "https://registry.npmjs.org/is-what/-/is-what-3.12.0.tgz#f4405ce4bd6dd420d3ced51a026fb90e03705e55"
-  integrity sha512-2ilQz5/f/o9V7WRWJQmpFYNmQFZ9iM+OXRonZKcYgTkCzjb949Vi4h282PD1UfmgHk666rcWonbRJ++KI41VGw==
+is-what@^3.12.0:
+  version "3.14.1"
+  resolved "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
+  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
 
 is-whitespace@^0.3.0:
   version "0.3.0"
@@ -6995,7 +7175,7 @@ iterate-iterator@^1.0.1:
   resolved "https://registry.npmjs.org/iterate-iterator/-/iterate-iterator-1.0.1.tgz#1693a768c1ddd79c969051459453f082fe82e9f6"
   integrity sha512-3Q6tudGN05kbkDQDI4CqjaBf4qf85w6W6GnuZDtUVYwKgtC1q8yxYX7CZed7N+tLzQqS6roujWvszf13T+n9aw==
 
-iterate-value@^1.0.0:
+iterate-value@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/iterate-value/-/iterate-value-1.0.2.tgz#935115bd37d006a52046535ebc8d07e9c9337f57"
   integrity sha512-A6fMAio4D2ot2r/TYzr4yUWrmwNdsN5xL7+HUiyACE4DXm+q8HtPcnFTp+NnW3k4N05tZ7FVYFFb2CR13NxyHQ==
@@ -7350,14 +7530,14 @@ jquery-contextmenu@^2.9.1:
     jquery "^3.5.0"
 
 jquery@^3.5.0, jquery@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
-  integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
 
 js-beautify@^1.13.0, js-beautify@^1.6.12, js-beautify@^1.6.14:
-  version "1.13.2"
-  resolved "https://registry.npmjs.org/js-beautify/-/js-beautify-1.13.2.tgz#4b84056a3097dcf0cb2bd2c6275ffe8a4a087e5b"
-  integrity sha512-g3hHImAuuiXDDwUl/gEP33+C+mVZIz+NR8VNd0vaGk9r5IdztXJMyt7IujNE748xrhmpdHSoCukQcMLJyEeMsQ==
+  version "1.13.13"
+  resolved "https://registry.npmjs.org/js-beautify/-/js-beautify-1.13.13.tgz#756907d1728f329f2b84c42efd56ad17514620bf"
+  integrity sha512-oH+nc0U5mOAqX8M5JO1J0Pw/7Q35sAdOsM5W3i87pir9Ntx6P/5Gx1xLNoK+MGyvHk4rqqRCE4Oq58H6xl2W7A==
   dependencies:
     config-chain "^1.1.12"
     editorconfig "^0.15.3"
@@ -7410,11 +7590,6 @@ jsbn@~0.1.0:
   resolved "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
-jschardet@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.npmjs.org/jschardet/-/jschardet-2.2.1.tgz#03b0264669a90c7a5c436a68c5a7d4e4cb0c9823"
-  integrity sha512-Ks2JNuUJoc7PGaZ7bVFtSEvOcr0rBq6Q1J5/7+zKWLT+g+4zziL63O0jg7y2jxhzIa1LVsHUbPXrbaWmz9iwDw==
-
 jsdom@^11.5.1:
   version "11.12.0"
   resolved "https://registry.npmjs.org/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
@@ -7448,9 +7623,9 @@ jsdom@^11.5.1:
     xml-name-validator "^3.0.0"
 
 jsencrypt@^3.0.0-rc.1:
-  version "3.0.0-rc.1"
-  resolved "https://registry.npmjs.org/jsencrypt/-/jsencrypt-3.0.0-rc.1.tgz#0e0a4744ba43cc557fb5cf62fe8646bceb561b1c"
-  integrity sha512-gcvGaqerlUJy1Kq6tNgPYteVEoWNemu+9hBe2CdsCIz4rVcwjoTQ72iD1W76/PRMlnkzG0yVh7nwOOMOOUfKmg==
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/jsencrypt/-/jsencrypt-3.2.0.tgz#09242aabf1984165dcd7698fe6ed163be77c05f8"
+  integrity sha512-Y/WBrCYRP1A2I1OEXxqurO+W3AC5uXhiArprpYQ0Y8/1Dc3NaiINAyCLx7HzXGwN7xvW3s5xpeOTdwD7lD1SQQ==
 
 jsesc@^1.3.0:
   version "1.3.0"
@@ -7513,9 +7688,9 @@ json-stringify-safe@~5.0.1:
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
 json2csv@^5.0.1:
-  version "5.0.5"
-  resolved "https://registry.npmjs.org/json2csv/-/json2csv-5.0.5.tgz#b65bf4f1e1eeb81cb7097d383edec249f8bce3af"
-  integrity sha512-/UyvnfuUghRM+C/AiQ02X0LS+/AKfugcwaWo/gAz1pi203v29sUMrMSNEC088i+h0EG39eSsmeL9Z0iK+9MM0A==
+  version "5.0.6"
+  resolved "https://registry.npmjs.org/json2csv/-/json2csv-5.0.6.tgz#590e0e1b9579e59baa53bda0c0d840f4d8009687"
+  integrity sha512-0/4Lv6IenJV0qj2oBdgPIAmFiKKnh8qh7bmLFJ+/ZZHLjSeiL3fKKGX3UryvKPbxFbhV+JcYo9KUC19GJ/Z/4A==
   dependencies:
     commander "^6.1.0"
     jsonparse "^1.3.1"
@@ -7539,9 +7714,9 @@ json5@^1.0.1:
     minimist "^1.2.0"
 
 json5@^2.1.2:
-  version "2.1.3"
-  resolved "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
-  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
+  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
   dependencies:
     minimist "^1.2.5"
 
@@ -7611,10 +7786,10 @@ kleur@^2.0.1:
   resolved "https://registry.npmjs.org/kleur/-/kleur-2.0.2.tgz#b704f4944d95e255d038f0cb05fb8a602c55a300"
   integrity sha512-77XF9iTllATmG9lSlIv0qdQ2BQ/h9t0bJllHlbvsQ0zUWfU7Yi0S8L5JXzPZgkefIiajLmBJJ4BsMJmqcf7oxQ==
 
-known-css-properties@^0.20.0:
-  version "0.20.0"
-  resolved "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.20.0.tgz#0570831661b47dd835293218381166090ff60e96"
-  integrity sha512-URvsjaA9ypfreqJ2/ylDr5MUERhJZ+DhguoWRr2xgS5C7aGCalXo+ewL+GixgKBfhT2vuL02nbIgNGqVWgTOYw==
+known-css-properties@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.21.0.tgz#15fbd0bbb83447f3ce09d8af247ed47c68ede80d"
+  integrity sha512-sZLUnTqimCkvkgRS+kbPlYW5o8q5w1cu+uIisKpEWkj31I8mx8kNG162DwRav8Zirkva6N5uoFsm9kzK4mUXjw==
 
 konva@~2.6.0:
   version "2.6.0"
@@ -7876,16 +8051,26 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash._reinterpolate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
-  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
 lodash.defaultsdeep@^4.6.0:
   version "4.6.1"
   resolved "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
   integrity sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==
 
+lodash.flatten@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
+  integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=
+
 lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -7911,26 +8096,16 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash.template@^4.0.2:
-  version "4.5.0"
-  resolved "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
-  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-    lodash.templatesettings "^4.0.0"
-
-lodash.templatesettings@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
-  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-
 lodash.transform@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
   integrity sha1-EjBkIvYzJK7YSD0/ODMrX2cFR6A=
 
+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
+  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -7941,10 +8116,10 @@ lodash@4.17.15:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
-lodash@^4.0.0, lodash@^4.14.2, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0:
-  version "4.17.20"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+lodash@^4.0.0, lodash@^4.14.2, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0:
+  version "4.17.21"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 log-symbols@^1.0.2:
   version "1.0.2"
@@ -7960,12 +8135,13 @@ log-symbols@^2.2.0:
   dependencies:
     chalk "^2.0.1"
 
-log-symbols@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
-  integrity sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==
+log-symbols@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
+  integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
   dependencies:
-    chalk "^4.0.0"
+    chalk "^4.1.0"
+    is-unicode-supported "^0.1.0"
 
 log-update@^2.3.0:
   version "2.3.0"
@@ -8085,9 +8261,9 @@ map-obj@^2.0.0:
   integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk=
 
 map-obj@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/map-obj/-/map-obj-4.1.0.tgz#b91221b542734b9f14256c0132c897c5d7256fd5"
-  integrity sha512-glc9y00wgtwcDmp7GaE/0b0OnxpNJsVf3ael/An6Fe2Q51LLwN1er6sdomLRzz5h0+yMpiYLhWYF5R7HeqVd4g==
+  version "4.2.1"
+  resolved "https://registry.npmjs.org/map-obj/-/map-obj-4.2.1.tgz#e4ea399dbc979ae735c83c863dd31bdf364277b7"
+  integrity sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==
 
 map-visit@^1.0.0:
   version "1.0.0"
@@ -8128,9 +8304,9 @@ md5.js@^1.3.4:
     safe-buffer "^5.1.2"
 
 mdast-util-from-markdown@^0.8.0:
-  version "0.8.4"
-  resolved "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.4.tgz#2882100c1b9fc967d3f83806802f303666682d32"
-  integrity sha512-jj891B5pV2r63n2kBTFh8cRI2uR9LQHsXG1zSDqfhXkIlDzrTcIlbB5+5aaYEkl8vOPIOPLf8VT7Ere1wWTMdw==
+  version "0.8.5"
+  resolved "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz#d1ef2ca42bc377ecb0463a987910dae89bd9a28c"
+  integrity sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==
   dependencies:
     "@types/mdast" "^3.0.0"
     mdast-util-to-string "^2.0.0"
@@ -8139,9 +8315,9 @@ mdast-util-from-markdown@^0.8.0:
     unist-util-stringify-position "^2.0.0"
 
 mdast-util-to-markdown@^0.6.0:
-  version "0.6.2"
-  resolved "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.2.tgz#8fe6f42a2683c43c5609dfb40407c095409c85b4"
-  integrity sha512-iRczns6WMvu0hUw02LXsPDJshBIwtUPbvHBWo19IQeU0YqmzlA8Pd30U8V7uiI0VPkxzS7A/NXBXH6u+HS87Zg==
+  version "0.6.5"
+  resolved "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.5.tgz#b33f67ca820d69e6cc527a93d4039249b504bebe"
+  integrity sha512-XeV9sDE7ZlOQvs45C9UKMtfTcctcaj/pGwH8YLbMHoMOXNNCn2LsqVQOqrF1+/NU8lKDAqozme9SCXWyo9oAcQ==
   dependencies:
     "@types/unist" "^2.0.0"
     longest-streak "^2.0.0"
@@ -8232,6 +8408,24 @@ meow@^8.0.0:
     type-fest "^0.18.0"
     yargs-parser "^20.2.3"
 
+meow@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
+  integrity sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    camelcase-keys "^6.2.2"
+    decamelize "^1.2.0"
+    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-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -8267,9 +8461,9 @@ methods@~1.1.2:
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
 micromark@~2.11.0:
-  version "2.11.2"
-  resolved "https://registry.npmjs.org/micromark/-/micromark-2.11.2.tgz#e8b6a05f54697d2d3d27fc89600c6bc40dd05f35"
-  integrity sha512-IXuP76p2uj8uMg4FQc1cRE7lPCLsfAXuEfdjtdO55VRiFO1asrCSQ5g43NmPqFtRwzEnEhafRVzn2jg0UiKArQ==
+  version "2.11.4"
+  resolved "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz#d13436138eea826383e822449c9a5c50ee44665a"
+  integrity sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==
   dependencies:
     debug "^4.0.0"
     parse-entities "^2.0.0"
@@ -8312,13 +8506,13 @@ micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-micromatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+micromatch@^4.0.2, micromatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
   dependencies:
     braces "^3.0.1"
-    picomatch "^2.0.5"
+    picomatch "^2.2.3"
 
 miller-rabin@^4.0.0:
   version "4.0.1"
@@ -8328,17 +8522,17 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-mime-db@1.45.0, "mime-db@>= 1.43.0 < 2":
-  version "1.45.0"
-  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz#cceeda21ccd7c3a745eba2decd55d4b73e7879ea"
-  integrity sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==
+mime-db@1.47.0, "mime-db@>= 1.43.0 < 2":
+  version "1.47.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.47.0.tgz#8cb313e59965d3c05cfbf898915a267af46a335c"
+  integrity sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==
 
 mime-types@^2.1.12, mime-types@^2.1.14, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
-  version "2.1.28"
-  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz#1160c4757eab2c5363888e005273ecf79d2a0ecd"
-  integrity sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==
+  version "2.1.30"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.30.tgz#6e7be8b4c479825f85ed6326695db73f9305d62d"
+  integrity sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==
   dependencies:
-    mime-db "1.45.0"
+    mime-db "1.47.0"
 
 mime@1.6.0, mime@^1.4.1:
   version "1.6.0"
@@ -8346,9 +8540,9 @@ mime@1.6.0, mime@^1.4.1:
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
 mime@^2.0.3, mime@^2.4.4:
-  version "2.4.7"
-  resolved "https://registry.npmjs.org/mime/-/mime-2.4.7.tgz#962aed9be0ed19c91fd7dc2ece5d7f4e89a90d74"
-  integrity sha512-dhNd1uA2u397uQk3Nv5LM4lm93WYDUXFn3Fu291FJerns4jyTudqhIWe4W04YLy7Uk1tm1Ore04NpjRvQp/NPA==
+  version "2.5.2"
+  resolved "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
+  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
 
 mimic-fn@^1.0.0:
   version "1.2.0"
@@ -8379,7 +8573,7 @@ minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   resolved "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
-minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
+minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
@@ -8543,9 +8737,9 @@ nan@^2.12.1:
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
 nanoid@^3.1.3:
-  version "3.1.20"
-  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
-  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
+  version "3.1.22"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"
+  integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -8620,9 +8814,9 @@ node-int64@^0.4.0:
   integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
 
 node-ipc@^9.1.1:
-  version "9.1.3"
-  resolved "https://registry.npmjs.org/node-ipc/-/node-ipc-9.1.3.tgz#1df3f069d103184ae9127fa885dbdaea56a4436f"
-  integrity sha512-8RS4RZyS/KMKKYG8mrje+cLxwATe9dBCuOiqKFSWND4oOuKytfuKCiR9yinvhoXF/nGdX/WnbywaUee+9U87zA==
+  version "9.1.4"
+  resolved "https://registry.npmjs.org/node-ipc/-/node-ipc-9.1.4.tgz#2acf962681afdac2602876d98fe6434d54d9bd3c"
+  integrity sha512-A+f0mn2KxUt1uRTSd5ktxQUsn2OEhj5evo7NUi/powBzMSZ0vocdzDjlq9QN2v3LH6CJi3e5xAenpZ1QwU5A8g==
   dependencies:
     event-pubsub "4.3.0"
     js-message "1.0.7"
@@ -8663,9 +8857,9 @@ node-modules-regexp@^1.0.0:
   integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
 node-notifier@^5.2.1:
-  version "5.4.3"
-  resolved "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
-  integrity sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==
+  version "5.4.5"
+  resolved "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.5.tgz#0cbc1a2b0f658493b4025775a13ad938e96091ef"
+  integrity sha512-tVbHs7DyTLtzOiN78izLA85zRqB9NvEXkAf014Vx3jtSvn/xBl6bR8ZYifj+dFcFrKI21huSQgJZ6ZtL3B4HfQ==
   dependencies:
     growly "^1.3.0"
     is-wsl "^1.1.0"
@@ -8673,10 +8867,10 @@ node-notifier@^5.2.1:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-releases@^1.1.69:
-  version "1.1.69"
-  resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.69.tgz#3149dbde53b781610cd8b486d62d86e26c3725f6"
-  integrity sha512-DGIjo79VDEyAnRlfSqYTsy+yoHd2IOjJiKUozD2MV2D85Vso6Bug56mb9tT/fY5Urt0iqk01H7x+llAruDR2zA==
+node-releases@^1.1.71:
+  version "1.1.71"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb"
+  integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==
 
 nopt@^5.0.0:
   version "5.0.0"
@@ -8696,13 +8890,13 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-
     validate-npm-package-license "^3.0.1"
 
 normalize-package-data@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.0.tgz#1f8a7c423b3d2e85eb36985eaf81de381d01301a"
-  integrity sha512-6lUjEI0d3v6kFrtgA/lOx4zHCWULXsFNIjHolnZCKCTLA6m/G625cdn3O7eNmT0iD3jfo6HZ9cdImGZwf21prw==
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.2.tgz#cae5c410ae2434f9a6c1baa65d5bc3b9366c8699"
+  integrity sha512-6CdZocmfGaKnIHPVFhJJZ3GuR8SsLKvDANFp47Jmy51aKIr8akjAWTSxtpI+MBgBFdSMRyo4hMpDlT6dTffgZg==
   dependencies:
-    hosted-git-info "^3.0.6"
-    resolve "^1.17.0"
-    semver "^7.3.2"
+    hosted-git-info "^4.0.1"
+    resolve "^1.20.0"
+    semver "^7.3.4"
     validate-npm-package-license "^3.0.1"
 
 normalize-path@^1.0.0:
@@ -8821,17 +9015,17 @@ object-hash@^1.1.4:
   resolved "https://registry.npmjs.org/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
   integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
 
-object-inspect@^1.8.0:
-  version "1.9.0"
-  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
-  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
+object-inspect@^1.9.0:
+  version "1.10.2"
+  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.2.tgz#b6385a3e2b7cae0b5eafcf90cddf85d128767f30"
+  integrity sha512-gz58rdPpadwztRrPjZE9DZLOABUpTGdcANUgOwBFO1C+HZZhePoP83M65WGDmbpwFYJSWqavbl4SgDn4k8RYTA==
 
 object-is@^1.0.1:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
-  integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
 
 object-keys@^1.0.12, object-keys@^1.1.1:
@@ -8846,7 +9040,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.1.0, object.assign@^4.1.1, object.assign@^4.1.2:
+object.assign@^4.1.0, object.assign@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
   integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
@@ -8867,13 +9061,13 @@ object.entries@^1.1.2:
     has "^1.0.3"
 
 object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0, object.getownpropertydescriptors@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.1.tgz#0dfda8d108074d9c563e80490c883b6661091544"
-  integrity sha512-6DtXgZ/lIZ9hqx4GtZETobXLR/ZLaa0aqV0kzbn80Rf8Z2e/XFnhA0I7p07N2wH8bBBltr2xQPi6sbKWAY2Eng==
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz#1bd63aeacf0d5d2d2f31b5e393b03a7c601a23f7"
+  integrity sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
+    es-abstract "^1.18.0-next.2"
 
 object.omit@^2.0.0:
   version "2.0.1"
@@ -8891,13 +9085,13 @@ object.pick@^1.3.0:
     isobject "^3.0.1"
 
 object.values@^1.1.0, object.values@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.2.tgz#7a2015e06fcb0f546bd652486ce8583a4731c731"
-  integrity sha512-MYC0jvJopr8EK6dPBiO8Nb9mvjdypOachO5REGk6MXzujbBrAisKo3HmdEI6kZDL6fC31Mwee/5YbtMebixeag==
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.3.tgz#eaa8b1e17589f02f698db093f7c62ee1699742ee"
+  integrity sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
+    es-abstract "^1.18.0-next.2"
     has "^1.0.3"
 
 obuf@^1.0.0, obuf@^1.1.2:
@@ -9120,6 +9314,11 @@ pako@~1.0.2, pako@~1.0.5:
   resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
+papaparse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/papaparse/-/papaparse-5.3.0.tgz#ab1702feb96e79ab4309652f36db9536563ad05a"
+  integrity sha512-Lb7jN/4bTpiuGPrYy4tkKoUS8sTki8zacB5ke1p5zolhcSE4TlWgrlsxjrDTbG/dFVh07ck7X36hUf/b5V68pg==
+
 parallel-transform@^1.1.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
@@ -9192,9 +9391,9 @@ parse-json@^4.0.0:
     json-parse-better-errors "^1.0.1"
 
 parse-json@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz#f96088cdf24a8faa9aea9a009f2d9d942c999646"
-  integrity sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     error-ex "^1.3.1"
@@ -9307,9 +9506,9 @@ path-type@^4.0.0:
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
 pbkdf2@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94"
-  integrity sha512-4Ejy1OPxi9f2tt1rRV7Go7zmfDQ+ZectEQz3VGUQhgq62HtIRPDyG/JtnwIxs6x3uNMwo2V7q1fMvKjb+Tnpqg==
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
+  integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==
   dependencies:
     create-hash "^1.1.2"
     create-hmac "^1.1.4"
@@ -9322,10 +9521,10 @@ performance-now@^2.1.0:
   resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
-  version "2.2.2"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
-  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
+  integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
 
 pify@^2.0.0:
   version "2.3.0"
@@ -9780,14 +9979,12 @@ postcss-selector-parser@^5.0.0:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
-  version "6.0.4"
-  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
-  integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.5.tgz#042d74e137db83e6f294712096cb413f5aa612c4"
+  integrity sha512-aFYPoYmXbZ1V6HZaSvat08M97A8HqO6Pjz+PiNpw/DhuRrC72XWAdp3hL6wusDCN31sSmcZyMGa2hZEuX+Xfhg==
   dependencies:
     cssesc "^3.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
     util-deprecate "^1.0.2"
 
 postcss-sorting@^5.0.1:
@@ -9798,12 +9995,11 @@ postcss-sorting@^5.0.1:
     lodash "^4.17.14"
     postcss "^7.0.17"
 
-postcss-svgo@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
-  integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
+postcss-svgo@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
+  integrity sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==
   dependencies:
-    is-svg "^3.0.0"
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
     svgo "^1.0.0"
@@ -9895,6 +10091,16 @@ pretty@2.0.0:
     extend-shallow "^2.0.1"
     js-beautify "^1.6.12"
 
+printj@~1.1.0, printj@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222"
+  integrity sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==
+
+prism-themes@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/prism-themes/-/prism-themes-1.6.0.tgz#3bdb4f0780588a4abd770f70537e5cc4898198d1"
+  integrity sha512-L7pbxbUvFj8bVIWpcHCwDFOykhozk6Dja9sxqdcFCWwUI77tSFsWE7imf9OQQAmezLNLaBxRlXNcD2k0VCE/0w==
+
 prismjs@^1.20.0:
   version "1.23.0"
   resolved "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
@@ -9928,15 +10134,16 @@ promise-inflight@^1.0.1:
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
 promise.allsettled@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/promise.allsettled/-/promise.allsettled-1.0.2.tgz#d66f78fbb600e83e863d893e98b3d4376a9c47c9"
-  integrity sha512-UpcYW5S1RaNKT6pd+s9jp9K9rlQge1UXKskec0j6Mmuq7UJCvlS2J2/s/yuPN8ehftf9HXMxWlKiPbGGUzpoRg==
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/promise.allsettled/-/promise.allsettled-1.0.4.tgz#65e71f2a604082ed69c548b68603294090ee6803"
+  integrity sha512-o73CbvQh/OnPFShxHcHxk0baXR2a1m4ozb85ha0H14VEoi/EJJLa9mnPfEWJx9RjA9MLfhdjZ8I6HhWtBa64Ag==
   dependencies:
-    array.prototype.map "^1.0.1"
+    array.prototype.map "^1.0.3"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-    function-bind "^1.1.1"
-    iterate-value "^1.0.0"
+    es-abstract "^1.18.0-next.2"
+    get-intrinsic "^1.0.2"
+    iterate-value "^1.0.2"
 
 prompts@^0.1.9:
   version "0.1.14"
@@ -10042,9 +10249,11 @@ qs@6.7.0:
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
 qs@^6.9.1:
-  version "6.9.4"
-  resolved "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
-  integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==
+  version "6.10.1"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
+  integrity sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==
+  dependencies:
+    side-channel "^1.0.4"
 
 qs@~6.5.2:
   version "6.5.2"
@@ -10066,6 +10275,11 @@ querystringify@^2.1.1:
   resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
   integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
 
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
 quick-lru@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
@@ -10320,12 +10534,12 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     safe-regex "^1.1.0"
 
 regexp.prototype.flags@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
+  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
   dependencies:
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
 
 regexpp@^1.0.1:
   version "1.1.0"
@@ -10355,9 +10569,9 @@ regjsgen@^0.5.1:
   integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
 
 regjsparser@^0.6.4:
-  version "0.6.6"
-  resolved "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.6.tgz#6d8c939d1a654f78859b08ddcc4aa777f3fa800a"
-  integrity sha512-jjyuCp+IEMIm3N1H1LLTJW1EISEJV9+5oHdEyrt43Pg9cDSb6rrLZei2cVWpl0xTjmmlpec/lEQGYgM7xfpGCQ==
+  version "0.6.9"
+  resolved "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz#b489eef7c9a2ce43727627011429cf833a7183e6"
+  integrity sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==
   dependencies:
     jsesc "~0.5.0"
 
@@ -10406,9 +10620,9 @@ renderkid@^2.0.4:
     strip-ansi "^3.0.0"
 
 repeat-element@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
-  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
+  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
 
 repeat-string@^1.0.0, repeat-string@^1.5.2, repeat-string@^1.6.1:
   version "1.6.1"
@@ -10551,12 +10765,12 @@ resolve@1.1.7:
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.4.0:
-  version "1.19.0"
-  resolved "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
-  integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.4.0:
+  version "1.20.0"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
   dependencies:
-    is-core-module "^2.1.0"
+    is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
 restore-cursor@^2.0.0:
@@ -10640,9 +10854,11 @@ run-async@^2.2.0, run-async@^2.4.0:
   integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
 
 run-parallel@^1.1.9:
-  version "1.1.10"
-  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
-  integrity sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
 
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
@@ -10669,9 +10885,9 @@ rx-lite@*, rx-lite@^4.0.8:
   integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
 
 rxjs@^6.3.3, rxjs@^6.6.0:
-  version "6.6.3"
-  resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"
-  integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==
+  version "6.6.7"
+  resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
   dependencies:
     tslib "^1.9.0"
 
@@ -10725,11 +10941,11 @@ sass-loader@^7.3.1:
     semver "^6.3.0"
 
 sass@^1.26.8:
-  version "1.32.4"
-  resolved "https://registry.npmjs.org/sass/-/sass-1.32.4.tgz#308bf29dd7f53d44ae4f06580e9a910ad9aa411e"
-  integrity sha512-N0BT0PI/t3+gD8jKa83zJJUb7ssfQnRRfqN+GIErokW6U4guBpfYl8qYB+OFLEho+QvnV5ZH1R9qhUC/Z2Ch9w==
+  version "1.32.12"
+  resolved "https://registry.npmjs.org/sass/-/sass-1.32.12.tgz#a2a47ad0f1c168222db5206444a30c12457abb9f"
+  integrity sha512-zmXn03k3hN0KaiVTjohgkg98C3UowhL1/VSGdj4/VAAiMKGQOE80PFPxFP2Kyq0OUskPKcY5lImkhBKEHlypJA==
   dependencies:
-    chokidar ">=2.0.0 <4.0.0"
+    chokidar ">=3.0.0 <4.0.0"
 
 sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
@@ -10801,20 +11017,25 @@ semver-regex@^3.1.2:
   resolved "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.2.tgz#34b4c0d361eef262e07199dbef316d0f2ab11807"
   integrity sha512-bXWyL6EAKOJa81XG1OZ/Yyuq+oT0b2YLlxx7c+mrdYPaPbnj6WgVULXhinMIeZGufuUBu/eVRqXEhiv4imfwxA==
 
-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.1:
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@6.3.0, semver@^6.0.0, semver@^6.1.2, semver@^6.3.0:
+semver@6.3.0, semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.2:
-  version "7.3.4"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz#27aaa7d2e4ca76452f98d3add093a72c943edc97"
-  integrity sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
+semver@^7.3.4:
+  version "7.3.5"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -10956,6 +11177,15 @@ shellwords@^0.1.1:
   resolved "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
 sigmund@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
@@ -11061,16 +11291,16 @@ snapdragon@^0.8.1:
     use "^3.1.0"
 
 sockjs-client@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.0.tgz#2f8ff5d4b659e0d092f7aba0b7c386bd2aa20add"
-  integrity sha512-8Dt3BDi4FYNrCFGTL/HtwVzkARrENdwOUf1ZoW/9p3M8lZdFT35jVdrHza+qgxuG9H3/shR4cuX/X9umUrjP8Q==
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.1.tgz#256908f6d5adfb94dabbdbd02c66362cca0f9ea6"
+  integrity sha512-VnVAb663fosipI/m6pqRXakEOw7nvd7TUgdr3PlR/8V2I95QIdwT8L4nMxhyU8SmDBHYXU1TOElaKOmKLfYzeQ==
   dependencies:
     debug "^3.2.6"
     eventsource "^1.0.7"
     faye-websocket "^0.11.3"
     inherits "^2.0.4"
     json3 "^3.3.3"
-    url-parse "^1.4.7"
+    url-parse "^1.5.1"
 
 sockjs@^0.3.21:
   version "0.3.21"
@@ -11113,9 +11343,9 @@ source-map-support@^0.5.6, source-map-support@^0.5.9, source-map-support@~0.5.12
     source-map "^0.6.0"
 
 source-map-url@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
-  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
+  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
 source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
@@ -11188,13 +11418,6 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
-split2@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
-  integrity sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==
-  dependencies:
-    through2 "^2.0.2"
-
 split2@^3.0.0:
   version "3.2.2"
   resolved "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz#bf2cf2a37d838312c249c89206fd7a17dd12365f"
@@ -11207,6 +11430,13 @@ sprintf-js@~1.0.2:
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+ssf@~0.11.2:
+  version "0.11.2"
+  resolved "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz#0b99698b237548d088fc43cdf2b70c1a7512c06c"
+  integrity sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==
+  dependencies:
+    frac "~1.1.2"
+
 sshpk@^1.7.0:
   version "1.16.1"
   resolved "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
@@ -11230,9 +11460,9 @@ ssri@^5.2.4:
     safe-buffer "^5.1.1"
 
 ssri@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
-  integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
+  integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
   dependencies:
     figgy-pudding "^3.5.1"
 
@@ -11242,9 +11472,9 @@ stable@^0.1.8:
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
 stack-utils@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.4.tgz#4b600971dcfc6aed0cbdf2a8268177cc916c87c8"
-  integrity sha512-IPDJfugEGbfizBwBZRZ3xpccMdRyP5lqsBWXGQWimVjua/ccLCeMOAVjlc1R7LxFjo5sEDhyNIXd8mo/AiDS9w==
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.5.tgz#a19b0b01947e0029c8e451d5d61a498f5bb1471b"
+  integrity sha512-KZiTzuV3CnSnSvgMRrARVCj+Ht7rMbauGDK0LdVFRGyenwdylpajAp4Q0i6SX8rEmbTpMMf6ryq2gb8pPq2WgQ==
   dependencies:
     escape-string-regexp "^2.0.0"
 
@@ -11359,47 +11589,47 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-string-width@^4.1.0, string-width@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
-  integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
+  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
   dependencies:
     emoji-regex "^8.0.0"
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
 string.prototype.padend@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.1.tgz#824c84265dbac46cade2b957b38b6a5d8d1683c5"
-  integrity sha512-eCzTASPnoCr5Ht+Vn1YXgm8SB015hHKgEIMu9Nr9bQmLhRBxKRfmzSj/IQsxDFc8JInJDDFA0qXwK+xxI7wDkg==
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.2.tgz#6858ca4f35c5268ebd5e8615e1327d55f59ee311"
+  integrity sha512-/AQFLdYvePENU3W5rgurfWSMU6n+Ww8n/3cUt7E+vPBB/D7YDG8x+qjoFs4M/alR2bW7Qg6xMjVwWUOvuQ0XpQ==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
+    es-abstract "^1.18.0-next.2"
 
 string.prototype.padstart@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/string.prototype.padstart/-/string.prototype.padstart-3.1.1.tgz#5a1ce79d21899073f630895cb9c7ce7f5acf51d6"
-  integrity sha512-kcFjKhQYg40AK9MITCWYr/vIebruAD01sc/fxi8szHJaEG7Rke4XHw6LU9c1VWXh/+J/PxvWLLf/aIAGKhXkAQ==
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/string.prototype.padstart/-/string.prototype.padstart-3.1.2.tgz#f9b9ce66bedd7c06acb40ece6e34c6046e1a019d"
+  integrity sha512-HDpngIP3pd0DeazrfqzuBrQZa+D2arKWquEHfGt5LzVjd+roLC3cjqVI0X8foaZz5rrrhcu8oJAQamW8on9dqw==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
+    es-abstract "^1.18.0-next.2"
 
-string.prototype.trimend@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz#a22bd53cca5c7cf44d7c9d5c732118873d6cd18b"
-  integrity sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==
+string.prototype.trimend@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
+  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
 
-string.prototype.trimstart@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz#9b4cb590e123bb36564401d59824298de50fd5aa"
-  integrity sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==
+string.prototype.trimstart@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
+  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
 
 string_decoder@^1.0.0, string_decoder@^1.1.1:
@@ -11507,9 +11737,9 @@ stylehacks@^4.0.0:
     postcss-selector-parser "^3.0.0"
 
 stylelint-config-recess-order@^2.0.4:
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-2.3.0.tgz#ee33adc4faf3a09ed8e3a53f682e1682e1884ff8"
-  integrity sha512-z1d1m///to9ikecxP0uM2ljAmogHL1A+A4MUXtYrJvZRFPfPeODebimmJacx4cRL/oltEo3I6HqtreyRrn4lBg==
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-2.4.0.tgz#7336da98d9e11cfd17388f4c15fada615b49c301"
+  integrity sha512-+X+cb7WgmfCt5yoG+Ewg+fpn79hosjj7ESQ7ODTtwaZQGzQT+jD6AWLAhULMqDb9v2GVDTO5fu1rY/BR9EaZJA==
   dependencies:
     stylelint-order "4.1.x"
 
@@ -11535,9 +11765,9 @@ stylelint-order@4.1.x, stylelint-order@^4.1.0:
     postcss-sorting "^5.0.1"
 
 stylelint-scss@^3.18.0:
-  version "3.18.0"
-  resolved "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.18.0.tgz#8f06371c223909bf3f62e839548af1badeed31e9"
-  integrity sha512-LD7+hv/6/ApNGt7+nR/50ft7cezKP2HM5rI8avIdGaUWre3xlHfV4jKO/DRZhscfuN+Ewy9FMhcTq0CcS0C/SA==
+  version "3.19.0"
+  resolved "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.19.0.tgz#528006d5a4c5a0f1f4d709b02fd3f626ed66d742"
+  integrity sha512-Ic5bsmpS4wVucOw44doC1Yi9f5qbeVL4wPFiEOaUElgsOuLEN6Ofn/krKI8BeNL2gAn53Zu+IcVV4E345r6rBw==
   dependencies:
     lodash "^4.17.15"
     postcss-media-query-parser "^0.2.3"
@@ -11546,35 +11776,35 @@ stylelint-scss@^3.18.0:
     postcss-value-parser "^4.1.0"
 
 stylelint@^13.6.1:
-  version "13.8.0"
-  resolved "https://registry.npmjs.org/stylelint/-/stylelint-13.8.0.tgz#446765dbe25e3617f819a0165956faf2563ddc23"
-  integrity sha512-iHH3dv3UI23SLDrH4zMQDjLT9/dDIz/IpoFeuNxZmEx86KtfpjDOscxLTFioQyv+2vQjPlRZnK0UoJtfxLICXQ==
+  version "13.13.0"
+  resolved "https://registry.npmjs.org/stylelint/-/stylelint-13.13.0.tgz#1a33bffde765920ac985f16ae6250ff914b27804"
+  integrity sha512-jvkM1iuH88vAvjdKPwPm6abiMP2/D/1chbfb+4GVONddOOskHuCXc0loyrLdxO1AwwH6jdnjYskkTKHQD7cXwQ==
   dependencies:
     "@stylelint/postcss-css-in-js" "^0.37.2"
     "@stylelint/postcss-markdown" "^0.36.2"
     autoprefixer "^9.8.6"
-    balanced-match "^1.0.0"
+    balanced-match "^2.0.0"
     chalk "^4.1.0"
     cosmiconfig "^7.0.0"
-    debug "^4.2.0"
+    debug "^4.3.1"
     execall "^2.0.0"
-    fast-glob "^3.2.4"
+    fast-glob "^3.2.5"
     fastest-levenshtein "^1.0.12"
-    file-entry-cache "^6.0.0"
+    file-entry-cache "^6.0.1"
     get-stdin "^8.0.0"
     global-modules "^2.0.0"
-    globby "^11.0.1"
+    globby "^11.0.3"
     globjoin "^0.1.4"
     html-tags "^3.1.0"
     ignore "^5.1.8"
     import-lazy "^4.0.0"
     imurmurhash "^0.1.4"
-    known-css-properties "^0.20.0"
-    lodash "^4.17.20"
-    log-symbols "^4.0.0"
+    known-css-properties "^0.21.0"
+    lodash "^4.17.21"
+    log-symbols "^4.1.0"
     mathml-tag-names "^2.1.3"
-    meow "^8.0.0"
-    micromatch "^4.0.2"
+    meow "^9.0.0"
+    micromatch "^4.0.4"
     normalize-selector "^0.2.0"
     postcss "^7.0.35"
     postcss-html "^0.36.0"
@@ -11584,19 +11814,19 @@ stylelint@^13.6.1:
     postcss-safe-parser "^4.0.2"
     postcss-sass "^0.4.4"
     postcss-scss "^2.1.1"
-    postcss-selector-parser "^6.0.4"
+    postcss-selector-parser "^6.0.5"
     postcss-syntax "^0.36.2"
     postcss-value-parser "^4.1.0"
     resolve-from "^5.0.0"
     slash "^3.0.0"
     specificity "^0.4.1"
-    string-width "^4.2.0"
+    string-width "^4.2.2"
     strip-ansi "^6.0.0"
     style-search "^0.1.0"
     sugarss "^2.0.0"
     svg-tags "^1.0.0"
-    table "^6.0.3"
-    v8-compile-cache "^2.2.0"
+    table "^6.5.1"
+    v8-compile-cache "^2.3.0"
     write-file-atomic "^3.0.3"
 
 sugarss@^2.0.0:
@@ -11700,15 +11930,18 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-table@^6.0.3:
-  version "6.0.7"
-  resolved "https://registry.npmjs.org/table/-/table-6.0.7.tgz#e45897ffbcc1bcf9e8a87bf420f2c9e5a7a52a34"
-  integrity sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g==
+table@^6.5.1:
+  version "6.6.0"
+  resolved "https://registry.npmjs.org/table/-/table-6.6.0.tgz#905654b79df98d9e9a973de1dd58682532c40e8e"
+  integrity sha512-iZMtp5tUvcnAdtHpZTWLPF0M7AgiQsURR2DwmxnJwSy8I3+cY+ozzVvYha3BOLG2TB+L0CqjIz+91htuj6yCXg==
   dependencies:
-    ajv "^7.0.2"
-    lodash "^4.17.20"
+    ajv "^8.0.1"
+    lodash.clonedeep "^4.5.0"
+    lodash.flatten "^4.4.0"
+    lodash.truncate "^4.4.2"
     slice-ansi "^4.0.0"
     string-width "^4.2.0"
+    strip-ansi "^6.0.0"
 
 tapable@^0.1.8:
   version "0.1.10"
@@ -11784,7 +12017,7 @@ throttle-debounce@^1.0.1:
   resolved "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
   integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
 
-through2@^2.0.0, through2@^2.0.2:
+through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
   integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
@@ -11978,11 +12211,16 @@ tsconfig@^7.0.0:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
-tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.10.0, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
+  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -12007,16 +12245,16 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-fest@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
-  integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
-
 type-fest@^0.18.0:
   version "0.18.1"
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
   integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
 
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
 type-fest@^0.6.0:
   version "0.6.0"
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
@@ -12056,9 +12294,19 @@ uglify-js@3.4.x:
     source-map "~0.6.1"
 
 uglify-js@^3.1.4:
-  version "3.12.4"
-  resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.12.4.tgz#93de48bb76bb3ec0fc36563f871ba46e2ee5c7ee"
-  integrity sha512-L5i5jg/SHkEqzN18gQMTWsZk3KelRsfD1wUVNqtq0kzqWQqcJjyL8yc1o8hJgRrWqrAl2mUFbhfznEIoi7zi2A==
+  version "3.13.5"
+  resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.5.tgz#5d71d6dbba64cf441f32929b1efce7365bb4f113"
+  integrity sha512-xtB8yEqIkn7zmOyS2zUNBsYCBRhDkvlNxMMY2smuJ/qA8NCHeQvKCF3i9Z4k8FJH4+PJvZRtMrPynfZ75+CSZw==
+
+unbox-primitive@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
+  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+  dependencies:
+    function-bind "^1.1.1"
+    has-bigints "^1.0.1"
+    has-symbols "^1.0.2"
+    which-boxed-primitive "^1.0.2"
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
@@ -12084,9 +12332,9 @@ unicode-property-aliases-ecmascript@^1.0.4:
   integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
 
 unified@^9.1.0:
-  version "9.2.0"
-  resolved "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz#67a62c627c40589edebbf60f53edfd4d822027f8"
-  integrity sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==
+  version "9.2.1"
+  resolved "https://registry.npmjs.org/unified/-/unified-9.2.1.tgz#ae18d5674c114021bfdbdf73865ca60f410215a3"
+  integrity sha512-juWjuI8Z4xFg8pJbnEZ41b5xjGUWGHqXALmBZ3FC3WX0PIx1CZBIIJ6mXbYMcf6Yw4Fi0rFUTA1cdz/BglbOhA==
   dependencies:
     bail "^1.0.0"
     extend "^3.0.0"
@@ -12137,9 +12385,9 @@ unist-util-find-all-after@^3.0.2:
     unist-util-is "^4.0.0"
 
 unist-util-is@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.4.tgz#3e9e8de6af2eb0039a59f50c9b3e99698a924f50"
-  integrity sha512-3dF39j/u423v4BBQrk1AQ2Ve1FxY5W3JKwXxVFzBODQ6WEvccguhgp802qQLKSnxPODE6WuRZtV+ohlUg4meBA==
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz#976e5f462a7a5de73d94b706bac1b90671b57797"
+  integrity sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==
 
 unist-util-stringify-position@^2.0.0:
   version "2.0.3"
@@ -12202,10 +12450,10 @@ url-loader@^1.1.2:
     mime "^2.0.3"
     schema-utils "^1.0.0"
 
-url-parse@^1.4.3, url-parse@^1.4.7:
-  version "1.4.7"
-  resolved "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
-  integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
+url-parse@^1.4.3, url-parse@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz#d5fa9890af8a5e1f274a2c98376510f6425f6e3b"
+  integrity sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==
   dependencies:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
@@ -12271,6 +12519,18 @@ util@^0.11.0:
   dependencies:
     inherits "2.0.3"
 
+util@^0.12.0:
+  version "0.12.3"
+  resolved "https://registry.npmjs.org/util/-/util-0.12.3.tgz#971bb0292d2cc0c892dab7c6a5d37c2bec707888"
+  integrity sha512-I8XkoQwE+fPQEhy9v012V+TSdH2kp9ts29i20TaaDUXsg7x/onePbhFJUExBfv/2ay1ZOp/Vsm3nDlmnFGSAog==
+  dependencies:
+    inherits "^2.0.3"
+    is-arguments "^1.0.4"
+    is-generator-function "^1.0.7"
+    is-typed-array "^1.1.3"
+    safe-buffer "^5.1.2"
+    which-typed-array "^1.1.2"
+
 utila@~0.4:
   version "0.4.0"
   resolved "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
@@ -12298,10 +12558,10 @@ v-hotkey@^0.8.0:
   dependencies:
     core-js "^2.6.5"
 
-v8-compile-cache@^2.0.3, v8-compile-cache@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz#9471efa3ef9128d2f7c6a7ca39c4dd6b5055b132"
-  integrity sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==
+v8-compile-cache@^2.0.3, v8-compile-cache@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
@@ -12378,15 +12638,15 @@ vue-eslint-parser@^2.0.3:
     lodash "^4.17.4"
 
 vue-eslint-parser@^7.0.0:
-  version "7.3.0"
-  resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.3.0.tgz#894085839d99d81296fa081d19643733f23d7559"
-  integrity sha512-n5PJKZbyspD0+8LnaZgpEvNCrjQx1DyDHw8JdWwoxhhC+yRip4TAvSDpXGf9SWX6b0umeB5aR61gwUo6NVvFxw==
+  version "7.6.0"
+  resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz#01ea1a2932f581ff244336565d712801f8f72561"
+  integrity sha512-QXxqH8ZevBrtiZMZK0LpwaMfevQi9UL7lY6Kcp+ogWHC88AuwUPwwCIzkOUc1LR4XsYAt/F9yHXAB/QoD17QXA==
   dependencies:
     debug "^4.1.1"
     eslint-scope "^5.0.0"
     eslint-visitor-keys "^1.1.0"
     espree "^6.2.1"
-    esquery "^1.0.1"
+    esquery "^1.4.0"
     lodash "^4.17.15"
 
 vue-hot-reload-api@^2.3.0:
@@ -12433,14 +12693,14 @@ vue-prism-editor@^1.2.2:
   integrity sha512-Lq2VgVygTx3Whn/tC8gD4m1ajA4lzSyCTqPLZA1Dq/ErbBaZA93FWRblwCoDR7AD2nXhGWuiTzb5ih3guzB7DA==
 
 vue-router@^3.0.2:
-  version "3.4.9"
-  resolved "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz#c016f42030ae2932f14e4748b39a1d9a0e250e66"
-  integrity sha512-CGAKWN44RqXW06oC+u4mPgHLQQi2t6vLD/JbGRDAXm0YpMv0bgpKuU5bBd7AvMgfTz9kXVRIWKHqRwGEb8xFkA==
+  version "3.5.1"
+  resolved "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"
+  integrity sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw==
 
 vue-style-loader@^4.1.0:
-  version "4.1.2"
-  resolved "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
-  integrity sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ==
+  version "4.1.3"
+  resolved "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
+  integrity sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==
   dependencies:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
@@ -12513,6 +12773,11 @@ watchpack@^1.5.0:
     chokidar "^3.4.1"
     watchpack-chokidar2 "^2.0.1"
 
+wavesurfer.js@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-4.6.0.tgz#3dc26748b2200978afe802582a2085f46eb0ce0d"
+  integrity sha512-+nn6VD86pTtRu9leVNXoIGOCMJyaTNsKNy9v+SfUsYo+SxLCQvEzrZZ/eKMImqspsk+BX1V1xlY4FRkHswu3fA==
+
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"
   resolved "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
@@ -12527,6 +12792,11 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-highlighter@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.npmjs.org/web-highlighter/-/web-highlighter-0.7.1.tgz#616fe7e48697f4aec351645717a7d7f5811f693e"
+  integrity sha512-LHm/CdIC8bYscKz+W9N63TZvB/+DjsE3sSEzn5ijh/6Rg94DybLLRCKchDJZz/B2ChL78/jcmh1WTGA4zhbj6g==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -12571,9 +12841,9 @@ webpack-dev-middleware@^3.7.2:
     webpack-log "^2.0.0"
 
 webpack-dev-server@^3.2.0:
-  version "3.11.1"
-  resolved "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.1.tgz#c74028bf5ba8885aaf230e48a20e8936ab8511f0"
-  integrity sha512-u4R3mRzZkbxQVa+MBWi2uVpB5W59H3ekZAJsQlKUTdl7Elcah2EhygTPLmeFXybQkf9i2+L0kn7ik9SnXa6ihQ==
+  version "3.11.2"
+  resolved "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.2.tgz#695ebced76a4929f0d5de7fd73fafe185fe33708"
+  integrity sha512-A80BkuHRQfCiNtGBS1EMf2ChTUs0x+B3wGDFmOeT4rmJOHhHTCH2naNxIHhmkr0/UillP4U3yeIyv1pNp+QDLQ==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
@@ -12706,6 +12976,17 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
@@ -12716,6 +12997,19 @@ which-pm-runs@^1.0.0:
   resolved "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
   integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=
 
+which-typed-array@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
+  integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.10, which@^1.2.12, which@^1.2.9, which@^1.3.0, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
@@ -12730,11 +13024,21 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+wmf@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz#7d19d621071a08c2bdc6b7e688a9c435298cc2da"
+  integrity sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==
+
 word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
+word@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/word/-/word-0.3.0.tgz#8542157e4f8e849f4a363a288992d47612db9961"
+  integrity sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==
+
 wordwrap@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
@@ -12824,6 +13128,22 @@ ws@^6.0.0, ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
+xlsx@^0.16.9:
+  version "0.16.9"
+  resolved "https://registry.npmjs.org/xlsx/-/xlsx-0.16.9.tgz#dacd5bb46bda6dd3743940c9c3dc1e2171826256"
+  integrity sha512-gxi1I3EasYvgCX1vN9pGyq920Ron4NO8PNfhuoA3Hpq6Y8f0ECXiy4OLrK4QZBnj1jx3QD+8Fq5YZ/3mPZ5iXw==
+  dependencies:
+    adler-32 "~1.2.0"
+    cfb "^1.1.4"
+    codepage "~1.14.0"
+    commander "~2.17.1"
+    crc-32 "~1.2.0"
+    exit-on-epipe "~1.0.1"
+    fflate "^0.3.8"
+    ssf "~0.11.2"
+    wmf "~1.0.1"
+    word "~0.3.0"
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
@@ -12858,9 +13178,9 @@ y18n@^3.2.1:
   integrity sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==
 
 y18n@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"
-  integrity sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
+  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
 
 yallist@^2.1.2:
   version "2.1.2"
@@ -12878,9 +13198,9 @@ yallist@^4.0.0:
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
 yaml@^1.10.0:
-  version "1.10.0"
-  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
-  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
+  version "1.10.2"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yargs-parser@^10.0.0:
   version "10.1.0"
@@ -12898,9 +13218,9 @@ yargs-parser@^13.1.2:
     decamelize "^1.2.0"
 
 yargs-parser@^20.2.3:
-  version "20.2.4"
-  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
-  integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
+  version "20.2.7"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz#61df85c113edfb5a7a4e36eb8aa60ef423cbc90a"
+  integrity sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==
 
 yargs-parser@^9.0.2:
   version "9.0.2"