feat：隐藏menu 以及header

fix: 修复冲突
CN-333 feat : Dashboard--dns 实时告警信息图表开发以及CN-332的一些样式修改
2022-03-07 13:38:47 +08:00 · 2022-03-07 11:51:28 +08:00 · 2022-03-07 09:41:11 +08:00 · 2022-03-07 09:30:17 +08:00 · 2022-03-06 23:26:42 +08:00 · 2022-03-05 20:25:03 +08:00
329 changed files with 55380 additions and 6296 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,8 +15,8 @@ module.exports = {
    eqeqeq: 0, // 关闭必须使用全等
    'no-extend-native': 0,
    'vue/no-parsing-error': 0, // 关闭此项避免在{{}}中使用>、<号导致报错的问题
-    'vue/no-use-v-if-with-v-for': 0, // vue2暂时关闭v-if和v-for写在一起的错误提示，到vue3后要遵守
    'no-useless-escape': 0,
-    'no-eval': 0
+    'no-eval': 0,
+    'no-trailing-spaces': 0
  }
 }
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -16,40 +16,38 @@ before_script:
  - export CNUI_TAG=$(date +%Y%m%d%H%M%S)

 generate_git-log:
-  variables:
-    CI_DEBUG_TRACE: "true"
  stage: gen_git-log
  script:
-    - if (( `grep git-log.html ./public/index.html | wc -l` == 0 )); then         sed -i '/<body>/ a <a style="position:fixed;bottom:20px;left:40px;z-index:999;color:white;" target="_blank" href="./git-log.html">更新记录</a>' ./public/index.html;         echo "添加更新记录链接"; fi;
+    - if (( `grep git-log.html ./public/index.html | wc -l` == 0 )); then         sed -i 's+</body>+<a style="position:fixed;bottom:20px;left:40px;z-index:999;color:white;" target="_blank" href="./git-log.html">更新记录</a>\n</body>+g' ./public/index.html;         echo "添加更新记录链接"; fi;
    - echo "最近的100个提交记录"
    - echo "<!DOCTYPE html><html><head><meta charset='utf-8'></head><body><pre>" > ./public/git-log.html
    - "git log -100 --pretty=format:'%ad : %s' >> ./public/git-log.html"
    - echo "</pre></body></html>" >> ./public/git-log.html
    - echo "处理 git-log.html 结束"
+  artifacts:
+    paths:
+      - public/index.html
+      - public/git-log.html
  only:
-    - dev-ci-debug
+    - dev
  tags:
    - GN-XXG-Server

 build_project:
  stage: build_project
-  variables:
-    CI_DEBUG_TRACE: "true"
  script:
    - echo "npm install ..."
    - npm install --save-dev --unsafe-perm
    - echo "npm run build"
    - npm run build
  only:
-    - dev-ci-debug
+    - dev
    - tags
  tags:
    - GN-XXG-Server

 build_image:
  stage: build_image
-  variables:
-    CI_DEBUG_TRACE: "true"
  script:
    - echo "docker build"
    - sudo docker build -t dev_cn-ui:$CNUI_TAG .
@@ -59,15 +57,13 @@ build_image:
    - sudo docker push 192.168.40.153:9080/cyber-narrator/dev_cn-ui:$CNUI_TAG
  when: on_success
  only:
-    - dev-ci-debug
+    - dev
  tags:
    - GN-XXG-Server


 build_release_image:
  stage: build_image
-  variables:
-    CI_DEBUG_TRACE: "true"
  script:
    - echo 'tag名称是'
    - echo $CI_COMMIT_TAG
--- a/2.md
+++ b/2.md
--- a/3
+++ b/3
@@ -2,9 +2,8 @@ FROM nginx:latest

 MAINTAINER shizhendong shizhendong@zdjizhi.com

-
 # 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
-ADD dist/  /usr/share/nginx/html/
+COPY dist/  /usr/share/nginx/html/

 # nginx 配置 ， 制作镜像时不做处理 ， 容器可自己挂载配置文件
 #COPY nginx.conf /etc/nginx/nginx.conf
--- a/README.md
+++ b/README.md
@@ -51,8 +51,8 @@ https://www.lodashjs.com/
 多个单词时，应该以高阶的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾  
 eg：`SearchButtonClear.vue` 反例：`ClearSearchButton.vue`
 - **文件夹**  
-使用小写，单词间使用连字符`-`连接  
-eg：`right-box`
+使用小写，单词间使用连字符`-`连接，或使用驼峰格式 
+eg：`right-box`、`rightBox`


 - **VUE组件文件**  
--- a/build/build-helper.js
+++ b/build/build-helper.js
@@ -9,7 +9,7 @@ const _version = tagVer ? tagVer.startsWith('v') ? tagVer.slice(1) : tagVer : ve
 helper({
  name,
  version: _version,
-  entry: 'website/docs/en-US/!(custom-theme|datetime-picker|i18n|installation|message-box|message|migration-from-2.x|notification|quickstart|transition|typography).md',
+  entry: 'website/docs/en-US/!(custom-themes|datetime-picker|i18n|installation|message-box|message|migration-from-2.x|notification|quickstart|transition|typography).md',
  outDir: 'lib',
  reComponentName,
  reDocUrl,
--- a/0
+++ b/0
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,10 +13,12 @@
    "@amcharts/amcharts4-geodata": "^4.1.20",
    "axios": "^0.21.1",
    "babel-plugin-lodash": "^3.3.4",
+    "codemirror": "^5.65.1",
    "core-js": "^3.6.5",
    "dayjs": "^1.10.5",
+    "dt-sql-parser": "^4.0.0-beta.2.2",
    "echarts": "^5.1.1",
-    "element-plus": "1.0.2-beta.44",
+    "element-plus": "^1.0.2-beta.44",
    "leaflet": "^1.7.1",
    "lib-flexible": "^0.3.2",
    "lodash": "^4.17.21",
@@ -25,6 +27,7 @@
    "postcss-px2rem-exclude": "0.0.6",
    "sass-loader": "^8.0.2",
    "sass-resources-loader": "^2.2.1",
+    "tiny-emitter": "^2.1.0",
    "vue": "^3.0.0",
    "vue-grid-layout": "^3.0.0-beta1",
    "vue-i18n": "^9.1.6",
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
    <link rel="icon" href="<%= BASE_URL %>images/cn-logo-medium.svg">
    <title>Cyber Narrator</title>
  </head>
-  <body>
+  <body class="theme-light">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,6 @@
  </div>
 </template>
 <script>
-
 export default {
  name: 'App',
  setup () {
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -25,7 +25,7 @@
          <el-button
              v-loading="loading"
              type="primary"
-              class="login--input login--butotn"
+              class="login--input login--button"
              @click="login"
              @keyup.enter="login"
              style="font-size: 16px;"
@@ -87,7 +87,7 @@ export default {
 }
 </script>

-<style lang="scss">
+<style>
 .logins{
  background-color: #000C18;
  background-size: auto;
@@ -129,7 +129,7 @@ export default {
   height: 250px;
   margin: auto;
 }
-.login--butotn {
+.login--button {
  background: #0091ff;
  color: #fff;
  border-radius: 4px;
--- a/src/assets/css/chart.scss
+++ b/src/assets/css/chart.scss
@@ -1,44 +0,0 @@
-.nz-chart-tooltip .cn-chart-tooltip-box{
-  display: flex;
-  .cn-chart-tooltip-content{
-    flex: 1;
-    display: inline-block;
-    overflow: hidden;
-    text-overflow:ellipsis;
-    white-space: nowrap;
-    font-size:14px;
-    color:#666;
-    font-weight:400;
-    margin-left:2px ;
-  }
-  .cn-chart-tooltip-value{
-    float:right;
-    margin-left:20px;
-    font-size:14px;
-    color:#666;
-    font-weight:900;
-  }
-}
-.cn-chart__single-value {
-  .chart__loading {
-    top: 0;
-    height: 100%;
-  }
-}
-.chart__loading {
-  position: absolute;
-  height: calc(100% - 47px);
-  top: 47px;
-  width: 100%;
-  background-color: #fefefe;
-  z-index: 1;
-  opacity: .9;
-
-  i {
-    position: absolute;
-    left: calc(50% - 15px);
-    top: calc(50% - 15px);
-    font-size: 30px;
-    color: #aaa;
-  }
-}
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -1,3 +1,5 @@
+/* 不含主题变量的通用css */
+
 [v-cloak] {
  display: none !important;
 }
@@ -14,59 +16,8 @@ body {
  cursor: default !important;
  overflow: hidden;
 }
-
-/*---滚动条默认显示样式--*/
-::-webkit-scrollbar-thumb {
-  background-color: #ddd;
-  border-radius: 6px;
-  border: 2px solid #fff;
-}
-/*---鼠标点击滚动条显示样式--*/
-::-webkit-scrollbar-thumb:hover {
-  background-color: #c8c8c8;
-  border-radius: 6px;
-}
-/*---滚动条大小--*/
-::-webkit-scrollbar {
-  width: 14px;
-  height: 14px;
-}
-/*---滚动框背景样式--*/
-::-webkit-scrollbar-track-piece {
-  background-color: transparent;
-}
-/* input的placeholder字色 */
-input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
-  color: lighten(#0091ff, 20%);
-}
-.myDatePicker .el-picker-panel__footer{
-  .el-button{
-    display: none;
-  }
-  .is-plain{
-    display: inline-block;
-  }
-}
-
-th *:first-letter,
-.left-menu *:first-letter,
-.option-popper *,
-.header__operations *:first-letter {
-  text-transform: capitalize;
-}
-
-.outer-box {
-  padding: 10px;
-  height: 100%;
-  width: 100%;
-}
-
-.el-table__empty-block {
-  width: 100% !important;
-}
-
-/* 淡化amcharts的logo */
-g [aria-labelledby$=-title] {
-  opacity: 0.1;
-  transform: translateX(calc(100% - 52px)) scale(.7);
+.temp-dom {
+  visibility: hidden;
+  font-size: 14px;
+  position: fixed;
 }
--- a/src/assets/css/common/index.scss
+++ b/src/assets/css/common/index.scss
@@ -0,0 +1,12 @@
+@import 'right-box-common';
+@import 'table-common';
+
+/* 通用css */
+.panel-chart__no-data {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  color: #999;
+}
--- a/src/assets/css/common/right-box-common.scss
+++ b/src/assets/css/common/right-box-common.scss
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -46,6 +46,11 @@
      border: 1px solid #E6EAED;

    }
+    .top-tool-search.margin-r-20 {
+     .top-tool-btn {
+       border-left: none;
+     }
+    }

    .top-tool-right {
      display: flex;
@@ -68,7 +73,7 @@
      }
    }
    .top-tool-btn {
-      height: 32px;
+      height: 33px;
      width: 36px;
      border: 1px solid $--border-color-primary;
      outline: none;
@@ -81,6 +86,7 @@
        color: $--button-gray-color;
      }
    }
+
    .top-tool-btn.top-tool-btn--text {
      padding: 0 8px;
      width: unset;
--- a/src/assets/css/components/components/advancedSearch/advanced-search.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search.scss
@@ -0,0 +1,74 @@
+.advanced-search {
+  width: 100%;
+  height: 100%;
+  max-height: 66px;
+
+  .el-input__suffix {
+    right: 0;
+  }
+  &.advanced-search--show-list {
+    max-height: 40px;
+
+    .el-input__inner {
+      padding-right: 0;
+      border: none;
+    }
+  }
+  .el-input__inner {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #CECECE;
+    border-radius: 2px;
+    padding-right: 10px;
+  }
+  .search__suffixes, .search__suffixes--show-list {
+    display: flex;
+    height: 100%;
+
+    .search__suffix {
+      cursor: pointer;
+    }
+  }
+  .search__suffixes {
+    justify-content: space-evenly;
+    width: 100px;
+
+    .search__suffix {
+      display: flex;
+      align-items: center;
+
+      .cn-icon-search-advance {
+        color: #A6AAAE;
+        font-size: 20px;
+      }
+      .el-icon-search {
+        color: #3976CB;
+        font-size: 32px;
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  .search__suffixes--show-list {
+    .search__suffix {
+      padding: 0 12px;
+
+      &:last-of-type {
+        background-color: $--color-primary;
+        border-radius: 0 2px 2px 0;
+      }
+      .cn-icon-search-advance {
+        color: #A6AAAE;
+        font-size: 14px;
+      }
+      .el-icon-search {
+        color: white;
+        font-size: 16px;
+      }
+    }
+  }
+
+}
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -0,0 +1,133 @@
+.advanced-search {
+  position: relative;
+  height: 100%;
+
+  .search__suffixes {
+    &.search__suffixes--text-mode, &.search__suffixes--tag-mode {
+      position: absolute;
+      display: flex;
+      top: 10px;
+      right: 10px;
+
+      .search__suffix {
+        margin-left: 8px;
+
+        .cn-icon-search-advance, .cn-icon-search-normal {
+          color: #A6AAAE;
+          font-size: 18px;
+        }
+        .el-icon-search {
+          color: #3976CB;
+          font-size: 22px;
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  /*.search-tip--error {
+    font-size: 14px;
+    color: #F56C6C;
+  }*/
+}
+.advanced-search--show-list .CodeMirror, .advanced-search--show-list .tag-search {
+  border: none;
+}
+.tag-search {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  overflow: auto hidden;
+  border: 1px solid #CECECE;
+  border-radius: 2px;
+  padding-left: 10px;
+  padding-right: 80px;
+  background-color: white;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .tag-search__meta, .tag-search__add {
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+
+  .tag-search__add {
+    display: flex;
+    align-items: center;
+    height: 22px;
+    padding: 0 4px;
+    font-size: 12px;
+    color: #333;
+    background-color: #F5F6F7;
+    border: 1px solid #D7D7D7;
+    border-radius: 1px;
+    cursor: pointer;
+    transition: all linear .1s;
+
+    &:hover {
+      background-color: white;
+      color: #111;
+    }
+  }
+
+  .tag-search__meta {
+    display: flex;
+    height: 22px;
+    padding: 0 6px;
+    font-size: 12px;
+    background-color: #F5F6F7;
+
+    &>div:not(:last-of-type) {
+      margin-right: 6px;
+    }
+
+    &.tag-search__meta--condition {
+      .condition__delete {
+        display: flex;
+        align-items: center;
+        color: #bcbdbd;
+        font-size: 16px;
+        margin-right: 6px;
+        cursor: pointer;
+        transition: all linear .1s;
+
+        &:hover {
+          color: #999;
+        }
+      }
+      .condition__column, .condition__operator, .condition__value {
+        display: flex;
+        align-items: center;
+        color: #333;
+        font-weight: bold;
+        cursor: text;
+      }
+      .condition__operator {
+        color: #3976CB;
+      }
+      .condition__operation-select {
+        display: flex;
+        align-items: center;
+
+        .condition__operation {
+          margin: 0 5px;
+          color: #3976CB;
+        }
+      }
+    }
+    &.tag-search__meta--connection {
+      .connection__value {
+        display: flex;
+        align-items: center;
+        color: #3976CB;
+        font-weight: bold;
+        cursor: text;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/components/advancedSearch/codemirror.scss
+++ b/src/assets/css/components/components/advancedSearch/codemirror.scss
@@ -0,0 +1,354 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 40px;
+  color: black;
+  direction: ltr;
+  border: 1px solid #CECECE;
+  border-radius: 2px;
+  padding-right: 80px;
+
+  pre.CodeMirror-placeholder.CodeMirror-line-like {
+    color: #ccc;
+  }
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 11px 5px; /* Vertical padding around content */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+.cm-fat-cursor .CodeMirror-line::selection,
+.cm-fat-cursor .CodeMirror-line > span::selection,
+.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
+.cm-fat-cursor .CodeMirror-line::-moz-selection,
+.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
+.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
+.cm-fat-cursor { caret-color: transparent; }
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: 0;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+  width: 100%;
+  padding-right: 120px;
+}
+
+.CodeMirror-scroll {
+  // overflow: scroll !important; /* Things will break if this is overridden */
+  /* 50px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  overflow: hidden;
+  margin-bottom: -50px; margin-right: -50px;
+  padding-bottom: 50px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+  z-index: 0;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 50px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none !important;
+  outline: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -50px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-rtl pre { direction: rtl; }
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -0,0 +1,189 @@
+.date-range-box {
+  font-size: 14px;
+  border-radius: 2px;
+  display: flex;
+
+  .date-range-refresh {
+    margin-left: 10px;
+  }
+
+  .date-time-range {
+    margin-right: 10px;
+  }
+
+  .date-range-item {
+    list-style-type: none;
+  }
+
+  .panel-time-picker-hidden {
+    visibility: hidden !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .date-range-text {
+    font-size: 14px;
+    min-width: 150px;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-around;
+    height: 26px;
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
+    border-radius: 2px;
+    line-height: 26px;
+    transition: width .3s;
+
+    .cn-icon {
+      font-size: 14px;
+    }
+
+    .cn-icon-arrow-down {
+      transition: all .3s;
+      display: inline-block;
+    }
+
+    .cn-icon-arrow-down-active {
+      transform: rotate(180deg);
+    }
+  }
+
+  .date-range-title {
+    font-size: 14px;
+    color: #666666;
+    font-weight: 600;
+    padding: 14px 0 7px 8px;
+  }
+
+  .calendar-popover-text {
+    white-space: nowrap;
+    display: inline-block;
+    margin: 0 5px;
+  }
+
+  .calendar-popover-text:first-of-type {
+    margin-left: 0;
+  }
+
+  .calendar-popover-text:last-of-type {
+    margin-right: 0;
+  }
+
+  .date-range-panel {
+    height: 410px;
+    width: 500px;
+    background: #FFFFFF;
+    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    position: absolute;
+    right: 0;
+    top: 34px;
+    z-index: 1;
+
+    .date-range-panel-content-left {
+      padding-left: 10px;
+      display: flex;
+      flex-direction: column;
+
+      .content-title {
+        font-size: 14px;
+        color: #666666;
+        font-weight: 400;
+        margin-bottom: 12px;
+      }
+
+      .content-input {
+        border: 1px solid #E7EAED;
+        border-radius: 2px;
+        width: 230px;
+        padding: 0 8px;
+        height: 30px;
+        line-height: 30px;
+        margin-bottom: 12px;
+        outline: #169AFF;
+      }
+
+      .content-input:focus {
+        border: 1px solid #169AFF;
+      }
+
+      .date-range-history {
+        flex: 1;
+        overflow-y: auto;
+
+        .date-range-history-item {
+          padding: 5px 0;
+          cursor: pointer;
+        }
+
+        .date-range-history-item:hover {
+          /*font-weight: 600;*/
+          background: #f9f9f9;
+        }
+      }
+    }
+
+    .date-range-panel-content-right {
+      display: flex;
+      flex-direction: column;
+
+      ul {
+        flex: 1;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+
+        li {
+          width: 100%;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          color: #333333;
+          font-weight: 400;
+          padding: 0 10px;
+          cursor: pointer;
+        }
+
+        li.active {
+          background: #F2F9FF;
+          color: #0091FF;
+          font-weight: 400;
+
+          .cn-icon-check {
+            color: #0091FF;
+            position: absolute;
+            right: 7px;
+          }
+        }
+
+        li:hover {
+          background: #F2F9FF;
+          color: #0091FF;
+        }
+      }
+    }
+  }
+
+  .date-range-panel-top {
+    height: 364px;
+  }
+
+  .date-range-panel-bottom {
+    height: 44px;
+    line-height: 44px;
+    border-top: 1px solid rgba(0, 0, 0, 0.09);
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+
+    .utc-str {
+      text-align: right;
+    }
+  }
+}
--- a/src/assets/css/components/components/common/TimeRange/time-refresh.scss
+++ b/src/assets/css/components/components/common/TimeRange/time-refresh.scss
@@ -0,0 +1,54 @@
+.cn-refresh-box{
+  position: relative;
+  font-size: 14px;
+
+  .cn-icon-refresh{
+    font-size: 14px;
+  }
+  .cn-icon-dropdown{
+    font-size: 14px;
+    transition: all .3s;
+    display: inline-block;
+  }
+  .cn-icon-dropdown.active{
+    transform: rotate(180deg);
+  }
+  .refresh-list{
+    position: absolute;
+    z-index: 1;
+    background: #FFFFFF;
+    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.77);
+    border-radius: 2px;
+    top: 30px;
+    right: 0;
+    .refresh-list-item{
+      width: 82px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      color: #333333;
+      cursor: pointer;
+      position: relative;
+      padding: 8px 0 8px 12px;
+    }
+    .refresh-list-item.active{
+      background: #F2F9FF;
+      color: #0091FF;
+      font-weight: 400;
+      .cn-icon-check{
+        color: #0091FF;
+        position: absolute;
+        right: 7px;
+      }
+    }
+    .refresh-list-item:hover{
+      background: #F2F9FF;
+      color: #0091FF;
+    }
+  }
+  .el-button--mini{
+    padding: 4px 6px !important;
+    min-height: 26px !important;
+  }
+}
--- a/src/assets/css/components/components/common/pagination.scss
+++ b/src/assets/css/components/components/common/pagination.scss
@@ -0,0 +1,68 @@
+.pagination {
+  padding-top: 8px;
+  text-align: center;
+  max-height: 42px;
+
+  .el-pagination {
+    max-height: 42px;
+    padding-right: 0;
+  }
+  .pagination-size-select .el-input--mini .el-input__inner{
+    height: 20px;
+    line-height: 20px;
+    margin: 5px 0 5px 5px;
+  }
+  .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
+    margin:5px 5px 0 5px;
+    padding: 0 4px;
+    font-size: 13px;
+    min-width: 20px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    border: 1px solid rgba(154,154,154,0.20);
+    border-radius: 2px;
+  }
+  .el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
+    line-height: 20px;
+  }
+  .el-pagination .el-pager .more::before {
+    line-height: 20px;
+  }
+  .el-pagination .el-pager .more {
+    background-color: $--content-right-background-color;
+  }
+  .btn-next, .btn-prev {
+    background-color: $--content-right-background-color !important;
+  }
+  input {
+    background-color: $--content-right-background-color !important;
+  }
+  .el-pager li.number {
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+    background-color: $--content-right-background-color;
+  }
+  .el-pager li.number.active {
+    color: #FFFFFF;
+    letter-spacing: 0;
+  }
+
+  .el-pagination .el-pager li.active {
+    background-color: $--color-primary;
+    border-radius: 2px;
+  }
+  .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+  }
+  .el-pagination__sizes .el-input .el-input__inner, .el-pagination__editor.el-input .el-input__inner {
+    height: 20px;
+    border-color: rgba(154,154,154,0.20);
+  }
+  .el-pagination__sizes .el-input .el-input__inner:hover {
+    border-color: rgba(154,154,154,0.20);
+  }
+}
--- a/src/assets/css/components/components/entities/entities.scss
+++ b/src/assets/css/components/components/entities/entities.scss
@@ -13,12 +13,21 @@
    overflow: hidden;
    position: relative;

+    .entity__loading {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      z-index: 1;
+
+      i {
+        position: absolute;
+        left: calc(50% - 15px);
+        top: calc(50% - 15px);
+        font-size: 30px;
+        color: #aaa;
+      }
+    }
    .entity-list__content {
-    /*  display: grid;
-      grid-template-columns: repeat(auto-fill, var(--entity-width));
-      grid-auto-flow: row;
-      grid-auto-rows: var(--entity-height);*/
-     /* grid-gap: 10px;*/
      display: flex;
      flex-wrap: wrap;
      display: -webkit-flex;
@@ -91,13 +100,11 @@

            i {
              font-size: 22px;
-              color: #23bf9a;
            }
          }
          .header__content {
            font-size: 22px;
            color: #333333;
-            font-family: PingFangSC-Medium;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
@@ -159,7 +166,6 @@
            font-size: 14px;
            font-weight: 400;
            white-space: nowrap;
-            font-family: PingFangSC-Regular;
            line-height: 16px;
            i {
              font-size: 13px;
@@ -172,7 +178,6 @@
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
-            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #666666;
            font-weight: 400;
@@ -240,3 +245,92 @@
 .app-orange {
  color: #FFA200;
 }
+
+.entity-left-filter {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  width: 100%;
+  height: 100%;
+  // border: 1px solid $--right-box-border-color;
+  overflow: auto;
+
+  .filter__header {
+    background-color: #E1E6ED;
+    margin-bottom: 10px;
+    padding-left: 8px;
+    height: 36px;
+    line-height: 36px;
+    color: #666;
+    font-size: 14px;
+  }
+  .filter__body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+
+    .filter__collapse {
+      .el-collapse-item {
+        margin-bottom: 10px;
+      }
+      .el-collapse-item__header {
+        padding-left: 15px;
+        padding-top: 8px;
+        color: #8FA1BE;
+        border-bottom: none !important;
+      }
+      .collapse-header {
+        display: flex;
+        width: 100%;
+        border-bottom: 1px solid $--content-right-background-color;
+      }
+      .collapse-header__icon {
+        padding-right: 6px;
+        font-size: 14px;
+      }
+      .el-collapse-item__wrap {
+        padding-top: 14px !important;
+
+        .el-collapse-item__content {
+          padding-bottom: 15px;
+
+          .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+            background-color: $--tree-node-hover-background-color;
+          }
+          .el-tree-node.is-expanded, .el-tree-node.is-current {
+            &>.el-tree-node__content>.filter-item {
+              font-weight: bold;
+            }
+          }
+          .el-tree-node__content {
+            height: 30px;
+            padding-right: 10px;
+          }
+        }
+        .filter-item {
+          display: flex;
+          justify-content: space-between;
+          padding-right: 6px;
+          width: 100%;
+
+          div {
+            max-width: 140px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+        .filter__more {
+          padding-left: 24px;
+          line-height: 36px;
+          color: #8FA1BE;
+          cursor: pointer;
+        }
+        .filter__more.filter__more--disabled {
+          color: #ccc;
+          cursor: default;
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/src/assets/css/components/components/layout/layout.scss
@@ -0,0 +1,243 @@
+.cn-container {
+  height: calc(100% - 50px);
+  background-color: $--content-right-background-color;
+  width: 100%;
+  &>div {
+    height: 100%;
+  }
+}
+
+.cn-header {
+  display: flex;
+  height: 50px;
+
+  .header__left {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+
+    .shrink-button {
+      margin-left: 20px;
+      color: #A4ADB5;
+      cursor: pointer;
+      transition: all linear .4s;
+
+      &.shrink-button--collapse {
+        transform: rotateY(180deg);
+      }
+    }
+  }
+  .header-menu {
+    display: flex;
+    justify-content: flex-end;
+    flex-grow: 1;
+
+    .el-dropdown {
+      width: 60px;
+      text-align: center;
+      height: 36px;
+      line-height: 50px;
+      .el-dialog{
+        width: 1000px;
+        height: 70px;
+        .el-dialog__header{
+          .el-dialog__title{
+            color: #fff;
+          }
+          .el-dialog__close{
+            color: #fff;
+            line-height: 50px;
+            font-size: 30px;
+          }
+        }
+      }
+    }
+  }
+  .header-menu--item {
+    color: #778391;
+    cursor: pointer;
+    transition: color linear .2s;
+    i {
+      font-size: 18px;
+    }
+  }
+  .header-menu--item:hover {
+    color: #313336;
+  }
+  .personal {
+    display: flex;
+    .el-dropdown {
+      margin: 0 10px 0 30px;
+      height: 36px;
+      line-height: 50px;
+      text-align: center;
+    }
+    .login-user {
+      color: #333;
+      i {
+        color: #999;
+        font-size: 12px;
+      }
+    }
+  }
+  .left-menu--pin {
+    width: 20px;
+    font-size: 20px;
+    font-weight: 100;
+    color: #999999;
+    transition: all .4s;
+    height: 100%;
+    line-height: 50px;
+    margin-left: 10px;
+    i {
+      transform: rotateY(0);
+      transition: transform .4s;
+    }
+    i.icon-reverse {
+      transform: rotateY(180deg);
+    }
+  }
+  .left-menu--pin-normal{
+  }
+  .left-menu--pin-reverse{
+  }
+}
+.link-title a {
+  color: inherit;
+  text-decoration: none;
+}
+.cn-breakcrumb {
+  padding-left: 15px;
+  line-height: 50px;
+
+  .el-breadcrumb__item .el-breadcrumb__inner {
+    color: #999;
+  }
+}
+.entity-selector {
+  .el-input__prefix {
+    left: 7px !important;
+  }
+}
+
+.cn-home {
+  display: flex;
+  height: 100%;
+  transition: all .2s;
+  .cn-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: calc(100% - 240px);
+    transition: all .2s;
+  }
+}
+
+// el-submenu  active字色
+.el-submenu.is-active .el-submenu__title,
+.el-submenu.is-active .el-submenu__title>i,
+.el-menu-item.is-active {
+  color: white !important;
+}
+// el-submenu  active且open背景色
+.el-submenu__title:not(.is-active):hover, .el-menu-item:not(.is-active):hover, .el-menu-item:not(.is-active):focus {
+  background-color: mix($--color-white, $--menu-background-color, 7%) !important;
+}
+.is-active.is-opened {
+  .el-submenu__title, .el-menu-item:not(.is-active) {
+    background-color: $--menu-hover-background-color !important;
+  }
+}
+.el-menu-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.is-active {
+    background-color: $--color-primary;
+  }
+}
+
+.left-menu {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: $--menu-background-color;
+
+  .el-menu-item .cn-icon, .el-submenu .cn-icon {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 5px;
+    width: 24px;
+    text-align: center;
+    font-size: 18px;
+  }
+  >.el-menu:not(.el-menu--collapse) {
+    width: 240px;
+  }
+  >.el-menu.menu-list {
+    height: calc(100% - 110px);
+    border-right: none;
+    overflow: auto;
+
+    .el-menu-item, .el-submenu__title {
+      height: 46px;
+      line-height: 46px;
+    }
+  }
+
+  /*---滚动条默认显示样式--*/
+  >.el-menu::-webkit-scrollbar-thumb {
+    background-color: rgba(255,255,255,.4);
+    border-radius: 2px;
+    border: none;
+  }
+  /*---鼠标点击滚动条显示样式--*/
+  >.el-menu::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255,255,255,.3);
+    border-radius: 2px;
+  }
+  /*---滚动条大小--*/
+  >.el-menu::-webkit-scrollbar {
+    width: 6px;
+    height: 14px;
+  }
+  /*---顶部logo---*/
+  >.el-menu.header-logo {
+    border-right: none;
+    >.el-menu-item {
+      padding: 13px 0 0 18px !important;
+      height: 50px;
+      border-right: 1px solid #202F3F;
+      background-color: #182534 !important;
+
+      .logo {
+        display: flex;
+
+        img {
+          box-shadow: 0 0 2px 0 rgba(0,0,0,0.50);
+        }
+
+        .system-name {
+          padding-left: 8px;
+          color: white;
+          font-size: 14px;
+          letter-spacing: 0;
+          line-height: 34px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+.el-menu--popup {
+  .el-menu-item {
+    height: 49px;
+    line-height: 49px;
+  }
+}
+.vue-grid-layout{
+  transition: none;
+}
+.vue-grid-item{
+  transition: none;
+}
--- a/src/assets/css/components/components/rightBox/settings/chart-box.scss
+++ b/src/assets/css/components/components/rightBox/settings/chart-box.scss
@@ -0,0 +1,8 @@
+.my-editor {
+  margin-top: 4px;
+  border: 1px solid $--right-box-border-color;
+
+  .prism-editor__textarea {
+    outline: none;
+  }
+}
--- a/src/assets/css/components/components/setting/galaxy-proxy-debug.scss
+++ b/src/assets/css/components/components/setting/galaxy-proxy-debug.scss
@@ -0,0 +1,233 @@
+.proxy-debug__dialog {
+  height: 90vh;
+  overflow: hidden;
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    height: 100%;
+    padding: 0;
+  }
+}
+.debug-wrapper{
+  width: 100%;
+  height:100%;
+  background: #fff;
+  text-align: center;
+  display: grid;
+  grid-template-columns: 25% auto;
+  grid-template-rows: 60px auto;
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+  padding:25px;
+
+  .item{
+    border:1px solid #bbbbbb;
+    color: #000C18;
+    line-height: 60px;
+    font-size: 16px;
+    text-align: left;
+  }
+
+  .item-1 {
+    border: 0;
+  }
+
+  .item-2 {
+    background-color: #ffffff;
+    border: 0;
+    .el-input__inner {
+      border-radius: 0px;
+      border-left: 0px;
+      border-right: 0;
+      border-top: 1px solid #bbbbbb;
+      border-bottom: 1px solid #bbbbbb;
+      color: #606266;
+      height: 60px;
+      line-height: 60px;
+      padding: 0 15px;
+    }
+  }
+
+  .sub-grid-send{
+    width: 100%;
+    height:100%;
+    background: #fff;
+    text-align: center;
+    display: grid;
+    grid-template-columns: 100px auto 80px;
+    grid-template-rows: 60px;
+    grid-row-gap: 0px;
+    grid-column-gap: 0px;
+    padding: 0;
+  }
+
+  .item-3 {
+    background-color: #ffffff;
+    .el-input__inner{
+      border: 0px;
+    }
+    .el-input__inner:hover {
+      border: 0px;
+    }
+    .el-input__inner:focus {
+      border: 1px solid #bbbbbb;
+    }
+
+    .el-table__header, .el-table__body{
+      witdh:100% !important;
+    }
+
+    .el-table__header-wrapper{
+      height: 60px;
+    }
+
+    .el-table__empty-block{
+      height: 0;
+      min-height: 0;
+    }
+
+    .el-table th.is-leaf, .el-table td {
+      border-top: 1px solid #bbbbbb;
+      border-left: 1px solid #bbbbbb;
+      border-right: 0px;
+      padding-top: 3px;
+      padding-bottom: 3px;
+    }
+
+    .el-table{
+      border-bottom: 1px solid #bbbbbb;
+      border-right: 0px solid #bbbbbb;
+      border-left: 0px solid #bbbbbb;
+    }
+
+    .el-table .cell {
+      line-height: 23px;
+      padding-left: 3px;
+      padding-right: 3px;
+      text-align: center;
+    }
+
+    .el-table__body tr:hover >td {
+      background-color: #ffffff;
+    }
+
+    .el-table__body tr:focus >td {
+      background-color: cadetblue;
+    }
+    .debug__params-delete:hover{
+      color:#0091FF;
+      cursor: pointer;
+    }
+  }
+
+  .item-4 {
+    height:100%;
+    overflow:hidden;
+    background-color: #ffffff;
+    display: grid;
+    grid-template-columns: 40% 60%;
+    grid-template-rows: 60px  minmax(100px, 1fr) 60px minmax(100px, 2fr);
+    grid-row-gap: 0px;
+    grid-column-gap: 0px;
+
+    pre {outline: 0px; padding: 0px; margin: 0px;height:360px;line-height: 20px; font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;}
+    .color-pre__style{
+      height: 95%;
+      width: 95%;
+    }
+    .request-header {
+      grid-column-start: 1;
+      grid-column-end: 3;
+      border-bottom:1px solid #bbbbbb;
+      padding-left: 15px;
+    }
+
+    .request-header-content{
+      grid-column-start: 1;
+      grid-column-end: 3;
+      border-bottom:1px solid #bbbbbb;
+      padding-left: 0px;
+      overflow:scroll;
+      height: 100%;
+      width:100%;
+      line-height: 30px;
+    }
+
+    .response-header {
+      border-right:1px solid #bbbbbb;
+      border-bottom:1px solid #bbbbbb;
+      padding-left: 15px;
+    }
+
+    .response-header-content {
+      border-right:1px solid #bbbbbb;
+      padding-left: 0px;
+      height: 100%;
+      width:100%;
+      overflow:scroll;
+      line-height: 30px;
+    }
+
+    .response-body {
+      border-bottom:1px solid #bbbbbb;
+      padding-left: 15px;
+    }
+
+    .response-body-content {
+      padding-left: 5px;
+      height:100%;
+      width:100%;
+      overflow:scroll;
+    }
+  }
+
+  .sub-grid-params{
+    width: 100%;
+    height:100%;
+    background: #fff;
+    text-align: center;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 60px auto;
+    grid-row-gap: 0px;
+    grid-column-gap: 0px;
+    padding: 0;
+    justify-items: center;
+
+  }
+
+  .sub-grid-params-add{
+    width: 96%;
+    height:100%;
+    background: #fff;
+    text-align: left;
+    display: grid;
+    grid-template-columns: 70% 30%;
+    grid-template-rows:100%;
+    grid-row-gap: 0;
+    grid-column-gap: 0;
+    padding: 0;
+  }
+
+  .el-select .el-input .el-input__inner{
+    height: 60px;
+    border-radius: 0;
+    border:1px solid #bbbbbb;
+  }
+  .el-select .el-input .el-select__caret {
+    line-height:60px;
+    font-weight: bolder;
+    color:black;
+  }
+
+  .el-button {
+    border-color: #bbbbbb;
+  }
+
+  .sub-grid-params-add  .el-button {
+    height: 38px;
+    margin-top: 11px;
+    margin-right: 10px;
+  }
+}
--- a/src/assets/css/components/components/table/common.scss
+++ b/src/assets/css/components/components/table/common.scss
@@ -0,0 +1,84 @@
+.pop-title{
+  margin-top: 7px;
+}
+.pop-custom {
+  padding: 0 12px 12px 12px;
+  border: 1px solid #EBEEF5;
+  position: absolute;
+  top: 55px;
+  right: 20px;
+  width: 200px;
+  color: #606266;
+  background: #fff;
+  border-radius: 4px;
+  z-index: 999999;
+  box-shadow: 0 0 10px #CCC;
+  box-sizing: border-box;
+
+  .el-button--mini{
+    padding: 5px 7px;
+  }
+}
+.pop-custom-explore {
+  top: 33px;
+}
+.relative-position .pop-custom {
+  top: 33px;
+}
+.custom-labels {
+  margin-top: 12px;
+  width: 100%;
+  height: 300px;
+}
+.custom-labels i {
+  color: #04b330;
+  font-size: 14px;
+  position: absolute;
+  left: 5px;
+  top: 6px;
+}
+.custom-label {
+  padding: 2px 0 2px 25px;
+  position: relative;
+  cursor: default;
+  font-size: 14px;
+}
+.custom-label:hover{
+  color: #cccccc;
+  background-color: #DCDFE6;
+}
+.custom-title{
+  padding: 2px 0 2px 2px;
+}
+.custom-label-disabled {
+  cursor: not-allowed;
+  background: #f1f3f4;
+  opacity: 0.7;
+}
+.custom-bottom-btns {
+  margin-top: 7px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.unshow {
+  display: none;
+}
+
+.list-page .top-tools .top-tool-btn {
+  height: 33px;
+  width: 36px;
+  border: 1px solid #DEDEDE;
+  outline: none;
+  border-radius: 2px;
+  background-color: #F9F9F9;
+  transition: background-color linear .1s;
+}
+
+.list-page {
+  .el-input--small .el-input__inner {
+    height: 32.4px;
+    line-height: 32px;
+    border-radius: 0px;
+  }
+}
--- a/src/assets/css/components/components/table/settings/galaxy-proxy-table.scss
+++ b/src/assets/css/components/components/table/settings/galaxy-proxy-table.scss
@@ -0,0 +1,22 @@
+.galaxy-proxy-table {
+  .js-code-highlight {
+    height: 250px;
+
+    .highlight-box {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+
+      .highlight-box__copy-btn {
+        position: absolute;
+        right: 5px;
+        top: 5px;
+        cursor: pointer;
+      }
+    }
+  }
+  pre code.hljs {
+    overflow-x: visible;
+  }
+}
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -0,0 +1,46 @@
+@import './components/advancedSearch/advanced-search2';
+@import './components/advancedSearch/codemirror';
+// @import './components/charts/panel';
+@import './components/common/TimeRange/date-time-range';
+@import './components/common/TimeRange/time-refresh';
+@import './components/common/pagination';
+// @import './components/entities/entities';
+@import './components/layout/layout';
+@import 'components/rightBox/settings/chart-box';
+@import 'components/setting/galaxy-proxy-debug';
+@import 'components/table/settings/galaxy-proxy-table';
+@import './components/table/common';
+@import './views/charts/chart';
+@import 'views/entityExplorer/entity-explorer';
+@import 'views/entityExplorer/search/explorer-search';
+@import 'views/entityExplorer/entity-filter';
+@import 'views/entityExplorer/entity-detail';
+@import 'views/entityExplorer/entityList/entity-list';
+@import './views/entityExplorer/entityList/card';
+@import './views/entityExplorer/entityList/row';
+@import 'views/entityExplorer/entityList/detail-overview';
+@import './views/detections/detections';
+@import './views/detections/detection-filter';
+@import './views/detections/detection-list/detection-list';
+@import './views/detections/detection-list/row';
+@import './views/detections/detection-overview';
+@import './views/charts/panel';
+@import 'views/charts/chartIpOpenPortBar';
+@import './views/charts/chartTable';
+@import './views/charts/chartSingleValue';
+@import './views/charts/chartCryptocurrencyEventList';
+@import './views/charts/chartAppBasicInfo';
+@import './views/charts/chartDomainDnsRecord';
+@import './views/charts/chartDomainWhois';
+@import './views/charts/chartEchartWithTable';
+@import './views/charts/ipBasicInfo';
+@import './views/charts/chartEchartIpHostedDomain';
+@import './views/charts/chartEchartAppRelateDomain';
+@import './views/charts/ChartOneSituationStatistics';
+@import './views/charts/ChartTwoSituationStatistics';
+@import './views/charts/chartAlarmInfo';
+@import './views/chartHeader';
+@import './views/charts/chartMap';
+
+
+//@import '../chart';
--- a/src/assets/css/components/views/chartHeader.scss
+++ b/src/assets/css/components/views/chartHeader.scss
@@ -0,0 +1,42 @@
+.cn-chart-header-button{
+    display: flex;
+    .cn-chart-header-button-all{
+        border: 1px solid #0091FF;
+        color: #0091FF;
+        background-color: #FFFFFF;
+    }
+    .cn-chart-header-button-critical{
+        border: 1px solid #0091FF;
+        color: #0091FF;
+        background-color: #FFFFFF;
+
+    }
+    .cn-chart-header-button-high{
+        border: 1px solid #0091FF;
+        background-color: #FFFFFF;
+        color: #0091FF;
+    }
+    .cn-chart-header-button-low{
+        border: 1px solid #0091FF;
+        background-color: #FFFFFF;
+        color: #0091FF;
+    }
+    .cn-chart-header-button-info{
+        border: 1px solid #0091FF;
+        background-color: #FFFFFF;
+        color: #0091FF;
+    }
+    .cn-chart-header-button-medium{
+        border: 1px solid #0091FF;
+        background-color: #FFFFFF;
+        color: #0091FF;
+    }
+    .el-button--default{
+        height: 24px;
+        border-radius: 2px 0 0 2px;
+        min-height:24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
--- a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
+++ b/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
@@ -0,0 +1,28 @@
+.chart-one-situation-statistics{
+    padding-top: 22px;
+    .situation-statistics-main {
+        display: flex;
+        align-items: center;
+        margin-left: 33px;
+        .situation-statistics-main-left{
+            display: block;
+            width: 76px;
+            height: 76px;
+            .el-progress__text span{
+                font-size: 16px;
+            }
+        }
+        .situation-statistics-main-right{
+            margin-left: 22px;
+            :first-child{
+                font-size: 18px;
+                color: #333;
+            }
+            :last-child{
+                margin-top: 5px;
+                font-size: 14px;
+                color: #666666;
+            }
+        }
+      }
+}
--- a/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
+++ b/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
@@ -0,0 +1,28 @@
+
+.chart-two-situation-statistics{
+    padding-top: 22px;
+    .situation-statistics-top {
+        display: flex;
+        align-items: center;
+        margin-left: 33px;
+        padding-top: 22px;
+        .situation-statistics-main-left{
+            display: block;
+            .el-progress__text span{
+                font-size: 16px;
+            }
+        }
+        .situation-statistics-main-right{
+            margin-left: 22px;
+            :first-child{
+                font-size: 18px;
+                color: #333;
+            }
+            :last-child{
+                margin-top: 5px;
+                font-size: 14px;
+                color: #666666;
+            }
+        }
+      }
+}
--- a/src/assets/css/components/views/charts/chart.scss
+++ b/src/assets/css/components/views/charts/chart.scss
@@ -0,0 +1,405 @@
+.ip-detail__open-port {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  .open-port__table {
+    flex: 1;
+    display: table;
+    height: 100%;
+    border-right: 1px solid $--right-box-border-color;
+
+    .open-port__table-row {
+      display: table-row;
+      font-size: 14px;
+      color: #333333;
+    }
+    .open-port__table-row.open-port__table-row--header {
+      padding: 13px 30px 0;
+      height: 40px;
+      color: #6B717B;
+    }
+    .open-port__table-cell {
+      display: table-cell;
+      vertical-align: middle;
+      padding: 13px 30px;
+    }
+  }
+
+  .open-port__chart {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 30%;
+    height: 100%;
+
+    .open-port__chart-title {
+      padding-left: 20px;
+      line-height: 50px;
+      flex: 0 0 50px;
+    }
+    .open-port__chart-body {
+      flex: 1;
+    }
+  }
+}
+.ip-detail__hosted-domain, .app-detail__related-domain {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+
+  .hosted-domain__list, .related-domain__list {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 25%;
+    overflow: auto;
+    padding-bottom: 20px;
+    border-bottom: 1px solid $--right-box-border-color;
+
+    .hosted-domain__list-title, .related-domain__list-title {
+      padding: 13px 30px 0;
+      height: 40px;
+      color: #6B717B;
+    }
+    .hosted-domain__list-body, .related-domain__list-body {
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 40px);
+      overflow: hidden auto;
+    }
+    .hosted-domain__list-row, .related-domain__list-row {
+      padding: 5px 30px;
+      color: #3976CB;
+      i {
+        color: #B8C1D1;
+      }
+    }
+  }
+  .hosted-domain__chart, .related-domain__chart {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    &>div {
+      flex: 0 0 50%;
+      display: flex;
+      flex-direction: column;
+      .hosted-domain__chart-title {
+        padding-left: 20px;
+        line-height: 50px;
+        flex: 0 0 50px;
+      }
+      .chart-drawing {
+        flex: 1;
+      }
+    }
+  }
+}
+.domain-detail-list {
+  display: table;
+  width: 100%;
+
+  .domain-detail-list__row {
+    display: table-row;
+
+    &:last-of-type {
+      .domain-detail-list__label, .domain-detail-list__content {
+        border-bottom: none;
+      }
+    }
+    .domain-detail-list__label {
+      display: table-cell;
+      padding: 13px 30px;
+      border-bottom: 1px solid $--content-right-background-color;
+      min-width: 170px;
+      color: #6B717B;
+    }
+    .domain-detail-list__content {
+      display: table-cell;
+      padding: 13px 0 ;
+      border-bottom: 1px solid $--content-right-background-color;
+      color: #3976CB;
+    }
+  }
+}
+.crypto-eventList__record {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  .record__table {
+    display: table;
+    height: 100%;
+    width: 100%;
+
+    .record__table-row {
+      display: table-row;
+      font-size: 14px;
+      color: #333333;
+    }
+    .record__table-row.record__table-row--header {
+      padding: 13px 30px 0;
+      height: 40px;
+      color: #6B717B;
+    }
+    .record__table-cell {
+      display: table-cell;
+      vertical-align: middle;
+      padding-left: 10px;
+      padding-top: 15px;
+      padding-bottom: 0;
+
+      .record_second{
+        color:#7e8088;
+        font-size:12px;
+      }
+
+      .circle-red {
+        color: #EC7F66;
+        font-size: 28px;
+      }
+
+    }
+    .record__table-cell:first-of-type {
+      padding-left:30px;
+    }
+  }
+}
+
+.entity-detail__dns-record {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  .dns-record__table {
+    display: table;
+    height: 100%;
+    width: 100%;
+
+    .dns-record__table-row {
+      display: table-row;
+      font-size: 14px;
+      color: #333333;
+    }
+    .dns-record__table-row.dns-record__table-row--header {
+      padding: 13px 30px 0;
+      height: 40px;
+      color: #6B717B;
+    }
+    .dns-record__table-cell {
+      display: table-cell;
+      border-bottom: 1px solid $--content-right-background-color;
+      vertical-align: middle;
+      padding: 13px 30px;
+    }
+    .dns-record__table-row:not(.dns-record__table-row--header) .dns-record__table-cell:last-of-type {
+      color: #3976CB;
+    }
+  }
+}
+.app-detail__related-domain {
+  flex-direction: row;
+  .related-domain__list {
+    border-bottom: none;
+  }
+  .related-domain__chart {
+    flex-direction: row;
+    border-left: 1px solid $--right-box-border-color;
+    padding: 3vh 5vw;
+    &>div {
+      flex: 0 0 50%;
+      display: flex;
+      flex-direction: column;
+      .related-domain__chart-title {
+        padding-left: 20px;
+        line-height: 50px;
+        flex: 0 0 50px;
+        color: #3976CB;
+      }
+      .chart-drawing {
+        flex: 1;
+      }
+    }
+  }
+}
+.sankey-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .sankey__label {
+    position: absolute;
+    color: #333;
+    bottom: 50px;
+    font-weight: bold;
+    transform: translateX(-50%);
+  }
+}
+.sankey__tooltip {
+  width: 270px;
+  height: 170px;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+
+  .sankey__tooltip-row {
+    display: flex;
+    padding: 2px 0;
+
+    .sankey__row-label {
+      flex: 0 0 98px;
+      color: #666;
+    }
+    .sankey__row-value {
+      flex: 1;
+      color: #333;
+    }
+  }
+
+  .sankey__tooltip-table {
+    padding: 2px 0 2px 22px;
+    display: table;
+
+    .sankey__table-row {
+      display: table-row;
+      padding: 1px 0 4px 0;
+
+      .sankey__table-cell {
+        display: table-cell;
+        font-size: 12px;
+        color: #333;
+      }
+      .sankey__table-cell:first-of-type {
+        color: #999;
+      }
+    }
+  }
+}
+.map-tooltip {
+  display: flex;
+  flex-direction: column;
+
+  .map-tooltip__title {
+    color: #333;
+    font-size: 16px;
+  }
+  .map-tooltip__content {
+    display: flex;
+    justify-content: space-between;
+    color: #666;
+    font-size: 14px;
+
+    span {
+      line-height: 35px;
+    }
+    span:first-of-type {
+      padding-right: 20px;
+    }
+  }
+}
+
+.position-icon {
+  font-size: 24px;
+  color: #EC7F66;
+}
+
+.circle1{
+  position: relative;
+  width:28px;
+  height:28px;
+  line-height: 28px;
+  border:1px solid #dd674d;
+  background:#FFFFFF;
+  border-radius:50%;
+  -moz-border-radius:50%;
+  margin:auto;
+  z-index: 1;
+}
+.circle1::after {
+  position: absolute;
+  content: '';
+  background: #dd674d;
+  bottom: 3px;
+  right: 3px;
+  left: 3px;
+  top: 3px;
+  z-index: 5;
+  border-radius: 50%;
+}
+
+.arrow {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
+  background-color: #aeaeae;
+  &.arrow-hor {
+    width: 24px;
+    height: 2px;
+    margin-bottom: 3px;
+  }
+  &.arrow-hor.right::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+    right: -8px;
+    border: 5px solid transparent;
+    border-left: 5px solid #aeaeae;
+  }
+}
+.nz-chart-tooltip{
+  border-color: transparent !important;
+}
+.nz-chart-tooltip .cn-chart-tooltip-box{
+  display: flex;
+  >span:first-child{
+    margin-top: 8px;
+  }
+  .cn-chart-tooltip-content{
+    flex: 1;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    font-size:14px;
+    color:#666;
+    font-weight:400;
+    margin-left:2px ;
+  }
+  .cn-chart-tooltip-value{
+    float:right;
+    margin-left:20px;
+    font-size:14px;
+    color:#666;
+    font-weight:900;
+  }
+}
+.cn-chart__single-value {
+  .chart__loading {
+    top: 0;
+    height: 100%;
+  }
+}
+.chart__loading {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: #fefefe;
+  z-index: 1;
+  opacity: .8;
+
+  i {
+    position: absolute;
+    left: calc(50% - 15px);
+    top: calc(50% - 15px);
+    font-size: 30px;
+    color: #aaa;
+  }
+}
+
+.map-back {
+  position: absolute;
+  right: 12px;
+  top: 15px;
+  color: $--color-primary;
+  cursor: pointer;
+  z-index: 2;
+}
--- a/src/assets/css/components/views/charts/chartAlarmInfo.scss
+++ b/src/assets/css/components/views/charts/chartAlarmInfo.scss
@@ -0,0 +1,98 @@
+.cn-chart-alarm-info {
+    width: 100%;
+    height: 100%;
+    margin-left: 30px;
+    position: relative;
+    .cn-chart-alarm-info-mainContent{
+        height: calc(100% - 40px) ;
+        width: 100%;
+        .cn-chart-alarm-content {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            width: 100%;
+            height: calc(100% / 9);
+            border-bottom: 1px solid #E7EAED ;
+            .cn-alarm-info-main {
+                display: flex;
+                .cn-alarm-info-main-left{
+                    position: relative;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    .cn-chart-alarm-info-icon {
+                        width: 30px;
+                        height: 30px;
+                        border-radius: 50%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                    .cn-icon-alert{
+                        width: 12px;
+                        position: absolute;
+                        top: 13px;
+                        left: 7px;
+                    }
+                }
+                .cn-alarm-info-textContent{
+                    margin-left: 17px;
+                    .cn-alarm-info-main-title {
+                        font-size: 19px;
+                        line-height: 19px;
+                    }
+                    .cn-alarm-info-bottom {
+                        display: flex;
+                        font-size: 14px;
+                        line-height: 14px;
+                        text-align: center;
+                        margin-top: 10px;
+                        
+        
+                        .cn-alarm-info-bottom-middle {
+                            display: flex;
+                            margin-left: 20px;
+                            height: 14px;
+                            .cn-alarm-info-bottom-time {
+                                color: #999999;
+                                line-height: 14px;
+                                font-size: 12px;
+                            }
+                        }
+        
+                        .cn-alarm-info-bottom-right {
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            margin-left: 17px;
+                            .cn-alarm-info-bottom-time {
+                                color: #999999;
+                            }
+                        }
+        
+                        .cn-alarm-info-bottom-type {
+                            width: auto;
+                            height: 16px;
+                            font-size: 12px;
+                            border: 1px solid;
+                            font-weight: 400;
+                        }
+        
+                        .cn-alarm-info-bottom-circle {
+                            display: inline-block;
+                            width: 5px;
+                            height: 5px;
+                            border-radius: 50%;
+                        }
+                    }
+                    
+                }
+    
+            }
+        }
+    }
+    .cn-chart-alarm-info-pagination{
+        height: 40px;
+        width: 100%;
+    }
+}
--- a/src/assets/css/components/views/charts/chartAppBasicInfo.scss
+++ b/src/assets/css/components/views/charts/chartAppBasicInfo.scss
@@ -0,0 +1,103 @@
+.cn-chart__app-basic {
+  display: flex;
+  flex-direction: column;
+  .cn-chart__body {
+    flex: auto;
+    display: flex;
+    .el-descriptions {
+      padding-top: 30px;
+    }
+    &>.el-descriptions {
+      flex: 0 0 350px;
+      padding: 30px 36px;
+    }
+    .chart-location {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      padding: 0 20px 20px 0;
+    }
+    .el-descriptions__content {
+      color: #3976CB;
+    }
+    .cn-chart__body-single {
+      display: flex;
+      .cn-chart__body-single-table {
+        display: flex;
+        width: 250px;
+        align-items: center;
+      }
+      .cn-chart__body-single-table:nth-of-type(3) {
+        margin-right: 126px;
+      }
+      .single-value-icon__box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 40%;
+      }
+      .single-value__icon {
+        display: flex;
+        justify-content: center;
+        width: 72px;
+        height: 72px;
+        background-color: $--chart-single-value-icon-background-color;
+        border-radius: 50%;
+
+        i {
+          display: flex;
+          align-items: center;
+          font-size: 28px;
+          color: $--color-primary;
+        }
+      }
+      .single-value-color-g.single-value__icon {
+        background-color: #E2FCEF;
+        i {
+          color: #41D389;
+        }
+      }
+      .single-value-color-y.single-value__icon {
+        background-color: #FFF0DA;
+        i {
+          color: #FA901C;
+        }
+      }
+      .single-value__content {
+        display: flex;
+        flex-direction: column;
+        max-width: 60%;
+        padding-left: 10px;
+
+        div:nth-of-type(1) {
+          margin-bottom: 10px;
+        }
+
+        .content__data {
+          padding-bottom: 7%;
+          font-size: 24px;
+          color: #333333;
+          font-weight: bold;
+        }
+        .content__title {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          font-size: 16px;
+          color: #666666;
+        }
+        &.single-value__content--with-chart {
+          .content__title {
+            border-bottom: 1px solid $--content-right-background-color;
+          }
+        }
+        .single-value__unit {
+          font-weight: normal;
+          padding-left: 10px;
+          color: #666;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
+++ b/src/assets/css/components/views/charts/chartCryptocurrencyEventList.scss
@@ -0,0 +1,65 @@
+.cn-chart__table.eventList {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  .cn-chart__body {
+    flex: auto;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    .el-descriptions {
+      padding-top: 30px;
+    }
+    &>.el-descriptions {
+      flex: 0 0 350px;
+      padding: 30px 36px;
+    }
+    .chart-location {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      padding: 0 20px 20px 0;
+    }
+    .el-descriptions__content {
+      color: #3976CB;
+    }
+    .crypto-eventList__record {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      .record__table {
+        display: table;
+        height: 100%;
+        width: 100%;
+
+        .record__table-row {
+          display: table-row;
+          font-size: 14px;
+          color: #333333;
+        }
+        .record__table-row.record__table-row--header {
+          padding: 13px 30px 0;
+          height: 40px;
+          color: #6B717B;
+        }
+        .record__table-cell {
+          display: table-cell;
+          vertical-align: middle;
+          padding: 15px 10px;
+          .record_second{
+            color:#7e8088;
+            font-size:12px;
+          }
+          .circle-red {
+            color: #EC7F66;
+            font-size: 28px;
+          }
+        }
+        .record__table-cell:first-of-type {
+          padding-left:30px;
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
+++ b/src/assets/css/components/views/charts/chartDomainDnsRecord.scss
@@ -0,0 +1,29 @@
+.cn-chart__dns-record {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  .cn-chart__body {
+    flex: auto;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    .el-descriptions {
+      padding-top: 30px;
+    }
+    &>.el-descriptions {
+      flex: 0 0 350px;
+      padding: 30px 36px;
+    }
+    .chart-location {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      padding: 0 20px 20px 0;
+    }
+    .el-descriptions__content {
+      color: #3976CB;
+    }
+  }
+}
+
--- a/src/assets/css/components/views/charts/chartDomainWhois.scss
+++ b/src/assets/css/components/views/charts/chartDomainWhois.scss
@@ -0,0 +1,4 @@
+.cn-chart__whois {
+  overflow: auto;
+}
+
--- a/src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss
+++ b/src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss
@@ -0,0 +1,73 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout > .vue-grid-item {
+      .cn-chart {
+        .app-detail__related-domain {
+          display: flex;
+          flex-direction: row;
+          height: 100%;
+          width: 100%;
+          .related-domain__list {
+            display: flex;
+            flex-direction: column;
+            flex: 0 0 25%;
+            overflow: auto;
+            padding-bottom: 20px;
+            border-bottom: 1px solid $--right-box-border-color;
+
+            .related-domain__list-title {
+              padding: 13px 30px 0;
+              height: 40px;
+              color: #6B717B;
+            }
+
+            .related-domain__list-body {
+              display: flex;
+              flex-direction: column;
+              height: calc(100% - 40px);
+              overflow: hidden auto;
+            }
+
+            .related-domain__list-row {
+              padding: 5px 30px;
+              color: #3976CB;
+
+              i {
+                color: #B8C1D1;
+              }
+            }
+          }
+
+          .related-domain__chart {
+            display: flex;
+            flex-direction: row;
+            flex: 1;
+
+            & > div {
+              flex: 0 0 50%;
+              display: flex;
+              flex-direction: column;
+
+              .related-domain__chart-title {
+                padding-left: 20px;
+                line-height: 50px;
+                flex: 0 0 50px;
+              }
+
+              .chart-drawing {
+                flex: 1;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header {
+  border-bottom: 1px solid $--right-box-border-color;
+}
+.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header.is-group-collapse {
+  border-bottom: none;
+}
--- a/src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss
+++ b/src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss
@@ -0,0 +1,67 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout > .vue-grid-item {
+      .cn-chart {
+        .ip-detail__hosted-domain {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          width: 100%;
+          .hosted-domain__list {
+            display: flex;
+            flex-direction: column;
+            flex: 0 0 25%;
+            overflow: auto;
+            padding-bottom: 20px;
+            border-bottom: 1px solid $--right-box-border-color;
+
+            .hosted-domain__list-title {
+              padding: 13px 30px 0;
+              height: 40px;
+              color: #6B717B;
+            }
+
+            .hosted-domain__list-body {
+              display: flex;
+              flex-direction: column;
+              height: calc(100% - 40px);
+              overflow: hidden auto;
+            }
+
+            .hosted-domain__list-row {
+              padding: 5px 30px;
+              color: #3976CB;
+
+              i {
+                color: #B8C1D1;
+              }
+            }
+          }
+
+          .hosted-domain__chart {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+
+            & > div {
+              flex: 0 0 50%;
+              display: flex;
+              flex-direction: column;
+
+              .hosted-domain__chart-title {
+                padding-left: 20px;
+                line-height: 50px;
+                flex: 0 0 50px;
+              }
+
+              .chart-drawing {
+                flex: 1;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts/chartEchartWithTable.scss
+++ b/src/assets/css/components/views/charts/chartEchartWithTable.scss
@@ -0,0 +1,78 @@
+.cn-panel2 {
+  position: relative;
+  .chart-list {
+    .vue-grid-layout>.vue-grid-item {
+      .cn-chart {
+        height: 100% !important;
+        .cn-chart__echarts {
+          display: flex;
+          flex-direction: column;
+          height:100%;
+          .cn-chart__body {
+            flex: auto;
+            display: flex;
+            overflow: hidden auto;
+
+            .el-table {
+              padding: 0 10px;
+
+              &:before {
+                height: 0;
+              }
+              thead {
+                color: #333;
+              }
+              th.is-leaf, td {
+                border-bottom: none;
+              }
+              th {
+                padding-bottom: 5px;
+              }
+              td {
+                padding: 4px 0;
+                color: #333;
+              }
+            }
+
+            /*.chart-drawing{
+              height: calc(100% - 36px) !important;
+            }*/
+          }
+          .cn-chart__body.pie-with-table {
+            flex-basis: 40%;
+          }
+          .cn-chart__footer.pie-with-table {
+            flex-basis: 60%;
+            padding: 10px 30px 30px;
+          }
+        }
+        .pie-table {
+          font-size: 14px;
+          color: #333333;
+          font-weight: 500;
+
+          .el-table__header-wrapper {
+            .cell {
+              color: #333;
+            }
+          }
+          .el-table__expanded-cell[class*=cell] {
+            padding: 0;
+          }
+
+          .expand-table .el-table__body .el-table__row:last-of-type td {
+            border: none;
+          }
+          .expand-table {
+            font-weight: 400;
+            color: #606266;
+
+            .el-table__body-wrapper {
+              height: auto !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts/chartIpOpenPortBar.scss
+++ b/src/assets/css/components/views/charts/chartIpOpenPortBar.scss
@@ -0,0 +1,46 @@
+.chart-ip-open-port-bar {
+    display: flex;
+    height: 100%;
+    .el-table--border {
+        border: none;
+        .el-table__body-wrapper {
+            overflow-y: auto;
+            height: 261px !important;
+            .el-table__body {
+                tr td:nth-of-type(1) {
+                    padding-left: 28px;
+                }
+            }
+        }
+        .el-table__header-wrapper {
+            .has-gutter {
+                tr th:nth-of-type(1) {
+                    padding-left: 28px;
+                }
+            }
+        }
+    }
+    .el-table--border td{
+        border: none !important;
+    }
+    .el-table--border th{
+        border-right: none !important;
+    }
+    .chart-box{
+        width: 30%;
+        height: 100%;
+        >.title{
+            height: 36px;
+            line-height: 36px;
+            box-sizing: border-box;
+            padding: 0 10px;
+            color: #909399;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        .chart-drawing{
+            height: calc(100% - 36px) !important;
+        }
+    }
+
+}
--- a/src/assets/css/components/views/charts/chartMap.scss
+++ b/src/assets/css/components/views/charts/chartMap.scss
@@ -0,0 +1,60 @@
+.cn-chart__map {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .map-drawing {
+    flex: 1;
+  }
+  .map-chart__legends {
+    flex-basis: 116px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0 30px;
+
+    .map-chart__legend {
+      padding-bottom: 5px;
+      flex-grow: 0;
+      flex-shrink: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      border: 1px solid #E0E6EF;
+      border-left-color: transparent;
+      border-right-color: transparent;;
+      cursor: pointer;
+
+      &:first-of-type {
+        border-left-color: #E0E6EF;
+      }
+      &:last-of-type {
+        border-right-color: #E0E6EF;
+      }
+      &.map-chart__legend--active {
+        border-color: #59ABFF;
+
+        .legend__value {
+          color: #1890FF;
+        }
+      }
+      .legend__circle-marker {
+        flex: 0 0 12px;
+        margin: 12px 0 8px 0;
+        width: 12px;
+        border-radius: 50%;
+      }
+      .legend__value {
+        font-size: 18px;
+        font-weight: bold;
+        color: #333333;
+      }
+      .legend__name {
+        padding: 0 10px;
+        color: #666666;
+        font-size: 12px;
+        text-align: center;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ b/src/assets/css/components/views/charts/chartSingleValue.scss
@@ -0,0 +1,228 @@
+.cn-chart__single-value {
+  &.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
+    width: unset;
+    flex: 0 0 240px;
+    flex-wrap: wrap;
+
+    .single-value__icon {
+      width: 38px;
+      height: 38px;
+      i {
+        font-size: 15px;
+      }
+    }
+    .single-value__content {
+      .content__data {
+        font-size: 14px;
+        color: #333;
+        .single-value__unit {
+          font-size: 14px;
+          color: #333;
+        }
+      }
+      .content__title {
+        font-size: 12px;
+      }
+    }
+  }
+  &.cn-chart__single-value--icon-left {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    .single-value-icon__box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 40%;
+    }
+    .single-value__icon {
+      display: flex;
+      justify-content: center;
+      width: 72px;
+      height: 72px;
+      background-color: $--chart-single-value-icon-background-color;
+      border-radius: 50%;
+      i {
+        display: flex;
+        align-items: center;
+        font-size: 28px;
+        color: $--color-primary;
+      }
+    }
+    .single-value__content {
+      display: flex;
+      flex-direction: column;
+      max-width: 60%;
+      padding-right: 10px;
+      .content__data {
+        padding-bottom: 7%;
+        font-size: 24px;
+        color: #333333;
+        font-weight: bold;
+      }
+      .content__title {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 16px;
+        color: #666666;
+      }
+      &.single-value__content--with-chart {
+        .content__title {
+          border-bottom: 1px solid $--content-right-background-color;
+        }
+      }
+      .single-value__unit {
+        font-weight: normal;
+        padding-left: 10px;
+        color: #666;
+        font-size: 20px;
+      }
+    }
+  }
+  &.cn-chart__single-value--icon-right {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-around;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    .single-value-icon__box {
+      flex: 0 0 80px;
+    }
+    .single-value__icon {
+      background-color: $--chart-single-value-icon-background-color;
+      border-radius: 50%;
+      position: relative;
+      width: 56px;
+      height: 56px;
+      i {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        font-size: 24px;
+        color: $--color-primary;
+      }
+    }
+    .single-value__content {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      padding: 0 10px;
+      .content__title {
+        display: flex;
+        align-items: center;
+        height: 50%;
+        font-size: 16px;
+        color: #666666;
+      }
+      .content__data {
+        display: flex;
+        padding-top: 5%;
+        height: 50%;
+        flex: auto;
+        font-size: 24px;
+        color: #333333;
+        font-weight: bold;
+      }
+    }
+  }
+  &.cn-chart__single-value--icon-right--color {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-around;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    .single-value__content {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      align-items: center;
+
+      .single-value-icon__box {
+        padding-right: 30px;
+
+        .single-value__icon {
+          border-radius: 50%;
+          position: relative;
+          margin-right: 7.5%;
+          margin-top: 30%;
+
+          .cn-icon-svg {
+            width: 50px;
+            height: 50px;
+            vertical-align: middle;
+            fill: currentColor;
+            overflow: hidden;
+          }
+          i {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+            font-size: 24px;
+          }
+        }
+      }
+      .single-value__data{
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        padding-left: 20px;
+        .content__title {
+          display: flex;
+          align-items: end;
+          height: 50%;
+          font-size: 16px;
+          color: #666666;
+          padding-bottom: 5px;
+        }
+        .content__data {
+          display: flex;
+          padding-top: 5%;
+          height: 50%;
+          flex: auto;
+          font-size: 24px;
+          color: #333333;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  &.cn-chart__single-value--chart {
+    display: flex;
+    padding: 13px 20px;
+    height: 100%;
+    width: 100%;
+    .single-value__content {
+      display: flex;
+      height: 100%;
+      width: 100%;
+      flex-direction: column;
+      .content__title {
+        display: flex;
+        align-items: center;
+        height: 30%;
+        font-size: 16px;
+        color: #666666;
+      }
+      .content__data {
+        display: flex;
+        align-items: center;
+        height: 25%;
+        font-size: 24px;
+        color: #333333;
+        font-weight: bold;
+      }
+      .content__chart {
+        flex: auto
+      }
+    }
+  }
+}
+
--- a/src/assets/css/components/views/charts/chartTable.scss
+++ b/src/assets/css/components/views/charts/chartTable.scss
@@ -0,0 +1,71 @@
+.active-ip.cn-chart__table {
+  height: calc(100% - 47px) !important;
+}
+.cn-chart__table{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .cn-chart__body {
+    flex: auto;
+    overflow-y: auto;
+    height: 100%;
+    width: 100%;
+
+    .el-table {
+      padding: 0 10px;
+      .el-table__body-wrapper.is-scrolling-none {
+        height: 100%;
+        overflow-y: auto;
+      }
+
+      &:before {
+        height: 0;
+      }
+      thead {
+        color: #333;
+      }
+      th.is-leaf, td {
+        border-bottom: none;
+      }
+      th {
+        padding-bottom: 5px;
+      }
+      td {
+        padding: 4px 0;
+        color: #333;
+      }
+    }
+    .active-ip__icon {
+      overflow: hidden;
+      position: absolute;
+      top: 8px;
+      left: 6px;
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
+      width: 23px;
+      height: 23px;
+      border-radius: 50%;
+      background: #e8fbf9;
+      border: 2px solid #e8fbf9;
+    }
+    .ip-green {
+      color: #23BF9A;
+    }
+    .active-ip__content {
+      position: absolute;
+      top: 7px;
+      left: 35px;
+      overflow: hidden;
+    }
+  }
+  .chart-table-pagination.el-pagination {
+    padding: 12px 0 9px 0;
+    text-align: center;
+
+    .el-pagination__jump {
+      margin-left: 10px;
+    }
+  }
+}
--- a/src/assets/css/components/views/charts/ipBasicInfo.scss
+++ b/src/assets/css/components/views/charts/ipBasicInfo.scss
@@ -0,0 +1,20 @@
+.cn-chart__ip-basic {
+  display: flex;
+  .el-descriptions {
+    padding-top: 30px;
+  }
+  &>.el-descriptions {
+    flex: 0 0 350px;
+    padding: 30px 36px;
+  }
+  .chart-location {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: 0 20px 20px 0;
+  }
+  .el-descriptions__content {
+    color: #3976CB;
+  }
+}
+
--- a/src/assets/css/components/views/charts/panel.scss
+++ b/src/assets/css/components/views/charts/panel.scss
@@ -0,0 +1,593 @@
+.cn-panel2 {
+  position: relative;
+  .panel__time {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 1;
+    display: flex;
+    &>div {
+      margin-left: 10px;
+    }
+  }
+  .chart-list {
+    &>.vue-grid-layout>.vue-grid-item {
+      &>.panel-chart {
+        border: 1px solid $--chart-box-border-color;
+        background-color: #FFFFFF;
+        box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+        height: 100%;
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        &.panel-chart--title-chart {
+          border: none;
+          background-color: transparent;
+          box-shadow: none;
+        }
+        .chart-header {
+          display: flex;
+          justify-content:space-between;
+          align-items:center;
+          padding: 10px 20px 10px 18px;
+          height: 47px;
+
+          font-size: 16px;
+          color: $--color-text-primary;
+          transition: all 0.2s;
+
+          &.chart-header--float {
+            position: absolute;
+            width: 100%;
+            z-index: 100;
+            box-sizing: border-box;
+            height: 10px;
+            opacity: 0;
+            transition: all linear .2s;
+
+            &:hover {
+              height: 47px;
+              opacity: 1;
+            }
+          }
+          &.chart-header--title-chart {
+            font-size: 20px;
+            color: #333;
+            padding: 0;
+            border-bottom: none;
+          }
+          .chart-header__title {
+            max-width: calc(100% - 100px);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+
+            &.chart-header__title--block {
+              color: #1890FF;
+              font-weight: bold;
+              font-size: 16px;
+            }
+
+            .arrow-icon {
+              display: inline-block;
+              transform: rotate(0);
+              transition: all linear .2s;
+
+              &.reg-down {
+                transform: rotate(90deg);
+              }
+
+              i {
+                font-size: 12px;
+                color: #999;
+              }
+            }
+          }
+          .chart-header__tools {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .header__operation-btn {
+              margin-left: 12px;
+              cursor: pointer;
+              color: #999;
+            }
+            .chart-header__tool {
+              margin-left: 20px;
+              cursor: pointer;
+
+              .tool__icon {
+                font-size: 14px;
+                color: $--color-text-primary;
+              }
+              .cn-chart-dropdown {
+                position: absolute;
+                top: 44px;
+                right: 0;
+                left: unset;
+                transform-origin: center top;
+                z-index: 1000;
+                width: 180px;
+                li {
+                  padding-left: 15px !important;
+                  padding-right: 0 !important;
+                  width: calc(100% - 15px);
+                  text-align: left;
+                  i {
+                    margin-right: 10px;
+                  }
+                  &:hover i {
+                    color: $--color-primary;
+                  }
+                }
+              }
+            }
+          }
+          .chart-header-error{
+            position: absolute;
+            left: 0;
+            top: -1px;
+          }
+          .header__operations {
+            display: flex;
+            justify-content: end;
+            align-items: center;
+
+            .header__operation-btn {
+              margin-left: 12px;
+              cursor: pointer;
+              color: #999;
+            }
+
+            .header__operation.header__operation--table {
+              display: flex;
+              align-items: center;
+              height: 22px;
+              margin-left: 10px;
+              color: $--color-primary;
+              border: 1px solid $--color-primary;
+              border-radius: $--border-radius-primary;
+
+              .option__button {
+                display: flex;
+                align-items: center;
+                height: 100%;
+                padding: 0 5px;
+                cursor: pointer;
+                background-color: white;
+                transition: all linear .2s;
+              }
+              .option__button:hover {
+                background-color: #EFF2F5;
+              }
+              .option__button.icon-group-item:first-of-type:not(:last-of-type) {
+                padding: 0 5px 0 0;
+              }
+              .option__button.icon-group-item:last-of-type:not(:first-of-type) {
+                padding: 0 0 0 5px;
+              }
+              .option__select {
+                .el-input__inner {
+                  width: 80px;
+                  padding-right: 20px;
+                  border: none;
+                  height: 100%;
+                  line-height: 20px;
+                  color: $--color-primary;
+                }
+                .el-input__prefix > div {
+                  font-weight: normal;
+                  line-height: 19px;
+                  color: $--color-primary;
+                }
+                .el-input__suffix {
+                  display: flex;
+                  .el-input__suffix-inner {
+                    line-height: 14px;
+                    .el-select__caret {
+                      line-height: 14px;
+                      width: 16px;
+                      color: $--color-primary;
+                    }
+                  }
+                }
+              }
+              .option__select.select-column {
+                .el-input__inner {
+                  width: 86px;
+                  padding-left: 8px;
+                }
+              }
+              .icon-group-divide {
+                height: 14px;
+                width: 1px;
+                background-color: $--color-primary;
+              }
+              i {
+                font-size: 12px;
+              }
+            }
+          }
+        }
+        &>.cn-chart {
+          position: relative;
+          border-radius: 2px;
+          height: 100%;
+          width: 100%;
+          .chart-drawing {
+            height: 100%;
+            width: 100%;
+          }
+          &>.cn-chart__echarts,&>.cn-chart__table {
+            .cn-chart__header {
+              border-bottom: 1px solid $--content-right-background-color;
+              .header__operations {
+                display: flex;
+                justify-content: end;
+                align-items: center;
+
+                .header__operation.header__operation--echarts {
+                  display: flex;
+                  align-items: center;
+                  height: 22px;
+                  margin-left: 10px;
+                  color: $--color-primary;
+                  border: 1px solid $--color-primary;
+                  border-radius: $--border-radius-primary;
+
+                  .option__button {
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    padding: 0 5px;
+                    cursor: pointer;
+                    background-color: white;
+                    transition: all linear .2s;
+                  }
+                  .option__button:hover {
+                    background-color: #EFF2F5;
+                  }
+                  .option__button.icon-group-item:first-of-type:not(:last-of-type) {
+                    padding: 0 5px 0 0;
+                  }
+                  .option__button.icon-group-item:last-of-type:not(:first-of-type) {
+                    padding: 0 0 0 5px;
+                  }
+                  .option__select {
+                    .el-input__inner {
+                      width: 120px;
+                      padding-right: 20px;
+                      border: none;
+                      height: 100%;
+                      line-height: 20px;
+                      color: $--color-primary;
+                    }
+                    .el-input__prefix > div {
+                      font-weight: normal;
+                      line-height: 19px;
+                      color: $--color-primary;
+                    }
+                    .el-input__suffix {
+                      display: flex;
+                      .el-input__suffix-inner {
+                        line-height: 14px;
+                        .el-select__caret {
+                          line-height: 14px;
+                          width: 16px;
+                          color: $--color-primary;
+                        }
+                      }
+                    }
+                  }
+                  .option__select.select-column {
+                    .el-input__inner {
+                      width: 86px;
+                      padding-left: 8px;
+                    }
+                  }
+                  .icon-group-divide {
+                    height: 14px;
+                    width: 1px;
+                    background-color: $--color-primary;
+                  }
+                  i {
+                    font-size: 12px;
+                  }
+                }
+              }
+            }
+          }
+          &>.cn-chart__block {
+            .cn-chart {
+              border: 1px solid #E7EAED;
+            }
+            /* detail页面block下的五连图的标题样式改变 */
+            .cn-chart__group .cn-chart__echarts {
+              .cn-chart__header {
+                border-bottom: none !important;
+
+                .header__title {
+                  font-size: 14px !important;
+                  color: #3976CB !important;
+                }
+              }
+            }
+          }
+          &>.cn-chart__title {
+            display: flex;
+            align-items: center;
+            font-size: 20px;
+            padding-left: 10px;
+            color: #333;
+            background-color: transparent;
+            box-shadow: none;
+            border: none;
+          }
+          &>.cn-chart__tabs {
+            padding: 10px 25px 10px 15px;
+
+            .el-tabs__nav-wrap::after {
+              height: 1px;
+            }
+            &>.el-tabs__header {
+              margin-bottom: 10px;
+            }
+            &>.el-tabs__content {
+              height: calc(100% - 40px);
+              .el-tab-pane {
+                .panel-chart {
+                  border: none;
+                  .chart-header,.cn-chart {
+                    border: none;
+                  }
+                }
+
+              }
+            }
+          }
+          &>.cn-chart__echarts {
+            .cn-chart__body {
+              overflow: hidden auto;
+
+              .el-table {
+                padding: 0 10px;
+
+                &:before {
+                  height: 0;
+                }
+                thead {
+                  color: #333;
+                }
+                th.is-leaf, td {
+                  border-bottom: none;
+                }
+                th {
+                  padding-bottom: 5px;
+                }
+                td {
+                  padding: 4px 0;
+                  color: #333;
+                }
+              }
+            }
+            .cn-chart__body.pie-with-table {
+              flex-basis: 40%;
+            }
+            .cn-chart__footer.pie-with-table {
+              flex-basis: 60%;
+              padding: 10px 30px 30px;
+            }
+          }
+          &>.pie-table {
+            font-size: 14px;
+            color: #333333;
+            font-weight: 500;
+
+            .el-table__header-wrapper {
+              .cell {
+                color: #333;
+              }
+            }
+            .el-table__expanded-cell[class*=cell] {
+              padding: 0;
+            }
+
+            .expand-table .el-table__body .el-table__row:last-of-type td {
+              border: none;
+            }
+            .expand-table {
+              font-weight: 400;
+              color: #606266;
+
+              .el-table__body-wrapper {
+                height: auto !important;
+              }
+            }
+          }
+          .chart-table-pagination.el-pagination {
+            padding: 12px 0 9px 0;
+            text-align: center;
+            height: 100%;
+            width: 100%;
+
+            .el-pagination__jump {
+              margin-left: 10px;
+            }
+          }
+        }
+        .chart__legend {
+          width: calc(100% - 40px);
+          border: 1px solid #E7EAED;
+          color: #5f6368;
+          margin: auto;
+          margin-bottom: 15px;
+
+          .chart__table-top {
+            width: 100%;
+            height: 30px;
+            border-bottom: #E7EAED 1px solid;
+            display: flex;
+
+            div {
+              font-size: 13px;
+              line-height: 28px;
+              color: $--color-primary;
+            }
+          }
+          .chart__table-below {
+            height: 240px;
+            width: 100%;
+            font-size: 13px;
+          }
+          .table-below-box {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            line-height: 24px;
+          }
+          .table-below-box:hover {
+            background-color: #f9f9f9;
+            border: 0;
+            color: #383838;
+          }
+          .table__below-color {
+            width: 27px;
+            height: 7px;
+            flex-shrink: 0;
+            padding-left: 10px;
+
+            div {
+              height: 100%;
+              width: 100%;
+              border-radius: 24%;
+            }
+          }
+          .table__below-title {
+            padding: 0 6px;
+            flex-shrink: 1;
+            flex-grow: 1;
+            overflow: hidden;
+            min-width: 200px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .table__below-statistics {
+            width: 80px;
+            flex-shrink: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .table-below-box:not(.chart__table-top) {
+            cursor: pointer;
+          }
+          .table-below-box.table-below-box--inactivated {
+            color: #ccc;
+            .table__below-color div {
+              background-color: #ccc !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.entity-detail-tool {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10px 20px 10px 0;
+  padding: 0 20px;
+  height: 60px;
+  background-color: #FFFFFF;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
+  border-radius: 2px;
+
+  .cn-icon-arrow-left-circle {
+    color: $--color-primary;
+    font-size: 20px;
+  }
+}
+
+.chart-error-popper{
+  word-wrap:break-word;
+  word-break:break-word;
+  border: 1px solid #e02f44;
+  min-width: 180px !important;
+  max-width: 280px !important;
+}
+
+.chart-error-popper.el-popper.is-light {
+  background: #e02f44;
+  border: 1px solid #e02f44;
+}
+.chart-error-popper.el-popover.el-popper {
+  color:white;
+}
+
+.chart-error-popper.el-popper.is-light[data-popper-placement^='top'] .el-popper__arrow::before {
+  border-color: #e02f44;
+  background: #e02f44;
+  bottom:0px;
+}
+
+.chart-error-popper.el-popper.is-light[data-popper-placement^='bottom'] .el-popper__arrow::before {
+  border-color: #e02f44;
+  background: #e02f44;
+}
+
+.chart-info-corner {
+  color: #767980;
+  cursor: pointer;
+  position: absolute;
+  display: none;
+  left: 0;
+  width: 28px;
+  height: 28px;
+  z-index: 2;
+  top: 0;
+}
+.chart-info-corner--error {
+  display: block;
+  color: #fff;
+}
+.chart-info-corner--error .chart-info-corner-inner {
+  border-left: 28px solid #e02f44;
+  border-right: none;
+  border-bottom: 28px solid rgba(0,0,0,0);
+}
+.chart-info-corner-inner {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+.chart-info-corner .fa {
+  position: absolute;
+  top: 2px;
+  left: 6px;
+  font-size: 65%;
+  z-index: 3;
+  font-style: normal;
+}
+.cn-chart-icon-warning:before {
+  content: "!";
+  font-weight:normal;
+}
+.ip-detail-as {
+  color: #999;
+  font-size: 12px;
+  padding-left: 10px;
+}
+
+.option-popper {
+  .el-select-dropdown__item {
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+  }
+}
+
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -0,0 +1,71 @@
+.detection-filter-case {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  padding: 10px;
+  margin-right: 10px;
+  background-color: white;
+
+  .detection-filter {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+
+    .filter__header {
+      display: flex;
+      flex: 0 0 32px;
+      align-items: center;
+      padding-left: 10px;
+      color: #666;
+      background-color: #F3F7FA;
+      cursor: pointer;
+
+      span {
+        font-size: 14px;
+        padding-left: 6px;
+      }
+      i {
+        font-size: 12px;
+        transition: all linear .1s;
+        transform: rotate(0) translate(0, 2px);
+      }
+      i.arrow-rotate {
+        transform: rotate(90deg) translate(2px, 3px);
+      }
+    }
+    .filter__body {
+      padding: 5px 0 0 15px;
+
+      .el-checkbox-group {
+        display: flex;
+        flex-direction: column;
+
+        .el-checkbox {
+          display: flex;
+          align-items: center;
+          padding: 5px 0;
+          margin-right: 5px;
+          .el-checkbox__label {
+            width: 100%;
+          }
+
+          .filter__checkbox-label {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .severity-color-block {
+              width: 4px;
+              height: 15px;
+              border-radius: 2px;
+            }
+          }
+
+          &:last-of-type {
+            padding-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/detections/detection-list/detection-list.scss
+++ b/src/assets/css/components/views/detections/detection-list/detection-list.scss
@@ -0,0 +1,62 @@
+.detection-list {
+  width: 100%;
+  height: calc(100% - 42px);
+  flex: 1;
+  position: relative;
+
+  .detection__loading {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+
+    i {
+      position: absolute;
+      left: calc(50% - 15px);
+      top: calc(50% - 15px);
+      font-size: 30px;
+      color: #aaa;
+    }
+  }
+
+  .detection-list__content {
+    height: 100%;
+    width: 100%;
+    overflow: inherit;
+
+    .detection-list--block {
+      display: flex;
+      flex-wrap: wrap;
+      display: -webkit-flex;
+      justify-content: flex-start;
+      border-radius: 2px;
+      width: calc(100% - 10px);
+      height: 100%;
+      overflow: auto;
+    }
+    .detection-list--list {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: auto;
+
+      .cn-detection__shadow {
+        position: fixed;
+        height: 100vh;
+        width: 100vw;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        background-color: rgba(0, 0, 0, .2);
+      }
+    }
+  }
+
+
+  .detection__pagination{
+    position: absolute;
+    bottom: 9px;
+    height: 40px;
+    width: calc(100% - 538px);
+  }
+}
--- a/src/assets/css/components/views/detections/detection-list/row.scss
+++ b/src/assets/css/components/views/detections/detection-list/row.scss
@@ -0,0 +1,142 @@
+.cn-detection--list {
+  display: flex;
+  .cn-detection__collapse {
+    margin-bottom: 1px;
+    padding-top: 18px;
+    width: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    background-color: #F3F7FA;
+
+    span {
+      transform: rotate(0);
+      transition: all linear .2s;
+      padding-top: 0;
+
+      &.reg-down {
+        padding-top: 2px;
+        transform: rotate(90deg);
+      }
+    }
+    span:hover {
+      cursor: pointer;
+    }
+
+    .cn-icon-arrow-right {
+      color: #ADBCCA;
+      font-size: 12px;
+    }
+  }
+  .cn-detection__case {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 9px 0;
+    margin-bottom: 1px;
+    background-color: white;
+
+    .cn-detection__icon {
+      margin-left: 13px;
+      margin-right: 13px;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
+      width: 5px;
+      height: 20px;
+      border-radius: 12px;
+    }
+    .cn-detection__row {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      justify-content: center;
+      flex-wrap: wrap;
+
+      .cn-detection__header {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        font-size: 16px;
+        padding-bottom: 3px;
+        color: #333333;
+        align-items: center;
+        i {
+          color:#7b8fa2;
+          margin-right: 5px;
+          font-size:18px;
+        }
+        .line {
+          color:#da5656;
+          margin-left:12px;
+          font-size: xx-small;
+          font-weight: bold;
+        }
+        .circle {
+          width:10px;
+          height:10px;
+          border:2px solid #da5656;
+          border-radius: 10px;
+          margin-top: 4px;
+          margin-right:12px;
+        }
+      }
+      .cn-detection__body {
+        display: flex;
+        flex-direction: column;
+
+        .body__basic-info {
+          display: flex;
+          flex-direction: row;
+
+          .basic-info {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+
+            .basic-info__item {
+              padding-right: 40px;
+              display: flex;
+              align-items: center;
+              i {
+                padding-right: 6px;
+                color: #8FA1BE;
+                font-size: 14px;
+              }
+              span {
+                font-size: 14px;
+              }
+              span:first-of-type {
+                color: #999;
+              }
+              span:last-of-type {
+                color: #666;
+              }
+            }
+          }
+          .show-detail {
+            flex-shrink: 0;
+            padding: 0 30px;
+            font-size: 12px;
+            color: #3976CB;
+
+            &:hover {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+    .cn-detection__detail-overview {
+      flex-basis: 100%;
+      padding: 0 10px;
+
+      .el-divider {
+        background-color: #EFF2F5;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -0,0 +1,178 @@
+.detection-detail-overview {
+  display: flex;
+  position: relative;
+  padding: 0 30px;
+
+  &>div {
+    flex: 0 0 50%;
+    display: flex;
+    flex-direction: column;
+
+    .overview__title {
+      padding: 10px 0;
+      color: #333;
+      font-weight: bold;
+      font-size: 14px;
+
+      &:first-of-type {
+        padding-top: 0;
+      }
+    }
+
+    .overview__row {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      flex-wrap: nowrap;
+      padding: 2px 10px 2px 0;
+      font-size: 14px;
+
+      .row__label {
+        padding-right: 20px;
+        min-width: 100px;
+        color: #6B717B;
+      }
+
+      .row__content {
+        display: flex;
+        color: #3976CB;
+
+        &.row__content--link {
+          font-style: italic;
+          text-decoration: underline;
+          color: #1890FF;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.overview__row-timeline {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 17px;
+  background-color: #F9F9F9;
+
+  .row-timeline {
+    flex: 0 0 110px;
+    display: flex;
+    flex-direction: column;
+
+    .row-timeline__time-info {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      color: #666666;
+    }
+    .row-timeline__line {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 1px;
+      margin: 5px 0;
+      background-color: #CBD0D5;
+      overflow: visible;
+
+      .line-point-larger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 12px;
+        width: 12px;
+        border-radius: 50%;
+        background-color: #F9F9F9;
+        border: 1px solid #666;
+
+        .line-point {
+          background-color: #666;
+        }
+      }
+      .line-point {
+        height: 6px;
+        width: 6px;
+        border-radius: 50%;
+        background-color: #A0B5CA;
+      }
+    }
+    .row-timeline__card {
+      padding: 8px 4px 0;
+
+      &>div {
+        display: flex;
+        flex-direction: column;
+        height: 122px;
+        width: 102px;
+        padding: 10px;
+        background-color: #EFF2F5;
+        border-radius: 2px;
+
+        .timeline__severity {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          &.timeline__severity--critical i {
+            color: #D84C4C;
+          }
+          &.timeline__severity--high i {
+            color: #FE845D;
+          }
+          &.timeline__severity--medium i {
+            color: #FEB65A;
+          }
+          &.timeline__severity--low i {
+            color: #F6C738;
+          }
+          &.timeline__severity--info i {
+            color: #D1BD50;
+          }
+          i {
+            font-size: 16px;
+          }
+          span {
+            padding-left: 5px;
+            font-size: 14px;
+            color: #3976CB;
+          }
+        }
+        .timeline__security-type {
+          font-size: 12px;
+          color: #3976CB;
+          margin-bottom: 10px;
+        }
+        .timeline__start-time {
+          font-size: 12px;
+          color: #666666;
+        }
+      }
+    }
+    .row-timeline__foot {
+      display: flex;
+      flex-direction: column;
+      padding: 2px 0 10px;
+
+      .detection-ip {
+        display: flex;
+        align-items: center;
+        padding-left: 5px;
+        color: #666;
+        font-size: 12px;
+
+        &.detection-ip__current {
+          color: #D84C4C;
+        }
+        i {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+.row__tag {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 4px;
+  color: white;
+}
--- a/src/assets/css/components/views/detections/detections.scss
+++ b/src/assets/css/components/views/detections/detections.scss
@@ -0,0 +1,64 @@
+.detection__event-severity-bar {
+  flex: 0 0 175px;
+  background-color: white;
+  width: 100%;
+  margin-bottom: 10px;
+}
+.detection__list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .detection__list-statistics {
+    display: flex;
+    flex: 0 0 192px;
+    margin-bottom: 10px;
+    width: 100%;
+    background-color: white;
+
+    .chart-header {
+      display: flex;
+      justify-content:space-between;
+      align-items:center;
+      padding: 10px 20px 10px 0px;
+      height: 40px;
+
+      font-size: 14px;
+      color: $--color-text-primary;
+      transition: all 0.2s;
+      border-bottom: 1px solid #E7EAED;
+
+      .chart-header__title {
+        max-width: calc(100% - 100px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+
+    .chart-content {
+      height:calc(100% - 40px);
+    }
+    .statistics__severity {
+      width: 33%;
+      margin-left:15px;
+      margin-right:15px;
+    }
+    .statistics__category {
+      width: 34%;
+      margin-left:15px;
+      margin-right:15px;
+    }
+    .statistics__active-attack {
+      width: 33%;
+      margin-left:15px;
+      margin-right:15px;
+    }
+  }
+}
+.filter__more {
+  padding-top: 5px;
+  font-size: 14px;
+  color: $--color-primary;
+  cursor: pointer;
+}
--- a/src/assets/css/components/views/entityExplorer/entity-detail.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-detail.scss
@@ -0,0 +1,104 @@
+.entity-detail.cn-home {
+  flex-direction: column;
+
+  .entity-detail__header {
+    flex: 0 0 80px;
+    display: flex;
+    align-items: center;
+
+    .cn-entity__name {
+      font-size: 20px;
+      color: #333333;
+      font-weight: bold;
+    }
+    .cn-entity__icon {
+      margin-left: 26px;
+      margin-right: 10px;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      background-color: #F3F7FA;
+
+      i {
+        font-size: 22px;
+        color: #4E84B4;
+      }
+    }
+  }
+  &>.entity-detail__body {
+    width: 100%;
+    height: calc(100% - 52px);
+    display: flex;
+    flex-direction: row;
+
+    .entity-detail__menu {
+      flex: 0 0 240px;
+      display: flex;
+      flex-direction: column;
+      padding-top: 23px;
+      border-top: 1px solid $--content-right-background-color;
+
+      .menu-item {
+        display: flex;
+        align-items: center;
+        padding: 7px 0 7px 30px;
+        font-size: 14px;
+        color: #666666;
+
+        span {
+          padding-left: 10px;
+          cursor: pointer;
+        }
+
+        &.menu-item--active {
+          color: #1890FF;
+
+          span {
+            border-left: 2px solid #1890FF;
+          }
+        }
+      }
+    }
+    .entity-detail__content {
+      height: calc(100% - 28px);
+      flex: 1;
+      padding: 10px;
+      overflow: auto;
+      background-color: $--content-right-background-color;
+
+      &>.cn-entity-detail .entity-detail__body>.cn-panel {
+        background-color: white;
+      }
+      &>.cn-entity-detail .entity-detail__body>.cn-panel2 {
+        .panel-chart {
+          .chart-header.panel-chart-block {
+            border: none;
+          }
+        }
+        .panel-chart-table.panel-chart {
+          .cn-chart {
+            height: calc(100% - 47px) !important;
+          }
+        }
+        .chart-list {
+          .vue-grid-layout .vue-grid-item {
+            .panel-chart-group.panel-chart {
+              .panel-chart {
+                border: none;
+                box-shadow: none;
+                .chart-header {
+                  border: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -0,0 +1,126 @@
+.entity-explorer {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  margin: 20px;
+  height: calc(100% - 40px) !important;
+  justify-content: center;
+  transition: all linear .2s;
+
+  .entity__loading {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+
+    i {
+      position: absolute;
+      left: calc(50% - 15px);
+      top: calc(50% - 15px);
+      font-size: 30px;
+      color: #aaa;
+    }
+  }
+  &.entity-explorer--show-list {
+    background-color: unset;
+    justify-content: flex-start;
+  }
+
+  .explorer-top-tools {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-bottom: 18px;
+
+    &>div {
+      padding: 0 0 0 10px;
+    }
+    .el-button--mini{
+      padding: 4px 6px !important;
+      min-height: 26px !important;
+      &.active i {
+        color: $--color-primary;
+      }
+      i {
+        font-size: 14px;
+      }
+    }
+  }
+  .explorer-container {
+    display: flex;
+    overflow: hidden auto;
+    height: calc(100% - 120px);
+    position: relative;
+  }
+  .explorer-foot {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    height: 17vh;
+
+    &>div {
+      width: 100%;
+      max-width: 1200px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .el-divider {
+      width: 2px;
+      height: 40px;
+      background-color: #cecece;
+    }
+    .entity-overview {
+      display: flex;
+
+      .overview-left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 0 30px;
+
+        span:first-of-type {
+          font-size: 30px;
+          color: #333333;
+          font-weight: bold;
+        }
+        span:last-of-type {
+          font-size: 16px;
+          color: #666666;
+        }
+      }
+      .overview-right {
+        display: flex;
+        flex-direction: column;
+        padding: 0 30px;
+
+        .right-row {
+          display: flex;
+          height: 30px;
+          align-items: center;
+
+          .right-label {
+            width: 55px;
+            font-size: 14px;
+            color: #666666;
+          }
+          .right-value {
+            font-size: 14px;
+            color: #333333;
+            font-weight: bold;
+          }
+          i {
+            padding-right: 10px;
+            font-size: 18px;
+          }
+          .cn-icon-increase {
+            color: #23BF9A;
+          }
+          .cn-icon-active {
+            color: #0091FF;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/entityExplorer/entity-filter.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-filter.scss
@@ -0,0 +1,125 @@
+.entity-filter-case {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  margin-right: 10px;
+
+  .filter-case__header {
+    background-color: #E1E6ED;
+    margin-bottom: 10px;
+    padding-left: 8px;
+    height: 36px;
+    line-height: 36px;
+    color: #666;
+    font-size: 14px;
+  }
+  .entity-filter {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #E7EAED;
+    margin-bottom: 10px;
+    background-color: white;
+
+    .filter__header {
+      height: 46px;
+      margin: 0 15px;
+      line-height: 46px;
+      border-bottom: 1px solid #EFF2F5;
+      font-size: 14px;
+      color: #333;
+    }
+    .filter__body {
+      padding: 11px 0 21px 0;
+
+      .filter__row {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 15px;
+        height: 26px;
+        align-items: center;
+        cursor: pointer;
+        transition: all linear .2s;
+
+        &:hover, &.filter__row--active {
+          background-color: #F3F7FA;
+        }
+        .row__label {
+          font-size: 14px;
+          i {
+            color: #8FA1BE;
+          }
+          span {
+            padding-left: 6px;
+            color: #333;
+          }
+        }
+        .row__value {
+          color: #666;
+        }
+      }
+    }
+  }
+
+  .entity-pop-custom {
+    padding: 0 10px 10px 10px;
+    border: 1px solid #EBEEF5;
+    position: absolute;
+    top: 210px;
+    left: 580px;
+    width: 440px;
+    color: #606266;
+    background: #fff;
+    border-radius: 4px;
+    z-index: 999999;
+    box-shadow: 0 0 10px #CCC;
+    box-sizing: border-box;
+
+    .el-button--mini{
+      padding: 5px 7px;
+    }
+    .pop-title{
+      margin-left: 10px;
+      margin-top:17px;
+      font-family: Roboto-Black;
+      font-size: 16px;
+      color: #333333;
+      letter-spacing: 0;
+      line-height: 16px;
+      font-weight: 400;
+      span {
+        padding-left: 6px;
+        color: #333;
+      }
+    }
+    .filter-top-box {
+      margin-top: 12px;
+      width: 100%;
+      height: fit-content;
+      .filter-top-body{
+        height: fit-content;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        .filter-top-type {
+          padding-left: 10px;
+          font-size: 14px;
+          color: #666666;
+          letter-spacing: 0;
+          font-weight: 400;
+        }
+
+        .top-table-percent{
+          display:grid;
+          grid-template-columns: 50% auto;
+          grid-template-rows: 100%;
+          grid-row-gap: 0px;
+          grid-column-gap: 0px;
+          .top-table-progress{
+            align-content: center;
+            padding-top: 8px;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/entityExplorer/entityList/card.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/card.scss
@@ -0,0 +1,169 @@
+.cn-entity--block {
+  box-sizing: border-box;
+  margin: 0 10px 10px 0;
+  width: 321px;
+  height: 329px;
+  background: #FFFFFF;
+  border-radius: 2px;
+  transition: all .2s;
+
+  &:hover .cn-entity__header .header__content {
+
+  }
+  .cn-entity__header {
+    position: relative;
+    background-color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    width: 100%;
+    height: 89px;
+    box-sizing: border-box;
+    transition: all .2s;
+
+    .header__bottom__line {
+      width:288px;
+      height:1px;
+      border-top:solid 1px #eff2f5;
+      position: absolute;
+      top: 88px;
+    }
+
+    .header__icon {
+      overflow: hidden;
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      background-color: #F3F7FA;
+
+      i {
+        font-size: 22px;
+        color: #4E84B4;
+      }
+    }
+    .header__content {
+      font-size: 22px;
+      color: #333333;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .content__desc{
+        color: #999999;
+        width: 200px;
+        font-size: 12px;
+        margin-top: 3px;
+        position: absolute;
+        top: 50px;
+        left: 82px;
+      }
+
+      .content__name {
+        position: absolute;
+        top: 21px;
+        left: 82px;
+        overflow: hidden;
+        max-width: 200px;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  .cn-entity__body {
+    overflow: hidden;
+    padding-top: 10px;
+    font-size: 14px;
+    position: relative;
+    height:240px;
+
+    .body__row {
+      display: flex;
+      align-items: center;
+      margin: 0 30px;
+      color: #666666;
+      padding: 4px 0;
+      justify-content: left;
+    }
+    .body__drawing-box {
+      position: relative;
+      height: 60px;
+      .chart__loading {
+        top: 0;
+        height: 100%;
+      }
+    }
+    .body__drawing {
+      position: absolute;
+      padding: 10px 30px;
+      height: 60px;
+      width: 100%;
+    }
+
+    .body__row-label {
+      padding-right: 0px;
+      color: #999999;
+      font-size: 14px;
+      font-weight: 400;
+      white-space: nowrap;
+      line-height: 16px;
+      i {
+        font-size: 13px;
+        color:#8FA1BE;
+        margin-right: 9px;
+      }
+    }
+    .body__row-value {
+      width: calc(100% - 69px);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      font-size: 14px;
+      color: #666666;
+      font-weight: 400;
+    }
+    .body__statics {
+      position: absolute;
+      bottom: 20px;
+      display: flex;
+      width: 100%;
+      padding: 0 30px;
+      font-size: 14px;
+      color: #666666;
+      .entity-statics-down{
+        padding-right: 20px;
+        min-width: 80px;
+
+        i {
+          color:#5881B7;
+          font-size:14px;
+          padding-right:6px;
+        }
+      }
+
+      .entity-statics-up{
+        padding-right: 20px;
+        min-width: 80px;;
+        i {
+          color: #62B16C;
+          font-size: 14px;
+          padding-right: 6px;
+        }
+
+      }
+      .body__detail {
+        cursor: pointer;
+        font-size: 14px;
+        color: #8FA1BE;
+        position: absolute;
+        right: 30px;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -0,0 +1,233 @@
+.entity-detail-overview {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  padding: 0 30px;
+
+  .overview-map {
+    position: absolute;
+    right: 50px;
+    top: 0;
+    width: 550px;
+    height: 350px;
+
+    &.overview-map--ip {
+      height: 210px;
+    }
+    &.overview-map--app {
+      height: 260px;
+    }
+    .cn-chart {
+      height: 100%;
+      width: 100%;
+      .chart-drawing {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+  .overview-item {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 10px;
+
+    .overview__title {
+      color: #333;
+      font-size: 14px;
+    }
+    .overview__content {
+      display: flex;
+      flex-direction: column;
+      padding: 8px 0 0 20px;
+
+      .overview__row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        padding: 2px 0;
+        font-size: 14px;
+
+        &.overview__row--small-font {
+          font-size: 12px;
+        }
+        .show-more {
+          color: #8FA1BE;
+          cursor: pointer;
+        }
+        .row__label {
+          color: #6B717B;
+          padding-right: 20px;
+
+          &.row__label--width130 {
+            flex-basis: 130px;
+            padding-right: unset;
+          }
+          &.row__label--width160 {
+            flex-basis: 160px;
+            padding-right: unset;
+          }
+        }
+        .row__content {
+          display: flex;
+          color: #3976CB;
+
+          .alert-level-tag {
+            display: flex;
+            padding: 1px 4px;
+            margin-right: 6px;
+            border-radius: 2px;
+            color: white;
+
+            &.alert-level-tag--high {
+              background-color: #ED907B;
+            }
+            &.alert-level-tag--middle {
+              background-color: #FFAB66;
+            }
+            &.alert-level-tag--low {
+              background-color: #F6C738;
+            }
+          }
+          &.row__content--width200 {
+            width: 200px;
+          }
+        }
+        .row__contents {
+          display: flex;
+          flex-direction: column;
+
+          .row__content {
+            padding: 2px 0;
+
+            &:first-of-type {
+              padding-top: 0;
+            }
+            &:last-of-type {
+              padding-bottom: 0;
+            }
+          }
+          .row__charts-msg {
+            width: auto;
+            padding-right: 20px;
+          }
+          .row__charts {
+            height: 20px;
+            width: 60px;
+            padding-left: 5px;
+          }
+        }
+        .row__desc {
+          color: #666666;
+        }
+      }
+    }
+
+    .overview__content.domain__content {
+      .overview__tags.domain__tags {
+        flex-direction: column;
+        width: 70%;
+        .overview__domain-tabs {
+          display: flex;
+          margin: 0 0 8px 0;
+          .overview__domain-tab {
+            display: flex;
+          }
+          .overview__tag.domain__tag {
+            display: unset;
+             padding: 6px 15px;
+             margin: 0 12px 0 0;
+             text-align: center;
+             white-space: nowrap;
+             height: 32px;
+             line-height: 1.5;
+             background-color: #EFF6FE;
+             font-size: 14px;
+             border-radius: 4px;
+           }
+          .overview__tag.domain__tag-list {
+            padding: 6px 15px;
+            margin: 4px 12px 0 0;
+            text-align: center;
+            height: 24px;
+            line-height: 0.9;
+            background-color: #EFF6FE;
+            font-family: Roboto-Regular;
+            color: #3976CB;
+            font-size: 14px;
+            font-weight: 400;
+            border-radius: 15px;
+          }
+          .overview__domain-btn {
+            .overview__domain-more {
+              background-color: #EFF6FE;
+              width: 44px;
+              height: 24px;
+              border-radius: 15px;
+              color: #3976CB;
+              text-align: center;
+              margin: 4px 12px 0 0;
+              padding: 6px 15px;
+              line-height: .3;
+              cursor: pointer;
+            }
+            position: relative;
+          }
+          .overview__domain-more-tabs::-webkit-scrollbar {
+            width: 10px;
+          }
+          .overview__domain-more-tabs {
+            min-width: 150px;
+            max-height: 180px;
+            overflow: auto;
+            background: #FFFFFF;
+            box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);
+            border-radius: 2px;
+            padding: 5px;
+            z-index: 1;
+            position: absolute;
+            right: -120px;
+            top: -180px;
+            .domain-more-tab {
+              height: 24px;
+              padding: 6px 12px;
+              text-align: center;
+              font-family: Roboto-Regular;
+              font-size: 12px;
+              color: #666666;
+              letter-spacing: 0;
+              line-height: 12px;
+              font-weight: 400;
+              width: 126px;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+    }
+
+    .overview__tags {
+      display: flex;
+
+      .overview__tag {
+        display: flex;
+        padding: 6px 15px;
+        margin-right: 20px;
+        background-color: #EFF6FE;
+        font-size: 14px;
+        border-radius: 4px;
+
+        .tag__value {
+          color: #3976CB;
+          font-weight: bold;
+        }
+        .tag__desc {
+          padding-right: 5px;
+          color: #3976CB;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
@@ -0,0 +1,47 @@
+.entity-list {
+  width: calc(100% - 290px);
+  height: calc(100% - 42px);
+  flex: 1;
+  position: relative;
+
+  .entity-list__content {
+    height: 100%;
+    width: 100%;
+    overflow: inherit;
+
+    .entity-list--block {
+      display: flex;
+      flex-wrap: wrap;
+      display: -webkit-flex;
+      justify-content: flex-start;
+      border-radius: 2px;
+      width: calc(100% - 10px);
+      height: 100%;
+      overflow: auto;
+    }
+    .entity-list--list {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: auto;
+
+      .cn-entity__shadow {
+        position: fixed;
+        height: 100vh;
+        width: 100vw;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        background-color: rgba(0, 0, 0, .2);
+      }
+    }
+  }
+
+
+  .entity__pagination{
+    position: absolute;
+    bottom: 9px;
+    height: 40px;
+    width: calc(100% - 538px);
+  }
+}
--- a/src/assets/css/components/views/entityExplorer/entityList/row.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/row.scss
@@ -0,0 +1,125 @@
+.cn-entity--list {
+  display: flex;
+  .cn-entity__collapse {
+    margin-bottom: 1px;
+    padding-top: 30px;
+    width: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    background-color: #F3F7FA;
+
+    span {
+      transform: rotate(0);
+      transition: all linear .2s;
+      padding-top: 0;
+
+      &.reg-down {
+        padding-top: 2px;
+        transform: rotate(90deg);
+      }
+    }
+    span:hover {
+      cursor: pointer;
+    }
+
+    .cn-icon-arrow-right {
+      color: #ADBCCA;
+      font-size: 12px;
+    }
+  }
+  .cn-entity__case {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 16px 0;
+    margin-bottom: 1px;
+    background-color: white;
+
+    .cn-entity__icon {
+      margin-left: 26px;
+      margin-right: 10px;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      background-color: #F3F7FA;
+
+      i {
+        font-size: 22px;
+        color: #4E84B4;
+      }
+    }
+    .cn-entity__row {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      justify-content: center;
+      flex-wrap: wrap;
+
+      .cn-entity__header {
+        font-size: 16px;
+        padding-bottom: 3px;
+        color: #333333;
+      }
+      .cn-entity__body {
+        display: flex;
+        flex-direction: column;
+
+        .body__basic-info {
+          display: flex;
+          flex-direction: row;
+
+          .basic-info {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+
+            .basic-info__item {
+              padding-right: 40px;
+              i {
+                padding-right: 6px;
+                color: #8FA1BE;
+                font-size: 12px;
+              }
+              span {
+                font-size: 14px;
+              }
+              span:first-of-type {
+                color: #999;
+              }
+              span:last-of-type {
+                color: #666;
+              }
+            }
+          }
+          .show-detail {
+            flex-shrink: 0;
+            padding: 0 30px;
+            font-size: 12px;
+            color: #3976CB;
+
+            &:hover {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+    .cn-entity__detail-overview {
+      flex-basis: 100%;
+      padding: 0 10px;
+      overflow: hidden;
+
+      .el-divider {
+        background-color: #EFF2F5;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
+++ b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
@@ -0,0 +1,152 @@
+.explorer-search {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  background-image: url('~@/assets/img/cn-explore-bg.svg');
+  background-repeat: no-repeat;
+  background-position: 0 100%;
+  background-size: 100%;
+  margin-bottom: 10px;
+
+  &.explorer-search--show-list {
+    flex: 0 0 40px;
+    background-image: none;
+  }
+  .explorer-search__title {
+    height: 112px;
+    text-align: center;
+    font-size: 42px;
+    color: #3976CB;
+  }
+  .explorer-search__input-case {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 20px;
+
+    &.explorer-search__input-case--question-mark-in-line {
+      flex-direction: row;
+      padding: 0;
+
+      .explorer-search__input {
+        height: 40px;
+        max-width: unset;
+      }
+    }
+    .search-symbol-inline {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #666;
+      font-size: 16px;
+      padding: 0 10px;
+      cursor: pointer;
+    }
+    .explorer-search__input {
+      width: 100%;
+      max-width: 1000px;
+      height: 40px;
+    }
+    .explorer-search__foot {
+      display: flex;
+      padding-top: 18px;
+      width: 100%;
+      max-width: 1000px;
+      position: relative;
+      justify-content: space-between;
+      font-weight: bold;
+
+      .foot__item {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: #3976CB;
+
+        .el-divider {
+          background-color: #3976CB;
+        }
+
+        i, span {
+          cursor: pointer;
+        }
+
+        i {
+          transition: all linear .1s;
+          transform: rotate(0) translate(0, 0);
+        }
+        i.arrow-rotate {
+          transform: rotate(90deg) translate(2px, 3px);
+        }
+      }
+
+      .search__history {
+        position: absolute;
+        display: flex;
+        padding: 10px 0 0 0;
+        flex-direction: column;
+        width: 100%;
+        max-width: 1000px;
+        z-index: 2;
+        top: 47px;
+        border: 1px solid rgba(206,206,206,0.20);
+        border-radius: 2px;
+        background-color: white;
+
+        .history__items {
+          max-height: 300px;
+          overflow: auto;
+          .history__item {
+            height: 35px;
+            display: flex;
+            align-items: center;
+            padding-left: 30px;
+            font-weight: normal;
+            font-size: 14px;
+            flex-shrink: 0;
+
+            &.clear-all span {
+              cursor: pointer;
+            }
+            div {
+              color: #999;
+            }
+            .item-date {
+              color: #bbb;
+              padding: 0 20px 0 0;
+            }
+            .item-value {
+              flex-basis: calc(100% - 200px);
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              word-break: break-all;
+              color: #444;
+            }
+          }
+          .history__item {
+            cursor: pointer;
+          }
+          .history__item:hover {
+            background-color: #ecf5ff;
+            color: #66b1ff;
+          }
+        }
+        .clear-all {
+          padding-left: 30px;
+          font-weight: normal;
+          font-size: 14px;
+          height: 35px;
+          display: flex;
+          align-items: center;
+          color: #3976CB;
+
+          span {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
+}
--- a/src/assets/css/font/iconfont.css
+++ b/src/assets/css/font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1634635259684') format('woff2'),
-       url('iconfont.woff?t=1634635259684') format('woff'),
-       url('iconfont.ttf?t=1634635259684') format('truetype');
+  src: url('iconfont.woff2?t=1645687921203') format('woff2'),
+       url('iconfont.woff?t=1645687921203') format('woff'),
+       url('iconfont.ttf?t=1645687921203') format('truetype');
 }

 .cn-icon {
@@ -13,6 +13,122 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.cn-icon-detection:before {
+  content: "\e766";
+}
+
+.cn-icon-filter:before {
+  content: "\e764";
+}
+
+.cn-icon-qingchu:before {
+  content: "\e765";
+}
+
+.cn-icon-time2:before {
+  content: "\e760";
+}
+
+.cn-icon-alert-level:before {
+  content: "\e763";
+}
+
+.cn-icon-windows:before {
+  content: "\e762";
+}
+
+.cn-icon-attacked:before {
+  content: "\e75e";
+}
+
+.cn-icon-attacker:before {
+  content: "\e75f";
+}
+
+.cn-icon-severity-level:before {
+  content: "\e75c";
+}
+
+.cn-icon-event-type:before {
+  content: "\e75d";
+}
+
+.cn-icon-trojan:before {
+  content: "\e761";
+}
+
+.cn-icon-mining-machine:before {
+  content: "\e758";
+}
+
+.cn-icon-percentage:before {
+  content: "\e759";
+}
+
+.cn-icon-mining-pool:before {
+  content: "\e75a";
+}
+
+.cn-icon-mining-traffic:before {
+  content: "\e75b";
+}
+
+.cn-icon-entity-alert:before {
+  content: "\e755";
+}
+
+.cn-icon-safe:before {
+  content: "\e756";
+}
+
+.cn-icon-city:before {
+  content: "\e757";
+}
+
+.cn-icon-search-advance:before {
+  content: "\e750";
+}
+
+.cn-icon-search-normal:before {
+  content: "\e751";
+}
+
+.cn-icon-blocks:before {
+  content: "\e752";
+}
+
+.cn-icon-list:before {
+  content: "\e753";
+}
+
+.cn-icon-help:before {
+  content: "\e754";
+}
+
+.cn-icon-active:before {
+  content: "\e74e";
+}
+
+.cn-icon-increase:before {
+  content: "\e74f";
+}
+
+.cn-icon-debug:before {
+  content: "\e606";
+}
+
+.cn-icon-override:before {
+  content: "\e68a";
+}
+
+.cn-icon-download1:before {
+  content: "\e6ab";
+}
+
+.cn-icon-upload1:before {
+  content: "\e6ac";
+}
+
 .cn-icon-position2:before {
  content: "\e745";
 }
--- a/src/assets/css/font/iconfont.js
+++ b/src/assets/css/font/iconfont.js
--- a/src/assets/css/font/iconfont.ttf
+++ b/src/assets/css/font/iconfont.ttf
--- a/src/assets/css/font/iconfont.woff
+++ b/src/assets/css/font/iconfont.woff
--- a/src/assets/css/font/iconfont.woff2
+++ b/src/assets/css/font/iconfont.woff2
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,7 +1,29 @@
-@import './font/iconfont';
+@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写
+  font-family: 'element-icons';
+  src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), /* chrome, firefox */
+  url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  font-weight: normal;
+  font-display: auto;
+  font-style: normal;
+}
+$--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语句出错
+
@import './common';
-@import './rightBoxCommon';
-@import './tableCommon';
-@import './chart';
-@import '../stylus/index.scss';
-@import './font/iconfont.css';
+
+/* 主题 */
+
+.theme-light {
+  $--theme: light;
+  @import './themes/theme-light.scss'; // 加载主题变量
+  @import './themes/src/index.scss'; // 加载ele样式
+  @import './components/index'; // 加载cn组件样式
+  @import './common/index.scss'; // 加载通用样式
+}
+
+.theme-dark {
+  $--theme: dark;
+  @import './themes/theme-dark.scss'; // 加载主题变量
+  @import './themes/src/index.scss'; // 加载ele样式
+  @import './components/index'; // 加载cn组件样式
+  @import './common/index.scss'; // 加载通用样式
+}
--- a/src/assets/css/themes/THEME_README.md
+++ b/src/assets/css/themes/THEME_README.md
@@ -0,0 +1,13 @@
+# 主题功能说明
+
+### 说明
+
+- 对项目中的主题相关颜色进行归类、抽取变量
+- 代码中设置元素的颜色时，对主题相关色应使用变量，不应使用颜色值
+- 切换主题时，更改body标签上的class
+
+### 源码改动
+- theme-chalk/src/common/var.scss 首行增加$--theme属性
+- theme-chalk/src/mixins/mixins.scss 改动较多，如需了解请比对文件差异
+-   // $arrow-selector: #{& + '__arrow'};   
+    改为 $arrow-selector: '.el-popper__arrow';
--- a/src/assets/css/themes/common.scss
+++ b/src/assets/css/themes/common.scss
@@ -0,0 +1,67 @@
+/*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border-radius: 6px;
+  border: 1px solid #fff;
+}
+/*---鼠标点击滚动条显示样式--*/
+::-webkit-scrollbar-thumb:hover {
+  background-color: #c8c8c8;
+  border-radius: 6px;
+}
+/*---滚动条大小--*/
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+/*---滚动框背景样式--*/
+::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+/* input的placeholder字色 */
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  color: lighten(#0091ff, 20%);
+}
+.myDatePicker .el-picker-panel__footer{
+  .el-button{
+    display: none;
+  }
+  .is-plain{
+    display: inline-block;
+  }
+}
+
+th *:first-letter,
+.left-menu *:first-letter,
+.option-popper *,
+.header__operations *:first-letter {
+  text-transform: capitalize;
+}
+
+.outer-box {
+  padding: 10px;
+  height: 100%;
+  width: 100%;
+}
+
+.el-table__empty-block {
+  width: 100% !important;
+}
+
+/* 淡化amcharts的logo */
+g [aria-labelledby$=-title] {
+  opacity: 0.1;
+  transform: translateX(calc(100% - 52px)) scale(.7);
+}
+
+.no-data {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  color: #999;
+}
+.no-data-hide {
+  display: none;
+}
--- a/src/assets/css/themes/src/affix.scss
+++ b/src/assets/css/themes/src/affix.scss
@@ -0,0 +1,7 @@
+@import "mixins/mixins";
+
+@include b(affix) {
+  @include m(fixed) {
+    position: fixed;
+  }
+}
--- a/src/assets/css/themes/src/alert.scss
+++ b/src/assets/css/themes/src/alert.scss
@@ -0,0 +1,147 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(alert) {
+  width: 100%;
+  padding: $--alert-padding;
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: $--alert-border-radius;
+  position: relative;
+  background-color: $--color-white;
+  overflow: hidden;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  transition: opacity .2s;
+
+  @include when(light) {
+    .#{$namespace}-alert__closebtn {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  @include when(dark) {
+    .#{$namespace}-alert__closebtn {
+      color: $--color-white;
+    }
+    .#{$namespace}-alert__description {
+      color: $--color-white;
+    }
+  }
+
+  @include when(center) {
+    justify-content: center;
+  }
+
+  @include m(success) {
+    &.is-light {
+      background-color: $--alert-success-color;
+      color: $--color-success;
+
+      .#{$namespace}-alert__description {
+        color: $--color-success;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-success;
+      color: $--color-white;
+    }
+  }
+
+  @include m(info) {
+    &.is-light {
+      background-color: $--alert-info-color;
+      color: $--color-info;
+    }
+
+    &.is-dark {
+      background-color: $--color-info;
+      color: $--color-white;
+    }
+
+    .#{$namespace}-alert__description {
+      color: $--color-info;
+    }
+  }
+
+  @include m(warning) {
+    &.is-light {
+      background-color: $--alert-warning-color;
+      color: $--color-warning;
+
+      .#{$namespace}-alert__description {
+        color: $--color-warning;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-warning;
+      color: $--color-white;
+    }
+  }
+
+  @include m(error) {
+    &.is-light {
+      background-color: $--alert-danger-color;
+      color: $--color-danger;
+
+      .#{$namespace}-alert__description {
+        color: $--color-danger;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-danger;
+      color: $--color-white;
+    }
+  }
+
+  @include e(content) {
+    display: table-cell;
+    padding: 0 8px;
+  }
+
+  @include e(icon) {
+    font-size: $--alert-icon-size;
+    width: $--alert-icon-size;
+    @include when(big) {
+      font-size: $--alert-icon-large-size;
+      width: $--alert-icon-large-size;
+    }
+  }
+
+  @include e(title) {
+    font-size: $--alert-title-font-size;
+    line-height: 18px;
+    @include when(bold) {
+      font-weight: bold;
+    }
+  }
+
+  & .#{$namespace}-alert__description {
+    font-size: $--alert-description-font-size;
+    margin: 5px 0 0 0;
+  }
+
+  @include e(closebtn) {
+    font-size: $--alert-close-font-size;
+    opacity: 1;
+    position: absolute;
+    top: 12px;
+    right: 15px;
+    cursor: pointer;
+
+    @include when(customed) {
+      font-style: normal;
+      font-size: $--alert-close-customed-font-size;
+      top: 9px;
+    }
+  }
+}
+
+.#{$namespace}-alert-fade-enter-from,
+.#{$namespace}-alert-fade-leave-active {
+  opacity: 0;
+}
--- a/src/assets/css/themes/src/aside.scss
+++ b/src/assets/css/themes/src/aside.scss
@@ -0,0 +1,7 @@
+@import "mixins/mixins";
+
+@include b(aside) {
+  overflow: auto;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
--- a/src/assets/css/themes/src/autocomplete.scss
+++ b/src/assets/css/themes/src/autocomplete.scss
@@ -0,0 +1,85 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "./input.scss";
+@import "./scrollbar.scss";
+@import "./popper";
+
+@include b(autocomplete) {
+  position: relative;
+  display: inline-block;
+
+  @include e(popper) {
+    @include picker-popper(
+      $--color-white,
+      1px solid $--border-color-light,
+      $--box-shadow-light,
+    );
+  }
+}
+
+@include b(autocomplete-suggestion) {
+  border-radius: $--border-radius-base;
+  box-sizing: border-box;
+
+  @include e(wrap) {
+    max-height: 280px;
+    padding: 10px 0;
+    box-sizing: border-box;
+  }
+
+  @include e(list) {
+    margin: 0;
+    padding: 0;
+  }
+
+  & li {
+    padding: 0 20px;
+    margin: 0;
+    line-height: 34px;
+    cursor: pointer;
+    color: $--color-text-regular;
+    font-size: $--font-size-base;
+    list-style: none;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background-color: $--select-option-hover-background;
+    }
+
+    &.highlighted {
+      background-color: $--select-option-hover-background;
+    }
+
+    &.divider {
+      margin-top: 6px;
+      border-top: 1px solid $--color-black;
+    }
+
+    &.divider:last-child {
+      margin-bottom: -6px;
+    }
+  }
+
+  @include when(loading) {
+    li {
+      text-align: center;
+      height: 100px;
+      line-height: 100px;
+      font-size: 20px;
+      color: #999;
+      @include utils-vertical-center;
+
+      &:hover {
+        background-color: $--color-white;
+      }
+    }
+
+    & .#{$namespace}-icon-loading {
+      vertical-align: middle;
+    }
+  }
+}
--- a/src/assets/css/themes/src/avatar.scss
+++ b/src/assets/css/themes/src/avatar.scss
@@ -0,0 +1,51 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(avatar) {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+  color: $--avatar-font-color;
+  background: $--avatar-background-color;
+  width: $--avatar-large-size;
+  height: $--avatar-large-size;
+  line-height: $--avatar-large-size;
+  font-size: $--avatar-text-font-size;
+
+  >img {
+    display: block;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  @include m(circle) {
+    border-radius: 50%;
+  }
+
+  @include m(square) {
+    border-radius: $--avatar-border-radius;
+  }
+
+  @include m(icon) {
+    font-size: $--avatar-icon-font-size;
+  }
+
+  @include m(large) {
+    width: $--avatar-large-size;
+    height: $--avatar-large-size;
+    line-height: $--avatar-large-size;
+  }
+
+  @include m(medium) {
+    width: $--avatar-medium-size;
+    height: $--avatar-medium-size;
+    line-height: $--avatar-medium-size;
+  }
+
+  @include m(small) {
+    width: $--avatar-small-size;
+    height: $--avatar-small-size;
+    line-height: $--avatar-small-size;
+  }
+}
--- a/src/assets/css/themes/src/backtop.scss
+++ b/src/assets/css/themes/src/backtop.scss
@@ -0,0 +1,22 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(backtop) {
+  position: fixed;
+  background-color: $--backtop-background-color;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: $--backtop-font-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  box-shadow: 0 0 6px rgba(0,0,0, .12);
+  cursor: pointer;
+  z-index: 5;
+
+  &:hover {
+    background-color: $--backtop-hover-background-color
+  }
+}
--- a/src/assets/css/themes/src/badge.scss
+++ b/src/assets/css/themes/src/badge.scss
@@ -0,0 +1,57 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(badge) {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+
+  @include e(content) {
+    background-color: $--badge-background-color;
+    border-radius: $--badge-radius;
+    color: $--color-white;
+    display: inline-block;
+    font-size: $--badge-font-size;
+    height: $--badge-size;
+    line-height: $--badge-size;
+    padding: 0 $--badge-padding;
+    text-align: center;
+    white-space: nowrap;
+    border: 1px solid $--color-white;
+
+    @include when(fixed) {
+      position: absolute;
+      top: 0;
+      right: #{1 + $--badge-size / 2};
+      transform: translateY(-50%) translateX(100%);
+
+      @include when(dot) {
+        right: 5px;
+      }
+    }
+
+    @include when(dot) {
+      height: 8px;
+      width: 8px;
+      padding: 0;
+      right: 0;
+      border-radius: 50%;
+    }
+
+    @each $type in (primary, success, warning, info, danger) {
+      @include m($type) {
+        @if $type == primary {
+          background-color: $--color-primary;
+        } @else if $type == success {
+          background-color: $--color-success;
+        } @else if $type == warning {
+          background-color: $--color-warning;
+        } @else if $type == info {
+          background-color: $--color-info;
+        } @else {
+          background-color: $--color-danger;
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/themes/src/base.scss
+++ b/src/assets/css/themes/src/base.scss
@@ -0,0 +1,2 @@
+@import "common/transition.scss";
+@import "icon.scss";
--- a/src/assets/css/themes/src/breadcrumb-item.scss
+++ b/src/assets/css/themes/src/breadcrumb-item.scss
--- a/src/assets/css/themes/src/breadcrumb.scss
+++ b/src/assets/css/themes/src/breadcrumb.scss
@@ -0,0 +1,55 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+
+@include b(breadcrumb) {
+  font-size: 14px;
+  line-height: 1;
+  @include utils-clearfix;
+
+  @include e(separator) {
+    margin: 0 9px;
+    font-weight: bold;
+    color: $--color-text-placeholder;
+
+    &[class*=icon] {
+      margin: 0 6px;
+      font-weight: normal;
+    }
+  }
+
+  @include e(item) {
+    float: left;
+
+    @include e(inner) {
+      color: $--color-text-regular;
+
+      &.is-link, & a {
+        font-weight: bold;
+        text-decoration: none;
+        transition: $--color-transition-base;
+        color: $--color-text-primary;
+
+        &:hover {
+          color: $--color-primary;
+          cursor: pointer;
+        }
+      }
+    }
+
+    &:last-child {
+      .#{$namespace}-breadcrumb__inner,
+      .#{$namespace}-breadcrumb__inner a {
+        &, &:hover {
+          font-weight: normal;
+          color: $--color-text-regular;
+          cursor: text;
+        }
+      }
+
+      .#{$namespace}-breadcrumb__separator {
+        display: none;
+      }
+    }
+  }
+}
--- a/src/assets/css/themes/src/button-group.scss
+++ b/src/assets/css/themes/src/button-group.scss
--- a/src/assets/css/themes/src/button.scss
+++ b/src/assets/css/themes/src/button.scss
@@ -0,0 +1,264 @@
+@charset "UTF-8";
+@import "common/var";
+@import "mixins/button";
+@import "mixins/mixins";
+@import "mixins/utils";
+
+@include b(button) {
+  display: inline-block;
+  line-height: 1;
+  min-height: $--input-height;
+  white-space: nowrap;
+  cursor: pointer;
+  background: $--button-default-background-color;
+  border: $--border-base;
+  border-color: $--button-default-border-color;
+  color: $--button-default-font-color;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  transition: .1s;
+  font-weight: $--button-font-weight;
+  @include utils-user-select(none);
+  & + & {
+    margin-left: 10px;
+  }
+
+  @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
+
+  &:hover,
+  &:focus {
+    color: $--color-primary;
+    border-color: $--color-primary-light-7;
+    background-color: $--color-primary-light-9;
+  }
+
+  &:active {
+    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+    outline: none;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  & [class*="#{$namespace}-icon-"] {
+    & + span {
+      margin-left: 5px;
+    }
+  }
+
+  @include when(plain) {
+    &:hover,
+    &:focus {
+      background: $--color-white;
+      border-color: $--color-primary;
+      color: $--color-primary;
+    }
+
+    &:active {
+      background: $--color-white;
+      border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+      outline: none;
+    }
+  }
+
+  @include when(active) {
+    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+  }
+
+  @include when(disabled) {
+    &,
+    &:hover,
+    &:focus {
+      color: $--button-disabled-font-color;
+      cursor: not-allowed;
+      background-image: none;
+      background-color: $--button-disabled-background-color;
+      border-color: $--button-disabled-border-color;
+    }
+
+    &.#{$namespace}-button--text {
+      background-color: transparent;
+    }
+
+    &.is-plain {
+      &,
+      &:hover,
+      &:focus {
+        background-color: $--color-white;
+        border-color: $--button-disabled-border-color;
+        color: $--button-disabled-font-color;
+      }
+    }
+  }
+
+  @include when(loading) {
+    position: relative;
+    pointer-events: none;
+
+    &:before {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      right: -1px;
+      bottom: -1px;
+      border-radius: inherit;
+      background-color: rgba(255,255,255,.35);
+    }
+  }
+  @include when(round) {
+    border-radius: 20px;
+    padding: 12px 23px;
+  }
+  @include when(circle) {
+    border-radius: 50%;
+    padding: $--button-padding-vertical;
+  }
+  @include m(primary) {
+    @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
+  }
+  @include m(success) {
+    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
+  }
+  @include m(warning) {
+    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
+  }
+  @include m(danger) {
+    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
+  }
+  @include m(info) {
+    @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
+  }
+  @include m(medium) {
+    min-height: $--input-medium-height;
+
+    @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
+    @include when(circle) {
+      padding: $--button-medium-padding-vertical;
+    }
+  }
+  @include m(small) {
+    min-height: $--input-small-height;
+
+    @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
+    @include when(circle) {
+      padding: $--button-small-padding-vertical;
+    }
+  }
+  @include m(mini) {
+    min-height: $--input-mini-height;
+
+    @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
+    @include when(circle) {
+      padding: $--button-mini-padding-vertical;
+    }
+  }
+  @include m(text) {
+    border-color: transparent;
+    color: $--color-primary;
+    background: transparent;
+    padding-left: 0;
+    padding-right: 0;
+
+    &:hover,
+    &:focus {
+      color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
+      border-color: transparent;
+      background-color: transparent;
+    }
+    &:active {
+      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+      border-color: transparent;
+      background-color: transparent;
+    }
+
+    &.is-disabled,
+    &.is-disabled:hover,
+    &.is-disabled:focus {
+      border-color: transparent;
+    }
+  }
+}
+
+@include b(button-group) {
+  @include utils-clearfix;
+  display: inline-block;
+  vertical-align: middle;
+
+  & > .#{$namespace}-button {
+    float: left;
+    position: relative;
+    & + .#{$namespace}-button {
+      margin-left: 0;
+    }
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    &:first-child:last-child {
+      border-top-right-radius: $--button-border-radius;
+      border-bottom-right-radius: $--button-border-radius;
+      border-top-left-radius: $--button-border-radius;
+      border-bottom-left-radius: $--button-border-radius;
+
+      &.is-round {
+        border-radius: 20px;
+      }
+
+      &.is-circle {
+        border-radius: 50%;
+      }
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 1;
+    }
+
+    @include when(active) {
+      z-index: 1;
+    }
+  }
+
+  & > .#{$namespace}-dropdown {
+    & > .#{$namespace}-button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left-color: rgba($--color-white, 0.5);
+    }
+  }
+
+  @each $type in (primary, success, warning, danger, info) {
+    .#{$namespace}-button--#{$type} {
+      &:first-child {
+        border-right-color: rgba($--color-white, 0.5);
+      }
+      &:last-child {
+        border-left-color: rgba($--color-white, 0.5);
+      }
+      &:not(:first-child):not(:last-child) {
+        border-left-color: rgba($--color-white, 0.5);
+        border-right-color: rgba($--color-white, 0.5);
+      }
+    }
+  }
+}
--- a/src/assets/css/themes/src/calendar.scss
+++ b/src/assets/css/themes/src/calendar.scss
@@ -0,0 +1,79 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "button";
+@import "button-group";
+
+@include b(calendar) {
+  background-color:#fff;
+
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 20px;
+    border-bottom: $--table-border;
+  }
+
+  @include e(title) {
+    color: #000000;
+    align-self: center;
+  }
+
+  @include e(body) {
+    padding: 12px 20px 35px;
+  }
+}
+
+@include b(calendar-table) {
+  table-layout: fixed;
+  width: 100%;
+
+  thead th {
+    padding: 12px 0;
+    color: $--color-text-regular;
+    font-weight: normal;
+  }
+
+  &:not(.is-range) {
+    td.prev,
+    td.next {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  td {
+    border-bottom: $--calendar-border;
+    border-right: $--calendar-border;
+    vertical-align: top;
+    transition: background-color 0.2s ease;
+
+    @include when(selected) {
+      background-color: $--calendar-selected-background-color;
+    }
+
+    @include when(today) {
+      color: $--color-primary;
+    }
+  }
+
+  tr:first-child td {
+    border-top: $--calendar-border;
+  }
+
+  tr td:first-child {
+    border-left: $--calendar-border;
+  }
+
+  tr.#{$namespace}-calendar-table__row--hide-border td {
+    border-top: none;
+  }
+
+  @include b(calendar-day) {
+    box-sizing: border-box;
+    padding: 8px;
+    height: $--calendar-cell-width;
+    &:hover {
+      cursor: pointer;
+      background-color: $--calendar-selected-background-color;
+    }
+  }
+}
--- a/src/assets/css/themes/src/card.scss
+++ b/src/assets/css/themes/src/card.scss
@@ -0,0 +1,32 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(card) {
+  border-radius: $--card-border-radius;
+  border: 1px solid $--card-border-color;
+  background-color: $--color-white;
+  overflow: hidden;
+  color: $--color-text-primary;
+  transition: 0.3s;
+
+  @include when(always-shadow) {
+    box-shadow: $--box-shadow-light;
+  }
+
+  @include when(hover-shadow) {
+    &:hover,
+    &:focus {
+      box-shadow: $--box-shadow-light;
+    }
+  }
+
+  @include e(header) {
+    padding: #{$--card-padding - 2 $--card-padding};
+    border-bottom: 1px solid $--card-border-color;
+    box-sizing: border-box;
+  }
+
+  @include e(body) {
+    padding: $--card-padding;
+  }
+}
--- a/src/assets/css/themes/src/carousel-item.scss
+++ b/src/assets/css/themes/src/carousel-item.scss
@@ -0,0 +1,50 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(carousel) {
+  @include e(item) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+    overflow: hidden;
+    z-index: #{$--index-normal - 1};
+
+    @include when(active) {
+      z-index: #{$--index-normal + 1};
+    }
+
+    @include when(animating) {
+      transition: transform .4s ease-in-out;
+    }
+
+    @include m(card) {
+      width: 50%;
+      transition: transform .4s ease-in-out;
+      &.is-in-stage {
+        cursor: pointer;
+        z-index: $--index-normal;
+        &:hover .#{$namespace}-carousel__mask,
+        &.is-hover .#{$namespace}-carousel__mask {
+          opacity: 0.12;
+        }
+      }
+      &.is-active {
+        z-index: #{$--index-normal + 1};
+      }
+    }
+  }
+
+  @include e(mask) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: $--color-white;
+    opacity: 0.24;
+    transition: .2s;
+  }
+}
--- a/src/assets/css/themes/src/carousel.scss
+++ b/src/assets/css/themes/src/carousel.scss
@@ -0,0 +1,161 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(carousel) {
+  position: relative;
+
+  @include m(horizontal) {
+    overflow-x: hidden;
+  }
+
+  @include m(vertical) {
+    overflow-y: hidden;
+  }
+
+  @include e(container) {
+    position: relative;
+    height: 300px;
+  }
+
+  @include e(arrow) {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    height: $--carousel-arrow-size;
+    width: $--carousel-arrow-size;
+    cursor: pointer;
+    transition: .3s;
+    border-radius: 50%;
+    background-color: $--carousel-arrow-background;
+    color: $--color-white;
+    position: absolute;
+    top: 50%;
+    z-index: 10;
+    transform: translateY(-50%);
+    text-align: center;
+    font-size: $--carousel-arrow-font-size;
+
+    @include m(left) {
+      left: 16px;
+    }
+
+    @include m(right) {
+      right: 16px;
+    }
+
+    &:hover {
+      background-color: $--carousel-arrow-hover-background;
+    }
+
+    & i {
+      cursor: pointer;
+    }
+  }
+
+  @include e(indicators) {
+    position: absolute;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    z-index: #{$--index-normal + 1};
+
+    @include m(horizontal) {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    @include m(vertical) {
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    @include m(outside) {
+      bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};
+      text-align: center;
+      position: static;
+      transform: none;
+      .#{$namespace}-carousel__indicator:hover button {
+        opacity: 0.64;
+      }
+      button {
+        background-color: $--carousel-indicator-out-color;
+        opacity: 0.24;
+      }
+    }
+
+    @include m(labels) {
+      left: 0;
+      right: 0;
+      transform: none;
+      text-align: center;
+
+      .#{$namespace}-carousel__button {
+        height: auto;
+        width: auto;
+        padding: 2px 18px;
+        font-size: 12px;
+      }
+
+      .#{$namespace}-carousel__indicator {
+        padding: 6px 4px;
+      }
+    }
+  }
+
+  @include e(indicator) {
+    background-color: transparent;
+    cursor: pointer;
+
+    &:hover button {
+      opacity: 0.72;
+    }
+
+    @include m(horizontal) {
+      display: inline-block;
+      padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
+    }
+
+    @include m(vertical) {
+      padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
+      .#{$namespace}-carousel__button {
+        width: $--carousel-indicator-height;
+        height: #{$--carousel-indicator-width / 2};
+      }
+    }
+
+    @include when(active) {
+      button {
+        opacity: 1;
+      }
+    }
+  }
+
+  @include e(button) {
+    display: block;
+    opacity: 0.48;
+    width: $--carousel-indicator-width;
+    height: $--carousel-indicator-height;
+    background-color: $--color-white;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition: .3s;
+  }
+}
+
+.carousel-arrow-left-enter-from,
+.carousel-arrow-left-leave-active {
+  transform: translateY(-50%) translateX(-10px);
+  opacity: 0;
+}
+
+.carousel-arrow-right-enter-from,
+.carousel-arrow-right-leave-active {
+  transform: translateY(-50%) translateX(10px);
+  opacity: 0;
+}
--- a/src/assets/css/themes/src/cascader-panel.scss
+++ b/src/assets/css/themes/src/cascader-panel.scss
@@ -0,0 +1,121 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "./checkbox";
+@import "./radio";
+@import "./scrollbar";
+
+@include b(cascader-panel) {
+  display: flex;
+  border-radius: $--cascader-menu-radius;
+  font-size: $--cascader-menu-font-size;
+
+  @include when(bordered) {
+    border: $--cascader-menu-border;
+    border-radius: $--cascader-menu-radius;
+  }
+}
+
+@include b(cascader-menu) {
+  min-width: 180px;
+  box-sizing: border-box;
+  color: $--cascader-menu-font-color;
+  border-right: $--cascader-menu-border;
+
+  &:last-child {
+    border-right: none;
+    .#{$namespace}-cascader-node {
+      padding-right: 20px;
+    }
+  }
+
+  @include e(wrap) {
+    height: 204px;
+  }
+
+  @include e(list) {
+    position: relative;
+    min-height: 100%;
+    margin: 0;
+    padding: 6px 0;
+    list-style: none;
+    box-sizing: border-box;
+  }
+
+  @include e(hover-zone) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  @include e(empty-text) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: $--cascader-color-empty;
+  }
+}
+
+@include b(cascader-node) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 30px 0 20px;
+  height: 34px;
+  line-height: 34px;
+  outline: none;
+
+  &.is-selectable.in-active-path {
+    color: $--cascader-menu-font-color;
+  }
+
+  &.in-active-path,
+  &.is-selectable.in-checked-path,
+  &.is-active {
+    color: $--cascader-menu-selected-font-color;
+    font-weight: bold;
+  }
+
+  &:not(.is-disabled) {
+    cursor: pointer;
+    &:hover, &:focus {
+      background: $--cascader-node-background-hover;
+    }
+  }
+
+  @include when(disabled) {
+    color: $--cascader-node-color-disabled;
+    cursor: not-allowed;
+  }
+
+  @include e(prefix) {
+    position: absolute;
+    left: 10px;
+  }
+
+  @include e(postfix) {
+    position: absolute;
+    right: 10px;
+  }
+
+  @include e(label) {
+    flex: 1;
+    text-align: left;
+    padding: 0 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  > .#{$namespace}-radio {
+    margin-right: 0;
+
+    .#{$namespace}-radio__label {
+      padding-left: 0;
+    }
+  }
+}
--- a/src/assets/css/themes/src/cascader.scss
+++ b/src/assets/css/themes/src/cascader.scss
@@ -0,0 +1,185 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "./input";
+@import "./popper";
+@import "./tag";
+@import "./cascader-panel";
+
+@include b(cascader) {
+  display: inline-block;
+  position: relative;
+  font-size: $--font-size-base;
+  line-height: $--input-height;
+  outline: none;
+
+  &:not(.is-disabled):hover {
+    .#{$namespace}-input__inner {
+      cursor: pointer;
+      border-color: $--input-hover-border;
+    }
+  }
+
+  .#{$namespace}-input {
+    cursor: pointer;
+
+    .#{$namespace}-input__inner {
+      text-overflow: ellipsis;
+
+      &:focus {
+        border-color: $--input-focus-border;
+      }
+    }
+
+    .#{$namespace}-icon-arrow-down {
+      transition: transform .3s;
+      font-size: 14px;
+
+      @include when(reverse) {
+        transform: rotateZ(180deg);
+      }
+    }
+
+    .#{$namespace}-icon-circle-close:hover {
+      color: $--input-clear-hover-color;
+    }
+
+    @include when(focus) {
+      .#{$namespace}-input__inner {
+        border-color: $--input-focus-border;
+      }
+    }
+  }
+
+  @include m(medium) {
+    font-size: $--input-medium-font-size;
+    line-height: $--input-medium-height;
+  }
+
+  @include m(small) {
+    font-size: $--input-small-font-size;
+    line-height: $--input-small-height;
+  }
+
+  @include m(mini) {
+    font-size: $--input-mini-font-size;
+    line-height: $--input-mini-height;
+  }
+
+  @include when(disabled) {
+    .#{$namespace}-cascader__label {
+      z-index: #{$--index-normal + 1};
+      color: $--disabled-color-base;
+    }
+  }
+
+  @include e(dropdown) {
+    font-size: $--cascader-menu-font-size;
+    border-radius: $--cascader-menu-radius;
+
+    @include picker-popper(
+      $--cascader-menu-fill,
+      $--cascader-menu-border,
+      $--cascader-menu-shadow,
+    );
+  }
+
+  @include e(tags) {
+    position: absolute;
+    left: 0;
+    right: 30px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-wrap: wrap;
+    line-height: normal;
+    text-align: left;
+    box-sizing: border-box;
+
+    .#{$namespace}-tag {
+      display: inline-flex;
+      align-items: center;
+      max-width: 100%;
+      margin: 2px 0 2px 6px;
+      text-overflow: ellipsis;
+      background: $--cascader-tag-background;
+
+      &:not(.is-hit) {
+        border-color: transparent;
+      }
+
+      > span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .#{$namespace}-icon-close {
+        flex: none;
+        background-color: $--color-text-placeholder;
+        color: $--color-white;
+
+        &:hover {
+          background-color: $--color-text-secondary;
+        }
+      }
+    }
+  }
+
+  @include e(suggestion-panel) {
+    border-radius: $--cascader-menu-radius;
+  }
+
+  @include e(suggestion-list) {
+    max-height: 204px;
+    margin: 0;
+    padding: 6px 0;
+    font-size: $--font-size-base;
+    color: $--cascader-menu-font-color;
+    text-align: center;
+  }
+
+  @include e(suggestion-item) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 34px;
+    padding: 0 15px;
+    text-align: left;
+    outline: none;
+    cursor: pointer;
+
+    &:hover, &:focus {
+      background: $--cascader-node-background-hover;
+    }
+
+    &.is-checked {
+      color: $--cascader-menu-selected-font-color;
+      font-weight: bold;
+    }
+
+    > span {
+      margin-right: 10px;
+    }
+  }
+
+  @include e(empty-text) {
+    margin: 10px 0;
+    color: $--cascader-color-empty;
+  }
+
+  @include e(search-input) {
+    flex: 1;
+    height: 24px;
+    min-width: 60px;
+    margin: 2px 0 2px 15px;
+    padding: 0;
+    color: $--cascader-menu-font-color;
+    border: none;
+    outline: none;
+    box-sizing: border-box;
+
+    &::placeholder {
+      color: $--color-text-placeholder;
+    }
+  }
+}
--- a/src/assets/css/themes/src/check-tag.scss
+++ b/src/assets/css/themes/src/check-tag.scss
@@ -0,0 +1,26 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(check-tag) {
+  background-color: $--background-color-base;
+  border-radius: $--border-radius-base;
+  color: $--color-info;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $--font-size-base;
+  line-height: $--font-size-base;
+  padding: 7px 15px;
+  transition: $--all-transition;
+  font-weight: bold;
+  &:hover {
+    background-color: rgb(220, 223, 230);
+  }
+
+  @include when(checked) {
+    background-color: #DEEDFC;
+    color: $--color-primary-light-1;
+    &:hover {
+      background-color: $--color-primary-light-7;
+    }
+  }
+}
--- a/src/assets/css/themes/src/checkbox-button.scss
+++ b/src/assets/css/themes/src/checkbox-button.scss
--- a/src/assets/css/themes/src/checkbox-group.scss
+++ b/src/assets/css/themes/src/checkbox-group.scss
--- a/src/assets/css/themes/src/checkbox.scss
+++ b/src/assets/css/themes/src/checkbox.scss
@@ -0,0 +1,359 @@
+@import "common/var";
+@import "mixins/mixins";
+@import "mixins/_button";
+@import "mixins/utils";
+
+@include b(checkbox) {
+  color: $--checkbox-font-color;
+  font-weight: $--checkbox-font-weight;
+  font-size: $--font-size-base;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  user-select: none;
+  margin-right: 30px;
+
+  @include when(bordered) {
+    padding: $--checkbox-bordered-padding;
+    border-radius: $--border-radius-base;
+    border: $--border-base;
+    box-sizing: border-box;
+    line-height: normal;
+    height: $--checkbox-bordered-height;
+
+    &.is-checked {
+      border-color: $--color-primary;
+    }
+
+    &.is-disabled {
+      border-color: $--border-color-lighter;
+      cursor: not-allowed;
+    }
+
+    & + .#{$namespace}-checkbox.is-bordered {
+      margin-left: 10px;
+    }
+
+    &.#{$namespace}-checkbox--medium {
+      padding: $--checkbox-bordered-medium-padding;
+      border-radius: $--button-medium-border-radius;
+      height: $--checkbox-bordered-medium-height;
+
+      .#{$namespace}-checkbox__label {
+        line-height: 17px;
+        font-size: $--button-medium-font-size;
+      }
+
+      .#{$namespace}-checkbox__inner {
+        height: $--checkbox-bordered-medium-input-height;
+        width: $--checkbox-bordered-medium-input-width;
+      }
+    }
+
+    &.#{$namespace}-checkbox--small {
+      padding: $--checkbox-bordered-small-padding;
+      border-radius: $--button-small-border-radius;
+      height: $--checkbox-bordered-small-height;
+
+      .#{$namespace}-checkbox__label {
+        line-height: 15px;
+        font-size: $--button-small-font-size;
+      }
+
+      .#{$namespace}-checkbox__inner {
+        height: $--checkbox-bordered-small-input-height;
+        width: $--checkbox-bordered-small-input-width;
+
+        &::after {
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
+
+    &.#{$namespace}-checkbox--mini {
+      padding: $--checkbox-bordered-mini-padding;
+      border-radius: $--button-mini-border-radius;
+      height: $--checkbox-bordered-mini-height;
+
+      .#{$namespace}-checkbox__label {
+        line-height: 12px;
+        font-size: $--button-mini-font-size;
+      }
+
+      .#{$namespace}-checkbox__inner {
+        height: $--checkbox-bordered-mini-input-height;
+        width: $--checkbox-bordered-mini-input-width;
+        &::after {
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
+  }
+
+  @include e(input) {
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    display: inline-block;
+    line-height: 1;
+    position: relative;
+    vertical-align: middle;
+
+    @include when(disabled) {
+      .#{$namespace}-checkbox__inner {
+        background-color: $--checkbox-disabled-input-fill;
+        border-color: $--checkbox-disabled-border-color;
+        cursor: not-allowed;
+
+        &::after {
+          cursor: not-allowed;
+          border-color: $--checkbox-disabled-icon-color;
+        }
+
+        & + .#{$namespace}-checkbox__label {
+          cursor: not-allowed;
+        }
+      }
+
+      &.is-checked {
+        .#{$namespace}-checkbox__inner {
+          background-color: $--checkbox-disabled-checked-input-fill;
+          border-color: $--checkbox-disabled-checked-input-border-color;
+
+          &::after {
+            border-color: $--checkbox-disabled-checked-icon-color;
+          }
+        }
+      }
+
+      &.is-indeterminate {
+        .#{$namespace}-checkbox__inner {
+          background-color: $--checkbox-disabled-checked-input-fill;
+          border-color: $--checkbox-disabled-checked-input-border-color;
+
+          &::before {
+            background-color: $--checkbox-disabled-checked-icon-color;
+            border-color: $--checkbox-disabled-checked-icon-color;
+          }
+        }
+      }
+
+      & + span.#{$namespace}-checkbox__label {
+        color: $--disabled-color-base;
+        cursor: not-allowed;
+      }
+    }
+
+    @include when(checked) {
+      .#{$namespace}-checkbox__inner {
+        background-color: $--checkbox-checked-background-color;
+        border-color: $--checkbox-checked-input-border-color;
+
+        &::after {
+          transform: rotate(45deg) scaleY(1);
+        }
+      }
+
+      & + .#{$namespace}-checkbox__label {
+        color: $--checkbox-checked-font-color;
+      }
+    }
+    @include when(focus) { /*focus时 视觉上区分*/
+      .#{$namespace}-checkbox__inner {
+        border-color: $--checkbox-input-border-color-hover;
+      }
+    }
+    @include when(indeterminate) {
+      .#{$namespace}-checkbox__inner {
+        background-color: $--checkbox-checked-background-color;
+        border-color: $--checkbox-checked-input-border-color;
+
+        &::before {
+          content: '';
+          position: absolute;
+          display: block;
+          background-color: $--checkbox-checked-icon-color;
+          height: 2px;
+          transform: scale(0.5);
+          left: 0;
+          right: 0;
+          top: 5px;
+        }
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+  @include e(inner) {
+    display: inline-block;
+    position: relative;
+    border: $--checkbox-input-border;
+    border-radius: $--checkbox-border-radius;
+    box-sizing: border-box;
+    width: $--checkbox-input-width;
+    height: $--checkbox-input-height;
+    background-color: $--checkbox-background-color;
+    z-index: $--index-normal;
+    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
+    background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+
+    &:hover {
+      border-color: $--checkbox-input-border-color-hover;
+    }
+
+    &::after {
+      box-sizing: content-box;
+      content: "";
+      border: 1px solid $--checkbox-checked-icon-color;
+      border-left: 0;
+      border-top: 0;
+      height: 7px;
+      left: 4px;
+      position: absolute;
+      top: 1px;
+      transform: rotate(45deg) scaleY(0);
+      width: 3px;
+      transition: transform .15s ease-in .05s;
+      transform-origin: center;
+    }
+  }
+
+  @include e(original) {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    margin: 0;
+    width: 0;
+    height: 0;
+    z-index: -1;
+  }
+
+  @include e(label) {
+    display: inline-block;
+    padding-left: 10px;
+    line-height: 19px;
+    font-size: $--checkbox-font-size;
+  }
+
+  &:last-of-type {
+    margin-right: 0;
+  }
+}
+
+@include b(checkbox-button) {
+  position: relative;
+  display: inline-block;
+
+  @include e(inner) {
+    display: inline-block;
+    line-height: 1;
+    font-weight: $--checkbox-font-weight;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    background: $--button-default-background-color;
+    border: $--border-base;
+    border-left: 0;
+    color: $--button-default-font-color;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    position: relative;
+    transition: $--all-transition;
+    @include utils-user-select(none);
+
+    @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    & [class*="#{$namespace}-icon-"] {
+      line-height: 0.9;
+
+      & + span {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  @include e(original) {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    margin: 0;
+    z-index: -1;
+  }
+
+  &.is-checked {
+    & .#{$namespace}-checkbox-button__inner {
+      color: $--checkbox-button-checked-font-color;
+      background-color: $--checkbox-button-checked-background-color;
+      border-color: $--checkbox-button-checked-border-color;
+      box-shadow: -1px 0 0 0 $--color-primary-light-4;
+    }
+    &:first-child .#{$namespace}-checkbox-button__inner {
+      border-left-color: $--checkbox-button-checked-border-color;
+    }
+  }
+
+  &.is-disabled {
+    & .#{$namespace}-checkbox-button__inner {
+      color: $--button-disabled-font-color;
+      cursor: not-allowed;
+      background-image: none;
+      background-color: $--button-disabled-background-color;
+      border-color: $--button-disabled-border-color;
+      box-shadow: none;
+    }
+    &:first-child .#{$namespace}-checkbox-button__inner {
+      border-left-color: $--button-disabled-border-color;
+    }
+  }
+
+  &:first-child {
+    .#{$namespace}-checkbox-button__inner {
+      border-left: $--border-base;
+      border-radius: $--border-radius-base 0 0 $--border-radius-base;
+      box-shadow: none !important;
+    }
+  }
+
+  &.is-focus {
+    & .#{$namespace}-checkbox-button__inner {
+      border-color: $--checkbox-button-checked-border-color;
+    }
+  }
+
+  &:last-child {
+    .#{$namespace}-checkbox-button__inner {
+      border-radius: 0 $--border-radius-base $--border-radius-base 0;
+    }
+  }
+  @include m(medium) {
+    .#{$namespace}-checkbox-button__inner {
+      @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
+    }
+  }
+  @include m(small) {
+    .#{$namespace}-checkbox-button__inner {
+      @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
+    }
+  }
+  @include m(mini) {
+    .#{$namespace}-checkbox-button__inner {
+      @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
+    }
+  }
+}
+
+@include b(checkbox-group) {
+  font-size: 0;
+}
--- a/src/assets/css/themes/src/col.scss
+++ b/src/assets/css/themes/src/col.scss
@@ -0,0 +1,200 @@
+@import './common/var.scss';
+@import './mixins/mixins.scss';
+
+[class*='#{$namespace}-col-'] {
+  float: left;
+  box-sizing: border-box;
+  @include when(guttered) {
+    display: block;
+    min-height: 1px;
+  }
+}
+
+.#{$namespace}-col-0 {
+  display: none;
+  // to avoid introducing !important syntax, redundant css rule is required due to selector priority.
+  @include when(guttered) {
+    display: none;
+  }
+}
+
+@for $i from 0 through 24 {
+  .#{$namespace}-col-#{$i} {
+    max-width: (1 / 24 * $i * 100) * 1%;
+    flex: 0 0 (1 / 24 * $i * 100) * 1%;
+  }
+
+  .#{$namespace}-col-offset-#{$i} {
+    margin-left: (1 / 24 * $i * 100) * 1%;
+  }
+
+  .#{$namespace}-col-pull-#{$i} {
+    position: relative;
+    right: (1 / 24 * $i * 100) * 1%;
+  }
+
+  .#{$namespace}-col-push-#{$i} {
+    position: relative;
+    left: (1 / 24 * $i * 100) * 1%;
+  }
+}
+
+@include res(xs) {
+  .#{$namespace}-col-xs-0 {
+    display: none;
+    @include when(guttered) {
+      display: none;
+    }
+  }
+  @for $i from 0 through 24 {
+    .#{$namespace}-col-xs-#{$i} {
+      @if $i != 0 {
+        display: block;
+      }
+      max-width: (1 / 24 * $i * 100) * 1%;
+      flex: 0 0 (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-xs-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-xs-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-xs-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+  }
+}
+
+@include res(sm) {
+  .#{$namespace}-col-sm-0 {
+    display: none;
+    @include when(guttered) {
+      display: none;
+    }
+  }
+  @for $i from 0 through 24 {
+    .#{$namespace}-col-sm-#{$i} {
+      @if $i != 0 {
+        display: block;
+      }
+      max-width: (1 / 24 * $i * 100) * 1%;
+      flex: 0 0 (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-sm-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-sm-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-sm-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+  }
+}
+
+@include res(md) {
+  .#{$namespace}-col-md-0 {
+    display: none;
+    @include when(guttered) {
+      display: none;
+    }
+  }
+  @for $i from 0 through 24 {
+    .#{$namespace}-col-md-#{$i} {
+      @if $i != 0 {
+        display: block;
+      }
+      max-width: (1 / 24 * $i * 100) * 1%;
+      flex: 0 0 (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-md-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-md-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-md-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+  }
+}
+
+@include res(lg) {
+  .#{$namespace}-col-lg-0 {
+    display: none;
+    @include when(guttered) {
+      display: none;
+    }
+  }
+  @for $i from 0 through 24 {
+    .#{$namespace}-col-lg-#{$i} {
+      @if $i != 0 {
+        display: block;
+      }
+      max-width: (1 / 24 * $i * 100) * 1%;
+      flex: 0 0 (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-lg-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-lg-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-lg-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+  }
+}
+
+@include res(xl) {
+  .#{$namespace}-col-xl-0 {
+    display: none;
+    @include when(guttered) {
+      display: none;
+    }
+  }
+  @for $i from 0 through 24 {
+    .#{$namespace}-col-xl-#{$i} {
+      @if $i != 0 {
+        display: block;
+      }
+      max-width: (1 / 24 * $i * 100) * 1%;
+      flex: 0 0 (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-xl-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-xl-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .#{$namespace}-col-xl-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+  }
+}
--- a/src/assets/css/themes/src/collapse-item.scss
+++ b/src/assets/css/themes/src/collapse-item.scss
--- a/src/assets/css/themes/src/collapse-transition.scss
+++ b/src/assets/css/themes/src/collapse-transition.scss
--- a/src/assets/css/themes/src/collapse.scss
+++ b/src/assets/css/themes/src/collapse.scss
@@ -0,0 +1,63 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "common/transition";
+
+@include b(collapse) {
+  border-top: 1px solid $--collapse-border-color;
+  border-bottom: 1px solid $--collapse-border-color;
+}
+@include b(collapse-item) {
+  @include when(disabled) {
+    .#{$namespace}-collapse-item__header {
+      color: $--font-color-disabled-base;
+      cursor: not-allowed;
+    }
+  }
+  @include e(header) {
+    display: flex;
+    align-items: center;
+    height: $--collapse-header-height;
+    line-height: $--collapse-header-height;
+    background-color: $--collapse-header-background-color;
+    color: $--collapse-header-font-color;
+    cursor: pointer;
+    border-bottom: 1px solid $--collapse-border-color;
+    font-size: $--collapse-header-font-size;
+    font-weight: 500;
+    transition: border-bottom-color .3s;
+    outline: none;
+    @include e(arrow) {
+      margin: 0 8px 0 auto;
+      transition: transform .3s;
+      font-weight: 300;
+      @include when(active) {
+        transform: rotate(90deg);
+      }
+    }
+    &.focusing:focus:not(:hover){
+      color: $--color-primary;
+    }
+    @include when(active) {
+      border-bottom-color: transparent;
+    }
+  }
+
+  @include e(wrap) {
+    will-change: height;
+    background-color: $--collapse-content-background-color;
+    overflow: hidden;
+    box-sizing: border-box;
+    border-bottom: 1px solid $--collapse-border-color;
+  }
+
+  @include e(content) {
+    padding-bottom: 25px;
+    font-size: $--collapse-content-font-size;
+    color: $--collapse-content-font-color;
+    line-height: 1.769230769230769;
+  }
+
+  &:last-child {
+    margin-bottom: -1px;
+  }
+}
--- a/src/assets/css/themes/src/color-picker.scss
+++ b/src/assets/css/themes/src/color-picker.scss
@@ -0,0 +1,387 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(color-predefine) {
+  display: flex;
+  font-size: 12px;
+  margin-top: 8px;
+  width: 280px;
+
+  @include e(colors) {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+  }
+
+  @include e(color-selector) {
+    margin: 0 0 8px 8px;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:nth-child(10n + 1) {
+      margin-left: 0;
+    }
+
+    &.selected {
+      box-shadow: 0 0 3px 2px $--color-primary;
+    }
+
+    > div {
+      display: flex;
+      height: 100%;
+      border-radius: 3px;
+    }
+
+    @include when(alpha) {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+    }
+  }
+}
+
+@include b(color-hue-slider) {
+  position: relative;
+  box-sizing: border-box;
+  width: 280px;
+  height: 12px;
+  background-color: #f00;
+  padding: 0 2px;
+  float: right;
+
+  @include e(bar) {
+    position: relative;
+    background: linear-gradient(
+      to right, #f00 0%,
+      #ff0 17%, #0f0 33%,
+      #0ff 50%, #00f 67%,
+      #f0f 83%, #f00 100%);
+    height: 100%;
+  }
+
+  @include e(thumb) {
+    position: absolute;
+    cursor: pointer;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    width: 4px;
+    height: 100%;
+    border-radius: 1px;
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+    z-index: 1;
+  }
+
+  @include when(vertical) {
+    width: 12px;
+    height: 180px;
+    padding: 2px 0;
+
+    .#{$namespace}-color-hue-slider__bar {
+      background: linear-gradient(
+        to bottom, #f00 0%,
+        #ff0 17%, #0f0 33%,
+        #0ff 50%, #00f 67%,
+        #f0f 83%, #f00 100%);
+    }
+
+    .#{$namespace}-color-hue-slider__thumb {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px;
+    }
+  }
+}
+
+@include b(color-svpanel) {
+  position: relative;
+  width: 280px;
+  height: 180px;
+
+  @include e(('white', 'black')) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  @include e('white') {
+    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
+  }
+
+  @include e('black') {
+    background: linear-gradient(to top, #000, rgba(0,0,0,0));
+  }
+
+  @include e(cursor) {
+    position: absolute;
+
+    > div {
+      cursor: head;
+      width: 4px;
+      height: 4px;
+      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
+      border-radius: 50%;
+      transform: translate(-2px, -2px);
+    }
+  }
+}
+
+@include b(color-alpha-slider) {
+  position: relative;
+  box-sizing: border-box;
+  width: 280px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+
+  @include e(bar) {
+    position: relative;
+    background: linear-gradient(
+      to right, rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 1) 100%);
+    height: 100%;
+  }
+
+  @include e(thumb) {
+    position: absolute;
+    cursor: pointer;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    width: 4px;
+    height: 100%;
+    border-radius: 1px;
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+    z-index: 1;
+  }
+
+  @include when(vertical) {
+    width: 20px;
+    height: 180px;
+
+    .#{$namespace}-color-alpha-slider__bar {
+      background: linear-gradient(
+        to bottom, rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 1) 100%);
+    }
+
+    .#{$namespace}-color-alpha-slider__thumb {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px;
+    }
+  }
+}
+
+@include b(color-dropdown) {
+  width: 300px;
+
+  @include e(main-wrapper) {
+    margin-bottom: 6px;
+
+    &::after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+  }
+
+  @include e(btns) {
+    margin-top: 6px;
+    text-align: right;
+  }
+
+  @include e(value) {
+    float: left;
+    line-height: 26px;
+    font-size: 12px;
+    color: $--color-black;
+    width: 160px;
+  }
+
+  @include e(btn) {
+    border: 1px solid #dcdcdc;
+    color: #333;
+    line-height: 24px;
+    border-radius: 2px;
+    padding: 0 20px;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none;
+    font-size: 12px;
+
+    &[disabled] {
+      color: #cccccc;
+      cursor: not-allowed;
+    }
+    &:hover {
+      color: $--color-primary;
+      border-color: $--color-primary;
+    }
+  }
+
+  @include e(link-btn) {
+    cursor: pointer;
+    color: $--color-primary;
+    text-decoration: none;
+    padding: 15px;
+    font-size: 12px;
+    &:hover {
+      color: tint($--color-primary, $--button-hover-tint-percent);
+    }
+  }
+}
+
+@include b(color-picker) {
+  display: inline-block;
+  position: relative;
+  line-height: normal;
+  height: 40px;
+
+  @include when(disabled) {
+    .#{$namespace}-color-picker__trigger {
+      cursor: not-allowed;
+    }
+  }
+
+  @include m(medium) {
+    height: 36px;
+
+    .#{$namespace}-color-picker__trigger {
+      height: 36px;
+      width: 36px;
+    }
+
+    .#{$namespace}-color-picker__mask {
+      height: 34px;
+      width: 34px;
+    }
+  }
+
+  @include m(small) {
+    height: 32px;
+
+    .#{$namespace}-color-picker__trigger {
+      height: 32px;
+      width: 32px;
+    }
+
+    .#{$namespace}-color-picker__mask {
+      height: 30px;
+      width: 30px;
+    }
+
+    .#{$namespace}-color-picker__icon,
+    .#{$namespace}-color-picker__empty {
+      transform: translate3d(-50%, -50%, 0) scale(0.8);
+    }
+  }
+
+  @include m(mini) {
+    height: 28px;
+
+    .#{$namespace}-color-picker__trigger {
+      height: 28px;
+      width: 28px;
+    }
+
+    .#{$namespace}-color-picker__mask {
+      height: 26px;
+      width: 26px;
+    }
+
+    .#{$namespace}-color-picker__icon,
+    .#{$namespace}-color-picker__empty {
+      transform: translate3d(-50%, -50%, 0) scale(0.8);
+    }
+  }
+
+  @include e(mask) {
+    height: 38px;
+    width: 38px;
+    border-radius: 4px;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    z-index: 1;
+    cursor: not-allowed;
+    background-color: rgba(255, 255, 255, .7);
+  }
+
+  @include e(trigger) {
+    display: inline-block;
+    box-sizing: border-box;
+    height: 40px;
+    width: 40px;
+    padding: 4px;
+    border: 1px solid #e6e6e6;
+    border-radius: 4px;
+    font-size: 0;
+    position: relative;
+    cursor: pointer;
+  }
+
+  @include e(color) {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    border: 1px solid #999;
+    border-radius: $--border-radius-small;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+
+    @include when(alpha) {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+    }
+  }
+
+  @include e(color-inner) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  @include e(empty) {
+    font-size: 12px;
+    color: #999;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+  }
+
+  @include e(icon) {
+    display: inline-block;
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    color: $--color-white;
+    text-align: center;
+    font-size: 12px;
+  }
+
+  @include e(panel) {
+    position: absolute;
+    z-index: 10;
+    padding: 6px;
+    box-sizing: content-box;
+    background-color: $--color-white;
+    border-radius: $--border-radius-base;
+    box-shadow: $--dropdown-menu-box-shadow;
+    &.#{$namespace}-popper{
+      border: 1px solid $--border-color-lighter;
+    }
+  }
+}
--- a/src/assets/css/themes/src/common/popup.scss
+++ b/src/assets/css/themes/src/common/popup.scss
@@ -0,0 +1,42 @@
+@import "./var.scss";
+@import "../mixins/mixins";
+
+.v-modal-enter {
+  animation: v-modal-in .2s ease;
+}
+
+.v-modal-leave {
+  animation: v-modal-out .2s ease forwards;
+}
+
+@keyframes v-modal-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+  }
+}
+
+@keyframes v-modal-out {
+  0% {
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.v-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: $--popup-modal-opacity;
+  background: $--popup-modal-background-color;
+}
+
+@include b(popup-parent) {
+  @include m(hidden) {
+    overflow: hidden;
+  }
+}
--- a/src/assets/css/themes/src/common/transition.scss
+++ b/src/assets/css/themes/src/common/transition.scss
@@ -0,0 +1,103 @@
+@import '../mixins/config';
+@import "var";
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+  transition: $--fade-linear-transition;
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.#{$namespace}-fade-in-linear-enter-active,
+.#{$namespace}-fade-in-linear-leave-active {
+  transition: $--fade-linear-transition;
+}
+.#{$namespace}-fade-in-linear-enter-from,
+.#{$namespace}-fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.#{$namespace}-fade-in-enter-active,
+.#{$namespace}-fade-in-leave-active {
+  transition: all .3s cubic-bezier(.55,0,.1,1);
+}
+.#{$namespace}-fade-in-enter-from,
+.#{$namespace}-fade-in-leave-active {
+  opacity: 0;
+}
+
+.#{$namespace}-zoom-in-center-enter-active,
+.#{$namespace}-zoom-in-center-leave-active {
+  transition: all .3s cubic-bezier(.55,0,.1,1);
+}
+.#{$namespace}-zoom-in-center-enter-from,
+.#{$namespace}-zoom-in-center-leave-active {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.#{$namespace}-zoom-in-top-enter-active,
+.#{$namespace}-zoom-in-top-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: $--md-fade-transition;
+  transform-origin: center top;
+
+  &[data-popper-placement^="top"] {
+    transform-origin: center bottom;
+  }
+}
+.#{$namespace}-zoom-in-top-enter-from,
+.#{$namespace}-zoom-in-top-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-bottom-enter-active,
+.#{$namespace}-zoom-in-bottom-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: $--md-fade-transition;
+  transform-origin: center bottom;
+}
+.#{$namespace}-zoom-in-bottom-enter-from,
+.#{$namespace}-zoom-in-bottom-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-left-enter-active,
+.#{$namespace}-zoom-in-left-leave-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: $--md-fade-transition;
+  transform-origin: top left;
+}
+.#{$namespace}-zoom-in-left-enter-from,
+.#{$namespace}-zoom-in-left-leave-active {
+  opacity: 0;
+  transform: scale(.45, .45);
+}
+
+.collapse-transition {
+  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
+}
+.horizontal-collapse-transition {
+  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
+}
+
+.#{$namespace}-list-enter-active,
+.#{$namespace}-list-leave-active {
+  transition: all 1s;
+}
+.#{$namespace}-list-enter-from, .#{$namespace}-list-leave-active {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.#{$namespace}-opacity-transition {
+  transition: opacity .3s cubic-bezier(.55,0,.1,1);
+}
--- a/src/assets/css/themes/src/common/var.scss
+++ b/src/assets/css/themes/src/common/var.scss
--- a/src/assets/css/themes/src/container.scss
+++ b/src/assets/css/themes/src/container.scss
@@ -0,0 +1,14 @@
+@import "mixins/mixins";
+
+@include b(container) {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  flex-basis: auto;
+  box-sizing: border-box;
+  min-width: 0;
+
+  @include when(vertical) {
+    flex-direction: column;
+  }
+}
--- a/Show More
+++ b/Show More