Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

fix: 文件恢复
2022-02-14 18:01:09 +08:00 · 2022-02-14 18:00:31 +08:00 · 2022-02-14 17:42:21 +08:00 · 2022-02-14 17:42:01 +08:00 · 2022-02-14 17:40:29 +08:00 · 2022-02-14 17:07:06 +08:00
296 changed files with 29518 additions and 5198 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
@@ -10,6 +10,7 @@ cache:
      - package.json
  paths:
    - node_modules
+    - dist/

 before_script:
  - export CNUI_TAG=$(date +%Y%m%d%H%M%S)
@@ -17,7 +18,7 @@ before_script:
 generate_git-log:
  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"
@@ -25,7 +26,8 @@ generate_git-log:
    - echo "处理 git-log.html 结束"
  artifacts:
    paths:
-      - public
+      - public/index.html
+      - public/git-log.html
  only:
    - dev
  tags:
@@ -38,9 +40,6 @@ build_project:
    - npm install --save-dev --unsafe-perm
    - echo "npm run build"
    - npm run build
-  artifacts:
-    paths:
-      - dist
  only:
    - dev
    - tags
--- 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组件文件**  
@@ -99,4 +99,4 @@ eg：
 `el.style.border = 'xxx'`

 - **布局**  
-避免使用float，视情况使用position，建议使用flex和grid
+避免使用float，视情况使用position，建议使用flex和grid
--- 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/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,8 +13,10 @@
    "@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",
    "leaflet": "^1.7.1",
@@ -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,35 @@
+@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/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 '../chart';
--- 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/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/chartSingleValue.scss
+++ b/src/assets/css/components/views/charts/chartSingleValue.scss
@@ -0,0 +1,223 @@
+.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 {
+      background-color: $--chart-single-value-icon-background-color;
+      border-radius: 50%;
+      position: relative;
+      margin-right: 7.5%;
+      margin-bottom: 6%;
+      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;
+      .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,592 @@
+.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/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,147 @@
+.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: 300px;
+    }
+    &.overview-map--app {
+      height: 325px;
+    }
+    .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__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;
+        }
+      }
+    }
+  }
+}
--- 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,123 @@
+.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;
+    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;
+
+      .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=1644832156673') format('woff2'),
+       url('iconfont.woff?t=1644832156673') format('woff'),
+       url('iconfont.ttf?t=1644832156673') format('truetype');
 }

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

+.cn-icon-shaixuan: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/src/assets/css/themes/src/date-picker.scss
+++ b/src/assets/css/themes/src/date-picker.scss
@@ -0,0 +1,12 @@
+@import "./date-picker/date-table.scss";
+@import "./date-picker/month-table.scss";
+@import "./date-picker/year-table.scss";
+@import "./date-picker/time-spinner.scss";
+@import "./date-picker/picker.scss";
+@import "./date-picker/date-picker.scss";
+@import "./date-picker/date-range-picker.scss";
+@import "./date-picker/time-range-picker.scss";
+@import "./date-picker/time-picker.scss";
+@import "./input.scss";
+@import "./scrollbar.scss";
+@import "./popper";
--- a/src/assets/css/themes/src/date-picker/date-picker.scss
+++ b/src/assets/css/themes/src/date-picker/date-picker.scss
@@ -0,0 +1,101 @@
+@import "../common/var";
+@import "../mixins/mixins";
+@import "./picker-panel.scss";
+
+@include b(date-picker) {
+  width: 322px;
+
+  &.has-sidebar.has-time {
+    width: 434px;
+  }
+
+  &.has-sidebar {
+    width: 438px;
+  }
+
+  &.has-time .#{$namespace}-picker-panel__body-wrapper {
+    position: relative;
+  }
+
+  .#{$namespace}-picker-panel__content {
+    width: 292px;
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  @include e(editor-wrap) {
+    position: relative;
+    display: table-cell;
+    padding: 0 5px;
+  }
+
+  @include e(time-header) {
+    position: relative;
+    border-bottom: 1px solid $--datepicker-inner-border-color;
+    font-size: 12px;
+    padding: 8px 5px 5px 5px;
+    display: table;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  @include e(header) {
+    margin: 12px;
+    text-align: center;
+
+    @include m(bordered) {
+      margin-bottom: 0;
+      padding-bottom: 12px;
+      border-bottom: solid 1px $--border-color-lighter;
+
+      & + .#{$namespace}-picker-panel__content {
+        margin-top: 0;
+      }
+    }
+  }
+
+  @include e(header-label) {
+    font-size: 16px;
+    font-weight: 500;
+    padding: 0 5px;
+    line-height: 22px;
+    text-align: center;
+    cursor: pointer;
+    color: $--color-text-regular;
+
+    &:hover {
+      color: $--datepicker-hover-font-color;
+    }
+
+    &.active {
+      color: $--datepicker-active-color;
+    }
+  }
+
+  @include e(prev-btn) {
+    float: left;
+  }
+
+  @include e(next-btn) {
+    float: right;
+  }
+
+  @include e(time-wrap) {
+    padding: 10px;
+    text-align: center;
+  }
+
+  @include e(time-label) {
+    float: left;
+    cursor: pointer;
+    line-height: 30px;
+    margin-left: 10px;
+  }
+
+  .#{$namespace}-time-panel {
+    position: absolute;
+  }
+}
--- a/src/assets/css/themes/src/date-picker/date-range-picker.scss
+++ b/src/assets/css/themes/src/date-picker/date-range-picker.scss
@@ -0,0 +1,104 @@
+@import "../common/var";
+
+@include b(date-range-picker) {
+  width: 646px;
+
+  &.has-sidebar {
+    width: 756px;
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  .#{$namespace}-picker-panel__body {
+    min-width: 513px;
+  }
+
+  .#{$namespace}-picker-panel__content {
+    margin: 0;
+  }
+
+  @include e(header) {
+    position: relative;
+    text-align: center;
+    height: 28px;
+
+    [class*=arrow-left] {
+      float: left;
+    }
+
+    [class*=arrow-right] {
+      float: right;
+    }
+
+    div {
+      font-size: 16px;
+      font-weight: 500;
+      margin-right: 50px;
+    }
+  }
+
+  @include e(content) {
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 16px;
+
+    @include when(left) {
+      border-right: 1px solid $--datepicker-inner-border-color;
+    }
+    .#{$namespace}-date-range-picker__header {
+
+      div {
+        margin-left: 50px;
+        margin-right: 50px;
+      }
+    }
+  }
+
+  @include e(editors-wrap) {
+    box-sizing: border-box;
+    display: table-cell;
+
+    @include when(right) {
+      text-align: right;
+    }
+  }
+
+  @include e(time-header) {
+    position: relative;
+    border-bottom: 1px solid $--datepicker-inner-border-color;
+    font-size: 12px;
+    padding: 8px 5px 5px 5px;
+    display: table;
+    width: 100%;
+    box-sizing: border-box;
+
+    > .#{$namespace}-icon-arrow-right {
+      font-size: 20px;
+      vertical-align: middle;
+      display: table-cell;
+      color: $--datepicker-icon-color;
+    }
+  }
+
+  @include e(time-picker-wrap) {
+    position: relative;
+    display: table-cell;
+    padding: 0 5px;
+
+    .#{$namespace}-picker-panel {
+      position: absolute;
+      top: 13px;
+      right: 0;
+      z-index: 1;
+      background: $--color-white;
+    }
+    .#{$namespace}-time-panel {
+      position: absolute;
+    }
+  }
+}
--- a/src/assets/css/themes/src/date-picker/date-table.scss
+++ b/src/assets/css/themes/src/date-picker/date-table.scss
@@ -0,0 +1,151 @@
+@import "../common/var";
+@import "../mixins/mixins";
+
+@include b(date-table) {
+  font-size: 12px;
+  user-select: none;
+
+  @include when(week-mode) {
+    .#{$namespace}-date-table__row {
+      &:hover {
+        div {
+          background-color: $--datepicker-inrange-background-color;
+        }
+        td.available:hover {
+          color: $--datepicker-font-color;
+        }
+        td:first-child div {
+          margin-left: 5px;
+          border-top-left-radius: 15px;
+          border-bottom-left-radius: 15px;
+        }
+        td:last-child div {
+          margin-right: 5px;
+          border-top-right-radius: 15px;
+          border-bottom-right-radius: 15px;
+        }
+      }
+
+      &.current div {
+        background-color: $--datepicker-inrange-background-color;
+      }
+    }
+  }
+
+  td {
+    width: 32px;
+    height: 30px;
+    padding: 4px 0;
+    box-sizing: border-box;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+
+    & div {
+      height: 30px;
+      padding: 3px 0;
+      box-sizing: border-box;
+    }
+
+    & span {
+      width: 24px;
+      height: 24px;
+      display: block;
+      margin: 0 auto;
+      line-height: 24px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 50%;
+    }
+
+    &.next-month,
+    &.prev-month {
+      color: $--datepicker-off-font-color;
+    }
+
+    &.today {
+      position: relative;
+      span {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+      &.start-date span,
+      &.end-date span {
+        color: $--color-white;
+      }
+    }
+
+    &.available:hover {
+      color: $--datepicker-hover-font-color;
+    }
+
+    &.in-range div {
+      background-color: $--datepicker-inrange-background-color;
+      &:hover {
+        background-color: $--datepicker-inrange-hover-background-color;
+      }
+    }
+
+    &.current:not(.disabled) span {
+      color: $--color-white;
+      background-color: $--datepicker-active-color;
+    }
+    &.start-date div,
+    &.end-date div {
+      color: $--color-white;
+    }
+
+    &.start-date span,
+    &.end-date span {
+      background-color: $--datepicker-active-color;
+    }
+
+    &.start-date div {
+      margin-left: 5px;
+      border-top-left-radius: 15px;
+      border-bottom-left-radius: 15px;
+    }
+
+    &.end-date div {
+      margin-right: 5px;
+      border-top-right-radius: 15px;
+      border-bottom-right-radius: 15px;
+    }
+
+    &.disabled div {
+      background-color: $--background-color-base;
+      opacity: 1;
+      cursor: not-allowed;
+      color: $--color-text-placeholder;
+    }
+
+    &.selected div {
+      margin-left: 5px;
+      margin-right: 5px;
+      background-color: $--datepicker-inrange-background-color;
+      border-radius: 15px;
+      &:hover {
+        background-color: $--datepicker-inrange-hover-background-color;
+      }
+    }
+
+    &.selected span {
+      background-color: $--datepicker-active-color;
+      color: $--color-white;
+      border-radius: 15px;
+    }
+
+    &.week {
+      font-size: 80%;
+      color: $--datepicker-header-font-color;
+    }
+  }
+
+  th {
+    padding: 5px;
+    color: $--datepicker-header-font-color;
+    font-weight: 400;
+    border-bottom: solid 1px $--border-color-lighter;
+  }
+}
--- a/src/assets/css/themes/src/date-picker/month-table.scss
+++ b/src/assets/css/themes/src/date-picker/month-table.scss
@@ -0,0 +1,82 @@
+@import "../common/var";
+
+@include b(month-table) {
+  font-size: 12px;
+  margin: -1px;
+  border-collapse: collapse;
+
+  td {
+    text-align: center;
+    padding: 8px 0px;
+    cursor: pointer;
+    & div {
+      height: 48px;
+      padding: 6px 0;
+      box-sizing: border-box;
+    }
+    &.today {
+      .cell {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+      &.start-date .cell,
+      &.end-date .cell {
+        color: $--color-white;
+      }
+    }
+
+    &.disabled .cell {
+      background-color: $--background-color-base;
+      cursor: not-allowed;
+      color: $--color-text-placeholder;
+
+      &:hover {
+        color: $--color-text-placeholder;
+      }
+    }
+
+    .cell {
+      width: 60px;
+      height: 36px;
+      display: block;
+      line-height: 36px;
+      color: $--datepicker-font-color;
+      margin: 0 auto;
+      border-radius: 18px;
+      &:hover {
+        color: $--datepicker-hover-font-color;
+      }
+    }
+
+    &.in-range div {
+      background-color: $--datepicker-inrange-background-color;
+      &:hover {
+        background-color: $--datepicker-inrange-hover-background-color;
+      }
+    }
+    &.start-date div,
+    &.end-date div {
+      color: $--color-white;
+    }
+
+    &.start-date .cell,
+    &.end-date .cell {
+      color: $--color-white;
+      background-color: $--datepicker-active-color;
+    }
+
+    &.start-date div {
+      border-top-left-radius: 24px;
+      border-bottom-left-radius: 24px;
+    }
+
+    &.end-date div {
+      border-top-right-radius: 24px;
+      border-bottom-right-radius: 24px;
+    }
+
+    &.current:not(.disabled) .cell {
+      color: $--datepicker-active-color;
+    }
+  }
+}
--- a/src/assets/css/themes/src/date-picker/picker-panel.scss
+++ b/src/assets/css/themes/src/date-picker/picker-panel.scss
@@ -0,0 +1,122 @@
+@import "../common/var";
+
+@include b(picker-panel) {
+  position: relative;
+  color: $--color-text-regular;
+  background: $--color-white;
+  border-radius: $--border-radius-base;
+  line-height: 30px;
+
+  .#{$namespace}-time-panel {
+    margin: 5px 0;
+    border: solid 1px $--datepicker-border-color;
+    background-color: $--color-white;
+    box-shadow: $--box-shadow-light;
+  }
+
+  @include e((body, body-wrapper)) {
+    &::after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+  }
+
+  @include e(content) {
+    position: relative;
+    margin: 15px;
+  }
+
+  @include e(footer) {
+    border-top: 1px solid $--datepicker-inner-border-color;
+    padding: 4px;
+    text-align: right;
+    background-color: $--color-white;
+    position: relative;
+    font-size: 0;
+  }
+
+  @include e(shortcut) {
+    display: block;
+    width: 100%;
+    border: 0;
+    background-color: transparent;
+    line-height: 28px;
+    font-size: 14px;
+    color: $--datepicker-font-color;
+    padding-left: 12px;
+    text-align: left;
+    outline: none;
+    cursor: pointer;
+
+    &:hover {
+      color: $--datepicker-hover-font-color;
+    }
+
+    &.active {
+      background-color: #e6f1fe;
+      color: $--datepicker-active-color;
+    }
+  }
+
+  @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;
+    }
+  }
+
+  @include e(icon-btn) {
+    font-size: 12px;
+    color: $--datepicker-icon-color;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+    margin-top: 8px;
+
+    &:hover {
+      color: $--datepicker-hover-font-color;
+    }
+
+    @include when(disabled) {
+      color: $--font-color-disabled-base;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include e(link-btn) {
+    vertical-align: middle;
+  }
+}
+
+.#{$namespace}-picker-panel *[slot=sidebar],
+.#{$namespace}-picker-panel__sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 110px;
+  border-right: 1px solid $--datepicker-inner-border-color;
+  box-sizing: border-box;
+  padding-top: 6px;
+  background-color: $--color-white;
+  overflow: auto;
+}
+
+.#{$namespace}-picker-panel *[slot=sidebar] + .#{$namespace}-picker-panel__body,
+.#{$namespace}-picker-panel__sidebar + .#{$namespace}-picker-panel__body {
+  margin-left: 110px;
+}
--- a/src/assets/css/themes/src/date-picker/picker.scss
+++ b/src/assets/css/themes/src/date-picker/picker.scss
@@ -0,0 +1,213 @@
+@import "../mixins/mixins";
+@import "../common/var";
+@import "../common/transition";
+
+@include b(picker) {
+  @include e(popper) {
+    @include picker-popper(
+      $--color-white,
+      1px solid $--datepicker-border-color,
+      $--box-shadow-light,
+    );
+  }
+}
+
+@include b(date-editor) {
+  position: relative;
+  display: inline-block;
+  text-align: left;
+
+  &.#{$namespace}-input,
+  &.#{$namespace}-input__inner {
+    width: 220px;
+  }
+
+  @include m((monthrange)) {
+    &.#{$namespace}-input,
+    &.#{$namespace}-input__inner {
+      width: 300px;
+    }
+  }
+
+  @include m((daterange, timerange)) {
+    &.#{$namespace}-input,
+    &.#{$namespace}-input__inner {
+      width: 350px;
+    }
+  }
+
+  @include m(datetimerange) {
+    &.#{$namespace}-input,
+    &.#{$namespace}-input__inner {
+      width: 400px;
+    }
+  }
+
+  @include m(dates) {
+    .#{$namespace}-input__inner {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .#{$namespace}-icon-circle-close {
+    cursor: pointer;
+  }
+
+  .#{$namespace}-range__icon {
+    font-size: 14px;
+    margin-left: -5px;
+    color: $--color-text-placeholder;
+    float: left;
+    line-height: 32px;
+  }
+
+  .#{$namespace}-range-input {
+    appearance: none;
+    border: none;
+    outline: none;
+    display: inline-block;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: 39%;
+    text-align: center;
+    font-size: $--font-size-base;
+    color: $--color-text-regular;
+
+    &::placeholder {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  .#{$namespace}-range-separator {
+    display: inline-block;
+    height: 100%;
+    padding: 0 5px;
+    margin: 0;
+    text-align: center;
+    line-height: 32px;
+    font-size: 14px;
+    width: 5%;
+    color: $--color-text-primary;
+  }
+
+  .#{$namespace}-range__close-icon {
+    font-size: 14px;
+    color: $--color-text-placeholder;
+    width: 25px;
+    display: inline-block;
+    float: right;
+    line-height: 32px;
+  }
+}
+
+@include b(range-editor) {
+  &.#{$namespace}-input__inner {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 10px;
+  }
+
+  .#{$namespace}-range-input {
+    line-height: 1;
+  }
+
+  @include when(active) {
+    border-color: $--color-primary;
+
+    &:hover {
+      border-color: $--color-primary;
+    }
+  }
+
+  @include m(medium) {
+    line-height: $--input-medium-height;
+
+    &.#{$namespace}-input__inner {
+      height: $--input-medium-height;
+    }
+
+    .#{$namespace}-range-separator {
+      line-height: 28px;
+      font-size: $--input-medium-font-size;
+    }
+
+    .#{$namespace}-range-input {
+      font-size: $--input-medium-font-size;
+    }
+
+    .#{$namespace}-range__icon,
+    .#{$namespace}-range__close-icon {
+      line-height: 28px;
+    }
+  }
+
+  @include m(small) {
+    line-height: $--input-small-height;
+
+    &.#{$namespace}-input__inner {
+      height: $--input-small-height;
+    }
+
+    .#{$namespace}-range-separator {
+      line-height: 24px;
+      font-size: $--input-small-font-size;
+    }
+
+    .#{$namespace}-range-input {
+      font-size: $--input-small-font-size;
+    }
+
+    .#{$namespace}-range__icon,
+    .#{$namespace}-range__close-icon {
+      line-height: 24px;
+    }
+  }
+
+  @include m(mini) {
+    line-height: $--input-mini-height;
+
+    &.#{$namespace}-input__inner {
+      height: $--input-mini-height;
+    }
+
+    .#{$namespace}-range-separator {
+      line-height: 20px;
+      font-size: $--input-mini-font-size;
+    }
+
+    .#{$namespace}-range-input {
+      font-size: $--input-mini-font-size;
+    }
+
+    .#{$namespace}-range__icon,
+    .#{$namespace}-range__close-icon {
+      line-height: 20px;
+    }
+  }
+
+  @include when(disabled) {
+    background-color: $--input-disabled-fill;
+    border-color: $--input-disabled-border;
+    color: $--input-disabled-color;
+    cursor: not-allowed;
+
+    &:hover, &:focus {
+      border-color: $--input-disabled-border;
+    }
+
+    input {
+      background-color: $--input-disabled-fill;
+      color: $--input-disabled-color;
+      cursor: not-allowed;
+      &::placeholder {
+        color: $--input-disabled-placeholder-color;
+      }
+    }
+
+    .#{$namespace}-range-separator {
+      color: $--input-disabled-color;
+    }
+  }
+}
--- a/src/assets/css/themes/src/date-picker/time-picker.scss
+++ b/src/assets/css/themes/src/date-picker/time-picker.scss
@@ -0,0 +1,81 @@
+@import "../common/var";
+
+@include b(time-panel) {
+  border-radius: 2px;
+  position: relative;
+  width: 180px;
+  left: 0;
+  z-index: $--index-top;
+  user-select: none;
+  box-sizing: content-box;
+
+  @include e(content) {
+    font-size: 0;
+    position: relative;
+    overflow: hidden;
+
+    &::after, &::before {
+      content: "";
+      top: 50%;
+      position: absolute;
+      margin-top: -15px;
+      height: 32px;
+      z-index: -1;
+      left: 0;
+      right: 0;
+      box-sizing: border-box;
+      padding-top: 6px;
+      text-align: left;
+      border-top: 1px solid $--border-color-light;
+      border-bottom: 1px solid $--border-color-light;
+    }
+
+    &::after {
+      left: 50%;
+      margin-left: 12%;
+      margin-right: 12%;
+    }
+
+    &::before {
+      padding-left: 50%;
+      margin-right: 12%;
+      margin-left: 12%;
+    }
+
+    &.has-seconds {
+      &::after {
+        left: calc(100% / 3 * 2);
+      }
+
+      &::before {
+        padding-left: calc(100% / 3);
+      }
+    }
+  }
+
+  @include e(footer) {
+    border-top: 1px solid $--datepicker-inner-border-color;
+    padding: 4px;
+    height: 36px;
+    line-height: 25px;
+    text-align: right;
+    box-sizing: border-box;
+  }
+
+  @include e(btn) {
+    border: none;
+    line-height: 28px;
+    padding: 0 5px;
+    margin: 0 5px;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none;
+    font-size: 12px;
+    color: $--color-text-primary;
+
+    &.confirm {
+      font-weight: 800;
+      color: $--datepicker-active-color;
+    }
+  }
+}
--- a/src/assets/css/themes/src/date-picker/time-range-picker.scss
+++ b/src/assets/css/themes/src/date-picker/time-range-picker.scss
@@ -0,0 +1,32 @@
+@import "../common/var";
+
+@include b(time-range-picker) {
+  width: 354px;
+  overflow: visible;
+
+  @include e(content) {
+    position: relative;
+    text-align: center;
+    padding: 10px;
+    z-index: 1;
+  }
+
+  @include e(cell) {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 4px 7px 7px;
+    width: 50%;
+    display: inline-block;
+  }
+
+  @include e(header) {
+    margin-bottom: 5px;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  @include e(body) {
+    border-radius:2px;
+    border: 1px solid $--datepicker-border-color;
+  }
+}
--- a/src/assets/css/themes/src/date-picker/time-spinner.scss
+++ b/src/assets/css/themes/src/date-picker/time-spinner.scss
@@ -0,0 +1,110 @@
+@import "../common/var";
+
+@include b(time-spinner) {
+  &.has-seconds {
+    .#{$namespace}-time-spinner__wrapper {
+      width: 33.3%;
+    }
+  }
+
+  @include e(wrapper) {
+    max-height: 190px;
+    overflow: auto;
+    display: inline-block;
+    width: 50%;
+    vertical-align: top;
+    position: relative;
+
+    & .#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
+      padding-bottom: 15px;
+    }
+
+    @include when(arrow) {
+      box-sizing: border-box;
+      text-align: center;
+      overflow: hidden;
+
+      .#{$namespace}-time-spinner__list {
+        transform: translateY(-32px);
+      }
+
+      .#{$namespace}-time-spinner__item:hover:not(.disabled):not(.active) {
+        background: $--color-white;
+        cursor: default;
+      }
+    }
+  }
+
+  @include e(arrow) {
+    font-size: 12px;
+    color: $--color-text-secondary;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    z-index: $--index-normal;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    cursor: pointer;
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    &.#{$namespace}-icon-arrow-up {
+      top: 10px;
+    }
+
+    &.#{$namespace}-icon-arrow-down {
+      bottom: 10px;
+    }
+  }
+
+  @include e(input) {
+    &.#{$namespace}-input {
+      width: 70%;
+
+      .#{$namespace}-input__inner {
+        padding: 0;
+        text-align: center;
+      }
+    }
+  }
+
+  @include e(list) {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+
+    &::after,
+    &::before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 80px;
+    }
+  }
+
+  @include e(item) {
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+    color: $--color-text-regular;
+
+    &:hover:not(.disabled):not(.active) {
+      background: $--background-color-base;
+      cursor: pointer;
+    }
+
+    &.active:not(.disabled) {
+      color: $--color-text-primary;
+      font-weight: bold;
+    }
+
+    &.disabled {
+      color: $--color-text-placeholder;
+      cursor: not-allowed;
+    }
+  }
+}
--- a/src/assets/css/themes/src/date-picker/year-table.scss
+++ b/src/assets/css/themes/src/date-picker/year-table.scss
@@ -0,0 +1,51 @@
+@import "../common/var";
+
+@include b(year-table) {
+  font-size: 12px;
+  margin: -1px;
+  border-collapse: collapse;
+
+  .#{$namespace}-icon {
+    color: $--datepicker-icon-color;
+  }
+
+  td {
+    text-align: center;
+    padding: 20px 3px;
+    cursor: pointer;
+
+    &.today {
+      .cell {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+    }
+
+    &.disabled .cell {
+      background-color: $--background-color-base;
+      cursor: not-allowed;
+      color: $--color-text-placeholder;
+
+      &:hover {
+        color: $--color-text-placeholder;
+      }
+    }
+
+    .cell {
+      width: 48px;
+      height: 32px;
+      display: block;
+      line-height: 32px;
+      color: $--datepicker-font-color;
+      margin: 0 auto;
+
+      &:hover {
+        color: $--datepicker-hover-font-color;
+      }
+    }
+
+    &.current:not(.disabled) .cell {
+      color: $--datepicker-active-color;
+    }
+  }
+}
--- a/src/assets/css/themes/src/descriptions-item.scss
+++ b/src/assets/css/themes/src/descriptions-item.scss
@@ -0,0 +1,20 @@
+@import 'mixins/mixins';
+@import 'common/var';
+
+@include b(descriptions) {
+  @include e(label) {
+    &.is-bordered-label {
+      font-weight: bold;
+      color: $--color-text-secondary;
+      background: $--descriptions-item-bordered-label-background;
+    }
+
+    &:not(.is-bordered-label) {
+      margin-right: 10px;
+    }
+  }
+
+  @include e(content) {
+
+  }
+}
--- a/src/assets/css/themes/src/descriptions.scss
+++ b/src/assets/css/themes/src/descriptions.scss
@@ -0,0 +1,96 @@
+@import 'mixins/mixins';
+@import 'common/var';
+@import 'descriptions-item';
+
+@include b(descriptions) {
+  box-sizing: border-box;
+  font-size: $--font-size-base;
+  color: $--color-text-primary;
+
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: $--descriptions-header-margin-bottom;
+
+    @include e(title) {
+      font-size: $--descriptions-title-font-size;
+      font-weight: bold;
+    }
+  }
+
+  @include e(body) {
+    color: $--color-text-regular;
+    background-color: $--color-white;
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+
+      th, td {
+        text-align: left;
+        font-weight: normal;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  .is-bordered {
+    th, td {
+      border: $--descriptions-table-border;
+      padding: 12px 10px;
+    }
+  }
+
+  :not(.is-bordered) {
+    th, td {
+      padding-bottom: 12px;
+    }
+  }
+
+  @include m(medium) {
+    &.is-bordered {
+      th, td {
+        padding: 10px;
+      }
+    }
+
+    &:not(.is-bordered) {
+      th, td {
+        padding-bottom: 10px;
+      }
+    }
+  }
+
+  @include m(small) {
+    font-size: 12px;
+
+    &.is-bordered {
+      th, td {
+        padding: 8px 10px;
+      }
+    }
+
+    &:not(.is-bordered) {
+      th, td {
+        padding-bottom: 8px;
+      }
+    }
+  }
+
+  @include m(mini) {
+    font-size: 12px;
+
+    &.is-bordered {
+      th, td {
+        padding: 6px 10px;
+      }
+    }
+
+    &:not(.is-bordered) {
+      th, td {
+        padding-bottom: 6px;
+      }
+    }
+  }
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
chenjinsong	6dd147647a	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-02-14 18:01:09 +08:00
chenjinsong	2838771a75	fix: 文件恢复	2022-02-14 18:00:31 +08:00
@changcode	fa9b153bed	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-02-14 17:42:21 +08:00
@changcode	83924a8a95	style: 调整搜索按钮样式	2022-02-14 17:42:01 +08:00
chenjinsong	88b1fa3bcd	fix: 无用代码、文件清理	2022-02-14 17:40:29 +08:00
@changcode	c27891dc21	style 详情，开放端口列表样式调整	2022-02-14 17:07:06 +08:00
chenjinsong	33f43a5478	fix: panel的nodata暂时隐藏	2022-02-14 16:24:24 +08:00
chenjinsong	37b5d3f7a5	fix: 修复unknown和app_risk查询bug	2022-02-14 16:04:08 +08:00
chenjinsong	7bdcd1c598	fix: 一系列优化和调整：左侧筛选空串处理、下拉增加网络质量和链路、app风险等级映射	2022-02-13 23:20:24 +08:00
@changcode	cba743199c	fix: 修复单值折线图，未传递参数问题	2022-02-11 18:50:27 +08:00
@changcode	81e0fbaeb2	fix: 修复单值折线图数据展示错误问题	2022-02-11 17:58:15 +08:00
@changcode	27d4eccc02	style: Network & App Performance 页面 tab 切换去除图表边框	2022-02-11 11:10:05 +08:00
hyx	7efa110f3b	CN-284 echarts图表优化;tabs 切换时数据无法正确显示；	2022-02-10 17:06:15 +08:00
@changcode	bcd107aa81	fix: 修复详情页面 block 不显示刷新按钮判断条件报错问题	2022-02-09 11:18:14 +08:00
chenjinsong	088f1980e1	perf: 优化实体详情标题样式	2022-02-08 18:15:58 +08:00
@changcode	f365d8bb11	fix: 修复详情样式	2022-02-08 12:01:47 +08:00
@changcode	ce963cd200	style: 详情页面，列表高度错误	2022-02-08 11:30:49 +08:00
chenjinsong	c67bf00624	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-02-07 17:18:16 +08:00
chenjinsong	88e9c1443f	fix: 调整tag模式的显示字段名	2022-02-07 17:18:02 +08:00
@changcode	cbb01d8343	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-02-07 17:08:27 +08:00
@changcode	9c60c959cf	fix: 修复详情页面，title表头多余底部边框样式	2022-02-07 17:08:14 +08:00
chenjinsong	2ed78bc1f3	fix: 修复实体搜索框text模式下点击top后表达式错误的问题、修复分页bug	2022-02-07 16:11:49 +08:00
@changcode	1169029406	fix: 修复详情页面，样式问题	2022-02-07 15:02:42 +08:00
@changcode	5d277849d6	fix: 修复详情页面样式与原型图不统一	2022-02-07 13:52:49 +08:00
zhangyu	c22d501f55	CN-282 fix：优化	2022-01-28 14:03:22 +08:00
zhangyu	ed347576b6	CN-282 fix：优化panel 刷新	2022-01-27 14:17:29 +08:00
chenjinsong	195d0cd46e	fix: 优化实体下拉卡顿	2022-01-27 12:14:09 +08:00
chenjinsong	1b016441ec	fix: 修复文本搜索--filter点击后表达式不对的问题	2022-01-27 12:05:25 +08:00
@changcode	bccee3032b	style： app详情样式调整	2022-01-27 11:31:00 +08:00
chenjinsong	05d77aa017	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-27 10:38:24 +08:00
chenjinsong	bc9b296e8b	fix: 增加搜索表达式错误提示，修复历史记录sql问题	2022-01-27 10:38:11 +08:00
zhangyu	c8414bc06d	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-27 09:45:06 +08:00
zhangyu	8fb1b2e8e1	fix：修改panel 页面的刷新问题	2022-01-27 09:44:20 +08:00
@changcode	c80bcd3045	fix: 修复排序错误问题	2022-01-26 19:14:40 +08:00
chenjinsong	d648fde9da	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-26 18:40:37 +08:00
chenjinsong	5ec1cbf4bf	fix: 搜索框bug修复；尚存问题：文本模式下无法使用大写	2022-01-26 18:40:24 +08:00
zhangyu	1589b046ee	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-26 18:34:51 +08:00
zhangyu	b5a7ed482b	fix：修改 block 刷新无效的问题	2022-01-26 18:34:38 +08:00
@changcode	04b785661c	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-26 18:33:11 +08:00
@changcode	9f1ab860be	style: 去除部分表头底部边框	2022-01-26 18:32:58 +08:00
chenjinsong	0bb47f5e64	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-26 18:27:52 +08:00
chenjinsong	e7c0ec0cb7	fix: 搜索框bug修复	2022-01-26 18:27:12 +08:00
@changcode	68bc735384	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-26 18:17:17 +08:00
@changcode	a87b297c20	fix: 修复单值图无数据时展示NaN问题	2022-01-26 18:17:02 +08:00
chenjinsong	aef5bc95c0	feat: 搜索历史调整上限为30个	2022-01-26 18:13:40 +08:00
chenjinsong	d019a975a5	feat: 搜索历史调整上限为30个	2022-01-26 18:13:25 +08:00
chenjinsong	a8e0bc1795	feat: 搜索历史	2022-01-26 17:44:24 +08:00
@changcode	a2aebb3d98	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev # Conflicts: # src/views/charts/PanelChart.vue	2022-01-26 17:10:41 +08:00
@changcode	0516cf6f6b	fix: 修复 domain 数据重复请求问题	2022-01-26 17:09:09 +08:00
hyx	c801be0457	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-26 17:05:55 +08:00
hyx	b3249ed8a3	CN-269 图表重构-echarts类型图表重构:带图表饼图，点击table记录查询时，时间戳转换	2022-01-26 17:02:12 +08:00
zhangyu	b3b09952b9	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev # Conflicts: # src/views/charts/PanelChart.vue	2022-01-26 16:05:20 +08:00
zhangyu	0248e7b5df	fix：修改部分legend 未国际化的问题	2022-01-26 16:04:10 +08:00
hyx	15a19edddf	CN-269 图表重构-echarts类型图表重构	2022-01-26 15:40:10 +08:00
@changcode	014abba5d1	fix: 修复 domain,app Map地图数据错误问，domain单值图组件引用错误问题	2022-01-26 14:39:17 +08:00
@changcode	4f5afe8433	style: 样式调整	2022-01-26 14:34:51 +08:00
zhangyu	78e5b7b76d	style：样式微调	2022-01-26 11:09:43 +08:00
zhangyu	9fc8a3b018	fix：删除 console 解决 sanKey 不显示的问题	2022-01-26 10:15:08 +08:00
zhangyu	da17dc8ad2	fix：修改 tooltip不显示的问题	2022-01-26 10:07:18 +08:00
chenjinsong	1169d8a2cc	feat: 搜索框（全文搜索，缺搜索历史）	2022-01-25 22:58:23 +08:00
@changcode	a1e3d88b96	fix:: 修复接口请求未动态路由问题	2022-01-25 19:58:46 +08:00
chenjinsong	fe285adfa9	feat: 搜索框（部分内容,缺全文搜索处理）	2022-01-25 19:47:08 +08:00
zhangyu	f22a1f30eb	fix：修改timebar的tooltip	2022-01-25 19:16:31 +08:00
zhangyu	50dccf6a3c	fix：修改line tooltip不显示的问题	2022-01-25 19:13:34 +08:00
zhangyu	9778665d04	fix：修改 block 默认高度的问题	2022-01-25 18:43:16 +08:00
@changcode	fa52e1ec4a	style: 修复样式问题	2022-01-25 18:17:28 +08:00
chenjinsong	f8d780cba6	feat: 搜索框（部分内容）	2022-01-25 17:16:56 +08:00
@changcode	d2d38c2d8c	fix: 修复 userTable 接口传参格式错误问题，修复role 编辑时内容回显问题	2022-01-25 16:25:49 +08:00
zhangyu	a16c27aaf5	feat： group 刷新	2022-01-25 14:18:36 +08:00
zhangyu	9c3213bb45	fix：去除页面假数据	2022-01-25 11:13:45 +08:00
@changcode	ca3981131a	fix: 去除打印	2022-01-24 16:19:34 +08:00
@changcode	1d26a8b21e	fix: IP详情网络质量概况数据展示	2022-01-24 14:31:27 +08:00
zhangyu	ef6dba8589	fix：调整block内group闪烁的问题	2022-01-24 10:41:05 +08:00
chenjinsong	ba341cde24	feat: 搜索框（部分内容）	2022-01-23 23:34:51 +08:00
@changcode	581896bcb8	fix: 修复Entity Explorer 图表组件引入错误问题	2022-01-21 21:03:39 +08:00
@changcode	5bbd2fa6bf	fix: api 国际化添加参数	2022-01-21 17:52:36 +08:00
zhangyu	34bb7deaf5	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-21 17:50:41 +08:00
zhangyu	62a675405d	fix: 修改 title 显示loaging的问题	2022-01-21 17:50:23 +08:00
hanyuxia	b848178fdb	CN-269 图表重构-echarts类型图表重构:实现type=12 带统计的折线图	2022-01-21 17:34:53 +08:00
hanyuxia	ecc56b02c4	CN-269 图表重构-echarts类型图表重构:实现type=12 带统计的折线图	2022-01-21 17:10:18 +08:00
zhangyu	01faf800ca	fix：添加group组件	2022-01-21 16:07:23 +08:00
@changcode	e098ce12bf	fix: 去除打印	2022-01-21 15:40:59 +08:00
zhangyu	f5abbaeef9	feat：group 添加折叠	2022-01-21 15:35:09 +08:00
@changcode	4b74f3de5a	style: 对panel页面组件样式进行单独scss文件的拆分	2022-01-21 13:07:11 +08:00
zhangyu	5afc84e13a	feat：添加 block 折叠功能	2022-01-21 10:54:21 +08:00
@changcode	8e6b058ad2	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-20 18:08:08 +08:00
@changcode	16f6b25525	feat: 特殊 ip 列表重构	2022-01-20 18:08:01 +08:00
zhangyu	45c5e38a91	CN-272 feat：图表重构-柱状图、部分列表	2022-01-20 17:54:36 +08:00
@changcode	459172fd46	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-20 15:50:16 +08:00
@changcode	3d47a5af05	fix: 去除特殊列表动态绑定样式，修复Single-value页面图表展示错误问题	2022-01-20 15:50:09 +08:00
zhangyu	a4229f22c4	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-20 15:42:27 +08:00
zhangyu	086c35d174	feat：type 22 （30%）	2022-01-20 15:39:52 +08:00
@changcode	a6c5ee057d	fix: 优化特殊列表数据为空是的判断条件，初始化单值折线图	2022-01-20 11:47:53 +08:00
@changcode	26b1b497c3	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev # Conflicts: # src/views/charts/Chart2.vue	2022-01-19 20:14:52 +08:00
@changcode	c5278a00d1	CN-273 feat: 图表重构-特殊列表	2022-01-19 20:11:58 +08:00
zhangyu	d693452195	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev # Conflicts: # src/views/charts/Chart2.vue	2022-01-19 17:43:47 +08:00
zhangyu	c2f0af81bb	feat：添加type类型为 23 24的 bar	2022-01-19 17:42:41 +08:00
@changcode	53202d7b0c	feat: 引入 tiny-emitter 插件	2022-01-19 16:18:11 +08:00
@changcode	da28c3d940	CN-271 feat: 图表重构-table类型	2022-01-19 15:54:27 +08:00
zhangyu	759cbe3ce6	style：去除 vue-grid-layout的动画	2022-01-19 15:35:25 +08:00
chenjinsong	1ed98f4c67	组件通信依赖	2022-01-19 15:31:06 +08:00
chenjinsong	8863544f1b	CN-268 feat: panel重构--entity详情、ip基础信息等（部分）	2022-01-18 23:12:03 +08:00
@changcode	bfb6f087c6	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev # Conflicts: # src/views/charts/Chart2.vue	2022-01-18 19:44:57 +08:00
@changcode	c132b913aa	CN-270 feat: 图表重构-单值图类型图表重构	2022-01-18 19:43:41 +08:00
hyx	28781e28e0	CN-269 图表重构-echarts类型图表重构	2022-01-18 19:42:55 +08:00
chenjinsong	14a3bfefa2	CN-268 feat: panel重构--tabs（部分）	2022-01-18 13:56:01 +08:00
chenjinsong	a35dbd2e36	CN-268 feat: panel重构--地图	2022-01-17 17:06:14 +08:00
chenjinsong	35d948257a	CN-268 feat: panel重构--地图	2022-01-17 16:00:12 +08:00
chenjinsong	d86d18a2ee	CN-268 feat: panel重构	2022-01-16 23:16:00 +08:00
chenjinsong	53cba023e7	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2022-01-12 16:27:21 +08:00
chenjinsong	5b75577c06	fix: 修复entity下拉详情不查询的问题	2022-01-12 16:27:06 +08:00
shizhendong	d8acc0edec	Update .gitlab-ci.yml	2022-01-11 15:59:09 +08:00
shizhendong	8c1dfa8c32	fix: 解决因 sed 命令无法匹配元素造成没有追加 index.html git-log 链接问题	2022-01-11 14:49:08 +08:00
chenjinsong	c8ec6372cb	fix: 优化实体列表性能	2022-01-11 11:20:17 +08:00
chenjinsong	ea204a2bee	fix: 修复搜索内容带'and'时查询出错的问题	2022-01-10 18:23:50 +08:00
hanyuxia	4c0b018c34	CN-265 Traffic Summary APP分析统计图表、domain图表问题修复	2022-01-07 16:26:49 +08:00
chenjinsong	7562d1a234	fix: 卡片式列表高度调整，增加no-data提示	2022-01-06 17:59:23 +08:00
hyx	7f18704c4f	Merge remote-tracking branch 'origin/dev' into dev	2022-01-06 17:34:33 +08:00
hyx	f297cfc244	修改问题：实体列表，卡片格式不显示折线图	2022-01-06 17:32:48 +08:00
chenjinsong	f0acc006e7	fix: 修复nodata提示错误	2022-01-06 17:32:20 +08:00
chenjinsong	f4ca2fa44c	fix: 修复时间错误	2022-01-06 16:56:41 +08:00
chenjinsong	35c3552605	CN-240 feat: 实体列表loading优化	2022-01-06 16:28:16 +08:00
chenjinsong	332509d41f	CN-240 feat: 实体列表、详情细节完善	2022-01-06 15:32:24 +08:00
chenjinsong	6e9b208818	CN-240 feat: 实体列表、详情细节完善	2022-01-05 23:56:27 +08:00
hyx	db27d6213f	CN-263 实体列表分页功能	2022-01-05 20:24:02 +08:00
chenjinsong	b1040d2bb6	CN-240 feat: 实体列表	2022-01-04 17:04:05 +08:00
hanyuxia	e764fc4b69	CN-257 Entity Explorer--接口对接	2022-01-04 14:54:26 +08:00
chenjinsong	1ebc5f76f5	fix: 实体详情标题修复	2022-01-04 10:15:37 +08:00
chenjinsong	6d73abf18f	CN-240 feat: 实体详情	2022-01-03 22:46:22 +08:00
chenjinsong	e37e967b5d	CN-240 feat: 实体列表下拉详情（部分）	2021-12-31 10:55:49 +08:00
hanyuxia	21018274d5	CN-257 Entity Explorer--接口对接	2021-12-31 10:40:37 +08:00
hyx	da27149185	CN-252 Cyptocurrency--单值图开发	2021-12-29 14:58:58 +08:00
chenjinsong	c468272bc0	CN-240 feat: 实体列表下拉详情（部分）	2021-12-28 21:23:18 +08:00
chenjinsong	631619e570	fix: 修复loading样式错误、nodata没有正常显示的问题	2021-12-27 17:11:16 +08:00
chenjinsong	43b8ad7016	fix: 修复loading样式错误、nodata没有正常显示的问题	2021-12-27 17:10:11 +08:00
hyx	dbf17b004b	CN-251 Entity-explorer 左侧筛选TOP10弹框开发(列名较长时，不显示第10条数据)	2021-12-27 09:59:44 +08:00
hanyuxia	01a92cf030	CN-251 Entity-explorer 左侧筛选TOP10弹框开发(第二列名称显示修改，百分比显示样式调整)	2021-12-24 09:42:54 +08:00
hyx	56aa2339cb	CN-251 Entity-explorer 左侧筛选TOP10弹框开发	2021-12-23 17:17:06 +08:00
hanyuxia	e1320c7dd3	CN-247 流量统计页面-APP分析统计图表配置	2021-12-21 10:52:30 +08:00
chenjinsong	b9ef50389e	CN-240 feat: entity列表（行式）	2021-12-17 21:05:28 +08:00
chenjinsong	742120c51c	CN-240 feat: entity列表（行式）	2021-12-17 20:56:25 +08:00
chenjinsong	a4707d27c4	CN-240 feat: entity列表（行式）	2021-12-16 23:03:39 +08:00
chenjinsong	a73cd7e99e	CN-240 feat: entity列表（行式）	2021-12-16 18:22:47 +08:00
hyx	09192db0fd	挖矿图表配置：标题字体修改	2021-12-16 10:36:00 +08:00
hanyuxia	3008b640b5	CN-242 Cyptocurrency--配置图表	2021-12-14 17:21:37 +08:00
chenjinsong	6623f6df65	feat: entity列表（部分）、css架构更改	2021-12-14 16:42:45 +08:00
hyx	4ef3ec5a84	CN-232 Cyptocurrency--近期挖矿事件新图表开发	2021-12-14 07:38:09 +08:00
hyx	69ff5446e4	CN-229 Cyptocurrency--挖矿事件统计新图表开发 CN-230 Cyptocurrency--矿机所属单位新图表开发	2021-12-13 10:18:27 +08:00
hyx	cbcd837031	CN-229 Cyptocurrency--挖矿事件统计新图表开发 CN-230 Cyptocurrency--矿机所属单位新图表开发	2021-12-13 10:16:41 +08:00
hyx	88b3cf1351	CN-228 Cyptocurrency--活跃IP新图表开发	2021-12-06 21:12:04 +08:00
chenjinsong	f390af3d34	feat: 增加挖矿panel类型	2021-12-03 09:47:37 +08:00
hanyuxia	da969617ff	CN-222 代理接口调试页面调整	2021-11-19 10:57:45 +08:00
chenjinsong	c3ab66db6a	fix: 修复地图下钻中国时countryid有可能等于private ip的问题	2021-11-18 09:09:09 +08:00
chenjinsong	d7a43885ae	fix: 修复详情顶部tab不对齐的问题	2021-11-16 10:20:11 +08:00
chenjinsong	f04ccc3af8	fix: 修复有些icon图标不正确的问题	2021-11-12 15:31:15 +08:00
chenjinsong	e904cde6dd	fix: 修复有些图表legend不正确的问题	2021-11-12 15:16:09 +08:00
chenjinsong	f7244ef499	Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev	2021-11-12 11:46:49 +08:00
chenjinsong	323805ee33	fix: 修复有些图表刷新按钮不生效的问题	2021-11-12 11:46:41 +08:00
chenjinsong	8375a4572b	fix: 修复有些图表刷新按钮不生效的问题	2021-11-12 11:46:09 +08:00
hyx	ced8281959	CN-162 代理接口调试页面开发	2021-11-11 23:28:52 +08:00
chenjinsong	98846fd2da	fix: 修复no-data提示问题	2021-11-11 23:07:01 +08:00
chenjinsong	cd805b0644	feat: app id改为app；链路图完成；	2021-11-10 21:08:15 +08:00
chenjinsong	6d435243e7	CN-212 feat: entity类型顺序变更	2021-11-09 14:03:40 +08:00
hyx	70ed8deda2	CN-207 proxy 列表页面增加导入导出按钮	2021-10-27 12:45:30 +08:00
张帅	ddfeffd259	Update .gitlab-ci.yml	2021-10-25 08:18:22 +00:00
张帅	7578ac31a8	Update .gitlab-ci.yml	2021-10-25 08:10:38 +00:00
方顺健	f0c4396df8	Update .gitlab-ci.yml	2021-10-25 08:04:08 +00:00
hyx	3f924c0893	CN-206 chart param 编辑页面 param 样式	2021-10-24 20:45:12 +08:00
hyx	7cd2aa9ba3	CN-208 operation log 展示修改	2021-10-24 20:23:24 +08:00