fix: 修复header栏的切换语言dropdown组件鼠标移动时有白边的情况

fix: 暂时隐藏切换主题选项，修复刷新时界面暂时为黑色的问题
fix: 修复detection新增policy时，第三步点击时间下拉框会报错的问题
2024-02-22 17:42:58 +08:00 · 2024-02-22 16:47:53 +08:00 · 2024-02-21 10:42:24 +08:00 · 2024-02-18 09:58:45 +08:00 · 2024-02-02 18:13:11 +08:00 · 2024-01-15 18:41:42 +08:00
213 changed files with 18767 additions and 2413 deletions
--- a/jest.config.js
+++ b/jest.config.js
@@ -28,7 +28,8 @@ module.exports = {
    'node'
  ],
  moduleNameMapper: {
-    '@/(.*)$': '<rootDir>/src/$1'
+    '@/(.*)$': '<rootDir>/src/$1',
+    '\\.(css|less|scss|sass)$': '<rootDir>/test/__mocks__/styleMock.js'
  },
  resetMocks: true
 }
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "@amcharts/amcharts4": "~4.10.0",
    "@amcharts/amcharts4-geodata": "^4.1.20",
    "@antv/g6": "^4.8.17",
+    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^0.21.1",
    "babel-plugin-lodash": "~3.3.0",
    "codemirror": "^5.65.1",
@@ -20,9 +21,10 @@
    "dayjs": "^1.10.5",
    "dexie": "~3.2.0",
    "echarts": "^5.1.1",
-    "element-plus": "~1.0.2-beta.71",
+    "element-plus": "^2.5.1",
    "lib-flexible": "^0.3.2",
    "lodash": "^4.17.21",
+    "maplibre-gl": "3.6.2",
    "mockjs": "^1.1.0",
    "moment-timezone": "^0.5.33",
    "node-sass": "~4.14.0",
@@ -42,8 +44,8 @@
    "@babel/core": "~7.22.5",
    "@babel/plugin-proposal-class-properties": "~7.18.0",
    "@babel/plugin-proposal-private-methods": "~7.18.0",
-    "@babel/plugin-transform-runtime": "~7.22.0",
    "@babel/plugin-proposal-private-property-in-object": "~7.21.0",
+    "@babel/plugin-transform-runtime": "~7.22.0",
    "@babel/preset-env": "~7.22.0",
    "@babel/preset-typescript": "~7.22.0",
    "@commitlint/cli": "^9.1.2",
@@ -66,8 +68,8 @@
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "~3.3.0",
    "@vue/component-compiler-utils": "~3.3.0",
-    "@vue/test-utils": "~2.4.0",
    "@vue/server-renderer": "~3.3.0",
+    "@vue/test-utils": "~2.4.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.0.0",
    "compression-webpack-plugin": "^8.0.1",
@@ -81,6 +83,8 @@
    "jest": "~26.6.0",
    "ts-jest": "~26.5.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
    "vue-jest": "^5.0.0-alpha.10"
  },
  "browserslist": [
--- a/public/config.js
+++ b/public/config.js
@@ -1,20 +1,25 @@
 const BASE_CONFIG = {
  baseUrl: 'http://192.168.44.54:8090/',
-  version: '23.10',
+  version: '23.12',
  apiVersion: 'v1'
 }
 // 默认时间过滤条件，单位分钟. 0表示请求接口时不传时间参数
 const DEFAULT_TIME_FILTER_RANGE = {
-  dashboard: 60,
+  dashboard: 60, // 所有dashboard
  entity: {
-    list: 60,
-    trafficLine: 60,
-    informationAggregation: 0,
-    relatedEntity: 60 * 24 * 7,
-    openPort: 60 * 24 * 7,
-    securityEvent: 60 * 24 * 7,
-    performanceEvent: 60 * 24 * 7,
-    behaviorPattern: 60 * 24 * 7
+    list: 60, // 实体列表
+    trafficLine: 60, // 实体详情--通用--流量曲线
+    subscriberKpi: 60, // 实体详情--subscriber--kpi
+    subscriberTopApp: 60, // 实体详情--subscriber--topApp
+    subscriberMap: 60, // 实体详情--subscriber--地图
+    informationAggregation: 0, // 实体详情--通用--信息聚合
+    relatedEntity: 60 * 24 * 7, // 实体详情--通用--相关实体
+    openPort: 60 * 24 * 7, // 实体详情--通用--开放端口
+    deviceInformation: 60 * 24 * 7, // 实体详情--subscriber--设备信息
+    accountInformation: 60 * 24 * 7, // 实体详情--subscriber--账户信息
+    securityEvent: 60 * 24 * 7, // 实体详情--通用--安全事件
+    performanceEvent: 60 * 24 * 7, // 实体详情--通用--性能事件
+    behaviorPattern: 60 * 24 * 7 // 实体详情--IP--行为模式
  },
-  detection: 60
+  detection: 60 // 事件日志列表
 }
--- a/public/images/entity-detail/track-point.png
+++ b/public/images/entity-detail/track-point.png
--- a/public/images/knowledge-base-logo/hotspot-vpn.png
+++ b/public/images/knowledge-base-logo/hotspot-vpn.png
--- a/public/images/knowledge-base-logo/ip-vanish.png
+++ b/public/images/knowledge-base-logo/ip-vanish.png
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,7 @@
    <script src="config.js"></script>
    <title>Cyber Narrator</title>
  </head>
-  <body class="theme-light">
+  <body>
    <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/Login.vue
+++ b/src/Login.vue
@@ -7,15 +7,18 @@
      <el-form class="login__box">
        <el-form-item>
          <el-input
-              prefix-icon="cn-icon cn-icon-user2"
              class="login--input login__input"
            v-model="username"
-          ></el-input>
+          >
+            <template #prefix>
+              <i class="cn-icon cn-icon-user2"></i>
+            </template>
+          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
              class="login--input"
-              prefix-icon="el-icon-lock"
+              prefix-icon="Lock"
              type="password"
              @keyup.enter="login"
            v-model="pin"
@@ -89,6 +92,7 @@ export default {
            // localStorage.setItem(storageKey.userId, res.data.data.user.userId)
            localStorage.setItem(storageKey.userId, res.data.data.user.id)
            localStorage.setItem(storageKey.token, res.data.data.token)
+            // const theme =
            this.$i18n.locale = localStorage.getItem(storageKey.language)
          }
        }
@@ -140,7 +144,7 @@ export default {
 }
 </script>

-<style scoped>
+<style scoped lang="scss">
 .logins {
  background-color: #000C18;
  background-size: auto;
@@ -153,12 +157,12 @@ export default {
 }

 :deep .el-input__inner {
-  background-color: #0B325C !important;
+  //background-color: #0B325C !important;
  border: none;
-  border-radius: 0px;
-  border-bottom: 1px solid #295688;
+  //border-radius: 0px;
+  //border-bottom: 1px solid #295688;
  font-size: 14px;
-  line-height: 14px;
+  //line-height: 14px;
 }
 :deep .el-input__inner:hover {
  border-color: #295688;
@@ -178,6 +182,7 @@ export default {
  -webkit-text-fill-color: rgba(231,234,237, .8) !important;
  transition: background-color 500000000000000000s ease-in-out 0s !important;
  caret-color: #fff ;
+  font-size: 14px;
 }
 .inside {
  width: 414px;
@@ -235,4 +240,21 @@ export default {
  width: 334px;
  height: 52px;
 }
+.login--input {
+  :deep .el-input__wrapper {
+    background-color: rgb(11, 50, 92) !important;
+    box-shadow: none !important;
+    //border-bottom: 1px solid rgba(103,179,245,0.65);
+    border-bottom: 1px solid #295688;
+    border-radius: 0;
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    padding: 1px 4px 2px 5px;
+  }
+
+  :deep .el-input__wrapper.is-focus {
+    box-shadow: none !important;
+  }
+}
 </style>
--- a/src/assets/css/common/cover-element-plus.scss
+++ b/src/assets/css/common/cover-element-plus.scss
@@ -0,0 +1,90 @@
+.el-drawer__body {
+  padding: 0 !important;
+}
+.el-tabs__item {
+  display: inline-block !important;
+  height: var(--el-tabs-header-height);
+  line-height: var(--el-tabs-header-height);
+}
+
+.el-table--border::before, .el-table__border-left-patch {
+  width: 0 !important;
+}
+.el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
+  height: 0 !important;
+}
+
+.el-popper.is-pure {
+  margin-top: -10px;
+}
+.el-select__wrapper {
+  min-height: 28px !important;
+}
+.el-input__wrapper {
+  height: 28px;
+}
+.el-input--mini .el-input__inner {
+  height: 28px !important;
+  line-height: 28px !important;
+}
+.el-table td.el-table__cell div {
+  margin-left: -1px;
+}
+.el-table .sort-caret.ascending {
+  border-bottom-color: #c0c4cc !important;
+}
+.el-table .ascending .sort-caret.ascending {
+  border-bottom-color: #699dc9 !important;
+}
+.el-table .sort-caret.descending {
+  border-top-color: #c0c4cc !important;
+}
+.el-table .descending .sort-caret.descending {
+  border-top-color: #699dc9 !important;
+}
+.el-radio.el-radio--large {
+  height: auto !important;
+}
+.el-radio {
+  height: auto !important;
+}
+.el-radio__input.is-checked + .el-radio__label {
+  color: $--color-primary !important;
+}
+.el-radio__input.is-checked .el-radio__inner {
+  background: $--color-primary !important;
+  border-color: $--color-primary !important;
+}
+.el-radio__label {
+  padding-left: 10px !important;
+}
+.el-tag {
+  min-width: 24px;
+  height: 24px !important;
+  line-height: 24px !important;
+}
+.el-popover.el-popper {
+  padding: 0 !important;
+}
+.my-header-cell-class .el-checkbox__input{
+  display: none;
+}
+.el-dialog {
+  padding: 0 !important;
+}
+.el-switch.is-checked .el-switch__core {
+  background-color: $--color-primary !important;
+}
+.el-date-table td.end-date .el-date-table-cell__text, .el-date-table td.start-date .el-date-table-cell__text {
+  background-color: $--color-primary !important;
+}
+.el-date-table td.available:hover {
+  color: $--color-primary !important;
+}
+.el-picker__popper.el-popper {
+  margin-top: 8px;
+}
+//.el-button:hover {
+//  color: $--color-primary !important;
+//  border-color: $--color-primary !important;
+//}
--- a/src/assets/css/common/part-select.scss
+++ b/src/assets/css/common/part-select.scss
@@ -1,6 +1,6 @@
 // 部分 select 通用样式
 .common-select.el-select__popper {
-  top: 27px !important;
+  //top: 27px !important;
  .el-popper__arrow {
    display: none;
  }
--- a/src/assets/css/common/right-box-common.scss
+++ b/src/assets/css/common/right-box-common.scss
@@ -64,6 +64,9 @@
          }
        }
      }
+    }
+    .container__form {
+
    }
    .el-form-item__content {
      .input-box {
@@ -136,6 +139,9 @@
        .el-input__inner:focus {
          border-color: darken($--right-box-border-color, 20%);
        }
+        .el-form-item__label {
+          padding-bottom: 2px;
+        }
      }
      .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
        border-color: #F56C6C
@@ -301,4 +307,24 @@
  .el-form-item__content .el-autocomplete .el-input-group {
    vertical-align: unset;
  }
+  .el-input__wrapper {
+    border-radius: 2px;
+    height: 32px !important;
+    line-height: 32px !important;
+    //box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
+    box-shadow: 0 0 0 1px #e7eaed inset;
+  }
+  .el-input__inner, .el-textarea__inner {
+    border: none !important;
+  }
+  .el-select__wrapper {
+    height: 32px;
+    line-height: 32px;
+  }
+  .el-switch.is-checked .el-switch__core {
+    background-color: $--color-primary;
+  }
+  .el-textarea__inner {
+    font-size: 12px;
+  }
 }
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -55,6 +55,10 @@
     .top-tool-btn--search:focus {
       border-left: none !important;
     }
+      .el-input--small .el-input__wrapper {
+        height: 28px !important;
+        border-radius: 2px 0 0 2px !important;
+      }
    }

    .top-tool-right {
@@ -196,7 +200,7 @@
      position: absolute;
      width: calc(100% - 40px);
      border: 1px solid $--right-box-border-color;
-      border-bottom: none;
+      //border-bottom: none;
      border-radius:4px;

      .caret-wrapper {
@@ -214,7 +218,7 @@
      }

      td {
-        padding: 8px 0;
+        padding: 3px 0 4px 0;
        border-bottom: 1px solid $--right-box-border-color;
      }
      th {
@@ -399,6 +403,9 @@
 .margin-t-20{
  margin-top: 20px;
 }
+.margin-r-3{
+  margin-right: 3px;
+}
 .tooltip-column-name {
  color: #aeb0b9;
  height:40px;
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -16,7 +16,7 @@
          margin-right: 12px;
          background-color: transparent;

-          .el-icon-search {
+          i {
            color: #3976CB;
          }
        }
@@ -51,14 +51,14 @@
          line-height: 39px;
          background: #38ACD2;

-          .el-icon-search {
+          i {
            font-size: 22px;
            color: #fff;
          }
        }
      }
      .search__suffix-close {
-        .el-icon-error {
+        i {
          font-size: 17px;
          color: #C4C4C4;
          cursor: pointer;
@@ -87,7 +87,7 @@
  border-radius: 2px;
  padding-left: 10px;
  padding-right: 80px;
-  background-color: white;
+  background-color: $--select-bg-color-1;
  border: 1px solid #DEDEDE;

  &::-webkit-scrollbar {
@@ -151,6 +151,20 @@
        color: #333;
        font-weight: bold;
        cursor: text;
+        .el-select {
+          min-width: 210px !important;
+          min-height: 20px !important;
+          height: 20px;
+          cursor: pointer;
+        }
+        .el-select__wrapper {
+          height: 28px;
+          margin-top: -4px;
+          cursor: pointer;
+        }
+        .el-select__wrapper.is-focused {
+          box-shadow: 0 0 0 1px $--color-primary inset !important;
+        }
      }
      .condition__operator {
        color: #3976CB;
@@ -180,7 +194,13 @@
  padding-left: 65px;
 }

-.el-popover.my-popper-class {
+.my-popper-class {
  width: auto !important;
-  padding: 8px 12px !important;
+  padding: 8px 10px !important;
+}
+.el-input__wrapper.is-focus {
+  box-shadow: 0 0 0 1px $--color-primary inset !important;
+}
+.el-select-dropdown__item.is-selected {
+  color: #2c72c6 !important;
 }
--- a/src/assets/css/components/components/advancedSearch/codemirror.scss
+++ b/src/assets/css/components/components/advancedSearch/codemirror.scss
@@ -2,7 +2,7 @@

 .CodeMirror {
  /* Set height, width, borders, and global font properties here */
-  height: 40px;
+  height: 40px !important;
  color: black;
  direction: ltr;
  border: 1px solid #CECECE;
@@ -22,7 +22,7 @@
 /* PADDING */

 .CodeMirror-lines {
-  padding: 9px 5px; /* Vertical padding around content */
+  //padding: 9px 5px; /* Vertical padding around content */
 }
 .CodeMirror pre.CodeMirror-line,
 .CodeMirror pre.CodeMirror-line-like {
@@ -175,14 +175,20 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
  overflow: hidden;
  margin-bottom: -50px; margin-right: -50px;
  padding-bottom: 50px;
-  height: 100%;
+  height: 50px !important;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  z-index: 0;
 }
+.CodeMirror-scroll::-webkit-scrollbar {
+  width: 0;
+}
 .CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
+  width: 3000px; // 避免搜索过长导致换行
+  height: 30px;
+  overflow-y: hidden;
 }

 /* The fake, visible scrollbars. Used to force redraw during scrolling
@@ -218,7 +224,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
 }
 .CodeMirror-gutter {
  white-space: normal;
-  height: 100%;
+  height: 100% !important;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
@@ -245,6 +251,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
 .CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
+  margin-top: 4px;
 }
 .CodeMirror pre.CodeMirror-line,
 .CodeMirror pre.CodeMirror-line-like {
@@ -356,3 +363,127 @@ div.CodeMirror-dragcursors {

 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
+
+.CodeMirror-hint-active {
+  background-color: #eaf1f5;
+  color: #5a90b0;
+}
+
+.el-dropdown-menu__item.CodeMirror-hint {
+  line-height: 20px;
+  /*font-family: NotoSansSC-Regular;*/
+}
+
+.hint-clear {
+  color: #31739C !important;
+}
+
+.hint-title {
+  margin: 7px 0 3px 0 !important;
+  /* 禁止选中  样式 */
+  background: #fff !important;
+  font-family: NotoSansHans-Medium;
+  font-size: 12px;
+  color: #333333 !important;
+  letter-spacing: 0;
+  font-weight: 600 !important;
+  line-height: 12px;
+}
+
+.cm-s-eclipse span.cm-string-2 {
+  //color: #D85512;
+}
+
+.in-coder-panel {
+  margin-left: 2px;
+}
+
+.in-coder-panel pre {
+  height: auto !important;
+}
+
+.in-coder-panel .CodeMirror {
+  /*height: inherit;*/
+}
+
+.in-coder-panel input {
+  font-size: 12px !important;
+  display: block;
+  border-color: transparent !important;
+  padding: 0 0 0 8px !important;
+}
+
+.CodeMirror-hints {
+  font-family: NotoSansSC-Regular !important;
+  max-width: 800px;
+}
+
+.CodeMirror-line {
+  //font-family: Arial !important;
+}
+
+.CodeMirror-hint {
+  margin: 0;
+  padding: 0 !important;
+  line-height: 20px !important;
+  border-radius: 2px;
+  white-space: pre;
+  color: black;
+  cursor: pointer;
+}
+
+.cm-variable-2{
+  color: #164 !important;
+}
+
+.default-tips-header,.default-tips-title {
+  height: 24px;
+  line-height: 24px;
+  font-weight: 700;
+  color: #333333;
+  font-size: 14px;
+  margin: 6px 0;
+  font-family: NotoSansSC-Bold;
+  letter-spacing: 0;
+}
+
+.default-tips-header {
+  font-size: 15px;
+}
+
+.show-hint-tips__p {
+  word-break: keep-all;
+  margin: 0;
+  line-height: 24px;
+  color: #575757;
+  font-weight: 400;
+}
+
+.Hint {
+  padding: 0;
+  z-index: 2;
+
+  .hint__block {
+    display: flex;
+    flex-direction: row;
+    width: calc(100% - 41px);
+    min-height: 298px;
+    margin-top: 6px;
+    box-shadow: 0 2px 8px 0 rgba(0,0,0,.3);
+    z-index: 2;
+
+    .hint__block-filter {
+      width: 319px;
+      background: #fff;
+      border-right: 1px solid #DEDEDE;
+      padding: 12px;
+      z-index: 2;
+    }
+
+    .hint__block-helper {
+      width: calc(100% - 319px);
+      background: #fff;
+      z-index: 2;
+    }
+  }
+}
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -32,8 +32,10 @@
    padding: 0 10px;
    display: flex;
    justify-content: space-around;
-    background: #FFFFFF;
-    border: 1px solid #DEDEDE;
+    //background: #FFFFFF;
+    background: var(--el-fill-color-blank);
+    //border: 1px solid #DEDEDE;
+    border: 1px solid var(--el-border-color);
    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
    border-radius: 2px;
    height: 28px;
@@ -56,7 +58,8 @@

  .date-range-title {
    font-size: 14px;
-    color: #666666;
+    //color: #666666;
+    color: $--text-color-4;
    font-weight: 600;
    padding: 14px 0 7px 8px;
  }
@@ -71,7 +74,8 @@
    white-space: nowrap;
    display: inline-block;
    margin: 0 5px;
-    color: #353636;
+    //color: #353636;
+    color: $--text-color-1;
    .cn-icon-Data {
      color: #575757;
    }
@@ -88,7 +92,8 @@
  .date-range-panel {
    height: 426px;
    width: 500px;
-    background: #FFFFFF;
+    //background: #FFFFFF;
+    background: $--select-bg-color-1;
    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;
@@ -102,7 +107,8 @@

      .content-title {
        font-size: 14px;
-        color: #666666;
+        //color: #666666;
+        color: var(--el-text-color-primary);
        font-weight: 400;
        margin-bottom: 12px;
      }
@@ -134,9 +140,13 @@

        .date-range-history-item:hover {
          /*font-weight: 600;*/
-          background: #f9f9f9;
+          //background: #f9f9f9;
+          background: $--select-bg-color-hover-1;
        }
      }
+      .el-range-editor.el-input__wrapper{
+        opacity: 0;
+      }
    }

    .date-range-panel-content-right {
@@ -156,15 +166,18 @@
          display: flex;
          flex-direction: column;
          justify-content: center;
-          color: #333333;
+          //color: #333333;
+          color: var(--el-text-color-primary);
          font-weight: 400;
          padding: 0 10px;
          cursor: pointer;
        }

        li.active {
-          background: #F2F9FF;
-          color: #0091FF;
+          //background: #F2F9FF;
+          //color: #0091FF;
+          background: $--select-bg-color-1;
+          color: var(--el-color-primary);
          font-weight: 400;

          .cn-icon-check {
@@ -175,8 +188,10 @@
        }

        li:hover {
-          background: #F2F9FF;
-          color: #0091FF;
+          //background: #F2F9FF;
+          background: var(--el-color-primary-light-9);
+          //color: #0091FF;
+          color: var(--el-color-primary);
        }
      }
    }
@@ -206,9 +221,20 @@
 }

 .my-date-picker {
+  z-index: 100004 !important;
  .el-popper__arrow {
    position: absolute;
    top: 20px !important;
    left: 642px !important; // element上样式设定是left，添加right不生效
  }
 }
+.my-date-picker__left {
+  .el-popper__arrow {
+    position: absolute;
+    top: 20px !important;
+    left: -6px !important;
+  }
+  .el-popper__arrow::before {
+    border: 1px solid #E7EAED !important;
+  }
+}
--- a/src/assets/css/components/components/common/TimeRange/time-refresh.scss
+++ b/src/assets/css/components/components/common/TimeRange/time-refresh.scss
@@ -17,8 +17,9 @@
  .refresh-list{
    position: absolute;
    z-index: 2;
-    background: #FFFFFF;
-    border: 1px solid #DEDEDE;
+    //background: #FFFFFF;
+    background: $--select-bg-color-1;
+    border: 1px solid var(--el-border-color);
    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
    border-radius: 2px;
    top: 30px;
@@ -29,13 +30,13 @@
      display: flex;
      flex-direction: column;
      justify-content: center;
-      color: #333333;
+      color: $--text-color-5;
      cursor: pointer;
      position: relative;
      padding: 8px 0 8px 12px;
    }
    .refresh-list-item.active{
-      background: #F2F9FF;
+      background: $--select-bg-color-1;
      color: #0091FF;
      font-weight: 400;
      .cn-icon-check{
@@ -45,7 +46,8 @@
      }
    }
    .refresh-list-item:hover{
-      background: #F2F9FF;
+      //background: #F2F9FF;
+      background: $--select-bg-color-hover-1;
      color: #0091FF;
    }
  }
@@ -66,5 +68,6 @@
  .el-button--mini{
    padding: 4px 6px !important;
    min-height: 28px !important;
+    height: 28px !important;
  }
 }
--- a/src/assets/css/components/components/common/chart-error.scss
+++ b/src/assets/css/components/components/common/chart-error.scss
@@ -1,9 +1,8 @@
 .error-component {
  position: absolute;
-  //width: 100%;
-  //height: 100%;
  left: 0;
  top: 0;
+  z-index: 1000;
 }
 .error-block {
  display: inline-block;
--- a/src/assets/css/components/components/common/chart-tab.scss
+++ b/src/assets/css/components/components/common/chart-tab.scss
@@ -17,8 +17,9 @@
    box-shadow: none;

    &>.el-tabs__header {
-      background-color: white;
-      border-color: #E2E5EC;
+      //background-color: white;
+      background-color: $--select-bg-color-1;
+      border-color: $--border-color-2;

      .el-tabs__nav-wrap {
        padding-left: 27px;
@@ -33,6 +34,7 @@
  }
  .el-tabs__nav {
    z-index: 1;
+    display: inline-block;
  }

  .el-tabs__item.is-top {
@@ -40,7 +42,7 @@
    line-height: 35px;

    .chart-tabs__label {
-      color: #353636;
+      color: $--text-color-1;
      font-size: 14px;
      font-weight: bold;
      box-sizing: border-box;
@@ -53,7 +55,7 @@
    }
    &.is-active {
      .chart-tabs__label {
-        color: #353636;
+        color: $--text-color-1;

        i {
          color: #046EC9;
--- a/src/assets/css/components/components/common/pagination.scss
+++ b/src/assets/css/components/components/common/pagination.scss
@@ -1,16 +1,89 @@
-.pagination {
-  padding-top: 8px;
-  text-align: center;
-  max-height: 42px;
+//.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);
+//  }
+//}
+//.entity__pagination .pagination {
+//  .el-pager li.more + li {
+//    display: none;
+//  }
+//  .el-pager li.number:not(:last-of-type) {
+//    display: inline-block !important;
+//  }
+//}

-  .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;
+.pagination {
+  //max-height: 42px;
+  padding-top: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-pagination__total {
+    margin-right: 10px;
+    font-size: 13px;
  }
  .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
    margin:5px 5px 0 5px;
@@ -23,54 +96,44 @@
    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 {
+  .el-pagination .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 {
+  .btn-next, .btn-prev {
+    background-color: $--content-right-background-color !important;
+  }
+  .el-pager li.is-active {
+    background-color: #699dc9;
+    color: #fff;
+    font-weight: 500;
+  }
+  .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
+    margin-top: 0;
+  }
+  .el-select {
+    width: 100px !important;
+    margin-left: 3px;
+  }
+  .pagination-size-select .el-select__wrapper{
+    width: 100px;
    height: 20px;
-    border-color: rgba(154,154,154,0.20);
+    line-height: 20px;
+    min-height: 20px !important;
+    margin: 5px 0 5px 5px;
+    padding: 4px 8px 4px 10px;
+    font-size: 12px;
+    border-radius: 2px;
  }
-  .el-pagination__sizes .el-input .el-input__inner:hover {
-    border-color: rgba(154,154,154,0.20);
-  }
-}
-.entity__pagination .pagination {
-  .el-pager li.more + li {
-    display: none;
-  }
-  .el-pager li.number:not(:last-of-type) {
-    display: inline-block !important;
+  .el-select__suffix {
+    svg {
+      width: 12px;
+      height: 12px;
+    }
  }
+  //el-icon el-select__caret el-select__icon
 }
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/src/assets/css/components/components/layout/layout.scss
@@ -1,6 +1,7 @@
 .cn-container {
  height: calc(100% - 100px);
-  background-color: $--content-right-background-color;
+  //background-color: $--content-right-background-color;
+  background-color: var(--bg-color);
  width: 100%;
  &>div {
    height: 100%;
@@ -49,8 +50,9 @@
    display: flex;
    align-items: center;
    height: 40px;
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #E2E5EC;
+    //background-color: #f7f7f7;
+    background-color: var(--el-bg-color-overlay);
+    border-bottom: 1px solid $--border-color;

    .cn-icon-a-NetworkAnalytics {
      margin-left: 20px;
@@ -68,88 +70,6 @@
      .header__left-breadcrumb-item-select{
        display:flex;
        align-items: center;
-        .search-input{
-          width:100%;
-          padding: 4px 4px 0px 4px;
-          .el-input__inner{
-            padding:0px 4px;
-            background: #FFFFFF;
-            border: 1px solid #C5C5C5;
-            box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
-            border-radius: 2px;
-            font-size: 12px;
-            /*color: rgba(87,87,87,0.60);*/
-            letter-spacing: 0;
-            font-weight: 400;
-          }
-        }
-        .breadcrumb-button{
-          align-items: center;
-          width: 100%;
-          height: 24px;
-          justify-content: center;
-          line-height: 24px;
-          padding: 0px 6px;
-          span {
-            margin-right: 6px;
-          }
-        }
-        .breadcrumb-button:hover,.breadcrumb-button__active {
-          cursor:pointer;
-          background: rgba(113,113,113,0.10);
-          box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-          border-radius: 2px;
-        }
-        .breadcrumb__popper{
-            top: -7px !important;
-            width:auto !important;
-            max-height:206px;
-            overflow:hidden;
-            padding: 0px !important;
-            background: #FFFFFF;
-            border:1px solid #C5C5C5 !important;
-            box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
-            border-radius: 2px !important;
-            .el-row {
-              width: 100% !important;
-            }
-            .selected {
-              color: #0091ff;
-              font-weight: bold;
-            }
-            .el-popper {
-              max-height: 405px;
-            }
-            .select-dropdown {
-              max-height:172px;
-              width:100%;
-              margin: 1px 0px;
-              overflow:auto;
-              list-style: none;
-              padding:4px 0px;
-              box-sizing: border-box;
-              .select-dropdown__item:hover{
-                background-color: #F5F7FA !important;
-              }
-              .select-dropdown__item{
-                width:100%;
-                height:30px;
-                padding:0px 11px;
-                line-height:30px;
-                position: relative;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                color: #666665;
-                display: list-item;
-                text-align: -webkit-match-parent;
-                box-sizing: border-box;
-                cursor: pointer;
-                font-size: 12px;
-                font-weight: 400;
-              }
-            }
-        }
      }
    }
  }
@@ -246,6 +166,9 @@
        font-size: 12px;
      }
    }
+    .header-menu--item {
+      outline-style: initial;
+    }
  }
  .left-menu--pin {
    width: 20px;
@@ -293,3 +216,93 @@
  border-radius: 4px;
  border: 2px solid transparent;
 }
+
+.breadcrumb__popper{
+  top: 96px !important;
+  width: 180px !important;
+  min-width: 180px;
+  max-height:206px;
+  overflow:hidden;
+  padding: 0 !important;
+  background: #963131;
+  border:1px solid #C5C5C5 !important;
+  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
+  border-radius: 2px !important;
+  .el-row {
+    width: 100% !important;
+  }
+  .selected {
+    color: #0091ff;
+    font-weight: bold;
+  }
+  .el-popper {
+    max-height: 405px;
+  }
+  .select-dropdown {
+    max-height:172px;
+    width:100%;
+    margin: 1px 0px;
+    overflow:auto;
+    list-style: none;
+    padding:4px 0px;
+    box-sizing: border-box;
+    .select-dropdown__item:hover{
+      background-color: #F5F7FA !important;
+    }
+    .select-dropdown__item{
+      width:100%;
+      height:30px;
+      padding:0px 11px;
+      line-height:30px;
+      position: relative;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #666665;
+      display: list-item;
+      text-align: -webkit-match-parent;
+      box-sizing: border-box;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 400;
+    }
+  }
+}
+
+.search-input{
+  width:100%;
+  padding: 4px 4px 0px 4px;
+  .el-input__wrapper {
+    border: 1px solid #C5C5C5;
+    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+  }
+  .el-input__inner{
+    //padding:0px 4px;
+    //background: #FFFFFF;
+    //border: 1px solid #C5C5C5;
+    //box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+    border-radius: 2px;
+    font-size: 12px;
+    /*color: rgba(87,87,87,0.60);*/
+    letter-spacing: 0;
+    font-weight: 400;
+    margin-left: -7px;
+  }
+}
+.breadcrumb-button{
+  align-items: center;
+  width: 100%;
+  height: 24px;
+  justify-content: center;
+  line-height: 24px;
+  padding: 0px 6px;
+  span {
+    margin-right: 6px;
+  }
+}
+.breadcrumb-button:hover,.breadcrumb-button__active {
+  cursor:pointer;
+  background: rgba(113,113,113,0.10);
+  box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+  border-radius: 2px;
+}
--- a/src/assets/css/components/components/rightBox/report/reportBox.scss
+++ b/src/assets/css/components/components/rightBox/report/reportBox.scss
@@ -4,6 +4,7 @@
      .el-checkbox {
        margin-right: 24px;
        line-height: 28px;
+        margin-top: -2px;
      }
      .el-checkbox-group {
        line-height: 28px;
@@ -108,10 +109,40 @@
        height: 32px;
        margin: 10px 0 0 10px;
      }
+      .el-input__wrapper {
+        height: 32px !important;
+        padding: 1px 11px !important;
+        border-radius: 2px;
+      }
+      .el-input__inner {
+        padding: 0;
+      }
+
+      .el-form-item__content {
+        line-height: 40px !important;
+      }
+    }
+    .el-input__inner {
+      border: none;
+    }
+    .el-select--small .el-select__wrapper {
+      padding: 0 10px;
+      min-height: 32px !important;
+      line-height: 32px !important;
+      margin-top: -2px;
+      border-radius: 2px;
    }
  }
  .right-box__select--param {
-    .el-input__prefix {
+    //.el-select--small .el-select__prefix {
+    //  left: 0;
+    //  background-color: #f5f7fa;
+    //  color: #999;
+    //  padding: 0 1.07143rem;
+    //  border: 1px solid #dcdfe6;
+    //  border-radius: 2px 0 0 2px;
+    //}
+    .el-select__prefix, .el-input__prefix {
      left: 0;
      background-color: #f5f7fa;
      color: #999;
@@ -119,5 +150,11 @@
      border: 1px solid #dcdfe6;
      border-radius: 2px 0 0 2px;
    }
+    .el-select__wrapper {
+      padding-left: 0 !important;
+    }
  }
 }
+.my-form-item .el-form-item__content {
+  display: block !important;
+}
--- a/src/assets/css/components/components/table/common.scss
+++ b/src/assets/css/components/components/table/common.scss
@@ -86,9 +86,12 @@
  width:28px !important;
  height:28px !important;
  padding:unset !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
  i {
    font-size: 14px;
-    color: #575757;
+    color: $--text-color-2;
    margin-right:unset !important;
  }
 }
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -81,8 +81,15 @@
@import 'views/administration/AdministrationTabs';
@import 'views/administration/Appearance.scss';

+@import 'views/system/Plugin';
+
@import 'views/setting/knowledgeBase';
@import 'views/charts2/entityDetailLine';
+@import 'views/charts2/EntityDetailSubscriberKpi.scss';
+@import 'views/charts2/EntityDetailSubscriberTopApp.scss';
+@import 'views/charts2/entityDetailSubscriberMap.scss';
+@import 'views/charts2/entityDetailSubscriberLine.scss';
+
@import 'views/charts2/entityDetailTabs';
@import 'views/charts2/digitalCertificate';
@import 'views/charts2/entityDetailBasicInfo';
--- a/src/assets/css/components/views/administration/Appearance.scss
+++ b/src/assets/css/components/views/administration/Appearance.scss
@@ -10,6 +10,21 @@
    display: flex;
    flex-direction: column;
    height: 100%;
+    .el-form-item {
+      margin-bottom: 27px;
+    }
+    .el-form-item__content {
+      width: 600px;
+      .el-select__wrapper {
+        min-height: 32px !important;
+        line-height: 32px;
+        padding: 0 10px 0 16px;
+        font-size: 13px;
+      }
+    }
+    .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
+      margin-bottom: 4px;
+    }
    .el-input {
      width:600px;
    }
@@ -60,3 +75,6 @@
    }
  }
 }
+.el-popper.is-pure {
+  margin-top: 0;
+}
--- a/src/assets/css/components/views/charts2/EntityDetailSubscriberKpi.scss
+++ b/src/assets/css/components/views/charts2/EntityDetailSubscriberKpi.scss
@@ -0,0 +1,94 @@
+.subscriber-kpi {
+  height: 100%;
+
+  .subscriber-kpi-header {
+    height:34px;
+    padding-bottom:10px;
+    font-family: NotoSansHans-Medium;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 500;
+    display:flex;
+    align-items: center;
+    justify-content: space-between;
+    .subscriber-kpi-title {
+      height:24px;
+      overflow: hidden;
+    }
+  }
+  .subscriber-kpi-body {
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    height:calc(100% - 34px);
+    .subscriber-kpi-content {
+      height: calc(100% - 36px);
+      padding: 20px 0 20px 20px;
+      display: flex;
+      flex-direction: column;
+      .panel-chart__no-data {
+        height: calc(100% - 46px);
+      }
+      .kpi-type {
+        display: flex;
+        flex-direction: column;
+        justify-content:space-between;
+        height: calc(100% - 65px);
+        .kpi-type-value {
+          display: flex;
+          flex-direction: column;
+          padding-bottom:20px;
+          .kpi-type-value-name {
+            line-height: 12px;
+            margin-bottom: 10px;
+            font-size: 14px;
+            color: #575757;
+            font-weight: 400;
+          }
+          .kpi-type-data {
+            display:flex;
+            flex-direction: row;
+            .kpi-type-value-number {
+              white-space: nowrap;
+              font-family: Helvetica-Bold;
+              font-size: 20px;
+              color: #353636;
+              font-weight: 700;
+            }
+            .data-trend {
+              display: flex;
+              width: 50%;
+              .data-total-trend {
+                display: flex;
+                align-items: center;
+                margin-left: 6px;
+                justify-content: center;
+                margin-top: 2px;
+                border-radius: 10px;
+                font-weight: 500;
+                font-size: 12px;
+                height: 20px;
+                padding: 0 5px;
+              }
+              .data-total-trend-black {
+                background-color: rgba(113,113,113,0.12);
+                color: #717171;
+                width: 36px;
+              }
+              .data-total-trend-green {
+                background-color: rgba(126,159,84,0.12);
+                color: #7E9F54;
+              }
+              .data-total-trend-red {
+                background-color: rgba(226,97,84,0.12);
+                color: #E26154;
+                .cn-icon-rise1{
+                  color: #E44D3E;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts2/EntityDetailSubscriberTopApp.scss
+++ b/src/assets/css/components/views/charts2/EntityDetailSubscriberTopApp.scss
@@ -0,0 +1,113 @@
+.subscriber-top-app {
+  height: 100%;
+
+  .subscriber-top-app-header {
+    height:34px;
+    padding-bottom:10px;
+    font-family: NotoSansHans-Medium;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 500;
+    display:flex;
+    align-items: center;
+    justify-content: space-between;
+    .subscriber-top-app-title {
+      height:24px;
+      overflow: hidden;
+    }
+  }
+  .subscriber-top-app-body {
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    height:calc(100% - 34px);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 20px 20px;
+
+    .panel-chart__no-data {
+      height: calc(100% - 46px);
+    }
+    .top-app-left {
+      height:100%;
+      display: flex;
+      flex-direction: column;
+      margin-right:15px;
+      .app-data {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 14px;
+        color: #353636;
+        font-weight: 400;
+        height:calc(100%/10);
+        .app-index {
+          text-align: right;
+          width:20px;
+          margin-right:15px;
+        }
+        .app-name {
+          width:80px;
+          margin-right:10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .top-app-divider {
+          height:10px;
+          background: #717171;
+          margin-left:10px;
+          margin-right:8px;
+        }
+        .app-trend-right {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          white-space: nowrap;
+          width:50px;
+          i {
+            margin-right:3px;
+            font-size:12px;
+            color: #717171;
+          }
+        }
+        .app-trend-left {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          white-space: nowrap;
+          width:60px;
+          i {
+            margin-right:3px;
+            font-size:12px;
+            color: #717171;
+          }
+        }
+        .app-up {
+          font-size: 12px;
+          color: #717171;
+          letter-spacing: -0.2px;
+          text-align: center;
+          font-weight: 400;
+        }
+        .app-down {
+          font-size: 12px;
+          color: #717171;
+          letter-spacing: -0.2px;
+          text-align: center;
+          font-weight: 400;
+        }
+      }
+    }
+    .top-app-right {
+      height: 100%;
+      width:calc(100% - 248px);
+      position: relative;
+      .chart-content {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts2/dnsEventChart.scss
+++ b/src/assets/css/components/views/charts2/dnsEventChart.scss
@@ -1,7 +1,7 @@
 .dns-event-chart {
  width: 100%;
  height: 100%;
-  border: 1px solid #E2E5EC;
+  border: 1px solid $--border-color;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
--- a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
+++ b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
@@ -1,7 +1,7 @@
 .el-popper.analysis-popper {
-  top: -5px !important;
+  margin-top: -5px !important;
  padding: 0;
-  border: 1px solid #C5C5C5;
+  border: 1px solid #C5C5C5 !important;
  border-radius: 4px;
  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);

--- a/src/assets/css/components/views/charts2/entityDetailLine.scss
+++ b/src/assets/css/components/views/charts2/entityDetailLine.scss
@@ -8,7 +8,7 @@
      align-items: center;

      & > .el-select {
-        width: 162px;
+        width: 162px !important;
        margin-right: 10px;

        .select-prefix {
@@ -34,15 +34,23 @@
    .line-select-metric {
      margin-right: 20px;

-      .el-input__inner {
+      .el-select__wrapper {
        width: 127px;
        height: 24px;
        line-height: 24px;
+        min-height: 24px !important;
        padding-left: 4px;
        font-size: 12px;
-        color: #2C72C6;
        font-weight: 400;
        border-radius: 2px;
+        .el-select__placeholder {
+          color: #2C72C6 !important;
+          margin-left: 1px;
+        }
+        .el-select__suffix {
+          margin-right: -2px;
+          margin-top: 2px;
+        }
      }
    }

--- a/src/assets/css/components/views/charts2/entityDetailSubscriberLine.scss
+++ b/src/assets/css/components/views/charts2/entityDetailSubscriberLine.scss
@@ -0,0 +1,51 @@
+.entity-detail-line--subscriber {
+  $blue: #046ECA;
+  $grey: #353636;
+  height:100%;
+
+  .el-tabs__content {
+    overflow: visible;
+  }
+  .cn-chart__tabs {
+    height:100%;
+    .tab-pane {
+      height:100%;
+    }
+    .el-tabs__header {
+      margin-bottom: 10px;
+      width: calc(100% - 272px);
+    }
+    .el-tabs__nav-wrap::after {
+      height: 1px;
+      background-color: transparent ;
+    }
+    .el-tabs__nav.is-top {
+      height: 33px;
+
+      .el-tabs__active-bar {
+        background-color: $blue;
+      }
+      .el-tabs__item {
+        padding: 0 10px;
+        height: 33px;
+        color: $grey;
+        font-size: 14px;
+
+        &.el-tabs__item.is-top.is-active {
+          color:$blue;
+        }
+        &:nth-child(2) {
+          padding-left: 0;
+        }
+      }
+
+    }
+    .el-tabs__content {
+      height: calc(100% - 40px);
+      border:none;
+      .el-table__body-wrapper {
+        height: calc(100% - 45px) !important;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
+++ b/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
@@ -0,0 +1,70 @@
+.subscriber-map {
+  height: 100%;
+
+  .subscriber-map-header {
+    height: 34px;
+    padding-bottom: 10px;
+    font-size: 14px;
+    color: #353636;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .subscriber-map-title {
+      height: 24px;
+      overflow: hidden;
+    }
+  }
+  .subscriber-map-body {
+    position: relative;
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    height: calc(100% - 34px);
+
+    .subscriber-map {
+      height: 100%;
+      width: 100%;
+
+      .maplibregl-canvas:focus-visible {
+        outline: none;
+      }
+    }
+    .panel-chart__no-data {
+      height: calc(100% - 46px);
+    }
+  }
+
+  .subscriber-map-point-tooltip {
+    position: fixed;
+    background-color: white;
+    width: 200px;
+    border: 1px solid #C5C5C5;
+    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+    border-radius: 2px;
+
+    .subscriber-map-point-tooltip__time {
+      padding: 10px;
+      font-size: 12px;
+      color: #353636;
+      font-weight: bold;
+    }
+    .subscriber-map-point-tooltip__coordinates {
+      padding: 0 10px 10px;
+
+      .subscriber-map-point-tooltip__coordinate {
+        display: flex;
+
+        .coordinate__label {
+          width: 115px;
+          font-size: 12px;
+          color: #575757;
+        }
+        .coordinate__value {
+          font-size: 12px;
+          color: #353636;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts2/entityDetailTabs.scss
+++ b/src/assets/css/components/views/charts2/entityDetailTabs.scss
@@ -155,6 +155,14 @@
    margin-left: 8px;
  }

+  .entity-subscriber-detail-error {
+    margin-top: 0px;
+    margin-left: 0px;
+    .error-block {
+      margin:0px;
+    }
+  }
+
  .entity-detail-performance {
    height: 46px;
    border-radius: $tab-border-radius;
--- a/src/assets/css/components/views/charts2/linkDirectionGrid.scss
+++ b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
@@ -88,7 +88,8 @@ $blue: #046ECA;
 .item-popover-header {
  display: flex;
  align-items: center;
-  line-height: 32px;
+  padding: 10px 0;
+  line-height: 14px;
  font-size: 14px;
  font-weight: 600;

--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -7,7 +7,7 @@

    .network-overview-apps-title {
      font-size: 14px;
-      color: #353636;
+      color: $--text-color-1;
      font-weight: 600;
      display: flex;
      align-items: flex-end;
@@ -20,7 +20,7 @@

      &>span {
        font-size: 12px;
-        color: #575757;
+        color: $--text-color-2;
        font-weight: 400;
        margin-right: 3px;
      }
@@ -45,7 +45,7 @@
            .el-select__caret {
              line-height: 24px;
              width: 16px;
-              color: #575757;
+              color: $--text-color-2;
            }
          }
        }
@@ -62,14 +62,14 @@
    padding-top: 10px;

    .app-card {
-      border: 1px solid #E2E5EC;
+      border: 1px solid $--border-color;
      border-radius: 4px;
      display: flex;
      height: 100px;
      flex-direction: column;

      &.app-card--create {
-        background-color: #F7F7F7;
+        background-color: $--block-bg-color-1;
        justify-content: center;
        align-items: center;

@@ -81,7 +81,7 @@
        }
        span {
          font-size: 12px;
-          color: #353636;
+          color: $--text-color-1;
          cursor: pointer;
        }
      }
@@ -119,12 +119,12 @@
            border-radius: 2px;
            font-size: 12px;
            padding-left: 6.8px;
-            color: #353636;
+            color: $--text-color-1;
            font-weight: 400;
            i {
              margin-right: 5.67px;
              font-size: 12px;
-              color: #575757;
+              color: $--text-color-2;
            }
          }
          .app-card-title-more-delete:hover {
@@ -155,7 +155,7 @@
          display: flex;
          .app-card__body-content-number {
            font-size: 14px;
-            color: #353636;
+            color: $--text-color-1;
            font-weight: 700;
            margin-right: 6px;
          }
@@ -171,7 +171,7 @@
          justify-content: center;
          position: relative;
          top: 50%;
-          color: #717171;
+          color: $--text-color-3;
          margin-top: -10px;
          background-color: rgba(113, 113, 113, 0.12);
        }
@@ -188,12 +188,12 @@
        margin-top: -2px;
        margin-bottom: 2px;
        font-size: 12px;
-        color: #778391;
+        color: $--text-color-3;
      }
      .app-card__body-previous {
        display: flex;
        font-size: 12px;
-        color: #353636;
+        color: $--text-color-1;
        font-weight: 400;
        div:nth-of-type(1) {
          margin-right: 5px;
@@ -207,6 +207,10 @@
  .add-app-drawer {
    height: 526px !important;

+    .el-drawer__body {
+      padding: 0 !important;
+    }
+
    .add-app {
      display: flex;
      flex-direction: column;
@@ -216,14 +220,14 @@
        display: flex;
        justify-content: space-between;
        height: 46px;
-        background-color: white;
+        background-color: $--select-bg-color-1;

        .header__title {
          padding-left: 20px;
          font-size: 16px;
          font-weight: bold;
          line-height: 46px;
-          color: #353636;
+          color: $--text-color-1;
        }
        .header__operations {
          display: flex;
@@ -261,6 +265,12 @@
          flex: 1;
          position: relative;
        }
+        .el-tabs__item {
+          display: inline-block;
+        }
+        .el-tabs__item:hover {
+          color: #046eca;
+        }
        .el-tabs__item.is-top {
          height: 50px;
          line-height: 60px;
@@ -280,18 +290,25 @@
          right: 28px;
          top: 11px;
          width: 280px;
-          .el-input.el-input--mini {
-            .el-input__inner {
-              background: #FFFFFF;
-              border: 1px solid #DEDEDE;
-              box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-              border-radius: 14px;
+          .el-input__wrapper {
+            border-radius: 14px;
+            font-size: 12px;
+            .el-input.el-input--mini {
+              .el-input__inner {
+                font-size: 12px !important;
+                //background: #FFFFFF;
+                //border: 1px solid #DEDEDE;
+                //box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                //border-radius: 14px;
+              }
            }
-            &.el-input--prefix {
+            .el-input__prefix-inner {
              i {
-                color: #575757;
+                color: $--text-color-2;
                font-size: 16px;
                font-weight: 600;
+                margin-left: -2px;
+                margin-right: 6px
              }
            }
          }
@@ -350,7 +367,7 @@
                .body__app-left-title {
                  font-family: Helvetica-Bold;
                  font-size: 16px;
-                  color: #353636;
+                  color: $--text-color-1;
                  font-weight: 700;
                  margin-bottom: 6px;
                }
@@ -375,7 +392,7 @@
            }
            .body__app-value {
              font-size: 12px;
-              color: #717171;
+              color: $--text-color-3;
              line-height: 18px;
              font-weight: 400;
              max-height: 54px;
--- a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
@@ -1,11 +1,11 @@
 .ddos-detection {
  height: 100%;
-  border: 1px solid #E2E5EC;
+  border: 1px solid $--border-color;
  border-radius: 4px;
  background: rgba(113,113,113,0.06);
  .ddos-detection-title {
    font-size: 14px;
-    color: #353636;
+    color: $--text-color-1;
    font-weight: 600;
    margin-top: 15px;
    i {
@@ -34,7 +34,7 @@
        flex-direction: column;
        .ddos-detection-type-value-name {
          font-size: 12px;
-          color: #575757;
+          color: $--text-color-2;
          line-height: 12px;
          font-weight: 400;
          margin-bottom: 12px;
@@ -53,23 +53,27 @@
    .el-button {
      margin-right: 20px;
      width: 117px;
+      height: 29.6px;
      min-height: 28px;
-      background: #FBFBFB;
-      border: 1px solid #C5C5C5;
+      background: $--button-color-1;
+      border: 1px solid $--border-color-1;
      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
      border-radius: 4px;
      padding: 8px 5px;
      span {
        font-size: 12px;
-        color: #575757;
+        color: $--text-color-2;
        font-weight: 500;
        i {
-          transform: rotate(-90deg);
-          color: #575757;
+          //transform: rotate(-90deg);
+          color: $--text-color-2;
          font-size: 12px;
          margin-left: 4px;
        }
      }
+      &:hover {
+        background: $--button-bg-color-1 !important;
+      }
    }
  }
 }
--- a/src/assets/css/components/views/charts2/networkOverviewLine.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss
@@ -2,7 +2,7 @@
  height: 100%;
  width: 100%;
  position: relative;
-  border: 1px solid #E2E5EC;
+  border: 1px solid $--border-color;
  border-radius: 4px;
  .chart-drawing {
    height: 100%;
@@ -35,6 +35,10 @@
      display: flex;
      //flex: 1;
      .line-select__operation {
+        .el-select__wrapper {
+          height: 24px !important;
+          min-height: 24px !important;
+        }
        .el-input__inner {
          width: 100px;
        }
@@ -42,6 +46,10 @@
      .line-select-reference-line {
        margin-right: 20px;
        .line-select__operation {
+          .el-select__wrapper {
+            height: 24px !important;
+            min-height: 24px !important;
+          }
          .el-input__inner {
            width: 127px;
          }
@@ -54,17 +62,36 @@
        display: flex;
        align-items: center;
        .line-select__operation {
+          min-width: 127px;
          height: 24px;
          margin-left: 3px;
          box-shadow: none;
          border-radius: 2px;
-          .el-input__inner {
-            padding-left: 4px;
-            line-height: 24px;
+          .el-select__wrapper {
+            min-height: 24px !important;
+            //padding-left: 4px;
+            line-height: 24px !important;
            height: 24px;
            font-size: 12px;
-            color: #2C72C6;
+            color: $--text-color-6;
            font-weight: 400;
+            padding: 5px 6px 4px 5px !important;
+            .el-select__placeholder {
+              color: $--text-color-6;
+            }
+            .el-select__suffix {
+              .el-icon {
+                color: #575757;
+              }
+            }
+            //.el-input__inner {
+            //  padding-left: 4px;
+            //  line-height: 24px;
+            //  height: 24px;
+            //  font-size: 12px;
+            //  color: #2C72C6;
+            //  font-weight: 400;
+            //}
          }
          .el-input__suffix {
            display: flex;
@@ -111,14 +138,14 @@
            .line-value-unit-number {
              font-family: Helvetica-Bold;
              font-size: 28px;
-              color: #353636;
+              color: $--text-color-1;
              margin-right: 4px;
            }
            .line-value-unit-number2 {
              font-size: 0;
              span {
                font-size: 12px;
-                color: #575757;
+                color: $--text-color-2;
                font-weight: 400;
              }
            }
--- a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
@@ -1,12 +1,12 @@
 .performance-event {
  height: 100%;
-  border: 1px solid #E2E5EC;
+  border: 1px solid $--border-color;
  border-radius: 4px;
  background: rgba(113,113,113,0.06);
  .performance-event-title {
    margin-top: 15px;
    font-size: 14px;
-    color: #353636;
+    color: $--text-color-1;
    font-weight: 600;
    line-height: 1;
    i {
@@ -24,7 +24,7 @@
      height: 1px;
      width: calc(100% - 40px);
      margin: auto;
-      background: #E2E5EC;
+      background: $--border-color;
    }
    .performance-event-pie {
      position: relative;
@@ -38,26 +38,30 @@
  }
  .pie-button.el-button {
    width: 96px;
+    height: 29.6px;
  }
  .el-button {
    width: 117px;
    min-height: 28px;
-    background: #FBFBFB;
-    border: 1px solid #C5C5C5;
+    background: $--button-color-1;
+    border: 1px solid $--border-color-1;
    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
    border-radius: 4px;
    padding: 8px 5px;
    margin-left: 30px;
    span {
      font-size: 12px;
-      color: #575757;
+      color: $--text-color-2;
      font-weight: 500;
      i {
-        transform: rotate(-90deg);
-        color: #575757;
+        //transform: rotate(-90deg);
+        color: $--text-color-2;
        font-size: 12px;
        margin-left: 4px;
      }
    }
+    &:hover {
+      background: $--button-bg-color-1 !important;
+    }
  }
 }
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -52,11 +52,28 @@
        display:flex;
        flex-direction:column;
        align-items: flex-start;
+        color: $--text-color-3;
+        font-weight: 400;
+        .data-column__span {
+          font-weight: bold;
+          color: $--text-color-1;
+        }
        .unit__span {
          color: #778391;
          font-weight: 400;
        }
      }
+      .column-loading {
+        display: flex;
+        flex-direction: row;
+        .loading-icon {
+          position:relative;
+          transform: translateZ(0) scale(0.5);
+          width:20px;
+          height:20px;
+          margin-right:3px;
+        }
+      }
      .tab-table {
        border: 1px solid #E2E5EC;
        border-radius: 4px 4px 0 0;
@@ -103,9 +120,9 @@
        }
      }
      .tab-table__average {
-        border: 1px solid #E2E5EC;
+        border: 1px solid $--border-color;
        border-radius: 4px 4px 0 0;
-        padding: 1px;
+        //padding: 1px;
        .data-click:hover{
          cursor: pointer;
        }
@@ -168,7 +185,7 @@
        height: 0px;
      }
      .el-table thead {
-        color: $grey;
+        color: $--text-color-1;
      }
      .el-table__empty-text{
        line-height:20px !important;
@@ -179,6 +196,7 @@
        justify-content: center;
        align-items: flex-start;
        line-height:18px;
+        padding: 1px 10px 0 11px !important;
        .caret-wrapper {
          margin-top:3px;
        }
@@ -209,6 +227,13 @@
          background: #749F4D;
        }
      }
+      .el-table__border-left-patch {
+        width: 0;
+      }
+      .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
+        width: 0;
+        height: 0;
+      }
    }
    .el-tabs__header {
      margin-bottom: 10px;
@@ -226,8 +251,8 @@
      }
      .el-tabs__item {
        padding: 0 10px;
-        height: 33px;
-        color: $grey;
+        height: 40px;
+        color: $--text-color-1;
        font-size: 14px;

        &.el-tabs__item.is-top.is-active {
@@ -321,8 +346,153 @@
    }
  }
 }
+.customize-tab__popper{
+  max-height:405px;/*calc(100% - 136px);*/
+  overflow:hidden;
+  padding: 0px !important;
+  background: #FFFFFF;
+  /*border: 1px solid #C5C5C5;*/
+  border:1px solid #C5C5C5 !important;
+  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
+  border-radius: 2px !important;
+  .el-popper {
+    max-height: 405px;
+  }
+  .el-tabs__header{
+    font-size: 12px;
+    color:green !important;
+    font-weight: 500;
+    margin: 0px ;
+    border-bottom: 1px solid #E2E5EC;
+    height: 30px !important;
+  }
+  .el-tabs__content {
+    max-height: 358px !important;
+    margin:8px 0 6px 0;
+  }
+  .el-tabs__nav{
+    width:100%;
+  }
+  .el-tabs__nav-wrap {
+    margin-bottom: 0px !important;
+  }
+  .el-tabs__item{
+    width:50%;
+    text-align:center;
+    padding:0px;
+    height:30px;
+    line-height: 30px;
+    font-size: 12px;
+    color: #353636;
+    font-weight: 500;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+    border-top: 3px solid #38ACD2;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item:first-child{
+    border-radius: 2.5px 0 0 0;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
+    border-radius: 0 2.5px 0 0 ;
+    border-left: 1px #E2E5EC solid !important;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__item{
+    border-bottom: 0px ;
+    border-top: 3px solid white;
+    color: #353636;
+  }
+  .el-tabs--card > .el-tabs__header .el-tabs__nav {
+    border:0px ;
+  }
+
+  .list {
+    list-style: none;
+    padding-inline-start: 0px !important;
+    /*height:375px;*/
+    max-height: 358px !important;
+    overflow:auto;
+    margin:0 0;
+    .drag-move {
+      transition: transform 0.3s;
+    }
+
+    .list-item:last-child {
+      margin-bottom: 6px;
+    }
+    .list-item {
+      width:100%;
+      color: #575757;
+      margin-bottom: 0px;
+      height: 24px;
+      line-height: 24px;
+      text-align: left;
+      font-weight:400;
+      font-size:12px;
+
+      .icon-drag{
+        cursor: move;
+        margin-left:6px;
+        margin-right:3px;
+      }
+
+      .el-checkbox__input.is-checked .el-checkbox__inner {
+        width: 14px;
+        height: 14px;
+        background-color: #38ACD2;
+        border-color: #38ACD2;
+        border-radius: 2px;
+      }
+      .el-checkbox__input .el-checkbox__inner {
+        width: 14px;
+        height: 14px;
+        background-color: #F2F7F9;
+        border: 1px solid rgba(0,0,0,0.15);
+        border-radius: 2px;
+      }
+      .el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
+        font-size: 12px;
+        color: #575757;
+        font-weight: 400;
+      }
+    }
+  }
+  /*top:0px !important;
+  right:200px !important;
+  transform: translateY(126px) !important;*/
+}
+.fixed-row {
+  display:flex;
+  justify-content: flex-start;
+  align-items: center;
+  //background: white;
+  background: var(--el-bg-color);
+  width: 100%;
+  height:40px;
+  border:solid 1px $--border-color;
+  //border: 1px solid var(var(--el-border-color-lighter));
+  padding-left:10px !important;
+  text-align: left;
+  border-radius:0 0 4px 4px;
+  color:#046eca;
+  .fixed-button {
+    display:flex;
+    justify-content: center;
+    padding:7px 10px;
+    align-items: center;
+    height: 30px;
+  }
+  .fixed-button:hover {
+    cursor:pointer;
+    background: #e6f4ff;
+    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    border-radius: 4px;
+  }
+}
+.btn-up{
+  margin-top:40px;
+}
 .tab-search__popper{
-  top: -7px !important;
+  margin-top: -7px;
  width:auto !important;
  max-height:206px;
  overflow:hidden;
@@ -335,10 +505,10 @@
    width:100%;
    padding: 4px 4px 0px 4px;
    .el-input__inner{
-      padding:0px 4px;
-      background: #FFFFFF;
-      border: 1px solid #C5C5C5;
-      box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+      //padding:0px 4px;
+      //background: #FFFFFF;
+      //border: 1px solid #C5C5C5;
+      //box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
      border-radius: 2px;
      font-size: 12px;
      /*color: rgba(87,87,87,0.60);*/
@@ -386,140 +556,3 @@
    }
  }
 }
-.customize-tab__popper{
-  max-height:405px;/*calc(100% - 136px);*/
-  overflow:hidden;
-  padding: 0px !important;
-  background: #FFFFFF;
-  /*border: 1px solid #C5C5C5;*/
-  border:1px solid #C5C5C5 !important;
-  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
-  border-radius: 2px !important;
-  .el-popper {
-    max-height: 405px;
-  }
-  .el-tabs__header{
-    font-size: 12px;
-    color:green !important;
-    font-weight: 500;
-    margin: 0px ;
-    border-bottom: 1px solid #E2E5EC;
-  }
-  .el-tabs__content {
-    max-height: 358px !important;
-    margin:8px 0 6px 0;
-  }
-  .el-tabs__nav{
-    width:100%;
-  }
-  .el-tabs__nav-wrap {
-    margin-bottom: 0px !important;
-  }
-  .el-tabs__item{
-    width:50%;
-    text-align:center;
-    padding:0px;
-    height:30px;
-    line-height: 30px;
-    font-size: 12px;
-    color: #353636;
-    font-weight: 500;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
-    border-top: 3px solid #38ACD2;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__item:first-child{
-    border-radius: 2.5px 0 0 0;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__item:last-child{
-    border-radius: 0 2.5px 0 0 ;
-    border-left: 1px #E2E5EC solid !important;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__item{
-    border-bottom: 0px ;
-    border-top: 3px solid white;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__nav {
-    border:0px ;
-  }
-
-  .list {
-    list-style: none;
-    padding-inline-start: 0px !important;
-    /*height:375px;*/
-    max-height: 358px !important;
-    overflow:auto;
-    margin:0 0;
-    .drag-move {
-      transition: transform 0.3s;
-    }
-
-    .list-item:last-child {
-      margin-bottom: 6px;
-    }
-    .list-item {
-      width:100%;
-      color: #575757;
-      margin-bottom: 0px;
-      height: 24px;
-      line-height: 24px;
-      text-align: left;
-      font-weight:400;
-      font-size:12px;
-
-      .icon-drag{
-        cursor: move;
-        margin-left:6px;
-        margin-right:3px;
-      }
-
-      .el-checkbox__input.is-checked .el-checkbox__inner {
-        background-color: #38ACD2;
-        border-color: #38ACD2;
-        border-radius: 2px;
-      }
-      .el-checkbox__input .el-checkbox__inner {
-        background-color: #F2F7F9;
-        border: 1px solid rgba(0,0,0,0.15);
-        border-radius: 2px;
-      }
-      .el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
-        font-size: 12px;
-        color: #575757;
-        font-weight: 400;
-      }
-    }
-  }
-  /*top:0px !important;
-  right:200px !important;
-  transform: translateY(126px) !important;*/
-}
-.fixed-row {
-  display:flex;
-  justify-content: flex-start;
-  align-items: center;
-  background: white;
-  width: 100%;
-  height:40px;
-  border:solid 1px #E2E5EC;
-  padding-left:10px !important;
-  text-align: left;
-  border-radius:0 0 4px 4px;
-  color:#046eca;
-  .fixed-button {
-    display:flex;
-    justify-content: center;
-    padding:7px 10px;
-    align-items: center;
-    height: 30px;
-  }
-  .fixed-button:hover {
-    cursor:pointer;
-    background: #e6f4ff;
-    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
-    border-radius: 4px;
-  }
-}
-.btn-up{
-  margin-top:40px;
-}
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -73,11 +73,14 @@
        padding: 5px 0;
        .data-column__span {
          font-size: 12px;
-          color: #353636;
+          color: $--text-color-1;
          font-weight: 600;
        }
      }
    }
+    .el-table__cell {
+      padding: 13px 0;
+    }
    .el-table__header-wrapper .el-table__header {
      tr th:nth-last-child(-n+3) {
        text-align: center;
@@ -86,7 +89,7 @@
    .el-table__body-wrapper.is-scrolling-none {
      height: 306px !important;
      tr td {
-        padding: 13px 0;
+        padding: 13px 0 !important;
      }
      tr td:nth-last-child(-n+3) {
        text-align: center;
@@ -99,6 +102,7 @@
  .data-total {
    display: flex !important;
    .data-total-category-icon {
+      margin-left: -2px;
      i {
        font-size: 16px;
        margin-right: 12px;
@@ -120,6 +124,7 @@
      width: 34px;
      line-height: 20px;
      text-align: center;
+      margin-left: -2px;
    }
    .data-score.data-score-red {
      background: #E26154;
@@ -133,6 +138,7 @@
    .data-score-no-data {
      width: 34px;
      text-align: center;
+      margin-left: -2px;
    }
  }
  .data-total-value {
--- a/src/assets/css/components/views/charts2/npmAppEventTable.scss
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -47,7 +47,7 @@
        padding: 4px 0;
        .data-column__span {
          font-size: 12px;
-          color: #353636;
+          color: $--text-color-1;
          font-weight: 600;
        }
      }
@@ -116,4 +116,7 @@
    left: 0;
    top: 32px;
  }
+  .el-table .cell {
+    padding: 0 10px !important;
+  }
 }
--- a/src/assets/css/components/views/charts2/npmMap.scss
+++ b/src/assets/css/components/views/charts2/npmMap.scss
@@ -24,12 +24,29 @@
    position: absolute;
    right: 10px;
    top: 10px;
+    display: inline-block;
+
+    .el-select__wrapper {
+      font-size: 12px;
+      padding: 0;
+    }
    .el-select__popper.map-select-down {
      top: 32px !important;
      .el-popper__arrow {
        display: none;
      }
    }
+    .el-select__placeholder {
+      padding-left: 16px;
+      color: #2c72c6;
+    }
+    .el-select__prefix {
+      padding-left: 5px;
+    }
+    .el-select__suffix {
+      padding-right: 10px;
+      padding-bottom: 2px;
+    }
    .map-select {
      margin-left: 10px;

@@ -40,6 +57,19 @@
        width: 110px;
      }
    }
+    .map-select__location {
+      &.el-select {
+        width: 222px;
+      }
+      .el-select__wrapper {
+        min-height: 28px;
+        height: 28px;
+        .el-select__placeholder {
+          padding-left: 4px;
+          color: #c0c4cc;
+        }
+      }
+    }
  }
  .map-legend {
    display: flex;
--- a/src/assets/css/components/views/charts2/npmRecentEvents.scss
+++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss
@@ -20,12 +20,36 @@
    border: 1px solid #E2E5EC;
    border-radius: 4px;
    padding: 1px;
+
+    .el-scrollbar__thumb {
+      background: rgba(0,0,0,0);
+      //width: calc(100% - 200px) !important;
+    }
+    .el-table__empty-block {
+      width: calc(100% - 2px) !important;
+    }
+    .el-table__empty-text {
+      line-height: 25px !important;
+      .table-no-data {
+        //margin-left: -2px !important;
+        .icon {
+          width: 30px;
+          height: 30px;
+          margin-left: 1px;
+        }
+        .table-no-data__title {
+          font-size: 14px;
+          color: #575757;
+          font-weight: 400;
+        }
+      }
+    }
    .el-table__header-wrapper {
      tr th {
        padding: 4px 0;
        .data-column__span {
          font-size: 12px;
-          color: #353636;
+          color: $--text-color-1;
          font-weight: 600;
        }
      }
@@ -34,20 +58,6 @@
      tr td {
        padding: 6.75px 0;
      }
-      .el-table__empty-block .el-table__empty-text {
-        line-height: 25px;
-        .table-no-data {
-          .icon {
-            width: 30px;
-            height: 30px;
-          }
-          .table-no-data__title {
-            font-size: 14px;
-            color: #575757;
-            font-weight: 400;
-          }
-        }
-      }
    }
  }
  .data-recent-table {
@@ -106,4 +116,7 @@
  .el-table--group::after,.el-table--border::after, .el-table::before {
    height: 0px;
  }
+  .el-table .cell {
+    padding: 0 10px !important;
+  }
 }
--- a/src/assets/css/components/views/charts2/npmTabs.scss
+++ b/src/assets/css/components/views/charts2/npmTabs.scss
@@ -18,6 +18,7 @@

    &>.el-tabs__header {
      background-color: white;
+      //background-color: #f00;
      border-color: #E2E5EC;

      .el-tabs__nav-wrap {
--- a/src/assets/css/components/views/charts2/npmTrafficLine.scss
+++ b/src/assets/css/components/views/charts2/npmTrafficLine.scss
@@ -22,17 +22,37 @@
      }
      .line-select__operation {
        height: 24px;
+        min-height: 24px;
        margin-left: 3px;
        box-shadow: none;
        border-radius: 2px;
-        .el-input__inner {
+        .el-select__wrapper {
          width: 225px;
-          height: 24px;
+          height: 24px !important;
+          min-height: 24px !important;
          padding-left: 4px;
          line-height: 24px;
          font-size: 12px;
-          color: #2C72C6;
          font-weight: 400;
+          .el-select__placeholder {
+            color: #2C72C6;
+            margin-left: 1px;
+          }
+          .el-input__inner {
+            width: 225px;
+            height: 24px;
+            padding-left: 4px;
+            line-height: 24px;
+            font-size: 12px;
+            color: #2C72C6;
+            font-weight: 400;
+          }
+          .el-select__suffix {
+            margin-right: -7px;
+            i {
+              color: #575757 !important;
+            }
+          }
        }
        .el-input__suffix {
          display: flex;
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -21,7 +21,8 @@
      font-size: 24px;
      line-height: 24px;
      font-weight: 900;
-      color: #353636;
+      //color: #353636;
+      color: $--text-color-1;
      display:flex;
      .score {
        .circle-icon {
@@ -76,7 +77,7 @@
      display: flex;

      &>.el-select {
-        width: 162px;
+        width: 162px !important;
        margin-right: 10px;

        .select-prefix {
@@ -96,6 +97,22 @@
      .panel__time {
        display: flex;
      }
+      .el-select__wrapper {
+        height: 28px !important;
+        min-height: 20px !important;
+        padding: 5px 7px 4px 5px !important;
+        .el-select__prefix {
+          .select-prefix {
+            margin-right: -5px !important;
+          }
+        }
+        .el-select__suffix {
+          .el-icon {
+            margin-left: -17px !important;
+            margin-top: -2px !important;
+          }
+        }
+      }
    }
  }
  .chart-list {
--- a/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
+++ b/src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
@@ -1,6 +1,17 @@
 .form-setting__block {
  width: 620px;

+  &.el-form-item {
+    margin-bottom: 20px;
+    margin-top: -4px;
+  }
+  .el-select__wrapper, .el-input__wrapper {
+    min-height: 24px !important;
+    height: 24px !important;
+  }
+  .el-switch__label.is-active {
+    color: $--text-color-1;
+  }
  .el-form-item__label {
    height: 14px;
    line-height: 14px;
--- a/src/assets/css/components/views/detections/detection-create/detection-form.scss
+++ b/src/assets/css/components/views/detections/detection-create/detection-form.scss
@@ -135,6 +135,16 @@
        .el-collapse-item__content {
          padding-bottom: 0 !important;
        }
+        .el-input__wrapper, .el-select__wrapper {
+          height: 24px !important;
+          line-height: 24px !important;
+          min-height: 24px !important;
+          width: 112px;
+          margin: 0 12px;
+        }
+        .el-input__inner {
+          padding: 0 15px !important;
+        }
      }
    }

--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -130,7 +130,10 @@
 }
 .new-detection-filter-content {
  padding: 20px;
-
+  .el-checkbox {
+    display: inline-block !important;
+    height: auto !important;
+  }
  .new-filter-content-title {
    font-family: NotoSansHans-Medium;
    font-size: 14px;
@@ -145,11 +148,12 @@

    .new-filter-content-checkbox {
      line-height: 16px;
-      margin-bottom: 10px;
+      margin-bottom: 13.6px;
      font-family: NotoSansSChineseRegular;
      font-size: 14px;
      color: #353636;
      font-weight: 400;
+      display: flex !important;

      .el-checkbox__inner {
        width: 16px !important;
@@ -185,6 +189,7 @@
        font-size: 14px;
        color: #353636;
        font-weight: 400;
+        padding-left: 10px !important;
      }
    }
  }
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -37,7 +37,7 @@
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: nowrap;
-      padding: 2px 10px 2px 0;
+      padding: 6px 10px 6px 0;
      font-size: 14px;
      word-break: break-all;

@@ -45,6 +45,8 @@
        padding-right: 20px;
        min-width: 100px;
        color: #6B717B;
+        line-height: 14px;
+        word-break: normal;
      }

      .row__charts {
@@ -68,6 +70,7 @@
        font-size: 14px;
        align-items: center;
        flex-wrap: wrap;
+        line-height: 14px;

        &.row__content--link {
          font-style: italic;
--- a/src/assets/css/components/views/detections/detection-table.scss
+++ b/src/assets/css/components/views/detections/detection-table.scss
@@ -1,5 +1,10 @@
-
 .detection-table {
+  .el-table td, .el-table th {
+    padding: 12px 0;
+  }
+  .el-table .el-table__cell.is-center {
+    padding-top: 4px;
+  }
  .el-table th > .cell, .el-table .cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
@@ -32,7 +37,37 @@
    height: 32px !important;
  }
 }
+.policy-library-tip {
+  max-width: 180px;
+  padding: 4px;

+  .tip__header {
+    color: #353636;
+    font-weight: bold;
+    font-size: 14px;
+  }
+  .tip__tags {
+    display: flex;
+    margin-top: 8px;
+
+    .tip__tag {
+      margin-right: 10px;
+      padding: 2px 10px;
+      background-color: #EBF7FA;
+      color: #046ECA;
+      box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+      border-radius: 12px;
+    }
+  }
+  .tip__description {
+    margin-top: 14px;
+    color: #666;
+
+    &.tip__description--non {
+      color: #999;
+    }
+  }
+}
 .detection-tag-blue, .detection-tag-red, .detection-tag-gray, .detection-tag-status0, .detection-tag-status1 {
  display: inline-block;
  border-radius: 10px;
--- a/src/assets/css/components/views/detections/detection-tools.scss
+++ b/src/assets/css/components/views/detections/detection-tools.scss
@@ -129,6 +129,10 @@

    .el-input--small {
      line-height: 27px;
+      .el-input__wrapper {
+        height: 28px !important;
+        border-radius: 2px 0 0 2px !important;
+      }

      .el-input__inner {
        height: 28px;
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -90,6 +90,8 @@
    font-size: 14px;
    color: #353636;
    font-weight: 400;
+    height: 20.8px;
+    line-height: 20.8px;

    .entity-hide-entity {
      margin-left: 20px;
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -64,6 +64,7 @@
          i {
            color: #23BF9A;
            margin-right: 4px;
+            margin-top: 2px;
          }
        }

--- a/src/assets/css/components/views/entityExplorer/entityList/row.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/row.scss
@@ -43,7 +43,7 @@
    align-content: center;
    padding: 16px 0;
    margin-bottom: 1px;
-    background-color: white;
+    //background-color: white;
    border-radius: 0 4px 4px 0;

    .cn-entity__icon {
--- a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
+++ b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
@@ -161,6 +161,9 @@
              padding-left: 18px;
            }
          }
+          .el-scrollbar__bar {
+            visibility: hidden;
+          }
        }
        .clear-all {
          padding-left: 18px;
--- a/src/assets/css/components/views/report/report.scss
+++ b/src/assets/css/components/views/report/report.scss
@@ -78,11 +78,37 @@
              color: #1b2e3b;
              background: #ebeef5;
            }
+            .el-range-editor--small.el-input__wrapper {
+              height: 32px;
+              line-height: 32px;
+            }
            .cn-detection__footer {
              text-align: center;
+              display: flex;
+              justify-content: center;
              .el-pagination__jump {
                margin-left: 3px;
              }
+              .el-pagination__goto {
+                display: none;
+              }
+              .el-input--small {
+                width: 46px !important;
+                .el-input__wrapper {
+                  height: 22px;
+                }
+              }
+              .el-pagination--small {
+                .btn-prev {
+                  margin-right: 10px;
+                }
+                .btn-next {
+                  margin-left: 10px;
+                }
+                &span {
+                  color: $--color-text-primary;
+                }
+              }
            }
          }
          .block.drop-down-time {
@@ -176,6 +202,12 @@
            }
          }
        }
+        .el-table__border-left-patch, .el-table--border::before {
+          width: 0;
+        }
+        .el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
+          height: 0;
+        }
      }
    }
    .table-operation-all {
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
@@ -169,6 +169,8 @@
              align-items: center;
              .card-title-name {
                width:100%;
+                height: 19.2px;
+                line-height: 19.2px;
                overflow: hidden; //超出的文本隐藏
                text-overflow: ellipsis; //溢出用省略号显示
                white-space:nowrap;
@@ -996,6 +998,10 @@
    padding-left: 20px;
    overflow: auto;

+    .el-form--label-top .el-form-item .el-form-item__label {
+      margin-bottom: 3px !important;
+    }
+
    .enable-form__mt {
      .el-form {
        margin-top:6px;
@@ -1176,6 +1182,7 @@
        }
        .el-textarea__inner {
          padding-left: 8px;
+          font-size: 12px;
        }

        .form-select__disable {
@@ -1188,6 +1195,13 @@
        .form-select__enable {
          width: 100%;

+          .el-select__wrapper {
+            //padding-left: 22px !important;
+            .el-select__inner {
+              background-color: #521919 !important;
+              padding-left: 22px !important;
+            }
+          }
          .el-input__inner {
            background-color: white !important;
            padding-left: 22px !important;
@@ -1899,6 +1913,7 @@
    padding-top:0px;
    padding-right:30px;
    padding-left:30px;
+    padding-bottom:30px;
    .dialog-message {
      padding-left:0px !important;
      padding-right:0px !important;
@@ -1920,12 +1935,21 @@
      &.update-dialog__table--system-user {
        height: calc(100% - 139px);
      }
+      &.el-table .el-table__cell {
+        padding: 12px 0 !important;
+      }
+      &.el-table .el-table__row .el-table__cell {
+        padding: 8px 0 !important;
+      }
    }
    .update-knowledge-form {
      .el-upload {
        width:100%;
      }
      .form-input {
+        .el-input__wrapper {
+          padding: 1px 16px !important;
+        }
        .el-input__inner{
          padding-right: 50px !important;
          font-size: 14px;
@@ -1936,7 +1960,8 @@
        border: 1px solid rgba(222,222,222,1);
        box-shadow: 0px 2px 4px 0px rgba(51,51,51,0.02);
        border-radius: 2px;
-        width:100%;
+        //width:100%;
+        width: 1020px;
        height:28px;
        min-height:28px !important;
        color: #575757;
@@ -1962,6 +1987,16 @@
      }
      .knowledge-remark {
        margin-bottom:0px !important;
+        .el-textarea__inner {
+          font-size: 12px;
+          padding: 5px 15px;
+        }
+      }
+      .el-form--label-top .el-form-item .el-form-item__label {
+        margin-bottom: 0 !important;
+      }
+      .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
+        line-height: 14px;
      }
    }
    .dialog-footer {
--- a/src/assets/css/components/views/system/Plugin.scss
+++ b/src/assets/css/components/views/system/Plugin.scss
@@ -0,0 +1,49 @@
+.plugin {
+  font-size: 12px;
+  color: #353636;
+  line-height: 14px;
+  font-weight: 400;
+  .type-tag {
+    display: inline-block;
+    padding: 0 10px;
+    background-color: #EBF7FA;
+    color: #046ECA;
+    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    border-radius: 12px;
+  }
+  .plugin-name {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: center;
+    .icon-background {
+      display:flex;
+      justify-content: center;
+      align-items: center;
+      width:32px;
+      height:32px;
+      background: #ECECEC;
+      border-radius: 4px;
+      margin-right:6px;
+      .plugin-name-icon {
+        width:25px;
+        height:25px;
+        color:red;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+  .two-line {
+    overflow: hidden; //超出的文本隐藏
+    text-overflow: ellipsis; //溢出用省略号显示
+    display: -webkit-box;
+    line-clamp:2 ;
+    -webkit-line-clamp: 2; // 超出多少行
+    -webkit-box-orient: vertical;
+  }
+  .cn-table .el-table:not(.chart-table) td {
+    padding: 8px 0 !important;
+  }
+}
--- 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=1699411209748') format('woff2'),
-       url('iconfont.woff?t=1699411209748') format('woff'),
-       url('iconfont.ttf?t=1699411209748') format('truetype');
+  src: url('iconfont.woff2?t=1703561754372') format('woff2'),
+       url('iconfont.woff?t=1703561754372') format('woff'),
+       url('iconfont.ttf?t=1703561754372') format('truetype');
 }

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

+.cn-icon-system:before {
+  content: "\e6cc";
+}
+
+.cn-icon-plugin:before {
+  content: "\e6cd";
+}
+
+.cn-icon-IMSI:before {
+  content: "\e812";
+}
+
+.cn-icon-APN:before {
+  content: "\e813";
+}
+
+.cn-icon-shoujihaoma:before {
+  content: "\e814";
+}
+
+.cn-icon-IMEI:before {
+  content: "\e811";
+}
+
+.cn-icon-trace-point:before {
+  content: "\e810";
+}
+
+.cn-icon-account-info:before {
+  content: "\e80e";
+}
+
+.cn-icon-device-info:before {
+  content: "\e80f";
+}
+
 .cn-icon-related:before {
  content: "\e640";
 }
--- 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
@@ -27,18 +27,20 @@ $--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语

 /* 主题 */

-.theme-light {
-  $--theme: light;
-  @import './themes/theme-light.scss'; // 加载主题变量
-  @import './themes/src/index.scss'; // 加载ele样式
-  @import './components/index'; // 加载cn组件样式
-  @import './common/index.scss'; // 加载通用样式
-}
+$--color-text-primary: #303133 !default;
+$--border-color: #E2E5EC;

-.theme-dark {
+@import './themes/theme-light.scss'; // 加载主题变量
+@import './components/index'; // 加载cn组件样式
+@import './common/index.scss'; // 加载通用样式
+@import "common/cover-element-plus"; // 覆盖新版elemen-plus样式
+
+.dark {
  $--theme: dark;
  @import './themes/theme-dark.scss'; // 加载主题变量
-  @import './themes/src/index.scss'; // 加载ele样式
  @import './components/index'; // 加载cn组件样式
  @import './common/index.scss'; // 加载通用样式
+  .fixed-button:hover {
+    background: #40474b !important;
+  }
 }
--- a/src/assets/css/themes/THEME_README.md
+++ b/src/assets/css/themes/THEME_README.md
@@ -11,3 +11,23 @@
 - theme-chalk/src/mixins/mixins.scss 改动较多，如需了解请比对文件差异
 -   // $arrow-selector: #{& + '__arrow'};   
    改为 $arrow-selector: '.el-popper__arrow';
+
+### 20240118__element-plus升级
+#### 变动事项
+
+- elemen-plus由1.0.2-beta.71升级至2.5.1，旧版本是将element-plus源文件放到theme/src中进行部分修改使用，现在弃用该方案，直接使用element-plus组件，部分组件有差异改动，对比界面进行调整并记录在cover-element.scss
+- 弃用之前的主题写法，改为官网的主题切换方法。删除body上的class，在html上添加class="dark"。默认明亮主题light，暗黑主题dark，默认引入theme-light.scss样式文件，暗黑主题theme-dark.scss样式文件
+- 如需添加暗黑样式，先在theme-light.scss添加唯一样式名，再到theme-dark中添加同名样式。如在light中添加字体颜色$--text-color-1: #353636;，则需要在dark中添加$--text-color-1: #d8d8d8;
+- header.vue的第四级面包屑导航栏，以及NetworkOverviewTabs.vue第一列搜索的popover。原结构的popover被上一层div包裹，但在html中解析成两个div，原来的popper-class需要提出来，不要在原div的class下，否则样式错乱
+
+#### 新旧组件差异
+
+- table表格：自定义单元格样式cell-style。老版cell-style接受格式为string/object，新版疑似仅接受object，string格式会报错。表头格式header-cell-style同理。
+- input输入框1：老版el-input是包含class为el-input__inner的input，新版el-input在此基础上被class="el-input__wrapper"的div包裹。在老版的el-input__inner改动的样式，需要在el-input__wrapper上修改
+- input输入框2：老版给input添加icon，是给属性prefix-icon添加icon名。新版是在prefix插槽里添加icon标签
+- icon图标：老版使用：<i class="el-icon-search" />。新版则是svg文件，需要单独引入封装成component的格式，使用时：<el-icon><Search /></el-icon>
+- select选择器：新版被el-select__wrapper的div包裹，与旧版顺序不同。
+- * input和select的右侧图标和maxlength间距新版比旧版略大
+- drawer抽屉：在header.vue中遇到，custom-class="cn-menu"，渲染后class中没有cn-menu，也许是按需引入导致的，额外标注
+- message-box弹窗：新版在旧版的el-message-box的外层包裹了一层父div el-overlay-message-box，导致原样式会错乱
+- dialog: custom在2.4版本后被移除，使用class替代，插槽中的title也在2.4版本后移除，使用header替代
--- a/src/assets/css/themes/src/table-column.scss
+++ b/src/assets/css/themes/src/table-column.scss
@@ -94,4 +94,4 @@
      margin-bottom: 0;
    }
  }
-}
+}
--- a/src/assets/css/themes/theme-dark.scss
+++ b/src/assets/css/themes/theme-dark.scss
@@ -60,3 +60,23 @@ $--border-color-light: #E7EAED;
 $--chart-box-border-color: $--border-color-light;
 $--chart-title-hover-background-color: #323238;
@import './common';
+
+
+$--border-color: #363637;
+$--text-color-1: #d8d8d8;
+$--text-color-2: #afafaf;
+$--text-color-3: #a4adb7;
+$--text-color-4: #BEBEBE;
+$--text-color-5: #D8D8D8;
+$--text-color-6: #2764ad;
+
+$--button-color-1: #1D1D1D;
+$--button-bg-color-1: #303030;
+$--border-color-1: var(--el-text-color-disabled);
+$--border-color-2: #6C6E72;
+
+$--select-bg-color-1: #1D1E1F;
+$--select-bg-color-hover-1: #18222C;
+$--select-bg-color-hover-2: #18222C;
+
+$--block-bg-color-1: #181818;
--- a/src/assets/css/themes/theme-light.scss
+++ b/src/assets/css/themes/theme-light.scss
@@ -61,3 +61,22 @@ $--border-color-light: #E7EAED;
 $--chart-box-border-color: $--border-color-light;
 $--chart-title-hover-background-color: $--background-color-1;
@import './common';
+
+$--text-color-1: #353636;
+$--text-color-2: #575757;
+$--text-color-3: #778391;
+$--text-color-4: #666666;
+$--text-color-5: #333333;
+$--text-color-6: #2C72C6;
+
+$--button-color-1: #FBFBFB;
+$--button-bg-color-1: #EBF1F4;
+$--border-color-1: #C5C5C5;
+$--border-color-2: #E2E5EC;
+$--border-color-3: #DEDEDE;
+
+$--select-bg-color-1: #FFFFFF;
+$--select-bg-color-hover-1: #f9f9f9;
+$--select-bg-color-hover-2: #F2F9FF;
+
+$--block-bg-color-1: #F7F7F7;
--- a/src/components/advancedSearch/Index.vue
+++ b/src/components/advancedSearch/Index.vue
@@ -5,16 +5,20 @@
      @mouseleave="showCloseIcon = false"
  >
    <text-mode
+        test-id="text-mode"
        v-if="searchMode === 'text'"
        ref="textMode"
        :column-list="columnList"
        :str="str"
        :show-list="showList"
+        :is-show-hint="showHint"
+        :unit-test-str="unitTestStr"
        @changeMode="changeMode"
        @search="search"
        :show-close-icon="showCloseIcon"
    ></text-mode>
    <tag-mode
+        test-id="tag-mode"
        v-if="searchMode === 'tag'"
        ref="tagMode"
        :column-list="columnList"
@@ -47,6 +51,11 @@ export default {
      showCloseIcon: false
    }
  },
+  provide () {
+    return {
+      myHighLight: !this.noHighlight
+    }
+  },
  props: {
    // 默认模式，tag | text
    defaultMode: String,
@@ -64,11 +73,22 @@ export default {
      required: true
    },
    // 连接符列表
-    connectionList: Array
+    connectionList: Array,
+    showHint: {
+      type: Boolean,
+      default: false
+    },
+    noHighlight: {
+      type: Boolean,
+      default: false
+    }
  },
  emits: ['search'],
  methods: {
    search (parseData) {
+      if (this.isUnitTesting) {
+        this.unitTestParam = parseData
+      }
      this.$emit('search', parseData)
    },
    changeMode (mode, { str, metaList }) {
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -7,9 +7,13 @@
    >
      <template v-if="meta.meta === condition">
        <!-- 删除按钮 -->
-        <div class="condition__delete" @click="removeCondition(index)"><i class="el-icon-error"></i></div>
+        <div class="condition__delete" @click="removeCondition(index)">
+          <el-icon><CircleCloseFilled /></el-icon>
+          <!--<i class="el-icon-error"></i>-->
+        </div>
        <!-- 字段选择 -->
        <div v-if="meta.column.show" class="condition__column">
+<!--          <div>-->
          <div v-show="meta.column.isEditing">
            <el-select
                allow-create
@@ -40,7 +44,58 @@
        <div v-if="meta.operator.value === 'has'" class="condition__operator" style="color: #000C18">({{meta.column.label}},</div>
        <!-- 值 -->
        <div class="condition__value">
-          <div v-if="meta.value.isEditing">
+          <!--点击=操作符时，单个选择枚举值-->
+          <div  v-if="meta.value.isEditing && meta.doc && meta.column.type!==columnType.array">
+            <el-select
+                allow-create
+                filterable
+                size="mini"
+                v-model="meta.value.value"
+                ref="columnValue"
+                :placeholder="meta.value.value || ' '"
+                @blur="valueBlur1(meta, index)"
+                @change="(value) => selectValue(value, meta)"
+            >
+              <el-option
+                  v-for="(code, i) in meta.doc.data"
+                  :key="i"
+                  :label="code.code"
+                  :value="code.code"
+              ></el-option>
+            </el-select>
+          </div>
+
+          <!--点击 in 操作符时，多个选择枚举值-->
+          <div v-if="meta.value.isEditing && meta.doc && meta.column.type===columnType.array">
+            <el-select
+                v-model="myCheckboxList"
+                ref="valuesSelect"
+                multiple
+                size="mini"
+                collapse-tags
+                collapse-tags-tooltip
+                :placeholder="meta.value.value || ' '"
+                @blur="valuesBlur(meta, index)"
+                @focus="valuesFocus(meta)"
+                @change="(value) => selectValues(value, meta)"
+                @visible-change="(value) => selectVisibleValues(value, meta)"
+                popper-class="my-select-class"
+            >
+              <template #label>
+                {{ meta.value.value }}
+              </template>
+              <template #default>
+                <el-option
+                    v-for="item in meta.doc.data"
+                    :key="item.code"
+                    :label="item.code"
+                    :value="item.code"
+                />
+              </template>
+            </el-select>
+          </div>
+
+          <div v-if="meta.value.isEditing && !meta.doc">
            <!--避免blur事件和keyup.enter重复执行-->
            <el-input
                ref="valueInput"
@@ -96,7 +151,7 @@
            popper-class="my-popper-class"
            placement="top"
            trigger="hover"
-            :content="$t('entity.switchToBasicSearch')"
+            :content="$t('overall.switchToText')"
        >
          <template #reference>
            <i class="cn-icon cn-icon-search-normal" @click="changeMode"></i>
@@ -104,10 +159,12 @@
        </el-popover>
      </span>
      <span v-show="metaList.length>0" class="search__suffix search__suffix-close" @click="cleanMetaList">
-        <i class="el-icon-error"></i>
+        <el-icon><CircleCloseFilled /></el-icon>
+        <!--<i class="el-icon-error"></i>-->
      </span>
-      <span class="search__suffix" @click="search">
-        <i class="el-icon-search"></i>
+      <span test-id="tag-search" class="search__suffix" @click="search">
+        <el-icon><Search /></el-icon>
+        <!--<i class="el-icon-search"></i>-->
      </span>
    </div>
  </div>
@@ -119,23 +176,28 @@ import _ from 'lodash'
 import { handleErrorTip } from '@/components/advancedSearch/meta/error'
 import Parser, { stringInQuot } from '@/components/advancedSearch/meta/parser'
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import { enumerateData } from '@/utils/static-data'
 export default {
  name: 'TagMode',
  props: {
    columnList: Array,
    connectionList: Array,
    convertMetaList: Array,
-    showList: Boolean
+    showList: Boolean,
+    unitTestStr: String
  },
  data () {
    return {
      condition,
      connection,
      metaList: [],
+      columnType,
+      myCheckboxList: [],
      operatorList: [] // 操作符列表，根据所选columnList的label来确定，一般为=,IN，tags操作符为has
    }
  },
  emits: ['changeMode', 'search'],
+  inject: ['myHighLight'],
  methods: {
    // 新增条件
    addCondition (meta) {
@@ -218,19 +280,61 @@ export default {
          if (!meta.operator.value) {
            meta.operator.isEditing = true
            meta.operator.show = true
+          } else {
+            // 切换column，清除上次column选择的value，包含枚举的则删除，in操作符的让类型回归array
+            meta.value.value = ''
+            meta.value.label = ''
+            meta.value.isEditing = true
+            meta.value.show = true
+            const obj = enumerateData.find(d => d.name === meta.column.label)
+            if (obj) {
+              meta.doc = obj
+              if (this.$refs.valuesSelect) {
+                // 触发focus后，select弹窗并没有生效
+                this.$refs.valuesSelect[0].focus(meta)
+              }
+            } else {
+              delete meta.doc
+            }
+            if (meta.operator.value.toLowerCase() === 'in') {
+              meta.column.type = columnType.array
+            }
          }
        }, 200)
      }
    },
+    selectValue (value, meta) {
+      const isWrapped = this.isSingleQuoteWrapping(value)
+      meta.value.value = isWrapped && meta.column.type === columnType.string ? value : `'${value}'`
+      meta.value.label = isWrapped && meta.column.type === columnType.string ? value : `'${value}'`
+      setTimeout(() => {
+        meta.column.isEditing = false
+        meta.value.isEditing = false
+      }, 100)
+    },
+    selectVisibleValues (value, meta) {
+      if (!value) {
+        meta.value.isEditing = false
+        this.myCheckboxList = []
+      }
+    },
+    selectValues (value, meta) {
+      if (value.length > 0) {
+        let str = ''
+        value.forEach(item => {
+          str += `'${item}',`
+        })
+        str = str.substring(0, str.length - 1)
+        str = `(${str})`
+        meta.value.value = value
+        meta.value.label = str
+      } else {
+        meta.value.value = ''
+      }
+    },
    selectConnection (value, meta) {
      meta.isEditing = false
    },
-    columnClick (meta) {
-      meta.column.isEditing = true
-      this.$nextTick(() => {
-        this.$refs.columnSelect[this.$refs.columnSelect.length - 1].focus()
-      })
-    },
    columnBlur (meta, index) {
      setTimeout(() => {
        const parser = new Parser(this.columnList)
@@ -248,27 +352,64 @@ export default {
        this.operatorList = obj ? obj.doc.constraints.operator_functions.split(',') : ['=', 'IN']
        if (meta.column && meta.column.type === 'fullText') {
          meta.operator.value = '='
-          meta.column.show = false
+          meta.column.show = true
          meta.column.isFullText = true
-          meta.operator.show = false
+          meta.operator.show = true
          const label = JSON.parse(JSON.stringify(meta.column.label))
          meta.column.label = parser.getEntityTypeByValue(meta.column.label)
          meta.value.value = label
          meta.value.label = label

-          // if (meta.column.label === 'domain') {
-          //   meta.operator.value = 'like'
-          //   meta.value.value = `%${this.delSingleQuote(label)}`
-          //   meta.value.label = `${this.delSingleQuote(label)}`
-          // } else if (meta.column.label === 'app') {
-          //   meta.operator.value = 'like'
-          //   meta.value.value = `%${this.delSingleQuote(label)}%`
-          //   meta.value.label = `${this.delSingleQuote(label)}`
-          // }
+          if (meta.column.label === 'domain') {
+            meta.operator.value = 'like'
+            meta.value.value = `%${this.delSingleQuote(label)}`
+            meta.value.label = `%${this.delSingleQuote(label)}`
+          } else if (meta.column.label === 'app') {
+            meta.operator.value = 'like'
+            meta.value.value = `%${this.delSingleQuote(label)}%`
+            meta.value.label = `%${this.delSingleQuote(label)}%`
+          }
          meta.column.type = 'string'
        }
      }, 200)
    },
+    valueBlur1 (meta) {
+      setTimeout(() => {
+        meta.value.isEditing = false
+      }, 200)
+    },
+    valuesBlur (meta) {
+      this.$nextTick(() => {
+      })
+    },
+    valuesFocus (meta) {
+      this.$nextTick(() => {
+        meta.value.isEditing = true
+        setTimeout(() => {
+          if (meta.value.value && this.myCheckboxList.length === 0) {
+            let valueArr = []
+            if (!_.isArray(meta.value.value)) {
+              let value = meta.value.value
+              if (value.indexOf('(') === 0 && value.indexOf(')') === value.length - 1) {
+                value = value.substring(1, value.length)
+                value = value.substring(0, value.length - 1)
+              }
+              valueArr = value.split(',')
+              valueArr.forEach((item, index) => {
+                if (item[0] === "'" && item[item.length - 1] === "'") {
+                  item = item.substring(1, item.length - 1)
+                  this.myCheckboxList.push(item)
+                }
+              })
+            } else if (_.isArray(meta.value.value)) {
+              meta.value.value.forEach(item => {
+                this.myCheckboxList.push(item)
+              })
+            }
+          }
+        }, 100)
+      })
+    },
    connectionClick (meta) {
      meta.isEditing = true
    },
@@ -279,10 +420,13 @@ export default {
      // 处理搜索值
      meta.value.isEditing = true
      meta.value.show = true
+      const obj = enumerateData.find(d => d.name === meta.column.label)
+      if (obj) {
+        meta.doc = obj
+      }
      // 若是in或not in，column的type要改成array，否则是string
      if (operator.toLowerCase().indexOf('in') > -1) {
        meta.column.type = columnType.array
-        meta.value.value = []
      } else if (['>', '<', '>=', '<='].indexOf(operator) > -1) {
        meta.column.type = columnType.number
      } else {
@@ -292,9 +436,16 @@ export default {
        }
      }
      this.$nextTick(() => {
-        const selectList = this.$refs.valueInput
-        if (selectList && selectList.length > 0) {
-          this.$refs.valueInput[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
+        if (meta.doc) {
+          const selectList = this.$refs.columnValue
+          if (selectList && selectList.length > 0) {
+            this.$refs.columnValue[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
+          }
+        } else {
+          const selectList = this.$refs.valueInput
+          if (selectList && selectList.length > 0) {
+            this.$refs.valueInput[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
+          }
        }
      })
    },
@@ -441,10 +592,26 @@ export default {
      }
      meta.value.isEditing = !meta.isCompleteCondition()
    },
+    columnClick (meta) {
+      meta.column.isEditing = true
+      this.$nextTick(() => {
+        this.$refs.columnSelect[this.$refs.columnSelect.length - 1].focus()
+      })
+    },
    valueClick (meta) {
      meta.value.isEditing = true
+      const obj = enumerateData.find(d => d.name === meta.column.label)
+      if (obj) {
+        meta.doc = obj
+      }
      this.$nextTick(() => {
-        this.$refs.valueInput[0].focus()
+        if (this.$refs.valueInput) {
+          this.$refs.valueInput[0].focus()
+        }
+        if (this.$refs.valuesSelect.length > 0) {
+          // 触发focus后，select弹窗并没有生效
+          this.$refs.valuesSelect[0].focus(meta)
+        }
      })
    },
    // 判断是否是用户自己添加的内容，用于判断是否是全局搜索
@@ -462,21 +629,19 @@ export default {
    search () {
      if (this.metaList.length > 0) {
        const parser = new Parser(this.columnList)
-        const errorList = parser.validateMeta(this.metaList)
-        const keywordList = []
-        this.metaList.forEach(item => {
-          if (item.column && item.column.isFullText) {
-            keywordList.push({ type: 'fullText', value: item.value.value })
-          } else if (item.column && !item.column.isFullText) {
-            keywordList.push({ type: item.column.type, value: item.value.value })
-          }
-        })
+        let errorList = parser.validateMeta(this.metaList)
+        // 测试的metaList并不是由new Meta()生成，所以instanceof时，meta并不在Meta原型链上导致报错，故直接略过
+        if (this.isUnitTesting) {
+          errorList = []
+        }
+        const keywordList = this.myHighLight ? parser.getKeywordList(this.metaList) : [] // 搜索高亮的关键字
        if (_.isEmpty(errorList)) {
          const strObj = parser.handleMetaListToStr(this.metaList)
          const str = strObj.str ? strObj.str : strObj
          const str2 = strObj.str2 ? strObj.str2 : strObj
          // str为将metaList转成字符串的值，str2为地址栏展示的值
-          const key = parser.handleEntityTypeByStr(str)
+          let key = parser.handleEntityTypeByStr(str)
+          key = parser.conversionEnum(key)
          this.$emit('search', { ...parser.parseStr(key), str: str2, keywordList: keywordList })
        } else {
          this.$message.error(handleErrorTip(errorList[0]))
@@ -642,16 +807,18 @@ export default {
        q = decodeURI(q)
      } else {
        const str1 = q.substring(q.indexOf('%'), q.indexOf('%') + 3)
-        if (q.indexOf('%') > 0 && (str1 !== '%20' || str1 === '%25')) {
+        if (q.indexOf('%') > 0 && (str1 === '%20' || str1 === '%25')) {
          q = decodeURI(q)
        }
      }
      this.metaList = parser.parseStr(q).metaList
    }

-    this.emitter.on('advanced-search', function () {
-      vm.search()
-    })
+    if (!this.isUnitTesting) {
+      this.emitter.on('advanced-search', function () {
+        vm.search()
+      })
+    }
  },
  watch: {
    convertMetaList: {
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -1,37 +1,58 @@
 <template>
-  <textarea
-      style="text-indent: 65px;"
-      cols="40"
-      ref="textSearch"
-  ></textarea>
-  <div class="search__suffixes search__suffixes--text-mode" :class="showList ? '' : 'entity-explorer-home'" style="padding-left: 1px">
-    <span class="search__suffix">
-      <el-popover
-          popper-class="my-popper-class"
-          placement="top"
-          trigger="hover"
-          :content="$t('entity.switchToAdvancedSearch')"
-      >
-        <template #reference>
-          <i class="cn-icon cn-icon-filter" @click="changeMode"></i>
-        </template>
-      </el-popover>
-    </span>
-    <span v-show="isCloseIcon" class="search__suffix search__suffix-close" @click="cleanParams">
-      <i class="el-icon-error"></i>
-    </span>
-    <span class="search__suffix" @click="search">
-      <i class="el-icon-search"></i>
-    </span>
+  <div @click="handleClick" v-ele-click-outside="handleBlur">
+    <textarea
+        style="text-indent: 65px;"
+        cols="40"
+        ref="textSearch"
+    ></textarea>
+    <div class="search__suffixes search__suffixes--text-mode" :class="showList ? '' : 'entity-explorer-home'" style="padding-left: 1px;background: #fff;">
+      <!--切换text、tag模式图标-->
+      <span class="search__suffix">
+        <el-popover
+            popper-class="my-popper-class"
+            placement="top"
+            trigger="click"
+            :content="$t('overall.switchToTag')"
+        >
+          <template #reference>
+            <i test-id="text-change-mode" class="cn-icon cn-icon-filter" @click="changeMode"></i>
+          </template>
+        </el-popover>
+      </span>
+      <!--删除图标-->
+      <span v-show="isCloseIcon" class="search__suffix search__suffix-close" @click="cleanParams">
+        <el-icon><CircleCloseFilled /></el-icon>
+        <!--<i class="el-icon-error"></i>-->
+      </span>
+      <!--搜索图标-->
+      <span class="search__suffix" test-id="text-search" @click.stop="search">
+        <el-icon><Search /></el-icon>
+        <!--<i class="el-icon-search"></i>-->
+      </span>
+    </div>
+
+    <!--showHint弹窗部分-->
+    <el-popover
+        placement="bottom"
+        width="100%"
+        ref="popoverRef"
+        :visible="hintVisible"
+        popper-class="search-show-hint-popover"
+        trigger="click">
+      <template #reference>
+        <div>
+          <hint v-if="hintVisible" :hintList="hintList"
+                @load="handleHintLoad"
+                @select="handleSelect"
+                :hintParams="hintParams"
+                :hintSearch="searchStr"></hint>
+        </div>
+      </template>
+    </el-popover>
  </div>
 </template>

 <script>
-import 'codemirror/theme/ambiance.css'
-import 'codemirror/addon/hint/show-hint'
-import 'codemirror/addon/hint/show-hint.css'
-import 'codemirror/addon/display/placeholder'
-import 'codemirror/mode/sql/sql'
 import Parser, { stringInQuot, handleOperatorSpace } from '@/components/advancedSearch/meta/parser'
 import CodeMirror from 'codemirror'
 import { toRaw } from 'vue'
@@ -39,23 +60,65 @@ import _ from 'lodash'
 import { columnType } from '@/components/advancedSearch/meta/meta'
 import { handleErrorTip } from '@/components/advancedSearch/meta/error'
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import Hint from '@/components/advancedSearch/showhint/Hint/Hint'
+import { getDataset } from '@/components/advancedSearch/showhint/packages/getDataset'
+import codeMirrorMixins from '@/components/advancedSearch/showhint/myCodeMirror.js'

 export default {
  name: 'TextMode',
+  mixins: [codeMirrorMixins],
  props: {
    columnList: Array,
    str: String,
    showList: Boolean,
-    showCloseIcon: Boolean
+    showCloseIcon: Boolean,
+    isShowHint: {
+      type: Boolean,
+      default: false
+    },
+    unitTestStr: String
  },
  data () {
    return {
      codeMirror: null,
      isCloseIcon: this.showCloseIcon,
-      isEdit: false
+      isEdit: false,
+      hintVisible: false,
+      dataset: null,
+      CodeMirror,
+      myUnitTestStr: this.unitTestStr
    }
  },
  emits: ['changeMode', 'search'],
+  inject: ['myHighLight'],
+  created () {
+    if (this.isShowHint && !this.isUnitTesting) {
+      this._initComponent()
+    }
+  },
+  provide () {
+    return {
+      getDataset: () => {
+        // provide() 写成方法之后,保证this的指向
+        return this.dataset || null
+      }
+    }
+  },
+  components: {
+    Hint
+  },
+  computed: {
+    searchStr () {
+      const { wholeTokenStr } = this.getWholeToken() || ''
+      if (['not in', 'not like', 'order by', 'group by'].includes(wholeTokenStr?.toLowerCase())) {
+        return wholeTokenStr
+      }
+      if (['operator', 'keyword', 'builtin'].includes(this.hintParams?.token?.type)) {
+        return this.hintParams?.token?.string
+      }
+      return this.hintParams.leftpart || this.hintSearch || ''
+    }
+  },
  methods: {
    cleanParams () {
      toRaw(this.codeMirror).setValue('')
@@ -66,52 +129,74 @@ export default {
      this.reloadUrl(routeQuery, 'cleanOldParams')
    },
    initCodeMirror () {
-      this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {
-        mode: {
-          name: 'sql'
-        },
+      let option = {
+        mode: 'sql',
        placeholder: '',
        lineNumbers: false
-      })
-      this.codeMirror.setOption('extraKeys', {
-        Enter: (cm) => {}
-      })
-      this.codeMirror.on('focus', () => {
-        if (this.codeMirror.getValue().trim() !== '') {
-          this.isEdit = true
-          this.isCloseIcon = true
+      }
+      if (this.isShowHint) {
+        option = {
+          keyMap: 'sublime',
+          tabSize: 2, // 缩进格式
+          // theme: 'eclipse', // 主题，对应主题库 JS 需要提前引入
+          line: true,
+          lineNumbers: false, // 显示行数
+          indentUnit: 4, // 缩进单位为4
+          styleActiveLine: true, // 当前行背景高亮
+          // mode: 'text/x-filter', // HMTL混合模式
+          mode: 'sql', // HMTL混合模式
+          foldGutter: true,
+          lint: true,
+          auto: 'auto', // 自动换行
+          autoCloseBrackets: true, // 自动闭合符号
+          matchBrackets: true, // 是否添加匹配括号高亮
+          spellcheck: true, // 启用拼写检查
+          autocorrect: true, // 启用自动更正
+          lineWrapping: true, // 滚动或换行以显示长行
+          // 提示配置
+          hintOptions: {
+            completeSingle: false, // 自动匹配唯一值
+            // 匹配 t_test_login.col_a  用. 来连接的
+            tables: {
+              filter_table: ['recv_time']
+            },
+            alignWithWord: false
+          }
        }
-      })
-      this.codeMirror.on('blur', () => {
-        const timer = setTimeout(() => {
-          this.isEdit = false
-          this.isCloseIcon = false
-          clearTimeout(timer)
-        }, 200)
-      })
-      this.codeMirror.on('update', () => {
-        this.isEdit = true
-        this.isCloseIcon = true
-      })
+      }
+      this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, option)
+      if (this.codeMirror) {
+        this.codeMirror.setOption('extraKeys', {
+          Enter: (cm) => {}
+        })
+        this.setCodemirrorValue()
+        this.initEvent()
+        this.initHint()
+      }
    },
    search () {
-      const str = this.codeMirror.getValue().trim()
+      this.handleBlur()
+      let str
+      if (!this.isUnitTesting) {
+        str = this.codeMirror.getValue().trim()
+      } else {
+        str = this.myUnitTestStr
+      }
      if (str) {
        const parser = new Parser(this.columnList)
-        const keyInfo = parser.comparedEntityKey(parser.handleEntityTypeByStr(str))
+        const keyInfo = parser.comparedEntityKey(parser.handleEntityTypeByStr(str)) // 校验输入str字段是schema内的字段，并将语句进行规范
        const metaList = parser.parseStr(_.cloneDeep(str)).metaList
-        const keywordList = []
-        metaList.forEach(item => {
-          if (item.column && item.column.type === columnType.fullText) {
-            keywordList.push({ type: item.column.type, value: item.column.label })
-          } else if (item.column && item.column.type === columnType.string) {
-            keywordList.push({ type: item.column.type, value: item.value.value })
-          }
-        })
+        const keywordList = this.myHighLight ? parser.getKeywordList(metaList) : [] // 搜索高亮所需的关键字
        if (keyInfo.isKey) {
-          const errorList = parser.validateStr(keyInfo.key)
+          const enumKey = parser.conversionEnum(keyInfo.key) // 检查是否包含枚举字段，包含的话进行替换
+          const errorList = parser.validateStr(enumKey) // 检查语句是否有错误
          if (_.isEmpty(errorList)) {
-            this.$emit('search', { ...parser.parseStr(keyInfo.key), str: str, keywordList: keywordList })
+            // 补全模糊搜索
+            if (!this.isUnitTesting) {
+              toRaw(this.codeMirror).setValue(parser.handleEntityTypeByStr(str))
+            }
+            // 注：参数str，1.是用户搜索框的内容在补全模糊搜索后的内容；2.部分参数是用户主观可见，但格式不符合接口原则的，如status='Active'，接口需要status=0
+            this.$emit('search', { ...parser.parseStr(enumKey), str: parser.handleEntityTypeByStr(str), keywordList: keywordList })
          } else {
            this.$message.error(handleErrorTip(errorList[0]))
          }
@@ -122,8 +207,9 @@ export default {
        this.$emit('search', { q: '', str: '', metaList: [] })
      }
    },
-    focus () {
-      this.codeMirror.focus()
+    focus (e) {
+      toRaw(this.codeMirror).setValue(e.str)
+      // this.codeMirror.focus()
    },
    changeMode () {
      const str = this.codeMirror.getValue().trim()
@@ -158,7 +244,12 @@ export default {
      }
    },
    addParams (params) {
-      let current = this.codeMirror.getValue()
+      let current = ''
+      if (!this.isUnitTesting) {
+        current = this.codeMirror.getValue()
+      } else {
+        current = this.myUnitTestStr
+      }
      params.forEach(param => {
        const column = this.columnList.find(c => c.label === param.column)
        if (param.operator === 'has') {
@@ -167,7 +258,11 @@ export default {
          current = `${current ? current + ' AND ' : ''}${param.column}${handleOperatorSpace(param.operator)}${this.handleValue(param.value, column, param.operator)}`
        }
      })
-      toRaw(this.codeMirror).setValue(current.trim())
+      if (!this.isUnitTesting) {
+        toRaw(this.codeMirror).setValue(current.trim())
+      } else {
+        this.myUnitTestStr = current
+      }
    },
    removeParams (params) {
      let current = this.codeMirror.getValue()
@@ -204,6 +299,174 @@ export default {
        newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
      }
      overwriteUrl(newUrl)
+    },
+    initEvent () {
+      this.codeMirror.on('focus', (coder) => {
+        if (this.codeMirror.getValue().trim() !== '') {
+          this.isEdit = true
+          this.isCloseIcon = true
+        }
+        if (this.isShowHint && this.$emit) {
+          this.$emit('focus', coder.getValue())
+        }
+      })
+      this.codeMirror.on('blur', (coder) => {
+        const timer = setTimeout(() => {
+          this.isEdit = false
+          this.isCloseIcon = false
+          if (this.isShowHint && this.$emit) {
+            this.$emit('blur', coder.getValue())
+          }
+          clearTimeout(timer)
+        }, 200)
+      })
+      this.codeMirror.on('update', () => {
+        this.isEdit = true
+        this.isCloseIcon = true
+      })
+
+      if (this.isShowHint) {
+        // 支持双向绑定
+        this.codeMirror.on('change', (coder) => {
+          if (this.$emit) {
+            this.$emit('input', coder.getValue())
+          }
+        })
+
+        this.codeMirror.on('startCompletion', () => {
+          // 展开自动提示的 事件回调
+          this.hintVisible = true
+          this.hintVm?.hintDeactive()
+        })
+        this.codeMirror.on('endCompletion', () => {
+          // 自动提示关闭
+          this.hintVisible = false
+          this.hintParams = {}
+          this.hintList = []
+        })
+        this.$emit('load', this.codeMirror)
+      }
+    },
+    _initComponent () {
+      getDataset(this, this.queryParams || {}, this.columnList).then((dataset, dataDisposeFun) => {
+        this.dataset = Object.freeze(dataset)
+      }).catch(err => {
+        console.error(err)
+      })
+    },
+    initHint () {
+      this.codeMirror.on('inputRead', () => {
+        setTimeout(() => {
+          this.codeMirror.showHint()
+        })
+      })
+    },
+    handleBlur () {
+      if (this.isShowHint) {
+        this.hintVisible = false
+        this.hintParams = {}
+        this.hintList = []
+      }
+    },
+    handleClick () {
+      if (this.isShowHint) {
+        this.hintVisible = true
+        this.codeMirror.showHint()
+      }
+    },
+    getWholeToken () {
+      // 获取 前一个token
+      const editor = this.hintParams.editor
+      const Pos = this.CodeMirror.Pos
+      const cur = this.hintParams.cur
+      const token = this.hintParams.token
+      if (!editor) {
+        return
+      }
+      const spaceToken = editor.getTokenAt(Pos(cur.line, token.start))
+      let preToken = ''
+      if (spaceToken && spaceToken?.string === ' ') {
+        preToken = editor.getTokenAt(Pos(cur.line, spaceToken.start))
+      }
+      const searchKey = `${preToken?.string} ${token?.string}`
+
+      return {
+        wholeTokenStr: searchKey,
+        spaceToken,
+        preToken,
+        token
+      }
+    },
+    handleHintLoad ({ vm }) {
+      this.hintVm = vm
+    },
+    handleSelect (item, index, hintList) {
+      if (index === 0) {
+        // 不可能选中0  第0项是标题, 选中0 说明没选中
+        this.hintParams?.editor?.closeHint()
+        this.$emit('query', CodeMirror)
+        return
+      }
+
+      const data = {
+        from: this.hintParams.from,
+        to: this.hintParams.to,
+        list: hintList
+      }
+
+      const { wholeTokenStr, preToken, token } = this.getWholeToken() || ''
+      let cur = null
+      cur = this.hintParams?.cur
+
+      // 上一个字段 是存在空格的关键字,整体删除上一个关键字
+      if (['not in', 'not like', 'order by', 'group by'].includes(wholeTokenStr?.toLowerCase())) {
+        this.hintParams?.editor?.replaceRange('', { line: cur.line, ch: preToken.start }, {
+          line: cur.line,
+          ch: token.end
+        })
+      }
+
+      this.completion && this.completion.pick(data, index)
+    },
+    setCodemirrorValue () {
+      // 如果地址栏包含参数q，则将参数q回显到搜索栏内
+      let { q } = this.$route.query
+
+      if (this.str) {
+        toRaw(this.codeMirror).setValue(this.str)
+      }
+      if (q) {
+        if (q.indexOf('+') > -1) {
+          q = q.replace('+', ' ')
+        }
+        if (q.indexOf('%') === 0 || q.indexOf('%20') > -1 || q.indexOf('%25') > -1) {
+          q = decodeURI(q)
+        } else {
+          const str1 = q.substring(q.indexOf('%'), q.indexOf('%') + 3)
+          if (q.indexOf('%') > 0 && (str1 === '%20' || str1 === '%25')) {
+            q = decodeURI(q)
+          }
+        }
+        // 为避免地址栏任意输入导致全查询的q带QUERY，解析时不识别导致的语法错误
+        // 如地址栏输入116.178.222.171，此时的q很长，刷新界面时需要把q里的116.178.222.171拿出来进行搜索
+        if (q.indexOf('QUERY') > -1) {
+          const strList = q.split(' ')
+          if (strList.length > 0) {
+            // 此时strList[1]为ip_addr:116.178.222.171，获取116.178.222.171
+            q = strList[1].slice(8)
+          }
+        }
+        if (this.codeMirror) {
+          toRaw(this.codeMirror).setValue(q)
+        }
+      } else {
+        this.isCloseIcon = false
+      }
+
+      const vm = this
+      this.emitter.on('advanced-search', function () {
+        vm.search()
+      })
    }
  },
  watch: {
@@ -227,42 +490,23 @@ export default {
    }
  },
  mounted () {
-    // 如果地址栏包含参数q，则将参数q回显到搜索栏内
-    let { q } = this.$route.query
-    this.initCodeMirror()
-    if (this.str) {
-      toRaw(this.codeMirror).setValue(this.str)
-    }
-    if (q) {
-      if (q.indexOf('+') > -1) {
-        q = q.replace('+', '')
-      }
-      if (q.indexOf('%') === 0 || q.indexOf('%20') > -1 || q.indexOf('%25') > -1) {
-        q = decodeURI(q)
-      } else {
-        const str1 = q.substring(q.indexOf('%'), q.indexOf('%') + 3)
-        if (q.indexOf('%') > 0 && (str1 !== '%20' || str1 === '%25')) {
-          q = decodeURI(q)
+    if (this.isShowHint) {
+      this.$nextTick(() => {
+        // dataset是避免数据未初始化完成注册失败，ref是因为组件加载2次，避免第二次时dom丢失导致数据挂载失败
+        if (this.dataset && this.$refs.textSearch) {
+          this.initShowHint()
+          this.initCodeMirror()
        }
-      }
-      // 为避免地址栏任意输入导致全查询的q带QUERY，解析时不识别导致的语法错误
-      // 如地址栏输入116.178.222.171，此时的q很长，刷新界面时需要把q里的116.178.222.171拿出来进行搜索
-      if (q.indexOf('QUERY') > -1) {
-        const strList = q.split(' ')
-        if (strList.length > 0) {
-          // 此时strList[1]为ip_addr:116.178.222.171，获取116.178.222.171
-          q = strList[1].slice(8)
-        }
-      }
-      toRaw(this.codeMirror).setValue(q)
-    } else {
-      this.isCloseIcon = false
+      })
+    } else if (this.$refs.textSearch) {
+      this.initCodeMirror()
    }
-
-    const vm = this
-    this.emitter.on('advanced-search', function () {
-      vm.search()
-    })
  }
 }
 </script>
+
+<style>
+.el-popper.search-show-hint-popover {
+  visibility: hidden !important;
+}
+</style>
--- a/src/components/advancedSearch/meta/parser.js
+++ b/src/components/advancedSearch/meta/parser.js
@@ -4,6 +4,7 @@ import ParserError, { errorDesc, errorTypes } from '@/components/advancedSearch/
 import _ from 'lodash'
 import { ElMessage } from 'element-plus'
 import i18n from '@/i18n'
+import store from '@/store'

 const strReg = {
  // 需要不限制语言，正则过滤中英日俄语出错实现语言都通过。留个记录观察，后续校验
@@ -12,6 +13,14 @@ const strReg = {
  value: /^[\da-zA-Z\u4E00-\u9FA5\u3040-\u309F\u0800-\u4e00\u0400-\u04FF\u2000-\u206F\s.'-_%]$/
 }
 const operatorList = ['=', ' in ', ' IN ', ' like ', ' LIKE ', 'HAS(', 'has(']
+const enumList = ['status', 'eventType', 'severity']
+
+// ipv4校验
+const regexIPv4 = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
+// ipv6校验
+const regexIPv6 = /^(?:(?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,7}:|(?:[0-9A-Fa-f]{1,4}:){1,6}:[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,5}(?::[0-9A-Fa-f]{1,4}){1,2}|(?:[0-9A-Fa-f]{1,4}:){1,4}(?::[0-9A-Fa-f]{1,4}){1,3}|(?:[0-9A-Fa-f]{1,4}:){1,3}(?::[0-9A-Fa-f]{1,4}){1,4}|(?:[0-9A-Fa-f]{1,4}:){1,2}(?::[0-9A-Fa-f]{1,4}){1,5}|[0-9A-Fa-f]{1,4}:(?:(?::[0-9A-Fa-f]{1,4}){1,6})|:(?:(?::[0-9A-Fa-f]{1,4}){1,7}|:)|fe80:(?::[0-9A-Fa-f]{0,4}){0,4}%\w+|::(?:ffff(?::0{1,4}){0,1}:){0,1}(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.88\.99\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.0\.2\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:(?:[0-9A-Fa-f]{1,4}:){0,1}192\.0\.0\.(\d{1,3})|ff00:(?::[0-9A-Fa-f]{0,4}){0,4}|(?:[0-9A-Fa-f]{1,4}:){1,4}:255\.255\.255\.255)$/
+// domain校验
+const regexDomain = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/

 export default class Parser {
  constructor (columnList) {
@@ -860,7 +869,7 @@ export default class Parser {
          item.value.label = isWrapped ? `'${this.delSingleQuote(label)}'` : `${this.delSingleQuote(label)}`
          item.value.label1 = isWrapped ? `'%${this.delSingleQuote(label)}%'` : `%${this.delSingleQuote(label)}%`
        }
-        item.column.type = 'string'
+        item.column.type = columnType.string
      }
    })
    // 长度为1时，即模糊搜索，例如搜索框值为1.1.1.1，则直接返回1.1.1.1
@@ -1111,7 +1120,7 @@ export default class Parser {
            if (key === 'has') {
              returnObj.key += 'has(' + obj.label + item.substring(item.indexOf(','), item.length) + ' AND '
            } else {
-              returnObj.key += obj.label + ' ' + item.substring(item.toLowerCase().indexOf(key.toLowerCase()), item.length) + ' AND '
+              returnObj.key += obj.label + ' ' + item.substring(obj.label.length, item.length) + ' AND '
            }
          } else if (returnObj.isKey) {
            returnObj.key = '[' + key + ']'
@@ -1216,8 +1225,9 @@ export default class Parser {
          if (item.indexOf('it is test keyword') > -1) {
            const regex = /\d+/g
            const result1 = item.match(regex)
-            noAndList[index] = noAndList[index].replace(result1[0], '')
-            noAndList[index] = noAndList[index].replace('it is test keyword', tempList[result1[0]])
+            result1.forEach((r, i) => {
+              noAndList[index] = noAndList[index].replace('it is test keyword' + r, tempList[result1[i]])
+            })
          }
        })

@@ -1273,12 +1283,6 @@ export default class Parser {
    if (str[0] === '%' && str[str.length - 1] !== '%') {
      str = str.substring(1, str.length)
    }
-    // ipv4校验
-    const regexIPv4 = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
-    // ipv6校验
-    const regexIPv6 = /^(?:(?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,7}:|(?:[0-9A-Fa-f]{1,4}:){1,6}:[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,5}(?::[0-9A-Fa-f]{1,4}){1,2}|(?:[0-9A-Fa-f]{1,4}:){1,4}(?::[0-9A-Fa-f]{1,4}){1,3}|(?:[0-9A-Fa-f]{1,4}:){1,3}(?::[0-9A-Fa-f]{1,4}){1,4}|(?:[0-9A-Fa-f]{1,4}:){1,2}(?::[0-9A-Fa-f]{1,4}){1,5}|[0-9A-Fa-f]{1,4}:(?:(?::[0-9A-Fa-f]{1,4}){1,6})|:(?:(?::[0-9A-Fa-f]{1,4}){1,7}|:)|fe80:(?::[0-9A-Fa-f]{0,4}){0,4}%\w+|::(?:ffff(?::0{1,4}){0,1}:){0,1}(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.88\.99\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.0\.2\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:(?:[0-9A-Fa-f]{1,4}:){0,1}192\.0\.0\.(\d{1,3})|ff00:(?::[0-9A-Fa-f]{0,4}){0,4}|(?:[0-9A-Fa-f]{1,4}:){1,4}:255\.255\.255\.255)$/
-    // domain校验
-    const reg = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/

    if (regexIPv4.test(str) || regexIPv6.test(str)) {
      const obj = this.columnList.find(t => t.label.toLowerCase() === 'ip')
@@ -1290,7 +1294,7 @@ export default class Parser {
        }
        return str
      }
-    } else if (reg.test(str)) {
+    } else if (regexDomain.test(str)) {
      // 只写作domain即可，schema字段更改几次，避免后续再更改，直接拿this.columnList的label进行替换
      const obj = this.columnList.find(t => t.label.toLowerCase() === 'domain')
      if (obj) {
@@ -1314,18 +1318,14 @@ export default class Parser {
    }
  }

+  /**
+   * 判断传过来值的实体类型，仅限于ip、domain、app
+   */
  getEntityTypeByValue (str) {
    if (str[0] === "'" && str[str.length - 1] === "'") {
      str = str.substring(1, str.length)
      str = str.substring(0, str.length - 1)
    }
-    // ipv4校验
-    const regexIPv4 = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
-    // ipv6校验
-    const regexIPv6 = /^(?:(?:[0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,7}:|(?:[0-9A-Fa-f]{1,4}:){1,6}:[0-9A-Fa-f]{1,4}|(?:[0-9A-Fa-f]{1,4}:){1,5}(?::[0-9A-Fa-f]{1,4}){1,2}|(?:[0-9A-Fa-f]{1,4}:){1,4}(?::[0-9A-Fa-f]{1,4}){1,3}|(?:[0-9A-Fa-f]{1,4}:){1,3}(?::[0-9A-Fa-f]{1,4}){1,4}|(?:[0-9A-Fa-f]{1,4}:){1,2}(?::[0-9A-Fa-f]{1,4}){1,5}|[0-9A-Fa-f]{1,4}:(?:(?::[0-9A-Fa-f]{1,4}){1,6})|:(?:(?::[0-9A-Fa-f]{1,4}){1,7}|:)|fe80:(?::[0-9A-Fa-f]{0,4}){0,4}%\w+|::(?:ffff(?::0{1,4}){0,1}:){0,1}(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])\.(?:(?:2[0-4]|1\d|[1-9])?\d|25[0-5])|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.88\.99\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:192\.0\.2\.(\d{1,3})|(?:[0-9A-Fa-f]{1,4}:){1,4}:(?:[0-9A-Fa-f]{1,4}:){0,1}192\.0\.0\.(\d{1,3})|ff00:(?::[0-9A-Fa-f]{0,4}){0,4}|(?:[0-9A-Fa-f]{1,4}:){1,4}:255\.255\.255\.255)$/
-    // domain校验
-    const reg = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
-
    if (regexIPv4.test(str) || regexIPv6.test(str)) {
      const obj = this.columnList.find(t => t.label.toLowerCase() === 'ip')
      if (obj) {
@@ -1333,7 +1333,7 @@ export default class Parser {
      } else {
        return str
      }
-    } else if (reg.test(str)) {
+    } else if (regexDomain.test(str)) {
      const obj = this.columnList.find(t => t.label.toLowerCase() === 'domain')
      if (obj) {
        return obj.label
@@ -1414,8 +1414,8 @@ export default class Parser {
        } else if (i.toLowerCase() === 'tag') {
          lastObj[i] = `has(${i},${commonObj[i]})`
        } else {
-          // 单独存在的,直接保留 todo 后续观察当初添加单引号动机和问题
-          lastObj[i] = `${i} = ${commonObj[i]}`
+          // 单独存在的,直接保留
+          lastObj[i] = `${i}=${commonObj[i]}`
        }
      }

@@ -1476,6 +1476,78 @@ export default class Parser {

    return this.columnList.find(t => t.label.toLowerCase() === label.toLowerCase())
  }
+
+  /**
+   * 检测str是否包含枚举字段，包含的话，进行替换
+   * @param str
+   * @returns {string|*}
+   */
+  conversionEnum (str) {
+    if (str) {
+      let enumFlag = false // 判断字符串是否包含枚举类型的key，不包含则直接返回
+      enumList.forEach(item => {
+        if (str.toLocaleLowerCase().indexOf(item.toLocaleLowerCase()) > -1) {
+          enumFlag = true
+        }
+      })
+      if (enumFlag) {
+        let key = _.cloneDeep(str)
+        let searchList = [] // 将字符串按AND分割成单独的搜索条件
+        if (key.indexOf(' AND ') > -1) {
+          searchList = key.split(' AND ')
+        } else {
+          searchList = [key]
+        }
+        searchList.forEach((item, index) => {
+          const obj = this.columnList.find(d => item.indexOf(d.label) > -1)
+          if (obj && obj.doc.data) {
+            for (let i = 0; i < obj.doc.data.length; i++) {
+              const item1 = obj.doc.data[i]
+              if (item.indexOf(item1.code) > -1) {
+                searchList[index] = searchList[index].replace(new RegExp(item1.code, 'g'), item1.value)
+                // 匹配到code，终止匹配
+                break
+              } else {
+                // 该操作是避免中文参数切换到英文环境时，code经i18n转为英文，匹配不到中文参数的情况
+                Object.keys(store.state.i18nObj).forEach(lang => {
+                  const i18nCode = store.state.i18nObj[lang][item1.code1]
+                  if (item.indexOf(i18nCode) > -1) {
+                    searchList[index] = searchList[index].replace(new RegExp(i18nCode, 'g'), item1.value)
+                  }
+                })
+              }
+            }
+          }
+        })
+        key = searchList.join(' AND ')
+        return key
+      } else {
+        return str
+      }
+    } else {
+      return str
+    }
+  }
+
+  /**
+   * 获取关键字列表，即高亮字段
+   * @param metaList
+   * @returns {*[]}
+   */
+  getKeywordList (metaList) {
+    const keywordList = []
+    if (metaList && metaList.length > 0) {
+      metaList.forEach(item => {
+        if (item.column && item.column.isFullText) {
+          keywordList.push({ type: 'fullText', value: item.value.value })
+        } else if (item.column && !item.column.isFullText) {
+          keywordList.push({ type: item.column.type, value: item.value.value || item.column.label })
+        }
+      })
+    }
+
+    return keywordList
+  }
 }

 // 使用单引号包裹
--- a/src/components/advancedSearch/showhint/Hint/HelperInfo.vue
+++ b/src/components/advancedSearch/showhint/Hint/HelperInfo.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="HelperInfo">
+    <div class="tips-container">
+      <Renderer ref="renderVm" :renderProps="renderProps" :renderFun="helperDataFun"></Renderer>
+    </div>
+  </div>
+</template>
+
+<script>
+import operatorTips from '@/components/advancedSearch/showhint/const/operatorTips'
+import defaultTips from '@/components/advancedSearch/showhint/const/defaultTips.js'
+import sqlTips from '@/components/advancedSearch/showhint/const/sqlTips.js'
+import functionTips from '@/components/advancedSearch/showhint/const/functionTips.js'
+import filterTips from '@/components/advancedSearch/showhint/const/filterTips.js'
+import varTips from '@/components/advancedSearch/showhint/const/varTips.js'
+
+import { fieldRender } from '@/components/advancedSearch/showhint/const/fieldTips.js'
+import { EN, storageKey, ZH } from '@/utils/constants'
+
+export default {
+  name: 'HelperInfo',
+  inject: ['getDataset'],
+  props: {
+    hintSearch: {},
+    hintParams: {}
+  },
+  data () {
+    return {
+      operatorTips,
+      sqlTips,
+      functionTips,
+      renderProps: {},
+      isShow: true
+    }
+  },
+  methods: {
+    refreshRender () {
+      this.$refs?.renderVm.$forceUpdate()
+    },
+    matchFields (searchKey) {
+      const dataset = this.getDataset()
+      const fieldInfo = dataset.getFieldInfo(searchKey)
+      if (!fieldInfo) {
+        return false
+      }
+      let operates = dataset.getOperates(fieldInfo.type, fieldInfo._matchItem)
+      operates = operates.map(item => item.text.toUpperCase())
+      let funs = dataset.getFunctions(fieldInfo.type, fieldInfo._matchItem)
+      funs = funs.map(item => item.text.toUpperCase())
+
+      let operatorReference = dataset.sourceData.operatorReference
+      let funcReference = dataset.sourceData.funcReference
+
+      operatorReference = operatorReference.filter(item => {
+        return operates.includes(item.label)
+      })
+      funcReference = funcReference.filter(item => {
+        return funs.includes(item.name)
+      })
+
+      this.renderProps = {
+        fieldInfo,
+        funcReference,
+        operatorReference,
+        funs,
+        operates
+      }
+      return fieldRender
+    }
+  },
+  computed: {
+    helperDataFun () {
+      let hintSearch = ''
+      if (this.hintSearch) {
+        hintSearch = JSON.parse(JSON.stringify(this.hintSearch))
+        const fields = this.getDataset().sourceData.fields
+        const obj = fields.find(d => d.label === hintSearch)
+        if (obj) {
+          hintSearch = obj.label
+        }
+      }
+
+      let searchKey = hintSearch.toUpperCase() || ''
+      searchKey = searchKey.trim()
+      // if (functionTips[searchKey]) {
+      //   return functionTips[searchKey].description
+      // }
+      if (operatorTips[searchKey]) {
+        return operatorTips[searchKey].description
+      }
+      // if (sqlTips[searchKey]) {
+      //   return sqlTips[searchKey].description
+      // }
+      if (filterTips[searchKey]) {
+        return filterTips[searchKey].description
+      }
+      // if (varTips[searchKey]) {
+      //   return varTips[searchKey].description
+      // }
+
+      // 完整的匹配关键字
+      if (this.getDataset()) {
+        const fieldRender = this.matchFields(searchKey)
+        if (fieldRender) {
+          return fieldRender
+        }
+      }
+      const language = localStorage.getItem(storageKey.language) || EN
+
+      if (language === ZH) {
+        return defaultTips.zhDefault.description
+      }
+      return defaultTips.enDefault.description
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .HelperInfo {
+    min-width: 450px;
+    background-color: #fff;
+    height: 294px;
+    box-sizing: border-box;
+    overflow: auto;
+    z-index: 99;
+  }
+
+  .tips-container {
+    padding: 12px;
+  }
+
+  /deep/ ul li {
+    list-style: inside;
+    line-height: 20px;
+  }
+
+  /deep/ h3 {
+    margin: 8px 0;
+    line-height: 22px;
+  }
+
+  /deep/ p {
+    line-height: 22px;
+    word-break: break-all;
+  }
+
+  /deep/ code,
+  .code {
+    background: initial;
+    border: 1px solid #DEDEDE;
+    height: 24px;
+    line-height: 24px;
+    padding: 0 12px;
+    margin: 6px 0;
+    display: block;
+  }
+
+  /deep/ .sub-url {
+    padding-left: 18px;
+  }
+
+  /deep/ .sub-url li {
+    list-style: inside circle;
+  }
+
+  /deep/ i.ref-txt {
+    line-height: 20px;
+    color: #aaa;
+  }
+</style>
--- a/src/components/advancedSearch/showhint/Hint/Hint.vue
+++ b/src/components/advancedSearch/showhint/Hint/Hint.vue
@@ -0,0 +1,35 @@
+<!-- 提示信息  -->
+<template>
+  <div class="Hint" @click.stop>
+    <div class="hint__block">
+      <div class="hint__block-filter">
+        <hint-info v-on="$listeners" :hintList="hintList" @select="onSelect"></hint-info>
+      </div>
+      <div class="hint__block-helper">
+        <helper-info :hintSearch="hintSearch"></helper-info>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import HelperInfo from './HelperInfo.vue'
+import HintInfo from './HintInfo.vue'
+
+export default {
+  name: 'Hint',
+  props: {
+    hintList: [],
+    hintSearch: {}
+  },
+  components: {
+    HintInfo,
+    HelperInfo
+  },
+  methods: {
+    onSelect (item, index, hintList) {
+      this.$emit('select', item, index, hintList)
+    }
+  }
+}
+</script>
--- a/src/components/advancedSearch/showhint/Hint/HintInfo.vue
+++ b/src/components/advancedSearch/showhint/Hint/HintInfo.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="HintInfo">
+    <ul style="padding-left: 0;margin: -10px 0 0 0;min-width: calc(100% - 12px)">
+      <template v-for="(item,index) in hintList" :key="index">
+        <li :ref="'hint_'+index" class="relative-item CodeMirror-hint"
+            style="margin-bottom: 2px"
+            @click="handleSelect(item,index,hintList)"
+            :class="{'CodeMirror-hint-active':index === activeIndex,[item.className]:true}"
+        >{{ item.displayText }}</li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HintInfo',
+  props: {
+    hintList: {
+      type: Array,
+      default () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      active: true,
+      activeIndex: null
+    }
+  },
+  mounted () {
+    // this.handleFocus()
+    this.$emit('load', {
+      name: this.name,
+      label: this.name,
+      vm: this
+    })
+  },
+  methods: {
+    scrollToView (index = 0) {
+      // 移动到可视区域
+      const li = this.$refs['hint_' + index][0]
+      li && li.scrollIntoView(false)
+    },
+    handleDown () {
+      if (!this.active) {
+        this.hintActive()
+        return
+      }
+      let nextIndex = this.activeIndex + 1
+      let nextItem = this.hintList[nextIndex]
+
+      if (nextItem?.type === 'abstract') {
+        nextIndex++
+        nextItem = this.hintList[nextIndex]
+      }
+
+      if (nextItem?.type === 'abstract') {
+        nextIndex++
+      }
+      nextIndex >= this.hintList.length ? this.activeIndex = 1 : this.activeIndex = nextIndex
+      this.scrollToView(this.activeIndex)
+    },
+    handleUp () {
+      if (!this.active) {
+        this.hintActive()
+        return
+      }
+      let preIndex = this.activeIndex - 1
+      let preItem = this.hintList[preIndex]
+
+      if (preItem?.type === 'abstract') {
+        preIndex--
+        preItem = this.hintList[preIndex]
+      }
+      if (preItem?.type === 'abstract') {
+        preIndex--
+      }
+      preIndex > 0 ? this.activeIndex = preIndex : this.activeIndex = this.hintList.length - 1
+      this.scrollToView(this.activeIndex)
+    },
+    hintActive () {
+      this.active = true
+      this.activeIndex = 1
+      this.scrollToView(this.activeIndex)
+    },
+    hintDeactive () {
+      this.active = false
+      this.activeIndex = null
+    },
+    handleSelect (item, index) {
+      this.$emit('select', item, index, this.hintList)
+    },
+    triggerSelect () {
+      const index = this.activeIndex || 0
+      const item = this.hintList[index]
+      this.$emit('select', item, index, this.hintList)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .HintInfo {
+    height: 280px;
+    overflow: auto;
+    background: #fff;
+  }
+  ul {
+    min-width: 300px;
+    height:auto;
+    width: fit-content;
+    box-sizing: border-box;
+    padding-bottom: 10px;
+  }
+  .el-dropdown-menu__item{
+    text-indent: 1em;
+    font-size: 12px !important;
+    font-family: NotoSansSChineseRegular;
+    color: #575757;
+    font-weight: 400;
+  }
+  .hint-clear{
+    text-indent: 1em;
+  }
+</style>
--- a/src/components/advancedSearch/showhint/Hint/Renderer.vue
+++ b/src/components/advancedSearch/showhint/Hint/Renderer.vue
@@ -0,0 +1,16 @@
+<script>
+export default {
+  name: 'Renderer',
+  // abstract: true,
+  props: {
+    renderFun: {
+      type: Function,
+      require: true
+    },
+    renderProps: {}
+  },
+  render (h) {
+    return this.renderFun(h, this.renderProps)
+  }
+}
+</script>
--- a/src/components/advancedSearch/showhint/TextSearch/createHint.js
+++ b/src/components/advancedSearch/showhint/TextSearch/createHint.js
@@ -0,0 +1,22 @@
+import sqlHint from './sql-hint.js'
+import showHint from './show-hint.js'
+import manualShowHint from './manual-show-hint'
+import 'codemirror/addon/hint/show-hint.css'
+
+export default function createHint (hitType = 'default', CodeMirror, {
+  dataset,
+  hinthook,
+  keywordshook,
+  callback,
+  keyboardUp,
+  keyboardDown,
+  keyboardEnter
+}) {
+  hitType === 'default' ? showHint(CodeMirror) : manualShowHint(CodeMirror, {
+    cb: callback,
+    keyboardUp,
+    keyboardDown,
+    keyboardEnter
+  })
+  sqlHint(CodeMirror, { dataset, hinthook, keywordshook })
+}
--- a/src/components/advancedSearch/showhint/TextSearch/manual-show-hint.js
+++ b/src/components/advancedSearch/showhint/TextSearch/manual-show-hint.js
@@ -0,0 +1,596 @@
+export default function (CodeMirror,{
+  cb,
+  keyboardUp,
+  keyboardDown,
+  keyboardEnter
+}) {
+
+  var HINT_ELEMENT_CLASS = "CodeMirror-hint";
+  var ACTIVE_HINT_ELEMENT_CLASS = "CodeMirror-hint-active";
+
+  // This is the old interface, kept around for now to stay
+  // backwards-compatible.
+  CodeMirror.showHint = function (cm, getHints, options) {
+    if (!getHints) return cm.showHint(options);
+    if (options && options.async) getHints.async = true;
+    var newOpts = {hint: getHints};
+    if (options) for (var prop in options) newOpts[prop] = options[prop];
+    return cm.showHint(newOpts);
+  };
+
+  CodeMirror.defineExtension("showHint", function (options) {
+    options = parseOptions(this, this.getCursor("start"), options);
+    var selections = this.listSelections()
+    if (selections.length > 1) return;
+    // By default, don't allow completion when something is selected.
+    // A hint function can have a `supportsSelection` property to
+    // indicate that it can handle selections.
+    if (this.somethingSelected()) {
+      if (!options.hint.supportsSelection) return;
+      // Don't try with cross-line selections
+      for (var i = 0; i < selections.length; i++)
+        if (selections[i].head.line != selections[i].anchor.line) return;
+    }
+    if (this.state.completionActive) this.state.completionActive.close();
+    var completion = this.state.completionActive = new Completion(this, options);
+    if (!completion.options.hint) return;
+
+    CodeMirror.signal(this, "startCompletion", this);
+    completion.update(true);
+
+    cb && cb({completion})
+  });
+
+  CodeMirror.defineExtension("closeHint", function () {
+    if (this.state.completionActive) this.state.completionActive.close()
+  })
+
+  function Completion(cm, options) {
+    this.cm = cm;
+    this.options = options;
+    this.widget = null;
+    this.debounce = 0;
+    this.tick = 0;
+    this.startPos = this.cm.getCursor("start");
+    this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length;
+
+    if (this.options.updateOnCursorActivity) {
+      var self = this;
+      cm.on("cursorActivity", this.activityFunc = function () {
+        self.cursorActivity();
+      });
+    }
+  }
+
+  var requestAnimationFrame = window.requestAnimationFrame || function (fn) {
+    return setTimeout(fn, 1000 / 60);
+  };
+  var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+
+  Completion.prototype = {
+    close: function () {
+      if (!this.active()) return;
+      this.cm.state.completionActive = null;
+      this.tick = null;
+      if (this.options.updateOnCursorActivity) {
+        this.cm.off("cursorActivity", this.activityFunc);
+      }
+
+      if (this.widget && this.data) CodeMirror.signal(this.data, "close");
+      if (this.widget) this.widget.close();
+      CodeMirror.signal(this.cm, "endCompletion", this.cm);
+    },
+
+    active: function () {
+      return this.cm.state.completionActive == this;
+    },
+
+    pick: function (data, i) {
+      var completion = data.list[i], self = this;
+      this.cm.operation(function () {
+        if (completion.hint)
+          completion.hint(self.cm, data, completion);
+        else
+          self.cm.replaceRange(getText(completion), completion.from || data.from,
+            completion.to || data.to, "complete");
+        CodeMirror.signal(data, "pick", completion);
+        self.cm.scrollIntoView();
+      });
+      if (this.options.closeOnPick) {
+        this.close();
+      }
+    },
+
+    cursorActivity: function () {
+      if (this.debounce) {
+        cancelAnimationFrame(this.debounce);
+        this.debounce = 0;
+      }
+
+      var identStart = this.startPos;
+      if (this.data) {
+        identStart = this.data.from;
+      }
+
+      var pos = this.cm.getCursor(), line = this.cm.getLine(pos.line);
+      if (pos.line != this.startPos.line || line.length - pos.ch != this.startLen - this.startPos.ch ||
+        pos.ch < identStart.ch || this.cm.somethingSelected() ||
+        (!pos.ch || this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) {
+        this.close();
+      } else {
+        var self = this;
+        this.debounce = requestAnimationFrame(function () {
+          self.update();
+        });
+        if (this.widget) this.widget.disable();
+      }
+    },
+
+    update: function (first) {
+      if (this.tick == null) return
+      var self = this, myTick = ++this.tick
+      fetchHints(this.options.hint, this.cm, this.options, function (data) {
+        if (self.tick == myTick) self.finishUpdate(data, first)
+      })
+    },
+
+    finishUpdate: function (data, first) {
+      if (this.data) CodeMirror.signal(this.data, "update");
+
+      var picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle);
+      if (this.widget) this.widget.close();
+
+      this.data = data;
+
+      if (data && data.list.length) {
+        if (picked && data.list.length == 1) {
+          this.pick(data, 0);
+        } else {
+          this.widget = new Widget(this, data);
+          CodeMirror.signal(data, "shown");
+        }
+      }
+    }
+  };
+
+  function parseOptions(cm, pos, options) {
+    var editor = cm.options.hintOptions;
+    var out = {};
+    for (var prop in defaultOptions) out[prop] = defaultOptions[prop];
+    if (editor) for (var prop in editor)
+      if (editor[prop] !== undefined) out[prop] = editor[prop];
+    if (options) for (var prop in options)
+      if (options[prop] !== undefined) out[prop] = options[prop];
+    if (out.hint.resolve) out.hint = out.hint.resolve(cm, pos)
+    return out;
+  }
+
+  function getText(completion) {
+    if (typeof completion == "string") return completion;
+    else return completion.text;
+  }
+
+  function buildKeyMap(completion, handle) {
+    var baseMap = {
+      Up: function () {
+        handle.moveFocus(-1);
+      },
+      Down: function () {
+        handle.moveFocus(1);
+      },
+      PageUp: function () {
+        handle.moveFocus(-handle.menuSize() + 1, true);
+      },
+      PageDown: function () {
+        handle.moveFocus(handle.menuSize() - 1, true);
+      },
+      Home: function () {
+        handle.setFocus(0);
+      },
+      End: function () {
+        handle.setFocus(handle.length - 1);
+      },
+      // Enter: handle.pick,
+      // Tab: handle.pick,
+      Tab: keyboardEnter,
+      Enter: keyboardEnter,
+      Esc: handle.close
+    };
+
+    var mac = /Mac/.test(navigator.platform);
+
+    if (mac) {
+      baseMap["Ctrl-P"] = function () {
+        handle.moveFocus(-1);
+      };
+      baseMap["Ctrl-N"] = function () {
+        handle.moveFocus(1);
+      };
+    }
+
+    var custom = completion.options.customKeys;
+    var ourMap = custom ? {} : baseMap;
+
+    function addBinding(key, val) {
+      var bound;
+      if (typeof val != "string")
+        bound = function (cm) {
+          return val(cm, handle);
+        };
+      // This mechanism is deprecated
+      else if (baseMap.hasOwnProperty(val))
+        bound = baseMap[val];
+      else
+        bound = val;
+      ourMap[key] = bound;
+    }
+
+    if (custom)
+      for (var key in custom) if (custom.hasOwnProperty(key))
+        addBinding(key, custom[key]);
+    var extra = completion.options.extraKeys;
+    if (extra)
+      for (var key in extra) if (extra.hasOwnProperty(key))
+        addBinding(key, extra[key]);
+    return ourMap;
+  }
+
+  function getHintElement(hintsElement, el) {
+    while (el && el != hintsElement) {
+      if (el.nodeName.toUpperCase() === "LI" && el.parentNode == hintsElement) return el;
+      el = el.parentNode;
+    }
+  }
+
+  function Widget(completion, data) {
+    this.id = "cm-complete-" + Math.floor(Math.random(1e6))
+    this.completion = completion;
+    this.data = data;
+    this.picked = false;
+    var widget = this, cm = completion.cm;
+    var ownerDocument = cm.getInputField().ownerDocument;
+    var parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow;
+
+    var hints = this.hints = ownerDocument.createElement("ul");
+    // $(hints).append(`
+    //   <h1>lalallalla</h1>
+    // `)
+    hints.setAttribute("role", "listbox")
+    hints.setAttribute("aria-expanded", "true")
+    hints.id = this.id
+    var theme = completion.cm.options.theme;
+    hints.className = "CodeMirror-hints " + theme;
+    this.selectedHint = data.selectedHint || 0;
+
+    var completions = data.list;
+    for (var i = 0; i < completions.length; ++i) {
+      var elt = hints.appendChild(ownerDocument.createElement("li")), cur = completions[i];
+      var className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? "" : " " + ACTIVE_HINT_ELEMENT_CLASS);
+      if (cur.className != null) className = cur.className + " " + className;
+      elt.className = className;
+      if (i == this.selectedHint) elt.setAttribute("aria-selected", "true")
+      elt.id = this.id + "-" + i
+      elt.setAttribute("role", "option")
+      if (cur.render) cur.render(elt, data, cur);
+      else elt.appendChild(ownerDocument.createTextNode(cur.displayText || getText(cur)));
+      elt.hintId = i;
+    }
+
+    var container = completion.options.container || ownerDocument.body;
+    var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null);
+    var left = pos.left, top = pos.bottom, below = true;
+    var offsetLeft = 0, offsetTop = 0;
+    if (container !== ownerDocument.body) {
+      // We offset the cursor position because left and top are relative to the offsetParent's top left corner.
+      var isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1;
+      var offsetParent = isContainerPositioned ? container : container.offsetParent;
+      var offsetParentPosition = offsetParent.getBoundingClientRect();
+      var bodyPosition = ownerDocument.body.getBoundingClientRect();
+      offsetLeft = (offsetParentPosition.left - bodyPosition.left - offsetParent.scrollLeft);
+      offsetTop = (offsetParentPosition.top - bodyPosition.top - offsetParent.scrollTop);
+    }
+    hints.style.left = (left - offsetLeft) + "px";
+    hints.style.top = (top - offsetTop) + "px";
+    // todo 隐藏codemirror自带的提示
+    hints.style.display = 'none'
+
+    // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
+    var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth);
+    var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight);
+
+    //不用默认的DOM 下拉提示
+    // container.appendChild(hints);
+    hints.remove()
+
+    cm.getInputField().setAttribute("aria-autocomplete", "list")
+    cm.getInputField().setAttribute("aria-owns", this.id)
+    cm.getInputField().setAttribute("aria-activedescendant", this.id + "-" + this.selectedHint)
+
+    var box = completion.options.moveOnOverlap ? hints.getBoundingClientRect() : new DOMRect();
+    var scrolls = completion.options.paddingForScrollbar ? hints.scrollHeight > hints.clientHeight + 1 : false;
+
+    // Compute in the timeout to avoid reflow on init
+    var startScroll;
+    setTimeout(function () {
+      startScroll = cm.getScrollInfo();
+    });
+
+    var overlapY = box.bottom - winH;
+    if (overlapY > 0) {
+      var height = box.bottom - box.top, curTop = pos.top - (pos.bottom - box.top);
+      if (curTop - height > 0) { // Fits above cursor
+        hints.style.top = (top = pos.top - height - offsetTop) + "px";
+        below = false;
+      } else if (height > winH) {
+        hints.style.height = (winH - 5) + "px";
+        hints.style.top = (top = pos.bottom - box.top - offsetTop) + "px";
+        var cursor = cm.getCursor();
+        if (data.from.ch != cursor.ch) {
+          pos = cm.cursorCoords(cursor);
+          hints.style.left = (left = pos.left - offsetLeft) + "px";
+          box = hints.getBoundingClientRect();
+        }
+      }
+    }
+    var overlapX = box.right - winW;
+    if (scrolls) overlapX += cm.display.nativeBarWidth;
+    if (overlapX > 0) {
+      if (box.right - box.left > winW) {
+        hints.style.width = (winW - 5) + "px";
+        overlapX -= (box.right - box.left) - winW;
+      }
+      hints.style.left = (left = Math.max(pos.left - overlapX - offsetLeft, 0)) + "px";
+    }
+    if (scrolls) for (var node = hints.firstChild; node; node = node.nextSibling)
+      node.style.paddingRight = cm.display.nativeBarWidth + "px"
+
+    // debugger
+    cm.addKeyMap(this.keyMap = buildKeyMap(completion, {
+      moveFocus: function (n, avoidWrap) {
+        n === -1 ? keyboardUp && keyboardUp() : keyboardDown && keyboardDown()
+        widget.changeActive(widget.selectedHint + n, avoidWrap);
+      },
+      setFocus: function (n) {
+        widget.changeActive(n);
+      },
+      menuSize: function () {
+        return widget.screenAmount();
+      },
+      length: completions.length,
+      close: function () {
+        completion.close();
+      },
+      pick: function () {
+        widget.pick();
+      },
+      data: data
+    }));
+
+    if (completion.options.closeOnUnfocus) {
+      var closingOnBlur;
+      cm.on("blur", this.onBlur = function () {
+        closingOnBlur = setTimeout(function () {
+          completion.close();
+        }, 100);
+      });
+      cm.on("focus", this.onFocus = function () {
+        clearTimeout(closingOnBlur);
+      });
+    }
+
+    cm.on("scroll", this.onScroll = function () {
+      var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
+      if (!startScroll) startScroll = cm.getScrollInfo();
+      var newTop = top + startScroll.top - curScroll.top;
+      var point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop);
+      if (!below) point += hints.offsetHeight;
+      if (point <= editor.top || point >= editor.bottom) return completion.close();
+      hints.style.top = newTop + "px";
+      hints.style.left = (left + startScroll.left - curScroll.left) + "px";
+    });
+
+    CodeMirror.on(hints, "dblclick", function (e) {
+      var t = getHintElement(hints, e.target || e.srcElement);
+      if (t && t.hintId != null) {
+        widget.changeActive(t.hintId);
+        widget.pick();
+      }
+    });
+
+    CodeMirror.on(hints, "click", function (e) {
+      var t = getHintElement(hints, e.target || e.srcElement);
+      if (t && t.hintId != null) {
+        widget.changeActive(t.hintId);
+        if (completion.options.completeOnSingleClick) widget.pick();
+      }
+    });
+
+    CodeMirror.on(hints, "mousedown", function () {
+      setTimeout(function () {
+        cm.focus();
+      }, 20);
+    });
+
+    // The first hint doesn't need to be scrolled to on init
+    var selectedHintRange = this.getSelectedHintRange();
+    if (selectedHintRange.from !== 0 || selectedHintRange.to !== 0) {
+      this.scrollToActive();
+    }
+
+    CodeMirror.signal(data, "select", completions[this.selectedHint], hints.childNodes[this.selectedHint]);
+    return true;
+  }
+
+  Widget.prototype = {
+    close: function () {
+      if (this.completion.widget != this) return;
+      this.completion.widget = null;
+      if (this.hints.parentNode) this.hints.parentNode.removeChild(this.hints);
+      this.completion.cm.removeKeyMap(this.keyMap);
+      var input = this.completion.cm.getInputField()
+      input.removeAttribute("aria-activedescendant")
+      input.removeAttribute("aria-owns")
+
+      var cm = this.completion.cm;
+      if (this.completion.options.closeOnUnfocus) {
+        cm.off("blur", this.onBlur);
+        cm.off("focus", this.onFocus);
+      }
+      cm.off("scroll", this.onScroll);
+    },
+
+    disable: function () {
+      this.completion.cm.removeKeyMap(this.keyMap);
+      var widget = this;
+      this.keyMap = {
+        Enter: function () {
+          widget.picked = true;
+        }
+      };
+      this.completion.cm.addKeyMap(this.keyMap);
+    },
+
+    pick: function () {
+      this.completion.pick(this.data, this.selectedHint);
+    },
+
+    changeActive: function (i, avoidWrap) {
+      if (i >= this.data.list.length)
+        i = avoidWrap ? this.data.list.length - 1 : 0;
+      else if (i < 0)
+        i = avoidWrap ? 0 : this.data.list.length - 1;
+      if (this.selectedHint == i) return;
+      var node = this.hints.childNodes[this.selectedHint];
+      if (node) {
+        node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
+        node.removeAttribute("aria-selected")
+      }
+      node = this.hints.childNodes[this.selectedHint = i];
+      node.className += " " + ACTIVE_HINT_ELEMENT_CLASS;
+      node.setAttribute("aria-selected", "true")
+      this.completion.cm.getInputField().setAttribute("aria-activedescendant", node.id)
+      this.scrollToActive()
+      CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node);
+    },
+
+    scrollToActive: function () {
+      var selectedHintRange = this.getSelectedHintRange();
+      var node1 = this.hints.childNodes[selectedHintRange.from];
+      var node2 = this.hints.childNodes[selectedHintRange.to];
+      var firstNode = this.hints.firstChild;
+      if (node1.offsetTop < this.hints.scrollTop)
+        this.hints.scrollTop = node1.offsetTop - firstNode.offsetTop;
+      else if (node2.offsetTop + node2.offsetHeight > this.hints.scrollTop + this.hints.clientHeight)
+        this.hints.scrollTop = node2.offsetTop + node2.offsetHeight - this.hints.clientHeight + firstNode.offsetTop;
+    },
+
+    screenAmount: function () {
+      return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1;
+    },
+
+    getSelectedHintRange: function () {
+      var margin = this.completion.options.scrollMargin || 0;
+      return {
+        from: Math.max(0, this.selectedHint - margin),
+        to: Math.min(this.data.list.length - 1, this.selectedHint + margin),
+      };
+    }
+  };
+
+  function applicableHelpers(cm, helpers) {
+    if (!cm.somethingSelected()) return helpers
+    var result = []
+    for (var i = 0; i < helpers.length; i++)
+      if (helpers[i].supportsSelection) result.push(helpers[i])
+    return result
+  }
+
+  function fetchHints(hint, cm, options, callback) {
+    if (hint.async) {
+      hint(cm, callback, options)
+    } else {
+      var result = hint(cm, options)
+      if (result && result.then) result.then(callback)
+      else callback(result)
+    }
+  }
+
+  function resolveAutoHints(cm, pos) {
+    var helpers = cm.getHelpers(pos, "hint"), words
+    if (helpers.length) {
+      var resolved = function (cm, callback, options) {
+        var app = applicableHelpers(cm, helpers);
+
+        function run(i) {
+          if (i == app.length) return callback(null)
+          fetchHints(app[i], cm, options, function (result) {
+            if (result && result.list.length > 0) callback(result)
+            else run(i + 1)
+          })
+        }
+
+        run(0)
+      }
+      resolved.async = true
+      resolved.supportsSelection = true
+      return resolved
+    } else if (words = cm.getHelper(cm.getCursor(), "hintWords")) {
+      return function (cm) {
+        return CodeMirror.hint.fromList(cm, {words: words})
+      }
+    } else if (CodeMirror.hint.anyword) {
+      return function (cm, options) {
+        return CodeMirror.hint.anyword(cm, options)
+      }
+    } else {
+      return function () {
+      }
+    }
+  }
+
+  CodeMirror.registerHelper("hint", "auto", {
+    resolve: resolveAutoHints
+  });
+
+  CodeMirror.registerHelper("hint", "fromList", function (cm, options) {
+    var cur = cm.getCursor(), token = cm.getTokenAt(cur)
+    var term, from = CodeMirror.Pos(cur.line, token.start), to = cur
+    if (token.start < cur.ch && /\w/.test(token.string.charAt(cur.ch - token.start - 1))) {
+      term = token.string.substr(0, cur.ch - token.start)
+    } else {
+      term = ""
+      from = cur
+    }
+    var found = [];
+    for (var i = 0; i < options.words.length; i++) {
+      var word = options.words[i];
+      if (word.slice(0, term.length) == term)
+        found.push(word);
+    }
+
+    if (found.length) return {list: found, from: from, to: to};
+  });
+
+  CodeMirror.commands.autocomplete = CodeMirror.showHint;
+
+  var defaultOptions = {
+    hint: CodeMirror.hint.auto,
+    completeSingle: true,
+    alignWithWord: true,
+    closeCharacters: /[\s()\[\]{};:>,]/,
+
+    closeOnPick: false,
+    closeOnUnfocus: false,  //阻止提示信息 失焦关闭
+    // closeOnUnfocus: false,
+
+    updateOnCursorActivity: true,
+    completeOnSingleClick: true,
+    container: null,
+    customKeys: null,
+    extraKeys: null,
+    paddingForScrollbar: true,
+    moveOnOverlap: true,
+  };
+  CodeMirror.defineOption("hintOptions", null);
+
+}
--- a/src/components/advancedSearch/showhint/TextSearch/matchRelatedInfo.js
+++ b/src/components/advancedSearch/showhint/TextSearch/matchRelatedInfo.js
@@ -0,0 +1,227 @@
+//正则 向前去找关键字
+/* 用于匹配关系数据  */
+function matchOperator(CodeMirror, hintParams = {}) {
+  var editor = hintParams.editor;
+  var Pos = CodeMirror.Pos
+  var cur = hintParams.cur;
+  var token = hintParams.token;
+  if (!editor) {
+    return
+  }
+
+
+  var start = token.start;
+  var cont = true;
+  var leftTokenGroup = [];
+  while (cont) {
+    start = token.start;
+    leftTokenGroup.unshift(token);
+    token = editor.getTokenAt(Pos(cur.line, token.start));
+    cont = !(token.string.match(/^[ ]*$/) || start === 0);  //只用空格做终止条件
+  }
+
+  var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
+
+  //判断是不是满足 运算符 表达式的正则
+  //test 如果是ig 会改变正则指针:  https://my.oschina.net/jamesview/blog/5460753
+  var reg = /^(.*?)(=|!=|>|<|>=|<=)([^ ]*?)$/;
+  if (reg.test(cursorLeftString)) {
+    var execArr = reg.exec(cursorLeftString) || []
+    return {
+      leftTokenGroup,
+      cursorLeftString,
+      label: execArr[1],
+      sign: execArr[2],
+      value: execArr[3],
+    }
+  }
+  return null
+}
+
+function matchCommon(CodeMirror, hintParams = {}) {
+  //通用情况   QUANTILE(expr,level)  左括号右侧第一个就是  关键字
+  var editor = hintParams.editor;
+  var Pos = CodeMirror.Pos
+  var cur = hintParams.cur;
+  var token = hintParams.token;
+  if (!editor) {
+    return
+  }
+
+
+  var start = token.start;
+  var cont = true;
+  var leftTokenGroup = [];
+  while (cont) {
+    start = token.start;
+    leftTokenGroup.unshift(token);
+    token = editor.getTokenAt(Pos(cur.line, token.start));
+    cont = !(token.string.match(/^[ (]*$/) || start === 0);  //括号或者空格为终止条件
+
+    //括号补上
+    if (token.string === '(') {
+      leftTokenGroup.unshift(token);
+    }
+  }
+
+  var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
+
+  //判断是不是满足 运算符 表达式的正则
+  var reg = /^\((.*?),([^ ]*)$/;
+  if (reg.test(cursorLeftString)) {
+    var execArr = reg.exec(cursorLeftString) || []
+    return {
+      leftTokenGroup,
+      cursorLeftString,
+      label: execArr[1],
+      sign: 'unknown',  //没必要判断
+      value: execArr[2],
+    }
+  }
+  return null
+}
+
+function matchIn(CodeMirror, hintParams = {}) {
+  //in 的情况比较特殊
+  //通用情况  expr not in (values)   expr in (values)
+  var editor = hintParams.editor;
+  var Pos = CodeMirror.Pos
+  var cur = hintParams.cur;
+  var token = hintParams.token;
+  if (!editor) {
+    return
+  }
+
+
+  var start = token.start;
+  var cont = true;
+  var leftTokenGroup = [];
+
+  //找到左括号
+  while (cont) {
+    start = token.start;
+    leftTokenGroup.unshift(token);
+    token = editor.getTokenAt(Pos(cur.line, token.start));
+    cont = !(token.string.match(/^[ (]*$/) || start === 0);  //括号或者空格为终止条件
+    //左括号补上
+    if (token.string === '(') {
+      leftTokenGroup.unshift(token);
+    }
+  }
+
+  //左括号继续向右找
+  cont = true
+  while (cont) {
+    start = token.start;
+    leftTokenGroup.unshift(token);
+    token = editor.getTokenAt(Pos(cur.line, token.start));
+    cont = !(!token.string.match(/^(in|not| )/g) || start === 0);  //括号或者空格为终止条件
+
+    //string-2
+    if (token.type === 'string-2') {
+      leftTokenGroup.unshift(token);
+    }
+  }
+  var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
+
+  //判断是不是满足 运算符 表达式的正则
+  var reg = /^(.*?)[ ]+((?:not[ ]+)?in)[ ]*\(([^ ]*?)$/i;
+  if (reg.test(cursorLeftString)) {
+    var execArr = reg.exec(cursorLeftString) || []
+    return {
+      leftTokenGroup,
+      cursorLeftString,
+      label: execArr[1],
+      sign: execArr[2],
+      value: execArr[3],
+    }
+  }
+  return null
+}
+
+function matchLike(CodeMirror, hintParams = {}) {
+  //like 的情况比较特殊  expr like value , expr not like value
+  var editor = hintParams.editor;
+  var Pos = CodeMirror.Pos
+  var cur = hintParams.cur;
+  var token = hintParams.token;
+  if (!editor) {
+    return
+  }
+
+
+  var start = token.start;
+  var cont = true;
+  var leftTokenGroup = [];
+
+  //找到左括号
+  while (cont) {
+    start = token.start;
+    leftTokenGroup.unshift(token);
+    token = editor.getTokenAt(Pos(cur.line, token.start));
+    cont = !(token.string.match(/^[ ]*$/) || start === 0);  //括号或者空格为终止条件
+  }
+
+  //左括号继续向右找
+  cont = true
+  while (cont) {
+    start = token.start;
+    leftTokenGroup.unshift(token);
+    token = editor.getTokenAt(Pos(cur.line, token.start));
+    cont = !(!token.string.match(/^(like|not| )/g) || start === 0);  //括号或者空格为终止条件
+
+    //string-2
+    if (token.type === 'string-2') {
+      leftTokenGroup.unshift(token);
+    }
+  }
+  var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
+
+  //判断是不是满足 运算符 表达式的正则
+  var reg = /^(.*?)[ ]+((?:not[ ]+)?like)[ ]*([^ ]*?)$/i;
+  if (reg.test(cursorLeftString)) {
+    var execArr = reg.exec(cursorLeftString) || []
+    return {
+      leftTokenGroup,
+      cursorLeftString,
+      label: execArr[1],
+      sign: execArr[2],
+      value: execArr[3],
+    }
+  }
+  return null
+
+}
+
+export const matchMain = (CodeMirror, params, manualParams = {}) => {
+  var matchRes = null
+  //匹配 运算符表达式
+  matchRes = matchOperator(CodeMirror, manualParams)
+  if (matchRes) {
+    return matchRes
+  }
+
+  //匹配 in表达式
+  matchRes = matchIn(CodeMirror, manualParams)
+  if (matchRes) {
+    return matchRes
+  }
+
+  //匹配 like表达式
+  matchRes = matchLike(CodeMirror, manualParams)
+  if (matchRes) {
+    return matchRes
+  }
+
+  //这里缺少一个对 count(distinct expr) 模式的匹配, 感觉大数据涉及存在缺陷, 先暂时不写
+
+
+  //匹配 其他表达式  (expr,value1,value2....) 模式的匹配
+  matchRes = matchCommon(CodeMirror, manualParams)
+  if (matchRes) {
+    // 说明这是一个 运算符表达式
+    return matchRes
+  }
+
+  return matchRes
+}
--- a/src/components/advancedSearch/showhint/TextSearch/show-hint.js
+++ b/src/components/advancedSearch/showhint/TextSearch/show-hint.js
@@ -0,0 +1,591 @@
+export default function showHint(CodeMirror) {
+  "use strict";
+
+  var HINT_ELEMENT_CLASS = "CodeMirror-hint";
+  var ACTIVE_HINT_ELEMENT_CLASS = "CodeMirror-hint-active";
+
+  // This is the old interface, kept around for now to stay
+  // backwards-compatible.
+  CodeMirror.showHint = function (cm, getHints, options) {
+    if (!getHints) return cm.showHint(options);
+    if (options && options.async) getHints.async = true;
+    var newOpts = {hint: getHints};
+    if (options) for (var prop in options) newOpts[prop] = options[prop];
+    return cm.showHint(newOpts);
+  };
+
+  CodeMirror.defineExtension("showHint", function (options) {
+    options = parseOptions(this, this.getCursor("start"), options);
+    var selections = this.listSelections()
+    if (selections.length > 1) return;
+    // By default, don't allow completion when something is selected.
+    // A hint function can have a `supportsSelection` property to
+    // indicate that it can handle selections.
+    if (this.somethingSelected()) {
+      if (!options.hint.supportsSelection) return;
+      // Don't try with cross-line selections
+      for (var i = 0; i < selections.length; i++)
+        if (selections[i].head.line != selections[i].anchor.line) return;
+    }
+
+    if (this.state.completionActive) this.state.completionActive.close();
+    var completion = this.state.completionActive = new Completion(this, options);
+    if (!completion.options.hint) return;
+
+    CodeMirror.signal(this, "startCompletion", this);
+    completion.update(true);
+  });
+
+  CodeMirror.defineExtension("closeHint", function () {
+    if (this.state.completionActive) this.state.completionActive.close()
+  })
+
+  function Completion(cm, options) {
+    this.cm = cm;
+    this.options = options;
+    this.widget = null;
+    this.debounce = 0;
+    this.tick = 0;
+    this.startPos = this.cm.getCursor("start");
+    this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length;
+
+    if (this.options.updateOnCursorActivity) {
+      var self = this;
+      cm.on("cursorActivity", this.activityFunc = function () {
+        self.cursorActivity();
+      });
+    }
+  }
+
+  var requestAnimationFrame = window.requestAnimationFrame || function (fn) {
+    return setTimeout(fn, 1000 / 60);
+  };
+  var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+
+  Completion.prototype = {
+    close: function () {
+      if (!this.active()) return;
+      this.cm.state.completionActive = null;
+      this.tick = null;
+      if (this.options.updateOnCursorActivity) {
+        this.cm.off("cursorActivity", this.activityFunc);
+      }
+
+      if (this.widget && this.data) CodeMirror.signal(this.data, "close");
+      if (this.widget) this.widget.close();
+      CodeMirror.signal(this.cm, "endCompletion", this.cm);
+    },
+
+    active: function () {
+      return this.cm.state.completionActive == this;
+    },
+
+    pick: function (data, i) {
+      var completion = data.list[i], self = this;
+      this.cm.operation(function () {
+        if (completion.hint)
+          completion.hint(self.cm, data, completion);
+        else
+          self.cm.replaceRange(getText(completion), completion.from || data.from,
+            completion.to || data.to, "complete");
+        CodeMirror.signal(data, "pick", completion);
+        self.cm.scrollIntoView();
+      });
+      if (this.options.closeOnPick) {
+        this.close();
+      }
+    },
+
+    cursorActivity: function () {
+      if (this.debounce) {
+        cancelAnimationFrame(this.debounce);
+        this.debounce = 0;
+      }
+
+      var identStart = this.startPos;
+      if (this.data) {
+        identStart = this.data.from;
+      }
+
+      var pos = this.cm.getCursor(), line = this.cm.getLine(pos.line);
+      if (pos.line != this.startPos.line || line.length - pos.ch != this.startLen - this.startPos.ch ||
+        pos.ch < identStart.ch || this.cm.somethingSelected() ||
+        (!pos.ch || this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) {
+        this.close();
+      } else {
+        var self = this;
+        this.debounce = requestAnimationFrame(function () {
+          self.update();
+        });
+        if (this.widget) this.widget.disable();
+      }
+    },
+
+    update: function (first) {
+      if (this.tick == null) return
+      var self = this, myTick = ++this.tick
+      fetchHints(this.options.hint, this.cm, this.options, function (data) {
+        if (self.tick == myTick) self.finishUpdate(data, first)
+      })
+    },
+
+    finishUpdate: function (data, first) {
+      if (this.data) CodeMirror.signal(this.data, "update");
+
+      var picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle);
+      if (this.widget) this.widget.close();
+
+      this.data = data;
+
+      if (data && data.list.length) {
+        if (picked && data.list.length == 1) {
+          this.pick(data, 0);
+        } else {
+          this.widget = new Widget(this, data);
+          CodeMirror.signal(data, "shown");
+        }
+      }
+    }
+  };
+
+  function parseOptions(cm, pos, options) {
+    var editor = cm.options.hintOptions;
+    var out = {};
+    for (var prop in defaultOptions) out[prop] = defaultOptions[prop];
+    if (editor) for (var prop in editor)
+      if (editor[prop] !== undefined) out[prop] = editor[prop];
+    if (options) for (var prop in options)
+      if (options[prop] !== undefined) out[prop] = options[prop];
+    if (out.hint.resolve) out.hint = out.hint.resolve(cm, pos)
+    return out;
+  }
+
+  function getText(completion) {
+    if (typeof completion == "string") return completion;
+    else return completion.text;
+  }
+
+  function buildKeyMap(completion, handle) {
+    var baseMap = {
+      Up: function () {
+        handle.moveFocus(-1);
+      },
+      Down: function () {
+        handle.moveFocus(1);
+      },
+      PageUp: function () {
+        handle.moveFocus(-handle.menuSize() + 1, true);
+      },
+      PageDown: function () {
+        handle.moveFocus(handle.menuSize() - 1, true);
+      },
+      Home: function () {
+        handle.setFocus(0);
+      },
+      End: function () {
+        handle.setFocus(handle.length - 1);
+      },
+      Enter: handle.pick,
+      Tab: handle.pick,
+      Esc: handle.close
+    };
+
+    var mac = /Mac/.test(navigator.platform);
+
+    if (mac) {
+      baseMap["Ctrl-P"] = function () {
+        handle.moveFocus(-1);
+      };
+      baseMap["Ctrl-N"] = function () {
+        handle.moveFocus(1);
+      };
+    }
+
+    var custom = completion.options.customKeys;
+    var ourMap = custom ? {} : baseMap;
+
+    function addBinding(key, val) {
+      var bound;
+      if (typeof val != "string")
+        bound = function (cm) {
+          return val(cm, handle);
+        };
+      // This mechanism is deprecated
+      else if (baseMap.hasOwnProperty(val))
+        bound = baseMap[val];
+      else
+        bound = val;
+      ourMap[key] = bound;
+    }
+
+    if (custom)
+      for (var key in custom) if (custom.hasOwnProperty(key))
+        addBinding(key, custom[key]);
+    var extra = completion.options.extraKeys;
+    if (extra)
+      for (var key in extra) if (extra.hasOwnProperty(key))
+        addBinding(key, extra[key]);
+    return ourMap;
+  }
+
+  function getHintElement(hintsElement, el) {
+    while (el && el != hintsElement) {
+      if (el.nodeName.toUpperCase() === "LI" && el.parentNode == hintsElement) return el;
+      el = el.parentNode;
+    }
+  }
+
+  function Widget(completion, data) {
+    this.id = "cm-complete-" + Math.floor(Math.random(1e6))
+    this.completion = completion;
+    this.data = data;
+    this.picked = false;
+    var widget = this, cm = completion.cm;
+    var ownerDocument = cm.getInputField().ownerDocument;
+    var parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow;
+
+    var hints = this.hints = ownerDocument.createElement("ul");
+    // $(hints).append(`
+    //   <h1>lalallalla</h1>
+    // `)
+    hints.setAttribute("role", "listbox")
+    hints.setAttribute("aria-expanded", "true")
+    hints.id = this.id
+    var theme = completion.cm.options.theme;
+    hints.className = "CodeMirror-hints " + theme;
+    this.selectedHint = data.selectedHint || 0;
+
+    var completions = data.list;
+    for (var i = 0; i < completions.length; ++i) {
+      var elt = hints.appendChild(ownerDocument.createElement("li")), cur = completions[i];
+      var className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? "" : " " + ACTIVE_HINT_ELEMENT_CLASS);
+      if (cur.className != null) className = cur.className + " " + className;
+      elt.className = className;
+      if (i == this.selectedHint) elt.setAttribute("aria-selected", "true")
+      elt.id = this.id + "-" + i
+      elt.setAttribute("role", "option")
+      if (cur.render) cur.render(elt, data, cur);
+      else elt.appendChild(ownerDocument.createTextNode(cur.displayText || getText(cur)));
+      elt.hintId = i;
+    }
+
+    var container = completion.options.container || ownerDocument.body;
+    var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null);
+    var left = pos.left, top = pos.bottom, below = true;
+    var offsetLeft = 0, offsetTop = 0;
+    if (container !== ownerDocument.body) {
+      // We offset the cursor position because left and top are relative to the offsetParent's top left corner.
+      var isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1;
+      var offsetParent = isContainerPositioned ? container : container.offsetParent;
+      var offsetParentPosition = offsetParent.getBoundingClientRect();
+      var bodyPosition = ownerDocument.body.getBoundingClientRect();
+      offsetLeft = (offsetParentPosition.left - bodyPosition.left - offsetParent.scrollLeft);
+      offsetTop = (offsetParentPosition.top - bodyPosition.top - offsetParent.scrollTop);
+    }
+    hints.style.left = (left - offsetLeft) + "px";
+    hints.style.top = (top - offsetTop) + "px";
+    // todo 隐藏codemirror自带的提示
+    hints.style.display = 'none'
+
+    // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
+    var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth);
+    var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight);
+    //在这里  添加的DOM 元素  -- 该方案 实现复杂算了吧
+    container.appendChild(hints);
+// debugger
+//     $(container).append(
+//       `
+//       <div>
+//       <h1>hahah</h1>
+//       ${ hints }
+// </div>
+//       `
+//     )
+    cm.getInputField().setAttribute("aria-autocomplete", "list")
+    cm.getInputField().setAttribute("aria-owns", this.id)
+    cm.getInputField().setAttribute("aria-activedescendant", this.id + "-" + this.selectedHint)
+
+    var box = completion.options.moveOnOverlap ? hints.getBoundingClientRect() : new DOMRect();
+    var scrolls = completion.options.paddingForScrollbar ? hints.scrollHeight > hints.clientHeight + 1 : false;
+
+    // Compute in the timeout to avoid reflow on init
+    var startScroll;
+    setTimeout(function () {
+      startScroll = cm.getScrollInfo();
+    });
+
+    var overlapY = box.bottom - winH;
+    if (overlapY > 0) {
+      var height = box.bottom - box.top, curTop = pos.top - (pos.bottom - box.top);
+      if (curTop - height > 0) { // Fits above cursor
+        hints.style.top = (top = pos.top - height - offsetTop) + "px";
+        below = false;
+      } else if (height > winH) {
+        hints.style.height = (winH - 5) + "px";
+        hints.style.top = (top = pos.bottom - box.top - offsetTop) + "px";
+        var cursor = cm.getCursor();
+        if (data.from.ch != cursor.ch) {
+          pos = cm.cursorCoords(cursor);
+          hints.style.left = (left = pos.left - offsetLeft) + "px";
+          box = hints.getBoundingClientRect();
+        }
+      }
+    }
+    var overlapX = box.right - winW;
+    if (scrolls) overlapX += cm.display.nativeBarWidth;
+    if (overlapX > 0) {
+      if (box.right - box.left > winW) {
+        hints.style.width = (winW - 5) + "px";
+        overlapX -= (box.right - box.left) - winW;
+      }
+      hints.style.left = (left = Math.max(pos.left - overlapX - offsetLeft, 0)) + "px";
+    }
+    if (scrolls) for (var node = hints.firstChild; node; node = node.nextSibling)
+      node.style.paddingRight = cm.display.nativeBarWidth + "px"
+
+    // debugger
+    cm.addKeyMap(this.keyMap = buildKeyMap(completion, {
+      moveFocus: function (n, avoidWrap) {
+        widget.changeActive(widget.selectedHint + n, avoidWrap);
+      },
+      setFocus: function (n) {
+        widget.changeActive(n);
+      },
+      menuSize: function () {
+        return widget.screenAmount();
+      },
+      length: completions.length,
+      close: function () {
+        completion.close();
+      },
+      pick: function () {
+        widget.pick();
+      },
+      data: data
+    }));
+
+    if (completion.options.closeOnUnfocus) {
+      var closingOnBlur;
+      cm.on("blur", this.onBlur = function () {
+        closingOnBlur = setTimeout(function () {
+          completion.close();
+        }, 100);
+      });
+      cm.on("focus", this.onFocus = function () {
+        clearTimeout(closingOnBlur);
+      });
+    }
+
+    cm.on("scroll", this.onScroll = function () {
+      var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
+      if (!startScroll) startScroll = cm.getScrollInfo();
+      var newTop = top + startScroll.top - curScroll.top;
+      var point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop);
+      if (!below) point += hints.offsetHeight;
+      if (point <= editor.top || point >= editor.bottom) return completion.close();
+      hints.style.top = newTop + "px";
+      hints.style.left = (left + startScroll.left - curScroll.left) + "px";
+    });
+
+    CodeMirror.on(hints, "dblclick", function (e) {
+      var t = getHintElement(hints, e.target || e.srcElement);
+      if (t && t.hintId != null) {
+        widget.changeActive(t.hintId);
+        widget.pick();
+      }
+    });
+
+    CodeMirror.on(hints, "click", function (e) {
+      var t = getHintElement(hints, e.target || e.srcElement);
+      if (t && t.hintId != null) {
+        widget.changeActive(t.hintId);
+        if (completion.options.completeOnSingleClick) widget.pick();
+      }
+    });
+
+    CodeMirror.on(hints, "mousedown", function () {
+      setTimeout(function () {
+        cm.focus();
+      }, 20);
+    });
+
+    // The first hint doesn't need to be scrolled to on init
+    var selectedHintRange = this.getSelectedHintRange();
+    if (selectedHintRange.from !== 0 || selectedHintRange.to !== 0) {
+      this.scrollToActive();
+    }
+
+    CodeMirror.signal(data, "select", completions[this.selectedHint], hints.childNodes[this.selectedHint]);
+    return true;
+  }
+
+  Widget.prototype = {
+    close: function () {
+      if (this.completion.widget != this) return;
+      this.completion.widget = null;
+      if (this.hints.parentNode) this.hints.parentNode.removeChild(this.hints);
+      this.completion.cm.removeKeyMap(this.keyMap);
+      var input = this.completion.cm.getInputField()
+      input.removeAttribute("aria-activedescendant")
+      input.removeAttribute("aria-owns")
+
+      var cm = this.completion.cm;
+      if (this.completion.options.closeOnUnfocus) {
+        cm.off("blur", this.onBlur);
+        cm.off("focus", this.onFocus);
+      }
+      cm.off("scroll", this.onScroll);
+    },
+
+    disable: function () {
+      this.completion.cm.removeKeyMap(this.keyMap);
+      var widget = this;
+      this.keyMap = {
+        Enter: function () {
+          widget.picked = true;
+        }
+      };
+      this.completion.cm.addKeyMap(this.keyMap);
+    },
+
+    pick: function () {
+      this.completion.pick(this.data, this.selectedHint);
+    },
+
+    changeActive: function (i, avoidWrap) {
+      if (i >= this.data.list.length)
+        i = avoidWrap ? this.data.list.length - 1 : 0;
+      else if (i < 0)
+        i = avoidWrap ? 0 : this.data.list.length - 1;
+      if (this.selectedHint == i) return;
+      var node = this.hints.childNodes[this.selectedHint];
+      if (node) {
+        node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
+        node.removeAttribute("aria-selected")
+      }
+      node = this.hints.childNodes[this.selectedHint = i];
+      node.className += " " + ACTIVE_HINT_ELEMENT_CLASS;
+      node.setAttribute("aria-selected", "true")
+      this.completion.cm.getInputField().setAttribute("aria-activedescendant", node.id)
+      this.scrollToActive()
+      CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node);
+    },
+
+    scrollToActive: function () {
+      var selectedHintRange = this.getSelectedHintRange();
+      var node1 = this.hints.childNodes[selectedHintRange.from];
+      var node2 = this.hints.childNodes[selectedHintRange.to];
+      var firstNode = this.hints.firstChild;
+      if (node1.offsetTop < this.hints.scrollTop)
+        this.hints.scrollTop = node1.offsetTop - firstNode.offsetTop;
+      else if (node2.offsetTop + node2.offsetHeight > this.hints.scrollTop + this.hints.clientHeight)
+        this.hints.scrollTop = node2.offsetTop + node2.offsetHeight - this.hints.clientHeight + firstNode.offsetTop;
+    },
+
+    screenAmount: function () {
+      return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1;
+    },
+
+    getSelectedHintRange: function () {
+      var margin = this.completion.options.scrollMargin || 0;
+      return {
+        from: Math.max(0, this.selectedHint - margin),
+        to: Math.min(this.data.list.length - 1, this.selectedHint + margin),
+      };
+    }
+  };
+
+  function applicableHelpers(cm, helpers) {
+    if (!cm.somethingSelected()) return helpers
+    var result = []
+    for (var i = 0; i < helpers.length; i++)
+      if (helpers[i].supportsSelection) result.push(helpers[i])
+    return result
+  }
+
+  function fetchHints(hint, cm, options, callback) {
+    if (hint.async) {
+      hint(cm, callback, options)
+    } else {
+      var result = hint(cm, options)
+      if (result && result.then) result.then(callback)
+      else callback(result)
+    }
+  }
+
+  function resolveAutoHints(cm, pos) {
+    var helpers = cm.getHelpers(pos, "hint"), words
+    if (helpers.length) {
+      var resolved = function (cm, callback, options) {
+        var app = applicableHelpers(cm, helpers);
+
+        function run(i) {
+          if (i == app.length) return callback(null)
+          fetchHints(app[i], cm, options, function (result) {
+            if (result && result.list.length > 0) callback(result)
+            else run(i + 1)
+          })
+        }
+
+        run(0)
+      }
+      resolved.async = true
+      resolved.supportsSelection = true
+      return resolved
+    } else if (words = cm.getHelper(cm.getCursor(), "hintWords")) {
+      return function (cm) {
+        return CodeMirror.hint.fromList(cm, {words: words})
+      }
+    } else if (CodeMirror.hint.anyword) {
+      return function (cm, options) {
+        return CodeMirror.hint.anyword(cm, options)
+      }
+    } else {
+      return function () {
+      }
+    }
+  }
+
+  CodeMirror.registerHelper("hint", "auto", {
+    resolve: resolveAutoHints
+  });
+
+  CodeMirror.registerHelper("hint", "fromList", function (cm, options) {
+    var cur = cm.getCursor(), token = cm.getTokenAt(cur)
+    var term, from = CodeMirror.Pos(cur.line, token.start), to = cur
+    if (token.start < cur.ch && /\w/.test(token.string.charAt(cur.ch - token.start - 1))) {
+      term = token.string.substr(0, cur.ch - token.start)
+    } else {
+      term = ""
+      from = cur
+    }
+    var found = [];
+    for (var i = 0; i < options.words.length; i++) {
+      var word = options.words[i];
+      if (word.slice(0, term.length) == term)
+        found.push(word);
+    }
+
+    if (found.length) return {list: found, from: from, to: to};
+  });
+
+  CodeMirror.commands.autocomplete = CodeMirror.showHint;
+
+  var defaultOptions = {
+    hint: CodeMirror.hint.auto,
+    completeSingle: true,
+    alignWithWord: true,
+    closeCharacters: /[\s()\[\]{};:>,]/,
+    closeOnPick: true,
+    closeOnUnfocus: true,
+    updateOnCursorActivity: true,
+    completeOnSingleClick: true,
+    container: null,
+    customKeys: null,
+    extraKeys: null,
+    paddingForScrollbar: true,
+    moveOnOverlap: true,
+  };
+
+  CodeMirror.defineOption("hintOptions", null);
+}
--- a/src/components/advancedSearch/showhint/TextSearch/sql-hint.js
+++ b/src/components/advancedSearch/showhint/TextSearch/sql-hint.js
@@ -0,0 +1,372 @@
+import {cloneDeep} from 'lodash'
+import {matchMain} from './matchRelatedInfo'
+
+export default function (CodeMirror,
+                         {
+                           dataset,
+                           hinthook,     //生成提示的hook 拦截
+                           keywordshook  //关键字hook  在关键字里面
+                         }
+) {
+  // "use strict";
+
+  var tables;
+  var defaultTable;
+  var keywords;
+  var identifierQuote;
+  var CONS = {
+    QUERY_DIV: ";",
+    ALIAS_KEYWORD: "AS"
+  };
+  var Pos = CodeMirror.Pos, cmpPos = CodeMirror.cmpPos;
+
+  function isArray(val) {
+    return Object.prototype.toString.call(val) == "[object Array]"
+  }
+
+  function getKeywords(editor) {
+    var mode = editor.doc.modeOption;
+    if (mode === "sql") mode = "text/x-sql";
+    keywords = CodeMirror.resolveMode(mode).keywords;
+    if (keywordshook) {
+      keywords = keywordshook(keywords, CodeMirror.resolveMode(mode)) || keywords
+    }
+    return keywords
+  }
+
+  function getIdentifierQuote(editor) {
+    var mode = editor.doc.modeOption;
+    if (mode === "sql") mode = "text/x-sql";
+    return CodeMirror.resolveMode(mode).identifierQuote || "`";
+  }
+
+  function getText(item) {
+    return typeof item == "string" ? item : item.text;
+  }
+
+  function wrapTable(name, value) {
+    if (isArray(value)) value = {columns: value}
+    if (!value.text) value.text = name
+    return value
+  }
+
+  function parseTables(input) {
+    //table 名称变大写 统一变成对象格式 columns text
+    var result = {}
+    if (isArray(input)) {
+      for (var i = input.length - 1; i >= 0; i--) {
+        var item = input[i]
+        result[getText(item).toUpperCase()] = wrapTable(getText(item), item)
+      }
+    } else if (input) {
+      for (var name in input)
+        result[name.toUpperCase()] = wrapTable(name, input[name])
+    }
+    return result
+  }
+
+  function getTable(name) {
+    return tables[name.toUpperCase()]
+  }
+
+  function shallowClone(object) {
+    var result = {};
+    for (var key in object) if (object.hasOwnProperty(key))
+      result[key] = object[key];
+    return result;
+  }
+
+  function match(string, word) {
+    var len = string.length;
+    var sub = getText(word).substr(0, len);
+    return string.toUpperCase() === sub.toUpperCase();
+  }
+
+  function addMatches(result, search, wordlist, formatter) {
+    if (isArray(wordlist)) {
+      for (var i = 0; i < wordlist.length; i++)
+        if (match(search, wordlist[i])) result.push(formatter(wordlist[i]))
+    } else {
+      for (var word in wordlist) if (wordlist.hasOwnProperty(word)) {
+        var val = wordlist[word]
+        if (!val || val === true)
+          val = word
+        else
+          val = val.displayText ? {text: val.text, displayText: val.displayText} : val.text
+        if (match(search, val)) result.push(formatter(val))
+      }
+    }
+  }
+
+  function cleanName(name) {
+    // Get rid name from identifierQuote and preceding dot(.)
+    if (name.charAt(0) == ".") {
+      name = name.substr(1);
+    }
+    // replace duplicated identifierQuotes with single identifierQuotes
+    // and remove single identifierQuotes
+    var nameParts = name.split(identifierQuote + identifierQuote);
+    for (var i = 0; i < nameParts.length; i++)
+      nameParts[i] = nameParts[i].replace(new RegExp(identifierQuote, "g"), "");
+    return nameParts.join(identifierQuote);
+  }
+
+  function insertIdentifierQuotes(name) {
+    var nameParts = getText(name).split(".");
+    for (var i = 0; i < nameParts.length; i++)
+      nameParts[i] = identifierQuote +
+        // duplicate identifierQuotes
+        nameParts[i].replace(new RegExp(identifierQuote, "g"), identifierQuote + identifierQuote) +
+        identifierQuote;
+    var escaped = nameParts.join(".");
+    if (typeof name == "string") return escaped;
+    name = shallowClone(name);
+    name.text = escaped;
+    return name;
+  }
+
+  function getLeftpart(cur, token, result, editor) {
+    var nameParts = [];
+    var start = token.start;
+    var cont = true;
+    while (cont) {
+      //全是空格  或者  是操作符 就接着往前找
+      cont = ((token.type === 'operator' || token.string.match(/^[ ]*$/)) && start !== 0);
+      start = token.start;
+      nameParts.unshift(token.string);
+      token = editor.getTokenAt(Pos(cur.line, token.start));
+      if (token.type === 'operator') {
+        cont = true;
+        token = editor.getTokenAt(Pos(cur.line, token.start));
+      }
+    }
+
+    return nameParts[0]
+  }
+
+  function isRightpart(cur, token, result, editor) {
+    token = editor.getTokenAt(Pos(cur.line, token.start));
+    return token.type === 'operator'
+  }
+
+  function nameCompletion(cur, token, result, editor) {
+    // Try to complete table, column names and return start position of completion
+    var useIdentifierQuotes = false;
+    var nameParts = [];
+    var start = token.start;
+    var cont = true;
+    while (cont) {
+      cont = (token.string.charAt(0) == ".");
+      useIdentifierQuotes = useIdentifierQuotes || (token.string.charAt(0) == identifierQuote);
+
+      start = token.start;
+      nameParts.unshift(cleanName(token.string));
+
+      token = editor.getTokenAt(Pos(cur.line, token.start));
+      if (token.string == ".") {
+        cont = true;
+        token = editor.getTokenAt(Pos(cur.line, token.start));
+      }
+    }
+
+    // Try to complete table names
+    var string = nameParts.join(".");
+    addMatches(result, string, tables, function (w) {
+      return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
+    });
+
+    // Try to complete columns from defaultTable
+    addMatches(result, string, defaultTable, function (w) {
+      return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
+    });
+
+    // Try to complete columns
+    string = nameParts.pop();
+    var table = nameParts.join(".");
+
+    var alias = false;
+    var aliasTable = table;
+    // Check if table is available. If not, find table by Alias
+    if (!getTable(table)) {
+      var oldTable = table;
+      table = findTableByAlias(table, editor);
+      if (table !== oldTable) alias = true;
+    }
+
+    var columns = getTable(table);
+    if (columns && columns.columns)
+      columns = columns.columns;
+
+    if (columns) {
+      addMatches(result, string, columns, function (w) {
+        var tableInsert = table;
+        if (alias == true) tableInsert = aliasTable;
+        if (typeof w == "string") {
+          w = tableInsert + "." + w;
+        } else {
+          w = shallowClone(w);
+          w.text = tableInsert + "." + w.text;
+        }
+        return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
+      });
+    }
+    return start;
+  }
+
+  function eachWord(lineText, f) {
+    var words = lineText.split(/\s+/)
+    for (var i = 0; i < words.length; i++)
+      if (words[i]) f(words[i].replace(/[`,;]/g, ''))
+  }
+
+  function findTableByAlias(alias, editor) {
+    var doc = editor.doc;
+    var fullQuery = doc.getValue();
+    var aliasUpperCase = alias.toUpperCase();
+    var previousWord = "";
+    var table = "";
+    var separator = [];
+    var validRange = {
+      start: Pos(0, 0),
+      end: Pos(editor.lastLine(), editor.getLineHandle(editor.lastLine()).length)
+    };
+
+    //add separator
+    var indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV);
+    while (indexOfSeparator != -1) {
+      separator.push(doc.posFromIndex(indexOfSeparator));
+      indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV, indexOfSeparator + 1);
+    }
+    separator.unshift(Pos(0, 0));
+    separator.push(Pos(editor.lastLine(), editor.getLineHandle(editor.lastLine()).text.length));
+
+    //find valid range
+    var prevItem = null;
+    var current = editor.getCursor()
+    for (var i = 0; i < separator.length; i++) {
+      if ((prevItem == null || cmpPos(current, prevItem) > 0) && cmpPos(current, separator[i]) <= 0) {
+        validRange = {start: prevItem, end: separator[i]};
+        break;
+      }
+      prevItem = separator[i];
+    }
+
+    if (validRange.start) {
+      var query = doc.getRange(validRange.start, validRange.end, false);
+
+      for (var i = 0; i < query.length; i++) {
+        var lineText = query[i];
+        eachWord(lineText, function (word) {
+          var wordUpperCase = word.toUpperCase();
+          if (wordUpperCase === aliasUpperCase && getTable(previousWord))
+            table = previousWord;
+          if (wordUpperCase !== CONS.ALIAS_KEYWORD)
+            previousWord = word;
+        });
+        if (table) break;
+      }
+    }
+    return table;
+  }
+
+  CodeMirror.registerHelper("hint", "sql", function (editor, options) {
+    tables = parseTables(options && options.tables);
+    var defaultTableName = options && options.defaultTable;   //默认table 名称
+    var disableKeywords = options && options.disableKeywords;  //禁用的keyword
+    defaultTable = defaultTableName && getTable(defaultTableName);
+    keywords = getKeywords(editor);           //获取 定义defineMIME 时候的关键字参数
+    identifierQuote = getIdentifierQuote(editor);   //获取 引用标识符
+
+    if (defaultTableName && !defaultTable)
+      defaultTable = findTableByAlias(defaultTableName, editor);
+
+    defaultTable = defaultTable || [];
+
+    if (defaultTable.columns)
+      defaultTable = defaultTable.columns;
+
+    var cur = editor.getCursor(); //line  当前行 ch 索引 sticky ??
+    var result = [];
+    var token = editor.getTokenAt(cur), start, end, search;
+    if (token.end > cur.ch) {
+      token.end = cur.ch;
+      token.string = token.string.slice(0, cur.ch - token.start);
+    }
+
+    //start end search 赋值
+    // todo 此处允许字符串包含 .
+    // if (token.string.match(/^[.`"'\w@][\w$#]*/g)) {
+    if (token.string.match(/^[.`"'\w@][\w#]*/g)) {
+      search = token.string;
+      start = token.start;
+      end = token.end;
+    } else {
+      start = end = cur.ch;
+      search = "";
+    }
+
+    //对引用标识符 . 的使用,关联table 列
+    if (search.charAt(0) == "." || search.charAt(0) == identifierQuote) {
+      start = nameCompletion(cur, token, result, editor);
+    } else {
+      var objectOrClass = function (w, className) {
+        if (typeof w === "object") {
+          w.className = className;
+        } else {
+          w = {text: w, className: className};
+        }
+        return w;
+      };
+      addMatches(result, search, defaultTable, function (w) {
+        return objectOrClass(w, "CodeMirror-hint-table CodeMirror-hint-default-table");
+      });
+      addMatches(
+        result,
+        search,
+        tables, function (w) {
+          return objectOrClass(w, "CodeMirror-hint-table");
+        }
+      );
+      if (!disableKeywords)
+        addMatches(result, search, keywords, function (w) {
+          return objectOrClass(w.toUpperCase(), "CodeMirror-hint-keyword");
+        });
+    }
+    //写入一个 钩子,在这里决定提示的内容
+    if (hinthook) {
+      var params = {
+        search, //搜索 关键字
+        keywords, //关键字列表
+      };
+      if (token.type === 'operator') {
+        params.leftpart = getLeftpart(cur, token, result, editor) || ''
+      }
+      if (isRightpart(cur, token, result, editor)) {
+        params.rightpart = token.string
+      }
+
+      /* 之后的参数 是为manualHinthook 预备的 */
+
+      var manualParams = {
+        search, //搜索 关键字
+        // keywords, //关键字列表  没啥用
+        from: Pos(cur.line, start),
+        to: Pos(cur.line, end),
+        leftpart: getLeftpart(cur, token, result, editor) || '',
+        rightpart: params.rightpart,
+        list: cloneDeep(result),
+        editor,
+        token,
+        cur
+      }
+
+      var refField = matchMain(CodeMirror, params, manualParams);
+      manualParams.refField = refField
+      manualParams.leftpart = refField?.label || manualParams.leftpart;
+      params.leftpart = refField?.label || params.leftpart;
+
+      result = hinthook(result, params, manualParams) || result
+    }
+    return {list: result, from: Pos(cur.line, start), to: Pos(cur.line, end)};
+  });
+}
--- a/src/components/advancedSearch/showhint/TextSearch/sql.js
+++ b/src/components/advancedSearch/showhint/TextSearch/sql.js
--- a/src/components/advancedSearch/showhint/const/defaultTips.js
+++ b/src/components/advancedSearch/showhint/const/defaultTips.js
@@ -0,0 +1,70 @@
+export default {
+  enDefault: {
+    description () {
+      return (<div className='default-tips'>
+        <div class='default-tips-header'>How To Search</div>
+        <p class='show-hint-tips__p'> You can write queries to retrieve entities, including their basic information, activity levels, network performance, threat events, relationships with other entities, and so on. A query has three basic parts: fields, operators, and values.</p>
+        <code>[Field + operator + value] keyword [operator(Field)]</code>
+        <ul style="padding: 0">
+          <li className='show-hint-tips__p'>Field - Fields are different types of traffic attributes in the system.
+            Fields include ip, domain, app, and so on.
+          </li>
+          <li className='show-hint-tips__p'>Operator - Operators are the foundation of the query. They relate the field
+            to the value and build a query condition. Common operators include =, IN, Like, and so on.
+          </li>
+          <li className='show-hint-tips__p'>Value - Values are the actual data in the query.</li>
+          <p className='show-hint-tips__p'>Use the percent(%) wildcard substitutes for one or more characters in a
+            string. Such as: </p>
+          <code>domain like '%google.com'</code>
+          <p className='show-hint-tips__p'>Strings containing spaces must be enclosed in single quotes ('). Such as:</p>
+          <code>ip=192.168.10.53</code>
+          <code>ip.country='United States'</code>
+          <li className='show-hint-tips__p'>Keyword - Keywords are specific words in the query. You can specify the AND
+            and OR to create more complex query conditions.
+          </li>
+          <p className='show-hint-tips__p'>Currently only support AND.</p>
+        </ul>
+        <p class='show-hint-tips__p'>There are two input modes, which can be switched by clicking the button on the right side of the input box.</p>
+
+        <div class='default-tips-title'> 1. Text Mode</div>
+        <p class='show-hint-tips__p'>In text mode, you will write your query with the help of input suggestions.</p>
+
+        <div class='default-tips-title'> 2. Tag Mode </div>
+        <p class='show-hint-tips__p'>In tag mode, you will be guided through preset steps to write a query.</p>
+      </div>)
+    }
+  },
+  zhDefault: {
+    description () {
+      return (<div className='default-tips'>
+        <div class='default-tips-header'>如何搜索</div>
+        <p class='show-hint-tips__p'>您可以编写查询来检索实体。查询具有三个基本部分：字段、运算符和值。</p>
+        <code>[字段 + 运算符 + 值]  关键字  [运算符(字段)]</code>
+        <ul style="padding: 0">
+          <li className='show-hint-tips__p'>字段 - 字段是系统中不同类型的属性。字段包括 ip、domain、app 等。</li>
+          <li className='show-hint-tips__p'>运算符 - 运算符是查询的基础。他们将字段与值相关联并构建查询条件。常见的运算符包括
+            =、IN、Like 等。
+          </li>
+          <li className='show-hint-tips__p'>值 - 值是查询中的实际数据。</li>
+          <p className='show-hint-tips__p'>使用百分号(%)通配符替换字符串中的一个或多个字符。例如：</p>
+          <code>domain like '%google.com'</code>
+          <p className='show-hint-tips__p'>包含空格的字符串必须用单引号(')括住。例如：</p>
+          <code>ip=192.168.10.53</code>
+          <code>ip.country='United States'</code>
+          <li className='show-hint-tips__p'>关键字 - 关键字是查询中的特定单词。您可以指定 AND 和 OR
+            来创建更复杂的查询条件。
+          </li>
+          <p className='show-hint-tips__p'>暂时只支持AND。</p>
+        </ul>
+
+        <p class='show-hint-tips__p'>有两种输入模式，通过点击输入框右侧的按钮进行切换。</p>
+
+        <div class='default-tips-title'> 1. 文本模式</div>
+        <p class='show-hint-tips__p'>文本模式中，您将在输入建议的帮助下编写查询语句。</p>
+
+        <div class='default-tips-title'> 2. 标签模式 </div>
+        <p class='show-hint-tips__p'>标签模式中，您将在引导下按预设好的步骤编写查询。</p>
+      </div>)
+    }
+  }
+}
--- a/src/components/advancedSearch/showhint/const/fieldTips.js
+++ b/src/components/advancedSearch/showhint/const/fieldTips.js
@@ -0,0 +1,26 @@
+import i18n from '@/i18n'
+export function fieldRender (h, { fieldInfo = {}, funcReference = [], operatorReference = [], operates = [], funs = [] }) {
+  return (<div className='field-tips'>
+    <div class='default-tips-header'>{fieldInfo.label}</div>
+    <p class='show-hint-tips__p'> {i18n.global.t('overall.name')}: {fieldInfo.name}</p>
+    <p class='show-hint-tips__p'> {i18n.global.t('overall.type')}: {typeof fieldInfo.type === 'object' ? fieldInfo.type.type : fieldInfo.type} </p>
+    <p class='show-hint-tips__p'> {i18n.global.t('overall.operators')}: {operates.join(',')} </p>
+    {/* <p> Function: {funs.join(',')} </p> */}
+    <p> {fieldInfo.options && (
+      'Options: ' + fieldInfo.options.map(item => {
+        return `${item.displayText}(${item.text})`
+      }).join(',')
+    )} </p>
+
+    <div class='default-tips-header'>{i18n.global.t('overall.enableOperators')}</div>
+    {/* 提示超过一屏幕  明显不合理 --- 换成简单形式  */}
+    <ul style="padding-left: 0;margin: 12px 0;">
+      {operatorReference.map(item => {
+        return <li>
+          <span>{item.name}</span>
+          <code> {item.function} </code>
+        </li>
+      })}
+    </ul>
+  </div>)
+}
--- a/src/components/advancedSearch/showhint/const/filterTips.js
+++ b/src/components/advancedSearch/showhint/const/filterTips.js
@@ -0,0 +1,109 @@
+import i18n from '@/i18n'
+import { EN, storageKey, ZH } from '@/utils/constants'
+
+export const helpInfo = [
+  {
+    operator: 'AND',
+    zhDescribe: '搜索包含所有搜索字段的实体。',
+    enDescribe: 'Search entities that contain all the search fields. ',
+    example: [
+      "ip = '192.168.10.53' AND domain = 'google.com'",
+      "domain = 'google.com' AND app = 'google'"
+    ]
+  }
+  // {
+  //   // operator: '= , !=',
+  //   operator: ' = ',
+  //   describe: 'Search logs that do EQUALS or NOT EQUALS the search value. ',
+  //   example: [
+  //     "Client IP = '192.168.10.53'  "
+  //     // 'Server Port != 443'
+  //   ]
+  // },
+  // {
+  //   operator: '> , < , >= , <=',
+  //   describe: 'Search logs greater than and equal or less than and equal a value , or whtin a range. This operator can‘t be used with string fields.  ',
+  //   example: [
+  //     'Bytes Sent >= 751',
+  //     'Bytes Sent >= 751 and  Bytes Sent <= 1024'
+  //   ]
+  // },
+  // {
+  //   operator: ' LIKE ',
+  //   // operator: 'LIKE , NOT LIKE',
+  //   describe: 'You can use wildcard searches for value that contain or not contain search fields. Using percent (%) wildcard substitutes for one or more characters in a string. Using underscore (_) wildcard substitutes for exactly one character in a string. ',
+  //   example: [
+  //     "SSL.SNI LIKE  '%google.com' ",
+  //     "Client IP LIKE '192.168.10.1_'"
+  //     // "SSL.SNI NOT LIKE '%google.com'",
+  //     // "Client IP NOT LIKE '192.168%'"
+  //   ]
+  // },
+  // {
+  //   operator: ' IN ',
+  //   // operator: 'IN , NOT IN',
+  //   describe: 'Specify or exclude multiple values for search fields. IN IN condition you can use when you need to use multiple OR condition. ',
+  //   example: [
+  //     "l7 Protocol IN ('HTTP', 'HTTPS')"
+  //     // 'Server Port NOT IN (443,80)'
+  //   ]
+  // },
+  // {
+  //   operator: 'EMPTY , NOT EMPTY',
+  //   describe: 'Specify or exclude empty value for search fields. A string or array is considered non-empty if it contains at least one byte, even if this is a space or a null byte. ',
+  //   example: [
+  //     'NOT EMPTY(SSL.SNI)',
+  //     'EMPTY(Application Label)'
+  //   ]
+  // },
+  // {
+  //   operator: 'HAS',
+  //   describe: 'Search logs that has element value for array type. Example:',
+  //   example: [
+  //     'HAS(FQDN Category, music)'
+  //   ]
+  // }
+  // {
+  //   operator: 'bitAnd',
+  //   describe: 'A bitwise And(&) is a binary operation that compares each bit of the first operand to the corresponding bit of the second operand. Both expressions must have integral types. Examples:',
+  //   example: [
+  //     'bitAnd(Flags, Asymmetric|Download) = Asymmetric|Download',
+  //     'bitAnd(Flags, Asymmetric|Download) >0'
+  //   ]
+  // }
+]
+const renderData = [
+  helpInfo[0]
+]
+export const filterList = renderData
+function main () {
+  const sqlTips = {}
+  const language = localStorage.getItem(storageKey.language) || EN
+  renderData.forEach((item, index) => {
+    const data = item // 这是个闭包
+    sqlTips[item.operator] = {
+      name: item.operator,
+      // syntax: item.syntax,
+      type: 'filter',
+      description () {
+        return (<div className='filter-tips'>
+          <div class='default-tips-header'>{data.operator}</div>
+          <div class='default-tips-title'> {i18n.global.t('overall.remark')}: </div>
+          <p class='show-hint-tips__p'> {language === ZH ? data.zhDescribe : data.enDescribe}</p>
+          <div class='default-tips-title'>{i18n.global.t('overall.examples')}:</div>
+          <ul style="padding-left: 0;">
+            {item.example.map(v => {
+              return <li>
+                <code>{v}</code>
+              </li>
+            })}
+          </ul>
+        </div>)
+      }
+    }
+  })
+  return sqlTips
+}
+
+const filterTips = main()
+export default filterTips
--- a/src/components/advancedSearch/showhint/const/functionTips.js
+++ b/src/components/advancedSearch/showhint/const/functionTips.js
@@ -0,0 +1,341 @@
+var renderData = [
+  {
+    name: 'COUNT',
+    syntax: 'count(expr)',
+    description: 'Aggregate function is used to count the number of rows',
+    example: [
+      {
+        purpose: 'Total count of all logs :',
+        code: 'count(*)'
+      },
+      {
+        purpose: 'Counts  the occurrences of a  Client IP :',
+        code: 'count(client_ip)'
+      }
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>
+        You can use COUNT function by count(*), count(1) or count(field). But there are something difference:
+        <ul>
+          <li>count(*) and count(1) will count all the rows in the table, including NULL values.</li>
+          <li>count(field) will count all the rows in the specified field while excluding NULL values.</li>
+        </ul>
+      </div>
+    }
+  },
+  {
+    name: 'COUNT_DISTINCT',
+    syntax: 'count(distinct expr)',
+    description: 'Aggregate function is used to count only distinct(unique) rows in the specified field',
+    example: [
+      {
+        purpose: 'Counts the number of different Client IP :',
+        code: 'count(distinct client_ip)'
+      },
+      {
+        purpose: `Counts  the number of different "Server IP" and "Server port" :`,
+        code: 'count(distinct server_ip, server_port)'
+      }
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>The COUNT DISTINCT function returns the number of unique values in the field or multiple fields.
+        System will uses an adaptive sampling algorithm to perform fast count distinct operations.</div>
+    }
+  },
+  {
+    name: 'AVG',
+    syntax: 'avg(expr)',
+    description: 'Aggregate function is used to calculate the arithmetic mean in the specified field. EXPR must be Integer,Float or Decimal and returned value as Float.',
+    example: [
+      {
+        purpose: `Calculates the average(mean) "Byte sent (sent_bytes)" field:`,
+        code: 'avg(sent_bytes)'
+      },
+      {
+        purpose: `Calculates the average(mean) "Bytes" , rounded to 2 decimal points:`,
+        code: 'round(avg(sent_bytes+received_bytes),2)'
+      }
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>You can use ROUND(expr[,decimal_places]) or FLOOR(expr[,decimal_places]) function that rounds or
+        floors a value to a specified number of decimal places.</div>
+    }
+  },
+  {
+    name: 'SUM',
+    syntax: 'sum(expr)',
+    description: 'Aggregate function is used to sum of the values of the specified field. EXPR must be Integer,Float or Decimal.',
+    example: [
+      {
+        purpose: `The sum of the "Byte sent (sent_bytes)" field:`,
+        code: 'sum(sent_bytes)'
+      },
+      {
+        purpose: `The sum of the "sent_bytes" and "received_bytes" fields , and rename as "Bytes ":`,
+        code: 'sum(sent_bytes+received_bytes) as Bytes'
+      }
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>You can rename the field using the AS keyword.</div>
+    }
+  },
+  {
+    name: 'MAX',
+    syntax: 'max(expr)',
+    description: 'Aggregate function is used to return the maximum value of the specified field.',
+    example: [
+      {
+        purpose: `Returns the maximum value of  the  "Byte sent (sent_bytes)" field:`,
+        code: 'max(sent_bytes)'
+      }
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>The <b>MAX</b> aggregate function can also be used with the DateTime data type, where it will sort the
+        DateTime values and return the last value from the sorted logs.</div>
+    }
+  },
+  {
+    name: 'MIN',
+    syntax: 'min(expr)',
+    description: 'Aggregate function is used to return the minimum value of the specified field.',
+    example: [
+      {
+        purpose: `Returns the minimum value of  the  "Byte sent (sent_bytes)" field:`,
+        code: 'min(sent_bytes)'
+      }
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>The MIN aggregate function can also be used with the DateTime data type, where it will sort the
+        DateTime values and return the minimum value from the sorted logs.</div>
+    }
+  },
+  {
+    name: 'TIME_FLOOR_WITH_FILL',
+    syntax: 'TIME_FLOOR_WITH_FILL(<timestamp_expr>, <period>[,<fill>])',
+    description: 'Rounds down a timestamp, returning it as a new timestamp,optionally from some reference fill, and fills time gaps and impute missing values.',
+    example: [
+      {
+        purpose: `Round the recv_time  down to a 5 minutes increment and fill time gaps and impute zero value.`,
+        code: 'TIME_FLOOR_WITH_FILL(recv_time,\'PT5M\',\'zero\')'
+      }
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>
+        <p>The TIME_FLOOR_WITH_FILL function as Timeseries granularity is used for time-based grouping.</p>
+        <ul>
+          <li> timestamp_expr - Unix Timestamp field</li>
+          <li>period - can be any ISO8601 period, like P3M (quarters) or PT12H (half-days)</li>
+          <li>
+            <span>fill - optionnal. Includes none, null, zero, previous, next value.</span>
+            <ul class="sub-url">
+              <li>none: empty string ""</li>
+              <li>null："NULL" expression</li>
+              <li>zero：zero "0"</li>
+              <li>previous：previous value</li>
+              <li>next：next value</li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    }
+  },
+  {
+    name: 'UNIX_TIMESTAMP',
+    syntax: `UNIX_TIMESTAMP(date)`,
+    description: `Returns a Unix timestamp the value of the argument as seconds since '1970-01-01 00:00:00' UTC.`,
+    example: [
+      {
+        purpose: `Specify a datetime string "2019-06-06 19:11:12",  calculate the Unix timestamp:`,
+        code: 'UNIX_TIMESTAMP(\'2019-06-06 19:11:12\')'
+      },
+      {
+        purpose: `Specify a ISO8601 datetime string with time zone information  "2019-10-12T14:20:50+08:00",  calculate the Unix timestamp:`,
+        code: 'UNIX_TIMESTAMP(\'2019-10-12T14:20:50+08:00\')'
+      },
+      {
+        purpose: `Specify a ISO8601 datetime string with UTC+0 time zone information  "2019-10-12T14:20:50Z",  calculate the Unix timestamp:`,
+        code: 'UNIX_TIMESTAMP(\'2019-10-12T14:20:50Z\')'
+      },
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>
+        <p>The date argument may be a DATE, DATETIME or TIMESTAMP string, or a number in YYMMDD, YYMMDDhhmmss, YYYYMMDD,
+          or YYYYMMDDhhmmss format.</p>
+        <ul>
+          <li> Standard datetime string(UTC+0) : UNIX_TIMESTAMP('2019-06-06 19:11:12')</li>
+          <li>ISO8601 datetime string：UNIX_TIMESTAMP('2019-10-12T14:20:50Z') or
+            UNIX_TIMESTAMP('2019-10-12T14:20:50+08:00')
+          </li>
+          <li>Date: UNIX_TIMESTAMP(DATE('2019-06-06 19:11:12'))</li>
+        </ul>
+      </div>
+    }
+  },
+  {
+    name: 'FROM_UNIXTIME',
+    syntax: `FROM_UNIXTIME(unix_timestamp)`,
+    description: `Returns a representation of unix_timestamp as a datetime or character string value. The value returned is expressed using the UTC+0 time zone.`,
+    example: [
+      {
+        purpose: `Specify a Unix Timestamp  "1570881546",  calculate the datetime string:`,
+        code: 'FROM_UNIXTIME(1570881546)'
+      },
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>The unix_timestamp is an internal timestamp value representing seconds since '1970-01-01 00:00:00'
+        UTC.</div>
+    }
+  },
+  {
+    name: 'DATE_FORMAT',
+    syntax: 'DATE_FORMAT(date, format)',
+    description: `Formats the date value according to the format string.`,
+    example: [
+      {
+        purpose: `Specify a Unix Timestamp  "1570881546", calculate the datetime string with format "%Y-%m-%d %H:%i:%s":`,
+        code: 'DATE_FORMAT(FROM_UNIXTIME(1570881546), \'%Y-%m-%d %H:%i:%s\')'
+      }
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>
+        <p>The DATE_FORMAT function accepts two parameters as given below :</p>
+        <ul>
+          <li>date – Specified date to be formatted.</li>
+          <li>
+            <span>format – Specified format. This list of formats used in this function are listed below:</span>
+            <ul class="sub-url">
+              <li>%Y - Year, numeric, four digits</li>
+              <li>%y - Year, numeric (two digits)</li>
+              <li>%M - Month name (January..December)</li>
+              <li>%m - Month, numeric (00..12)</li>
+              <li>%D - Day of the month with English suffix (0th, 1st, 2nd, 3rd, …)</li>
+              <li>%d - Day of the month, numeric (00..31)</li>
+              <li>%H - Hour (00..23)</li>
+              <li>%h - Hour (01..12)</li>
+              <li>%i - Minutes, numeric (00..59)</li>
+              <li>%s - Seconds (00..59)</li>
+              <li>%w - Day of the week (0=Sunday..6=Saturday)</li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    }
+  },
+  {
+    name: 'CONVERT_TZ',
+    syntax: `CONVERT_TZ(dt, from_tz, to_tz)`,
+    description: `Converts a datetime value dt from the time zone given by from_tz to the time zone given by to_tz and returns the resulting value.`,
+    example: [
+      {
+        purpose: `Specify a datetime string "2021-11-11 00:00:00", converted from  GMT(Greenwich Mean Time) to Asia/Shanghai time zone:`,
+        code: 'CONVERT_TZ(\'2021-11-11 00:00:00\',\'GMT\',\'Asia/Shanghai\')'
+      },
+      {
+        purpose: `Specify a Unix timestamp "1636588800", converted from  GMT(Greenwich Mean Time) to Asia/Shanghai time zone:`,
+        code: 'CONVERT_TZ(FROM_UNIXTIME(1636588800),\'GMT\',\'Asia/Shanghai\')'
+      },
+      {
+        purpose: `Specify a Unix timestamp "1636588800", converted from  Europe/London to America/New_York time zone:`,
+        code: 'CONVERT_TZ(DATE_FORMAT(FROM_UNIXTIME(1636588800), \'%Y-%m-%d %H:%i:%s\'),\'Europe/London\',\'America/New_York\')'
+      },
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>
+        <p>The CONVERT_TZ function accepts a three-parameter:</p>
+        <ul>
+          <li>dt - The given DateTime which we want to convert.</li>
+          <li>from_tz - The time zone from which we want to convert DateTime.</li>
+          <li>to_tz - The time zone in which we want to convert DateTime.</li>
+        </ul>
+      </div>
+    }
+  },
+  {
+    name: 'MEDIAN',
+    syntax: `MEDIAN(<expr>)`,
+    description: `Aggregate function is used to calculate median value. expr must be Integer, Float or Decimal.`,
+    example: [
+      {
+        purpose: `Calculates the median "TCP Handshake Latency (tcp_handshake_latency_ms)" field:`,
+        code: 'MEDIAN(tcp_handshake_latency_ms)'
+      }
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>In Traffic logs analysis, the function can be useful in calculating the median of certain numbers,
+        e.g. median SSL Handshake Latency or TCP Handshake Latency.</div>
+    }
+  },
+  {
+    name: 'QUANTILE',
+    syntax: `QUANTILE(<expr>[, <level>])`,
+    description: `Aggregate function is used to calculate an approximate quantile of a numeric data sequence.`,
+    example: [
+      {
+        purpose: `Calculates the  90th percentile  "TCP Handshake Latency (tcp_handshake_latency_ms)" field:`,
+        code: 'QUANTILE(tcp_handshake_latency_ms, 0.9)'
+      }
+    ],
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>
+        <p>The QUANTILE function accepts a two-parameter:</p>
+        <ul>
+          <li>expr - The column values resulting in integer, Flot or Decimal.</li>
+          <li>level - Level of quantile. Optional parameter. Constant floating-point number from 0 to 1. We recommend
+            using a level value in the range of [0.01, 0.99]. Default value is 0.5. At level=0.5 the function calculates
+            MEDIAN.
+          </li>
+        </ul>
+      </div>
+    }
+  },
+]
+
+function main () {
+  var functionTips = {}
+  renderData.forEach((item, index) => {
+    var data = item // 这是个闭包
+    functionTips[item.name] = {
+      name: item.name,
+      syntax: item.syntax,
+      type: 'Function',
+      description () {
+        return (<div className="function-tips">
+          <h2>{data.name}</h2>
+          <h3>Syntax:<span>{data.syntax}</span></h3>
+          <h3> Description: </h3>
+          <p> {data.description}</p>
+          <h3>Examples:</h3>
+          <ul>
+            {item.example.map(v => {
+              return <li>
+                <span>{v.purpose}</span>
+                <code>{v.code}</code>
+              </li>
+            })}
+          </ul>
+          <h3> Details: </h3>
+          {Object.prototype.toString.call(data.details) === '[object Function]' ?
+            <renderer renderFun={data.details}></renderer> : <p>{data.details} </p>}
+        </div>)
+      }
+    }
+  })
+  return functionTips
+}
+
+export const functionList = renderData
+var functionTips = main()
+export default functionTips
--- a/src/components/advancedSearch/showhint/const/operatorTips.js
+++ b/src/components/advancedSearch/showhint/const/operatorTips.js
@@ -0,0 +1,111 @@
+import i18n from '@/i18n'
+import { EN, storageKey, ZH } from '@/utils/constants'
+
+const renderData = [
+  {
+    name: 'EQUALS',
+    syntax: '=',
+    primaryKey: '=',
+    zhDescription: '搜索指定字段的值与指定值完全匹配的实体。',
+    enDescription: 'Search for entities where the value of a specified field exactly matches a specified value.',
+    example: [
+      {
+        zhPurpose: '通过192.168.10.53查询ip实体:',
+        enPurpose: 'Search entity of ip by 192.168.10.53:',
+        code: 'ip=\'192.168.10.53\''
+      },
+      {
+        zhPurpose: '通过google.com查询domain实体：',
+        enPurpose: 'Search entity of domain by google.com：',
+        code: 'domain=\'google.com\''
+      }
+    ]
+  },
+  {
+    name: 'IN',
+    syntax: 'in',
+    primaryKey: 'IN',
+    zhDescription: '搜索指定字段的值是多个指定值之一的实体。',
+    enDescription: 'Search for entities where the value of a specified field is one of multiple specified values.',
+    example: [
+      {
+        zhPurpose: '通过192.168.10.53 或 192.168.10.54查询ip实体：',
+        enPurpose: 'Search entity by 192.168.10.53 or 192.168.10.54：',
+        code: 'ip in (\'192.168.10.53\', \'192.168.10.54\')'
+      },
+      {
+        zhPurpose: '通过appName1 或 appName2查询app实体:',
+        enPurpose: 'Search entity by appName1 or appName2:',
+        code: 'app in (\'appName1\', \'appName2\')'
+      }
+    ]
+  },
+  {
+    name: 'LIKE',
+    syntax: 'like',
+    primaryKey: 'LIKE',
+    zhDescription: '搜索使用通配符搜索包含搜索字段的值的实体。此运算符与字符串字段一起使用。',
+    enDescription: 'Search for entities where use wildcard searches for value that contain search fields. This operator is used with array fields.',
+    example: [
+      {
+        zhPurpose: '通过google.com查询domain实体:',
+        enPurpose: 'Search entity of domain by google.com:',
+        code: 'domain like \'%google.com\''
+      },
+      {
+        zhPurpose: '通过appName查询app实体:',
+        enPurpose: 'Search entity of app by appName:',
+        code: 'app like \'%appName%\''
+      }
+    ]
+  },
+  {
+    name: 'HAS',
+    syntax: 'has',
+    primaryKey: 'HAS',
+    zhDescription: '搜索指定字段的值是指定值之一的实体。此运算符与数组字段一起使用。',
+    enDescription: 'Search for entities where the values of a specified field is one of specified value. This operator is used with array fields.',
+    example: [
+      {
+        zhPurpose: '通过ADNS查询tag实体:',
+        enPurpose: 'Search entity of tag by ADNS:',
+        code: 'has(tag,\'ADNS\')'
+      }
+    ]
+  }
+]
+export const operatorList = renderData
+
+function main () {
+  const operatorTips = {}
+  const language = localStorage.getItem(storageKey.language) || EN
+  renderData.forEach((item, index) => {
+    const data = item // 这是个闭包
+    operatorTips[item.primaryKey] = {
+      name: item.name,
+      syntax: item.syntax,
+      type: 'Operators',
+      description () {
+        return (<div className="operator-tips">
+          <div class='default-tips-header'>{data.name}</div>
+          <div class='default-tips-title'>{i18n.global.t('overall.syntax')}: <span>{data.syntax}</span></div>
+          <div class='default-tips-title'>{i18n.global.t('overall.remark')}: </div>
+          <p class='show-hint-tips__p'> {language === ZH ? data.zhDescription : data.enDescription}</p>
+          <div class='default-tips-title'>{i18n.global.t('overall.examples')}: </div>
+          <ul style="padding-left: 0;">
+            {item.example.map(v => {
+              return <li>
+                <span>{language === ZH ? v.zhPurpose : v.enPurpose}</span>
+                <code>{v.code}</code>
+              </li>
+            })}
+          </ul>
+        </div>)
+      }
+    }
+  })
+  return operatorTips
+}
+
+const operatorTips = main()
+export default operatorTips
--- a/src/components/advancedSearch/showhint/const/sqlTips.js
+++ b/src/components/advancedSearch/showhint/const/sqlTips.js
@@ -0,0 +1,97 @@
+var renderData = [
+  {
+    name: 'FROM',
+    syntax: `FROM [db.]table |$log_type`,
+    description: {
+      title: `The table name of logs. If you type $log_type, the variable value is the current table name of logs.`
+    }
+  },
+  {
+    name: 'SELECT',
+    syntax: `Optional. The selected columns(also known as dimensions and metrics).`,
+    description: {
+      title: '可选，获取列',
+      list: [
+        `aggregate_function(field) - Aggregate functions, default is count.`,
+        `as field - Use as to specify a aliases for a field or expression.`
+      ]
+    }
+  },
+  {
+    name: 'GROUP BY',
+    syntax: `GROUP BY <field-list>`,
+    description: {
+      title: 'Aggregate data. GROUP BY clause switches the SELECT query into an aggregation mode：',
+      list: [
+        `The list of fields known as "grouping key", while each individual expression be referred to as a "key expression".`,
+        `All the expressions in the SELECT, HAVING and ORDER BY , must be "key expression" or on aggregate functions.`,
+        `The result of aggregating SELECT query will return unique values of  "grouping key" in log type.`
+      ]
+    }
+  },
+  {
+    name: 'HAVING',
+    syntax: `HAVING <expression-list>`,
+    description: {
+      title: `Optional. HAVING clause filtering the aggregation results retrieved by GROUP BY. It is difference is that WHERE is performed before aggregation, while HAVING is performed after it.
+      Note: HAVING can't be performed if GROUP BY is not performed.`
+    }
+  },
+  {
+    name: 'LIMIT',
+    syntax: `LIMIT [n, ]m`,
+    description: {
+      title: `Select the m rows from the aggregate results after skipping the first n rows. Default is 10 rows.`
+    }
+  },
+  {
+    name: 'ORDER BY',
+    syntax: `ORDER BY <sort-field> [ASC|DESC]`,
+    description: {
+      title: `Sort all of the results by the specified fields.`
+    }
+  },
+  {
+    name: 'WHERE',
+    syntax: `where  $filter [and <expression-list>]`,
+    description: {
+      title: `Filter the data.`,
+      list: [
+        `$filter - Default global filter clause. Include Time period, Vsys ID, and other expressions, etc`,
+        `and <expression-list> - filter clauses`
+      ]
+    }
+  }
+]
+export const sqlList = renderData
+
+function main () {
+  var sqlTips = {}
+  renderData.forEach((item, index) => {
+    var data = item // 这是个闭包
+    sqlTips[item.name] = {
+      name: item.name,
+      syntax: item.syntax,
+      type: 'sql',
+      description () {
+        return (<div className="sql-tips">
+          <h2>{data.name}</h2>
+          <h3>Syntax: <span>{data.syntax}</span></h3>
+          <h3> Description: </h3>
+          <p> {data.description.title}</p>
+          {
+            data.description.list && <ul>
+              {data.description.list.map(v => {
+                return <li>{v} </li>
+              })}
+            </ul>
+          }
+        </div>)
+      }
+    }
+  })
+  return sqlTips
+}
+
+var sqlTips = main()
+export default sqlTips
--- a/src/components/advancedSearch/showhint/const/varTips.js
+++ b/src/components/advancedSearch/showhint/const/varTips.js
@@ -0,0 +1,48 @@
+var renderData = [
+  {
+    name: '$LOG_TYPE',
+    description: 'A variable is a symbolic representation of data that enables you to access a value without having to enter it manually wherever you need it. You can use $ to reference variables throughout Advanced Search. ',
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>
+        $log_type: The table name of logs.
+      </div>
+    }
+  },
+  {
+    name: '$FILTER',
+    description: 'A variable is a symbolic representation of data that enables you to access a value without having to enter it manually wherever you need it. You can use $ to reference variables throughout Advanced Search. ',
+    details () {
+      // 支持jsx 嵌套写法,万一测试要关键字加重呢
+      return <div>
+        $filter: The default filter clauses. such as time period, Vsys ID, and other default expressions, etc.
+      </div>
+    }
+  }
+]
+
+function main () {
+  const varTips = {}
+  renderData.forEach((item, index) => {
+    const data = item // 这是个闭包
+    varTips[item.name] = {
+      name: item.name,
+      type: 'Variables',
+      description () {
+        return (<div className="var-tips">
+          <h2>{data.name}</h2>
+          <h3> Description: </h3>
+          <p> {data.description}</p>
+          <h3> Details: </h3>
+          {Object.prototype.toString.call(data.details) === '[object Function]' ?
+            <renderer renderFun={data.details}></renderer> : <p>{data.details} </p>}
+        </div>)
+      }
+    }
+  })
+  return varTips
+}
+
+export const varList = renderData
+const varTips = main()
+export default varTips
--- a/src/components/advancedSearch/showhint/myCodeMirror.js
+++ b/src/components/advancedSearch/showhint/myCodeMirror.js
@@ -0,0 +1,129 @@
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/eclipse.css'
+import 'codemirror/mode/sql/sql'
+
+import 'codemirror/theme/ambiance.css'
+// import 'codemirror/addon/hint/show-hint.js'
+import 'codemirror/addon/hint/show-hint.css'
+import 'codemirror/addon/display/placeholder'
+
+import 'codemirror/addon/hint/anyword-hint' // 关键字
+import 'codemirror/addon/comment/comment'
+import 'codemirror/keymap/sublime'
+import 'codemirror/addon/edit/closebrackets'
+import CodeMirror from 'codemirror'
+import createMode from '@/components/advancedSearch/showhint/TextSearch/sql'
+import createHint from '@/components/advancedSearch/showhint/TextSearch/createHint'
+import { functionList } from '@/components/advancedSearch/showhint/const/functionTips'
+import { cloneDeep } from 'lodash'
+
+const codeMirrorMixins = {
+  data () {
+    return {
+      CodeMirror,
+      initData: {},
+      hintSearch: '',
+      hintList: [],
+      hintParams: {},
+      completion: null
+    }
+  },
+  methods: {
+    initShowHint () {
+      const dataset = this.dataset
+      createMode(CodeMirror, {
+        dataset,
+        modehook: this.modehook
+      })
+
+      const hintHook = this.manualHinthook
+      const vm = this
+      createHint('manual', CodeMirror, {
+        dataset,
+        hinthook: hintHook,
+        callback (completion, defaultOptions) {
+          vm.completion = completion.completion
+        },
+        keyboardUp () {
+          // 键盘向上
+          vm.hintVm?.handleUp()
+        },
+        keyboardDown () {
+          // 键盘向下
+          vm.hintVm?.handleDown()
+        },
+        keyboardEnter () {
+          if (!vm.hintVisible) {
+            return
+          }
+          // 回车  选中值
+          vm.hintVm?.triggerSelect()
+        }
+      })
+    },
+    manualHinthook (result, params, manualParams) {
+      this.hintParams = manualParams
+      this.hintSearch = manualParams.search
+
+      this.hintList = []
+      const list = this.hinthook(result, params)
+      this.hintList = cloneDeep(list)
+      return list
+    },
+    hinthook (result, { search, keywords, leftpart, rightpart }) {
+      if (leftpart) {
+        const options = this.matchOptions(leftpart)
+        if (options) {
+          return options
+        }
+      }
+      result = this.dataset.getHintList(search, null, null, this.value)
+      return result
+    },
+    matchOptions (leftpart) {
+      // 用于匹配下拉选
+
+      const fieldInfo = this.dataset.getFieldInfo(leftpart)
+      if (fieldInfo && fieldInfo.options) {
+        const options = []
+        options.push(
+          {
+            type: 'abstract',
+            text: '',
+            displayText: 'Options',
+            className: 'divider hint-title'
+          }
+        )
+        const fieldOptions = cloneDeep(fieldInfo.options)
+        // eslint-disable-next-line no-return-assign
+        fieldOptions.forEach(item => item.displayText = `${item.displayText}(${item.text})`)
+        options.push(...fieldOptions)
+        return options
+      }
+      return null
+    },
+    modehook (CodeMirror, set, { client, keywords, builtin, hookVar }) {
+      // 自定义 过滤器类型
+      const clientWords = this.dataset.getClientwords()
+      let clientWordsStr = ''
+      clientWordsStr = clientWords.join(' ')
+      const dateFuns = functionList.map(v => v.name.toLowerCase())
+      CodeMirror.defineMIME('text/x-filter', {
+        name: 'sql',
+        client: set(clientWordsStr + ' ' + client), // 客户端解析指令
+        builtin: set(builtin + ' like in not empty notempty has bitand'),
+        keywords: set(keywords + ' and or ' + dateFuns.join(' ')),
+
+        atoms: set('false true null unknown'),
+        operatorChars: /^[*+\-%<>!=&|^]/,
+        dateSQL: set('date time timestamp '),
+        support: set('ODBCdotTable doubleQuote binaryNumber hexNumber'), // 支持的数据编码  ODBC double 二进制  16进制
+        hooks: {
+          $: hookVar
+        }
+      })
+    }
+  }
+}
+
+export default codeMirrorMixins
--- a/src/components/advancedSearch/showhint/packages/getDataset.js
+++ b/src/components/advancedSearch/showhint/packages/getDataset.js
@@ -0,0 +1,288 @@
+//  改js  用户获取初始化的 SchemaData
+import { Scheme } from './service/Scheme'
+import i18n from '@/i18n'
+
+export class Dataset {
+  constructor ({ operatesList, filtersList, operatesDic, funcDic, operatorManual, fields, doc }) {
+    this.sourceData = {}
+    this.sourceData = this.keepSourcedata(operatesList, funcDic, filtersList, operatesDic, operatorManual, fields, doc)
+    // 存储格式化的数据
+    this.hintData = {}
+    this.hintData.operatesList = this.formatOperates(operatesList)
+    this.hintData.filtersList = this.formatFilters(filtersList)
+  }
+
+  getHintList (keyword, sqlKeywordsOptions = null, callback, completeFilter) {
+    // 获取提示列表
+    const operatesList = this.matchFilter(sqlKeywordsOptions || this.hintData.operatesList || [], keyword)
+    const filtersList = this.matchFilter(this.hintData.filtersList || [], keyword)
+
+    const hintList = [...operatesList, ...filtersList]
+    callback && callback(operatesList, filtersList, hintList)
+    return hintList
+  }
+
+  getClientwords () {
+    // 获取高亮的 可查询的 字段
+    const filtersList = this.sourceData.filtersList || []
+    const clientwords = []
+    filtersList.forEach((item) => {
+      // 可以在这里增加  过滤逻辑
+      // todo client由name改为label
+      // clientwords.push(item.name)
+      clientwords.push(item.label)
+    })
+    return clientwords
+  }
+
+  matchFilter (list, keyword) {
+    // 用于 匹配过滤器
+    const results = list.filter((item) => {
+      if (item.type === 'abstract') {
+        return true
+      }
+      let displayTextLow = item.displayText + '' ? (item.displayText + '').toLowerCase() : item.displayText
+      let keywordLow = keyword + '' ? (keyword + '').toLowerCase() : keyword
+
+      const reg = /[ '"]/ig
+      displayTextLow = (displayTextLow + '').replace(reg, '').toLowerCase()
+      keywordLow = (keywordLow + '').replace(reg, '').toLowerCase()
+
+      return displayTextLow && displayTextLow.indexOf(keywordLow) !== -1
+    })
+    const hasEnable = results.some((item) => {
+      return item.type !== 'abstract'
+    })
+    return hasEnable ? results : []
+  }
+
+  formatFilters (list) {
+    // 格式化 过滤器
+    if (!(list && list.length > 0)) {
+      return
+    }
+    const tempTitle = {
+      type: 'abstract',
+      text: '',
+      // displayText: "Filter",
+      displayText: i18n.global.t('overall.fields'),
+      className: 'divider hint-title',
+      hint (cm, callback, options) {
+      }
+    }
+
+    const results = list.map((item) => {
+      return {
+        // text: item.name,
+        // displayText: `${item.label}(${item.name})`,
+        text: item.label,
+        displayText: `${item.label}`,
+        className: 'filter-item el-dropdown-menu__item relative-item'
+      }
+    })
+    results.unshift(tempTitle)
+    return results
+  }
+
+  formatOperates (list) {
+    // 格式化 操作符
+    if (!(list && list.length > 0)) {
+      return
+    }
+    const tempTitle = {
+      type: 'abstract',
+      text: '',
+      // displayText: "Operator",
+      displayText: i18n.global.t('overall.keyword'),
+      className: 'divider hint-title'
+      // hint(cm, callback, options) {}
+    }
+
+    const results = list.map((item) => {
+      return {
+        text: item.name,
+        displayText: item.name,
+        className: 'operates-item el-dropdown-menu__item relative-item'
+        // hint(cm, callback, options) {}
+      }
+    })
+    results.unshift(tempTitle)
+    return results
+  }
+
+  keepSourcedata (operatesList, funcDic, filtersList, operatesDic, operatorManual, fields, doc) {
+    // 初始化原始数据  方法(存放的是 全量原始数据)
+    const sourceData = {}
+    // 支持的逻辑运算符
+    sourceData.operatesList = operatesList || []
+    // 过滤器列表
+    sourceData.filtersList = filtersList || []
+    sourceData.operatesDic = operatesDic || []
+    sourceData.operatorReference = doc?.functions?.operator || []
+    sourceData.operatorManual = operatorManual || []
+
+    // 添加全量数据
+    sourceData.fields = fields || []
+    sourceData.doc = doc || {}
+
+    // 存储function 的原始变量
+    sourceData.funcDic = funcDic || []
+    const aggregation = doc?.functions?.aggregation || []
+    const dateFuns = doc?.functions?.date || []
+    sourceData.funcReference = [...dateFuns, ...aggregation]
+
+    return sourceData
+  }
+
+  matchHightlight (keyWord) {
+    // 匹配高亮
+    // var reg = new RegExp(keyWord, 'i')
+    let matchFlag = false
+    // reg.test(val)
+    matchFlag = this.sourceData.operatesList.some((item) => {
+      return keyWord === item.name
+    })
+    if (matchFlag) {
+      return 'keyword'
+    }
+    if (matchFlag) {
+      return 'variable-2'
+    }
+    matchFlag = this.sourceData.filtersList.some((item) => {
+      return keyWord === item.name
+    })
+    if (matchFlag) {
+      return 'comment'
+    }
+    matchFlag = this.sourceData.specialCharacters.some((item) => {
+      return keyWord === item.name
+    })
+    if (matchFlag) {
+      return 'atom'
+    }
+  }
+
+  getOperates (type, item) {
+    // 获取 当前类型支持的操作符
+    let operatorFunctions = ''
+    if (item && item.doc && item.doc.constraints && item.doc.constraints.operator_functions) {
+      operatorFunctions = item.doc.constraints.operator_functions
+    } else {
+      const functions = this.sourceData.operatesDic.find(item => {
+        return item.type === type
+      })
+      // eslint-disable-next-line no-mixed-operators
+      operatorFunctions = functions && functions.functions || ''
+    }
+    const funList = operatorFunctions.split(',')
+    return funList.map((item) => {
+      return {
+        text: item,
+        displayText: item,
+        className: 'filter-item el-dropdown-menu__item relative-item'
+      }
+    })
+  }
+
+  getFunctions (type, item) {
+    // 获取 当前类型支持的操作符
+    let functionsInfo = ''
+    // 这里肯定有问题
+    if (item && item.doc && item.doc.constraints && item.doc.constraints.aggregation_functions) {
+      functionsInfo = item.doc.constraints.aggregation_functions
+    } else {
+      const functions = this.sourceData.funcDic.find(item => {
+        return item.type === type
+      })
+      functionsInfo = (functions && functions.functions) || ''
+    }
+
+    const funList = functionsInfo.split(',')
+    let result = []
+    result = funList.map((item) => {
+      return {
+        text: item,
+        displayText: item,
+        className: 'filter-item el-dropdown-menu__item relative-item'
+      }
+    })
+    return result
+  }
+
+  getFieldInfo (keywords) {
+    // 获取字段的相关信息  1.下拉数据是需要获取的 2.支持的运算符 是不是需要呢  ???
+    if (!keywords || !keywords.toLowerCase) {
+      return
+    }
+    keywords = (keywords.trim && keywords.trim()) || keywords
+    const fieldInfo = {}
+    const matchItem = this.sourceData.filtersList.find((item) => {
+      // const itemName = item.name && item.name.toLowerCase()
+      // 左侧面板的options值，即枚举的值
+      const itemName = item.label && item.label.toLowerCase()
+      return keywords.toLowerCase() === itemName
+    })
+    if (!matchItem) {
+      return null
+    }
+    // 存在下拉值 候选项
+    if (matchItem && matchItem.doc && matchItem.doc.data) {
+      fieldInfo.options = matchItem.doc.data.map(item => {
+        return {
+          text: matchItem.type === 'string' ? `'${item.code}'` : item.code,
+          displayText: item.value,
+          className: 'filter-item el-dropdown-menu__item relative-item'
+        }
+      })
+      fieldInfo.operateType = 'select'
+    }
+    // 这是一个 远程下拉值
+    if (matchItem && matchItem.doc && matchItem.doc.dict_location) {
+      fieldInfo.operateType = 'remoteSelect'
+    }
+
+    fieldInfo._matchItem = matchItem
+    fieldInfo.name = matchItem.name
+    fieldInfo.type = matchItem.type
+    fieldInfo.label = matchItem.label
+    return fieldInfo
+  }
+
+  getFieldList () {
+    // 获取字段列表
+    const fieldList = (this.sourceData && this.sourceData.filtersList) || []
+    return fieldList
+  }
+
+  getOperatorItem (code) {
+    const operators = this.sourceData.operatorManual || []
+    const matchItem = operators.find(item => {
+      return item.name === code.trim()
+    })
+    if (matchItem && !matchItem.label) {
+      matchItem.label = matchItem.name
+    }
+    return matchItem || null
+  }
+
+  dispose () {
+    this.sourceData = null
+    this.hintData.operatesList = null
+    this.hintData.filtersList = null
+    this.hintData = null
+  }
+}
+
+// 获取数据集
+export function getDataset (component, params, list) {
+  return new Promise((resolve, reject) => {
+    const schemeInstance = new Scheme(component, params, list)
+    schemeInstance.getFormatedData((schemeData) => {
+      const dataset = new Dataset(schemeData)
+      resolve(dataset, () => {
+        schemeInstance.dispose()
+        dataset.dispose()
+      })
+    })
+  })
+}
--- a/src/components/advancedSearch/showhint/packages/service/DeviceTag.js
+++ b/src/components/advancedSearch/showhint/packages/service/DeviceTag.js
@@ -0,0 +1,94 @@
+import {dataTemplate, fieldTemplate} from './template'
+
+export class DeviceTag {
+  constructor(context, params) {
+    //先从缓存获取数据
+    this.queryparams = params
+    this.context = context
+  }
+
+  filterQueryData(list) {
+    return list
+  }
+
+  getDataFromRemote() {
+    //从 远程,也就是请求接口获取数据
+    return this.context.$get('/deviceTag', this.queryparams).then((res) => {
+      this.context.initDataReadyCb && this.context.initDataReadyCb(res.data || null); //组件 请求 文件成功回调
+      if (res.code === 200) {
+        var data = res.data && res.data.list;
+        return data
+      } else {
+        // this.context.$message({
+        //   message: '请求 DeviceTag数据失败',
+        //   type: 'error',
+        //   showClose: true
+        // });
+      }
+      return null
+    }).catch((err) => {
+      console.error(err)
+    })
+  }
+
+  formatData(data) {
+    //格式化  获取的数据
+    const resultData = {
+      operatesList: [
+        {
+          "name": "AND",
+          "function": "A AND B",
+          type: "abstract",
+          label: "AND"
+        }
+      ],
+      filtersList: data ? this.filterQueryData(data.fields || []) : [],
+      //操作符仓库  用于记录 类型 和 操作符之间的映射关系
+      operatesDic: data ? data.doc.schema_query.references.operator || [] : [],
+      //operator  记录运算符的label 和 value 映射 以及操作符的使用方法
+      operatorManual: data ? data.doc.functions.operator || [] : []
+    }
+    return resultData
+  }
+
+  organizeData(data=[]) {
+    var fields = []
+    var res = JSON.parse(JSON.stringify(dataTemplate));
+    if (!data ) {
+      return
+    }
+    data.forEach((item, index) => {
+      var fieldItem = JSON.parse(JSON.stringify(fieldTemplate));
+      fieldItem.name = item.tagValue
+      fieldItem.type = "Array"
+      fieldItem.label = item.tagName
+      fieldItem.doc.data = (item.subTags || []).map(tagItem => {
+        return {
+          code: `'${tagItem.tagValue}'`,  //匹配SQL 的时候,这个Code 要加 ''
+          value: tagItem.tagName,
+          type: tagItem.tagType
+        }
+      })
+      fields.push(fieldItem)
+    })
+    res.fields = fields
+    return res
+  }
+
+  getFormatedData(callback) {
+    this.getDataFromRemote().then(data => {
+      //组织数据 模拟scama
+      var organizedData = this.organizeData(data);
+      //格式化数据
+      this.data = this.formatData(organizedData)
+      //获取scameData的时候 查询映射字段
+      callback && callback(this.data)
+    })
+  }
+
+  dispose(){
+    this.context=null
+    this.queryparams=null
+    this.data=null
+  }
+}
--- a/src/components/advancedSearch/showhint/packages/service/Scheme.js
+++ b/src/components/advancedSearch/showhint/packages/service/Scheme.js
@@ -0,0 +1,150 @@
+export class Scheme {
+  constructor (context, params, list) {
+    // 先从缓存获取数据
+    this.queryparams = params
+    this.context = context
+    this.columnList = list
+    this.schemeData = null
+    this.myCacheData = {
+      doc: {
+        functions: {
+          aggregation: [],
+          date: [],
+          operator: [
+            {
+              name: '=',
+              label: '=',
+              function: 'expr = value'
+            },
+            {
+              name: 'has',
+              label: 'HAS',
+              function: 'has(expr, value)'
+            },
+            {
+              name: 'in',
+              label: 'IN',
+              function: 'expr in (values)'
+            },
+            {
+              name: 'like',
+              label: 'LIKE',
+              function: 'expr like value'
+            }
+          ]
+        },
+        schema_query: {
+          references: {
+            aggregation: [
+              {
+                type: 'int',
+                functions: ''
+              },
+              {
+                type: 'string',
+                functions: ''
+              },
+              {
+                type: 'array',
+                functions: ''
+              }
+            ],
+            operator: [
+              {
+                type: 'int',
+                functions: '=,in,like,has'
+              },
+              {
+                type: 'string',
+                functions: '=,in,like,has'
+              },
+              {
+                type: 'array',
+                functions: '=,in,like,has'
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+
+  filterQueryData (list) {
+    // 仅仅过滤掉 无用的数据 allow_query 为false 的数据  visibility==hidden/disabled  DoS日志补充 start_time
+    const denyList = ['recv_time', 'start_time']
+    let result
+    result = list.filter((item, index) => {
+      // return (item.doc && item.doc.allow_query === 'true') && !denyList.includes(item.name)
+      // 在前端禁止搜索字段中 或者 接口不允许搜索得字段 过滤掉
+      return !(item.doc && item.doc.allow_query === 'false') && !denyList.includes(item.name) && !(item.doc && (item.doc.visibility == 'disabled' || item.doc.visibility == 'hidden'))
+    })
+    return result || []
+  }
+
+  formatSchemaData (data) {
+    // 格式化  获取的数据
+    const formatedData = {
+      operatesList: [
+        {
+          name: 'AND',
+          function: 'A AND B',
+          type: 'abstract',
+          label: 'AND'
+        }
+        // {
+        //   name: 'OR',
+        //   function: 'A OR B',
+        //   type: 'abstract',
+        //   label: 'OR'
+        // }
+      ],
+      filtersList: data ? this.filterQueryData(data.fields || []) : [],
+      // 操作符仓库  用于记录 类型 和 操作符之间的映射关系
+      operatesDic: data ? (data.doc.schema_query && data.doc.schema_query.references.operator) || [] : [],
+
+      // 操作符仓库  用于记录 类型 和 聚合函数之间的映射关系
+      funcDic: data ? (data.doc.schema_query && data.doc.schema_query.references.aggregation) || [] : [],
+
+      // operator  记录运算符的label 和 value 映射 以及操作符的使用方法
+      operatorManual: data ? data.doc.functions.operator || [] : [],
+
+      // 全部附属信息 这些是需要的
+      doc: data.doc,
+
+      // 全部字段信息 fields
+      fields: data.fields
+    }
+
+    // date  和    timestamp 支持的方法  需要特殊处理 ,补充事件函数处理
+    const dateFuns = (data?.doc?.functions?.date || []).map(item => {
+      return item.name
+    })
+    formatedData.funcDic.forEach(item => {
+      if (['date', 'timestamp'].includes(item.type)) {
+        // eslint-disable-next-line no-unused-expressions
+        dateFuns.length > 0 ? item.functions = item.functions + ',' + dateFuns.join(',') : ''
+      }
+    })
+    return formatedData
+  }
+
+  async getFormatedData (callback) {
+    const cacheData = this.myCacheData
+    cacheData.fields = this.columnList
+
+    if (this.columnList) {
+      this.schemeData = this.formatSchemaData(cacheData)
+      // this.getRemoteOptions()
+      callback && callback(this.schemeData)
+      return
+    }
+    callback && callback(this.schemeData)
+    return this.schemeData
+  }
+
+  dispose () {
+    this.context = null
+    this.schemeData = null
+    this.queryparams = null
+  }
+}
--- a/src/components/advancedSearch/showhint/packages/service/oldMockData.js
+++ b/src/components/advancedSearch/showhint/packages/service/oldMockData.js
--- a/src/components/advancedSearch/showhint/packages/service/template.js
+++ b/src/components/advancedSearch/showhint/packages/service/template.js
@@ -0,0 +1,156 @@
+export const dataTemplate = {
+  "doc": {
+    "functions": {
+      "aggregation": [
+        {
+          "name": "COUNT",
+          "function": "count(expr)",
+          "label": "COUNT"
+        }, {
+          "name": "COUNT_DISTINCT",
+          "function": "count(distinct expr)",
+          "label": "COUNT_DISTINCT"
+        }, {
+          "name": "AVG",
+          "function": "avg(expr)",
+          "label": "AVG"
+        }, {
+          "name": "SUM",
+          "function": "sum(expr)",
+          "label": "SUM"
+        }, {
+          "name": "MAX",
+          "function": "max(expr)",
+          "label": "MAX"
+        }, {
+          "name": "MIN",
+          "function": "min(expr)",
+          "label": "MIN"
+        }],
+      "operator": [
+        {
+          "name": "=",
+          "function": "expr = value",
+          "label": "="
+        }, {
+          "name": "!=",
+          "function": "expr != value",
+          "label": "!="
+        }, {
+          "name": ">",
+          "function": "expr > value",
+          "label": ">"
+        }, {
+          "name": "<",
+          "function": "expr < value",
+          "label": "<"
+        }, {
+          "name": ">=",
+          "function": "expr >= value",
+          "label": ">="
+        }, {
+          "name": "<=",
+          "function": "expr <= value",
+          "label": "<="
+        }, {
+          "name": "has",
+          "function": "has(expr, value)",
+          "label": "HAS"
+        }, {
+          "name": "in",
+          "function": "expr in (values)",
+          "label": "IN"
+        }, {
+          "name": "not in",
+          "function": "expr not in (values)",
+          "label": "NOT IN"
+        }, {
+          "name": "like",
+          "function": "expr like value",
+          "label": "LIKE"
+        }, {
+          "name": "not like",
+          "function": "expr not like value",
+          "label": "NOT LIKE"
+        }, {
+          "name": "notEmpty",
+          "function": "notEmpty(expr)",
+          "label": "NOT EMPTY"
+        }, {
+          "name": "empty",
+          "function": "empty(expr)",
+          "label": "EMPTY"
+        }]
+    },
+    "schema_query": {
+      "references": {
+        "aggregation": [
+          {
+            "type": "int",
+            "functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
+          }, {
+            "type": "long",
+            "functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
+          }, {
+            "type": "float",
+            "functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
+          }, {
+            "type": "double",
+            "functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
+          }, {
+            "type": "string",
+            "functions": "COUNT,COUNT_DISTINCT"
+          }, {
+            "type": "date",
+            "functions": "COUNT,COUNT_DISTINCT,MAX,MIN"
+          }, {
+            "type": "timestamp",
+            "functions": "COUNT,COUNT_DISTINCT,MAX,MIN"
+          }
+        ],
+        "operator": [
+          {
+            "type": "int",
+            "functions": "=,!=,>,<,>=,<=,in,not in"
+          }, {
+            "type": "long",
+            "functions": "=,!=,>,<,>=,<=,in,not in"
+          }, {
+            "type": "float",
+            "functions": "=,!=,>,<,>=,<="
+          }, {
+            "type": "double",
+            "functions": "=,!=,>,<,>=,<="
+          }, {
+            "type": "string",
+            "functions": "=,!=,in,not in,like,not like,notEmpty,empty"
+          }, {
+            "type": "date",
+            "functions": "=,!=,>,<,>=,<="
+          }, {
+            "type": "timestamp",
+            "functions": "=,!=,>,<,>=,<="
+          }, {
+            "type": "array",
+            "functions": "has"
+          }]
+      }
+    }
+  },
+  "fields": []
+}
+
+export const fieldTemplate = {
+  "name": "",
+  "label": "",
+  "doc": {
+    "allow_query": "true",
+    "visibility": null,
+    "constraints": {
+      "type": "tag",
+      "operator_functions": "in,not in"
+    },
+    "data": []
+  },
+  "type": "Array"
+}
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -2,10 +2,10 @@
  <div v-ele-click-outside="changeDropdown" style="position: relative;" class="date-range-box">
    <div @click="showDropdown" class="date-range-text" :class="myClass" :style="style">
      <div class="calendar-popover-text"><i class="cn-icon cn-icon-Data"></i></div>
-      <div class="calendar-popover-text" style="display: flex" v-if="isCustom">
-        <div class="calendar-popover-text">{{ dateFormatByAppearance(getMillisecond(startTime)) }}</div>
-        <div class="calendar-popover-text"> -</div>
-        <div class="calendar-popover-text">{{ dateFormatByAppearance(getMillisecond(endTime)) }}</div>
+      <div class="calendar-popover-text" style="display: flex" v-if="isCustom" :title="`${dateFormatByAppearance(getMillisecond(startTime))} -${dateFormatByAppearance(getMillisecond(endTime))}`">
+        <div class="calendar-popover-text" :style="showPosition === 'left' ? 'width: 90px;text-overflow: ellipsis;overflow: hidden;' : ''" >{{ dateFormatByAppearance(getMillisecond(startTime)) }}</div>
+        <div class="calendar-popover-text" :style="showPosition === 'left' ? 'display:none;' : ''"> -</div>
+        <div class="calendar-popover-text" :style="showPosition === 'left' ? 'display:none;' : ''">{{ dateFormatByAppearance(getMillisecond(endTime)) }}</div>
      </div>
      <div class="calendar-popover-text" v-else>
        {{ showDetail }}
@@ -14,21 +14,23 @@
        <i class="cn-icon cn-icon-dropdown" :class="dropdownFlag ? 'cn-icon-up' : ''"></i>
      </div>
    </div>
-    <transition name="el-zoom-in-top" style="z-index: 4;">
-      <div v-if="dropdownFlag" class="date-range-panel">
+    <transition name="el-zoom-in-top" style="z-index: 100004;">
+      <div v-if="dropdownFlag" class="date-range-panel" :style="showPosition === 'left' ? leftStyle : rightStyle">
        <el-row class="date-range-panel-top" style="position: relative">
          <el-col :span="16" class="date-range-panel-content date-range-panel-content-left">
            <div class="date-range-title" style="padding-left: 0">{{$t('dateTime.absoluteTimeRange')}}</div>
            <el-config-provider :locale="locale">
              <el-date-picker
                      v-model="newDateValue"
+                      :key="keyValue"
                      ref="newDatePicker"
                      popper-class="my-date-picker"
-                      style="position: absolute;top: -53px;left: -536px;"
+                      :style="showPosition === 'left' ? datePickerLeftStyle : datePickerRightStyle"
                      :clearable="false"
                      :default-time="defaultTime"
                      :unlink-panels="true"
                      type="datetimerange"
+                      @blur="datePickerVisibleChange"
                      @change="timeArrChange"
              />
            </el-config-provider>
@@ -70,7 +72,7 @@
            </ul>
          </el-col>
        </el-row>
-        <el-row class="date-range-panel-bottom">
+        <el-row class="date-range-panel-bottom" >
          <el-col :span="12">{{ address }}</el-col>
          <el-col :span="12" class="utc-str">{{ utcStr }}</el-col>
        </el-row>
@@ -107,6 +109,10 @@ export default {
    },
    style: {
      type: String
+    },
+    showPosition: {
+      type: String,
+      default: 'right'
    }
  },
  emits: ['change'],
@@ -135,6 +141,17 @@ export default {
      return str
    }
  },
+  methods: {
+    /**
+     * 时间选择器失去焦点之后就会隐藏，此时，Left展示类型的，就需要重新设置下拉框的位置
+     */
+    datePickerVisibleChange () {
+      if (this.showPosition === 'left') {
+        this.leftStyle = this.leftStyleBefore
+        // this.dropdownFlag = true
+      }
+    }
+  },
  setup (props, ctx) {
    // data
    const store = useStore()
@@ -160,6 +177,12 @@ export default {
      new Date(2023, 1, 1, 0, 0, 0),
      new Date(2023, 1, 2, 23, 59, 59)
    ])
+    const rightStyle = 'position: absolute;top: 32px;right: 0px;'
+    const leftStyleBefore = 'position: absolute;top: 32px;left: 0px;'
+    const leftStyleAfter = 'position: absolute;top: 32px;left: 660px;'
+    const datePickerRightStyle = 'position: absolute;top: -53px;left: -536px;'
+    const datePickerLeftStyle = 'position: absolute;top: -53px;left: -536px;'
+    const leftStyle = ref('position: absolute;top: 32px;left: 0px;')
    // computed
    const utcStr = computed(() => {
      let str = 'UTC '
@@ -197,6 +220,17 @@ export default {
      }
    })

+    /**
+     * 监测下拉框，一旦隐藏，则设置其位置靠最左边
+     * */
+    watch(() => dropdownFlag.value, (newVal) => {
+      if (!newVal) {
+        if (props.showPosition === 'left') {
+          leftStyle.value = leftStyleBefore
+        }
+      }
+    })
+
    // methods
    /**
     * 打开/关闭时间面板
@@ -215,14 +249,14 @@ export default {
      if (dropdownFlag.value) {
        dropdownFlag.value = false
      }
-      if (dropdownFlag.value) {
-        dropdownFlag.value = false
-      }
    }
    /**
     * 打开时间选择器，从时间面板的“开始时间”、“结束时间”调用
     */
    const myDatePickerShow = () => {
+      if (props.showPosition === 'left') {
+        leftStyle.value = leftStyleAfter
+      }
      newDateValue.value = [
        new Date(...timestampToList(myStartTime.value)),
        new Date(...timestampToList(myEndTime.value))
@@ -306,6 +340,8 @@ export default {
      locale = cn
    }

+    const keyValue = window.$dayJs.tz().valueOf()
+
    return {
      myStartTime,
      myEndTime,
@@ -322,6 +358,12 @@ export default {
      rangeHistory,
      rangeHistoryArr,
      getMillisecond,
+      datePickerLeftStyle,
+      datePickerRightStyle,
+      leftStyle,
+      leftStyleBefore,
+      rightStyle,
+      keyValue,
      myDatePickerShow,
      showDropdown,
      changeDropdown,
--- a/src/components/common/popBox/TopToolMoreOptions.vue
+++ b/src/components/common/popBox/TopToolMoreOptions.vue
@@ -29,7 +29,7 @@
                     action=""
                     class="upload-demo"
                     drag>
-            <i class="el-icon-upload"></i>
+            <el-icon><UploadFilled /></el-icon>
            <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
            <template #tip>
              <div class="el-upload__tip" >
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -35,6 +35,12 @@
              <el-dropdown-item>
                <div id="header-to-logout" @click="logout">{{ $t('overall.logout') }}</div>
              </el-dropdown-item>
+<!--              <el-dropdown-item>-->
+<!--                <div id="header-to-theme" @click="switchTheme">-->
+<!--                  <span>暗黑模式</span>-->
+<!--                  <el-switch v-model="isDark" size="large" class="mt-2" style="margin-left: 24px" inline-prompt />-->
+<!--                </div>-->
+<!--              </el-dropdown-item>-->
            </el-dropdown-menu>
          </template>
        </el-dropdown>
@@ -46,8 +52,9 @@
        <el-breadcrumb-item class="header__left-breadcrumb-item" :id="`breadcrumb${item.value}`" :title="index===3?item.value:''"
                            v-for="(item,index) in breadcrumb" :key="item.value">
          <template v-if="index===3" >
-            <div class="header__left-breadcrumb-item-select" >
+            <div class="header__left-breadcrumb-item-select" style="position: relative">
              <el-popover placement="bottom-start"
+                          style="position: absolute"
                          ref="breadcrumbPopover"
                          :show-arrow="false"
                          :append-to-body="false"
@@ -128,11 +135,12 @@
        direction="ttb"
        custom-class="cn-menu"
        modal-class="cn-menu-modal"
+        class="cn-menu"
        :with-header="false"
        :show-close="false"
    >
      <div class="cn-menu__left" v-if="otherMenu">
-        <div class="left-menu" v-for="menu in otherMenu" :key="menu.id" @click="jump(menu.route,'','',0)">
+        <div class="left-menu" v-for="menu in otherMenu" :key="menu.id" @click="jumpOther(menu.route,'','',0)">
          <i :class="menu.icon"></i>
          <span>{{ $t(menu.i18n || menu.name) }}</span>
          <i class="cn-icon cn-icon-right"></i>
@@ -222,6 +230,7 @@ import {
 import { getNowTime, getSecond } from '@/utils/date-util'
 import _ from 'lodash'
 import { useRoute } from 'vue-router'
+import { useDark, useToggle } from '@vueuse/core'

 export default {
  name: 'Header',
@@ -307,7 +316,8 @@ export default {
      wholeScreenRouterMapping,
      logo: 'images/logo-header.svg',
      ZH,
-      EN
+      EN,
+      isDark: useDark()
    }
  },
  computed: {
@@ -474,10 +484,16 @@ export default {
      this.showChangePin = true
    },
    logout () {
+      //
      sessionStorage.removeItem(storageKey.tokenExpireCurrentPath)
      localStorage.removeItem(storageKey.token)
      axios.get(api.logout)
    },
+    switchTheme () {
+      useToggle(this.isDark)
+      const theme = this.isDark ? 'light' : 'dark'
+      localStorage.setItem(storageKey.theme, theme)
+    },
    refreshLang () {
      this.language = localStorage.getItem(storageKey.language)
      this.$i18n.locale = this.language
@@ -591,21 +607,28 @@ export default {
        if (curTab.prop === 'protocolPort') {
          const valueGroup = value.split(':')
          if (valueGroup) {
-            queryCondition.push('common_l7_protocol=\'' + valueGroup[0] + '\'')
-            queryCondition.push('common_server_port=' + valueGroup[1])
+            queryCondition.push('l7_protocol=\'' + valueGroup[0] + '\'')
+            queryCondition.push('server_port=' + valueGroup[1])
          }
          // console.log(queryCondition.join(' AND '))
          this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
          this.urlChangeParams[this.curTabState.lineQueryCondition] = queryCondition.join(' AND ')
        } else {
-          searchProps.forEach(item => {
-            queryCondition.push(item + '=\'' + handleSpecialValue(value) + '\'')
-          })
+          if (curTab.queryCondition) {
+            curTab.queryCondition.forEach(item => {
+              queryCondition.push(item.replaceAll('$param', value))
+            })
+          } else if (searchProps) {
+            searchProps.forEach(item => {
+              queryCondition.push(item + '=\'' + handleSpecialValue(value) + '\'')
+            })
+          }
+
          this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
          const lineQueryCondition = []
          if (curTab.lineQueryCondition) {
            curTab.lineQueryCondition.forEach(item => {
-              lineQueryCondition.push(item.replaceAll('$param', value))
+              lineQueryCondition.push(item.replaceAll('$param', handleSpecialValue(value)))
            })
            this.urlChangeParams[this.curTabState.lineQueryCondition] = lineQueryCondition.join(' OR ')
          }
--- a/src/components/rightBox/report/ReportBox.vue
+++ b/src/components/rightBox/report/ReportBox.vue
@@ -25,7 +25,7 @@
                       @change="timeConfigTypeChange"
            >
              <template v-for="time in timeRuleList" :key="time.value">
-                <el-option :label="time.name" :value="time.value"></el-option>
+                <el-option :label="$t(time.name)" :value="time.value"></el-option>
              </template>
            </el-select>
            <template v-if="editObject.config.timeConfig.type === 'this'">
@@ -38,7 +38,7 @@
                         size="small"
                         @change="()=>{ this.$forceUpdate() }">
                <template v-for="time in timeUnitList" :key="time.value">
-                  <el-option :label="time.name" :value="time.value"></el-option>
+                  <el-option :label="$t(time.name)" :value="time.value"></el-option>
                </template>
              </el-select>
            </template>
@@ -56,7 +56,7 @@
                         size="small"
                         @change="()=>{ this.$forceUpdate() }">
                <template v-for="time in timeUnitList" :key="time.value">
-                  <el-option :label="time.name" :value="time.value"></el-option>
+                  <el-option :label="$t(time.name)" :value="time.value"></el-option>
                </template>
              </el-select>
            </div>
@@ -154,7 +154,6 @@
                      <el-checkbox v-for="item in dateList" :key="item" :label="item"/>
                    </el-checkbox-group>
                  </div>
-                  <div class="enable-month-value">*一月，三月，五月，七月，八月，十月和12月含31天;闰年二月含29天*</div>
                </template>
                <!-- 按周 -->
                <template v-else-if="monthScheduleType === 'weekly'">
--- a/src/components/rightBox/settings/RoleBox.vue
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -18,7 +18,7 @@
            <el-input maxlength="255" show-word-limit :rows="2" size='mini' type="textarea" v-model="editRole.remark" id="role-box-input-remark"/>
          </el-form-item>

-          <el-form-item :label="$t('config.roles.permission')">
+          <el-form-item :label="$t('config.roles.permission')" class="my-form-item">
            <!--<div class="tree-option">
              <button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
              <button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="cn-icon cn-icon-delete"></i></span></button>
@@ -27,8 +27,8 @@
            <el-tree :data="menus" :default-expand-all="expandAllFlag" check-strictly="true" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
              <template #default="{ data }">
              <span>
-                <i v-if="data.type === '1'" class="el-icon-menu"></i>
-                <i v-if="data.type === '2'" class="el-icon-edit"></i>
+                <el-icon v-if="data.type === '1'"><Menu /></el-icon>
+                <el-icon v-if="data.type === '2'"><Edit /></el-icon>
              </span>
                {{$t(data.i18n)}}
              </template>
@@ -183,21 +183,21 @@ export default {
        }
      }
    },
-    checkParentNode(node) {
-      if(node && this.$refs.menuTree.getNode(node)){
-        let parent = this.$refs.menuTree.getNode(node).parent
-        let parentNode = parent.data
-        if(parentNode && parentNode.id && parentNode.id !== 0 ){
-          this.$refs.menuTree.setChecked(parentNode,true,false)
+    checkParentNode (node) {
+      if (node && this.$refs.menuTree.getNode(node)) {
+        const parent = this.$refs.menuTree.getNode(node).parent
+        const parentNode = parent.data
+        if (parentNode && parentNode.id && parentNode.id !== 0) {
+          this.$refs.menuTree.setChecked(parentNode, true, false)
          this.checkParentNode(parentNode)
        }
      }
    },
    selectChange: function (data, isCheck, childIsCheck) {
-      if(isCheck) {//如果是选中节点，则同步选中所有的父辈节点(有全选和半选两种状态)
+      if (isCheck) { // 如果是选中节点，则同步选中所有的父辈节点(有全选和半选两种状态)
        this.checkParentNode(data)
-      } else {//如果是取消节点，则同步取消选中所有子节点
-        if(data.children && data.children.length > 0) {
+      } else { // 如果是取消节点，则同步取消选中所有子节点
+        if (data.children && data.children.length > 0) {
          data.children.forEach(node => {
            this.$refs.menuTree.setChecked(node, false, true)
          })
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
刘洪洪	7d9e8f2790	fix: 修复header栏的切换语言dropdown组件鼠标移动时有白边的情况	2024-02-22 17:42:58 +08:00
刘洪洪	916ad6c387	fix: 暂时隐藏切换主题选项，修复刷新时界面暂时为黑色的问题	2024-02-22 16:47:53 +08:00
刘洪洪	2a6f81454e	fix: 修复detection新增policy时，第三步点击时间下拉框会报错的问题	2024-02-21 10:42:24 +08:00
刘洪洪	22c164d2f5	CN-1551 feat: 升级element-ui版本的样式修改	2024-02-18 09:58:45 +08:00
刘洪洪	b02d8ecb8b	CN-1551 feat: 升级element-ui版本	2024-02-02 18:13:11 +08:00
hyx	b286861137	fix:CN-1546 知识库导入空csv，接口报错界面未提示	2024-01-15 18:41:42 +08:00
chenjinsong	e67ec0905a	fix: 修改三个新插件的id	2024-01-15 16:26:02 +08:00
hyx	7f697658f4	feat:CN-1545 npm下钻table异步加载的列增加loading提示	2024-01-15 14:29:00 +08:00
刘洪洪	ff17e52bc2	fix: 修复新增事件策略界面返回时，第三步校验总被触发的问题	2024-01-12 17:22:25 +08:00
hanyuxia	b13e313114	feat: 增加3个插件配置	2024-01-12 15:16:04 +08:00
刘洪洪	dbf5885b72	Merge remote-tracking branch 'origin/dev' into dev	2024-01-12 11:56:33 +08:00
刘洪洪	ab10f7ff0f	fix: 优化滚动加载代码，避免占用资源	2024-01-12 11:56:08 +08:00
hanyuxia	6d00137260	fix: 知识库删除操作报错	2024-01-12 11:54:23 +08:00
chenjinsong	ddafbf44f2	fix: 修复不能识别9位和12位时间戳的问题	2024-01-12 11:44:20 +08:00
hanyuxia	096666ce69	fix:实体Subscriber详情页，top应用样式调整（柱状图右侧数据显示不全）	2024-01-12 09:51:05 +08:00
hyx	bf34b4321c	fix: 1.Subscribe实体详情页top 应用:数据为0时，显示<1B	2024-01-11 18:09:53 +08:00
刘洪洪	83c8f400e2	fix: 修复搜索组件tag模式下in操作多选后没有回显的问题	2024-01-11 18:06:09 +08:00
chenjinsong	cb93658be4	fix: 更改subscriber实体地图最大缩放级别为13	2024-01-11 17:28:45 +08:00
hyx	e546f39c93	fix: 1.Subscribe实体详情页top 应用样式调整	2024-01-11 17:16:27 +08:00
hyx	a3e770963f	fix: 1.Subscribe实体详情页top 应用样式调整；2.插件列表展示内容过滤；	2024-01-11 16:36:07 +08:00
刘洪洪	8e4d5bff88	fix: 去除无效打印	2024-01-11 15:16:16 +08:00
刘洪洪	877c008fe7	fix: 1.修复实体详情安全事件只显示10条的问题；2.实体列表的实体关系radio初始化高亮	2024-01-11 15:12:27 +08:00
刘洪洪	fc85069227	Merge remote-tracking branch 'origin/dev' into dev	2024-01-11 14:56:17 +08:00
刘洪洪	9ac9cd93e1	fix: 更改实体列表关于实体、相关实体的选择方式	2024-01-11 14:56:06 +08:00
chenjinsong	426301fce0	fix: 更改subscriber实体地图最大缩放级别	2024-01-11 14:55:10 +08:00
chenjinsong	b8c90fee71	fix: 修复subscriber实体地图时间参数长度不对的问题	2024-01-11 11:50:10 +08:00
chenjinsong	9ae4453587	fix: 修复subscriber实体app曲线中app数量大于6时显示异常的问题	2024-01-11 11:42:35 +08:00
hyx	734bfb33d3	fix: 实体subscribe详情页的Top 应用部分不显示数据	2024-01-11 10:58:01 +08:00
刘洪洪	ada66ee9d2	Merge remote-tracking branch 'origin/dev' into dev	2024-01-11 10:18:45 +08:00
刘洪洪	facbd0f17c	fix: 搜索时向地址栏添加hideRelated参数	2024-01-11 10:18:32 +08:00
chenjinsong	471e5f2342	fix: 修复实体地图请求接口未带时间参数的问题	2024-01-11 10:16:54 +08:00
hyx	ad800637fd	fix: DNS下钻表格，当前tab为Qtypes或者Rcodes时，自定义中取消当前tab，重新加载的页面的第一列数据为空	2024-01-11 09:20:00 +08:00
刘洪洪	03400f1fab	fix: 修复给搜索条件的=添加空格导致识别失败的问题	2024-01-10 17:22:00 +08:00
hyx	0e51d49e15	fix: 1.调整subscriber实体中tab错误提示信息的位置；2.暂时不请求subscriber实体对应的4个tab的接口，显示未noData；	2024-01-10 17:09:56 +08:00
刘洪洪	a3ab4530b7	fix: 1.新增报告时间范围添加国际化；2.detection跳转实体详情缺少参数	2024-01-10 15:49:41 +08:00
hyx	a8ecdd48bd	fix: 删除subscriber模块相关的测试内容	2024-01-10 14:54:14 +08:00
刘洪洪	6bdefa5497	fix: 修复搜索组件高度有滚动条的问题	2024-01-09 17:06:00 +08:00
刘洪洪	e0a8815d4a	fix: 修复实体切换时间搜索高亮不生效的问题	2024-01-09 11:19:44 +08:00
hanyuxia	f4bf9a1f31	feat:CN-1522 插件管理界面与接口调试	2024-01-09 11:10:28 +08:00
刘洪洪	2661b5e69d	CN-1540 fix: 更新获取tag字段名pluginName为vpnServiceName	2024-01-08 16:42:41 +08:00
刘洪洪	0e13925908	fix: 修复隐藏相关实体按钮错误的问题	2024-01-05 17:17:17 +08:00
刘洪洪	2219bba781	fix: 修复实体详情tab单测实例的tag未经过映射转换导致报错的问题	2024-01-04 16:54:20 +08:00
刘洪洪	80027fbd46	CN-1540 fix: 提取Tag展示逻辑公共部分	2024-01-04 16:39:39 +08:00
刘洪洪	8b81181ae2	CN-1540 fix: 实体智能学习类型的Tag展示逻辑更改	2024-01-03 17:45:52 +08:00
刘洪洪	a9215469fb	fix: 调整实体详情信誉等级tag字体居中	2024-01-02 17:52:21 +08:00
hanyuxia	467b2c27b7	feat:CN-1522 插件管理界面与接口调试	2023-12-29 18:04:50 +08:00
hanyuxia	ca3b9d926c	fix: 详情实体behavior pattern标签顶部数值计算逻辑修改（去掉key为total的内容）	2023-12-29 17:59:55 +08:00
hanyuxia	160f708596	feat:CN-1522 插件管理页开发	2023-12-29 17:06:14 +08:00
刘洪洪	3d3ad53395	fix: 实体详情tab的安全、性能tab的持续时间字段修改	2023-12-29 15:09:06 +08:00
刘洪洪	c874665397	fix: detection顶部柱状图位置调整	2023-12-29 14:13:54 +08:00
刘洪洪	f40e9ae759	fix: 修复搜索组件的历史搜索中同一条搜索语句点击第二次不能填充搜索框的问题	2023-12-29 11:57:45 +08:00
刘洪洪	1f33834146	fix: 完善npm--location的Throughput曲线图的legend初始化	2023-12-29 11:23:20 +08:00
刘洪洪	cbb27e2538	fix: npm曲线图去除重复功能接口调用	2023-12-29 09:50:50 +08:00
hanyuxia	1d5bd39f54	feat:CN-1522 删除内置知识库列表的“智能情报学习”栏	2023-12-29 09:40:42 +08:00
刘洪洪	2e113df17b	fix: 1、修复detection顶部柱状图无数据的地方鼠标移上去会显示上一个或下一个柱子的数据；2、x轴显示的时间并非时间选择器的起始时间。	2023-12-28 17:27:02 +08:00
刘洪洪	ec0b3b28d4	fix: 将实体详情的信誉等级与detection的实体信誉等级进行样式统一	2023-12-28 10:38:21 +08:00
hyx	83971fa08b	feat:CN-1522 删除内置知识库列表的“智能情报学习”栏	2023-12-28 09:23:00 +08:00
刘洪洪	fc24f6bbfb	fix: 修复实体详情的安全事件tab时间显示异常的问题	2023-12-27 18:10:25 +08:00
刘洪洪	d7bd49a9ac	fix: 去除未被使用的文件引用，以及调整部分代码格式	2023-12-27 16:08:43 +08:00
hyx	37238377d2	Merge remote-tracking branch 'origin/dev' into dev	2023-12-27 16:05:50 +08:00
hyx	b42bfded33	feat:CN-1522 插件管理页开发	2023-12-27 16:05:35 +08:00
刘洪洪	50e4112181	fix: 调整搜索组件输入过长会换行的样式，以及error提示的层级	2023-12-27 14:20:06 +08:00
hanyuxia	70ab0a46e6	feat:CN-1522 插件管理页开发（细节需要再调整）,及代码整理	2023-12-26 18:24:05 +08:00
chenjinsong	cb6d0e4765	fix: 调整link测试用例	2023-12-26 15:40:37 +08:00
chenjinsong	15b90c11e9	CN-1519 fix: 链路配置更改；链路组件逻辑更改；	2023-12-25 18:35:14 +08:00
hyx	3f97c3e97f	Merge remote-tracking branch 'origin/dev' into dev	2023-12-25 16:29:01 +08:00
hyx	e70fa5d569	fix: 下钻表格测试用例报错修改	2023-12-25 16:28:46 +08:00
刘洪洪	5ba4d8a1fe	CN-1520 fix: 调整实体列表页接口请求方式	2023-12-25 16:27:45 +08:00
hyx	4ae22a1ea0	fix: 各模块流量曲线图测试用例修改	2023-12-25 14:47:48 +08:00
刘洪洪	e08a7a2434	fix: 修复jest单测获取codemirror依赖失败的问题	2023-12-25 14:32:22 +08:00
刘洪洪	2dbf5ee84e	fix: 修复jest单测获取不到codemirror依赖的问题	2023-12-25 14:24:28 +08:00
刘洪洪	b7c5638c04	fix: 修复LinkTrafficLine单测用例报错的问题	2023-12-25 13:59:40 +08:00
刘洪洪	d1e8430e37	fix: 去除无效打印	2023-12-22 18:15:42 +08:00
刘洪洪	2028861b26	CN-1375 fix: 编写高级搜索器自动化测试用例	2023-12-22 17:59:44 +08:00
hanyuxia	21eafd4087	fix:CN-1518 Subscriber流量曲线图的交互逻辑优化(减少请求次数),及其他模块相关代码调整	2023-12-22 17:32:02 +08:00
hanyuxia	899b0e1e9d	fix:CN-1518 Link Monitor流量曲线图的交互逻辑优化(减少请求次数)	2023-12-22 11:32:31 +08:00
hyx	eb7a9f875c	fix: CN-1518 实体详情流量曲线图的交互逻辑优化（减少请求次数）	2023-12-21 15:59:04 +08:00
hyx	0f2f5ecdde	Merge remote-tracking branch 'origin/dev' into dev	2023-12-20 20:40:01 +08:00
hyx	164089f99e	fix: CN-1518 Npm流量曲线图的交互逻辑优化（减少请求次数）	2023-12-20 20:39:45 +08:00
刘洪洪	abab03eb12	fix: 1、搜索组件有关枚举的添加国际化；2、修复tag模式下切换key，value还保留上次选择的问题；3、修复切换语言环境，搜索参数包含其他语言导致不能识别转换的问题	2023-12-20 18:38:38 +08:00
hyx	19160c0da1	fix: CN-1518 DNS流量曲线图的交互逻辑优化（减少请求次数）	2023-12-20 10:41:43 +08:00
hanyuxia	56ad79bd0d	fix:CN-1518 Network Overview流量曲线图的交互逻辑优化，减少请求次数	2023-12-19 13:44:14 +08:00
刘洪洪	a2a7bdcd14	fix: 调整showHint弹窗样式	2023-12-18 10:12:13 +08:00
刘洪洪	1d67584c9a	fix: 调整搜索组件showHint样式和提示文本，隐藏/显示相关实体时联动左侧filter	2023-12-15 18:48:51 +08:00
刘洪洪	8b72a37489	fix: 修复domain in()和其他搜索条件一起时，识别in操作符失败的问题	2023-12-15 15:57:12 +08:00
hyx	e13c9afe78	fix: CN-1514 表结构变更后前端代码中字段更改(下钻表格)；表格下钻后，切换顶部的下拉列表，表格报错；	2023-12-15 10:50:52 +08:00
刘洪洪	8001d66ca8	fix: 修复搜索高亮取值有时为空的问题	2023-12-14 16:52:09 +08:00
刘洪洪	d2cb42687e	fix: 简化部分代码，添加注释，添加是否需要高亮指令noHighlight	2023-12-14 16:20:33 +08:00
刘洪洪	a3c8baea5c	fix: 修复搜索组件tag模式下，in操作赋值错误的问题	2023-12-14 10:28:43 +08:00
刘洪洪	f5f857bcb4	CN-1479 fix: 搜索组件showHint提示文本修改	2023-12-13 17:05:16 +08:00
刘洪洪	3d1fbfa5fd	fix: 删除无用文件，搜索组件text修改变量名	2023-12-12 17:29:19 +08:00
刘洪洪	3d5c69d87b	CN-1479 fix: 搜索组件补全模糊搜索与tag模式关于枚举in操作的处理	2023-12-12 10:06:21 +08:00
chenjinsong	e1a26b60ae	CN-1440 fix: policy的library增加鼠标悬浮提示事件	2023-12-11 17:48:38 +08:00
hyx	a7dfa33da2	暂时隐藏实体详情的性能事件	2023-12-11 14:08:20 +08:00
hyx	67189ade10	fix:1.撤销 subscriber top app 上下行数据等于0时转成<0.01	2023-12-11 11:34:12 +08:00
hyx	6c9a05f98d	fix:1.subscriber top app 展示数据等于0时转成<0.01	2023-12-11 11:28:47 +08:00
hyx	720754bee2	fix:1.subscriber kpi及top app 展示数据等于0时转成<0.01	2023-12-09 11:24:21 +08:00
hyx	27c1d28870	CN-1510 feat:更改detection柱状图的tooltip交互方式	2023-12-09 10:16:41 +08:00
chenjinsong	535d2646b2	fix: policy接口参数变更	2023-12-08 16:23:06 +08:00
hyx	51d6c1d4be	Merge remote-tracking branch 'origin/dev' into dev	2023-12-08 09:49:43 +08:00
hyx	742cf5d6f2	subscriber 基本信息中实体类型名称国际化	2023-12-08 09:49:21 +08:00
刘洪洪	a1ae084216	CN-1479 fix: 搜索组件text和tag模式交互添加枚举	2023-12-07 18:23:20 +08:00
hyx	bca51683e5	fix:实体详情基本信息部分底部空白过大调整	2023-12-07 18:14:38 +08:00
chenjinsong	da2ac78ea7	fix: 修复有时刷新后地图无法显示的问题	2023-12-07 17:22:50 +08:00
chenjinsong	c55a205003	fix: 修复有时刷新后地图无法显示的问题	2023-12-07 16:34:18 +08:00
hyx	f54ca30a58	1.CN-1506 Subscriber详情页基础信息图表开发;2.时间选择器组件选择具体日期时，显示省略号；	2023-12-07 16:25:14 +08:00
chenjinsong	ab30ddf49b	fix: 更正subscriber地图标题	2023-12-07 11:39:48 +08:00
刘洪洪	8cd3f87c3e	CN-1479 fix: 搜索组件添加showHint自动完成提示	2023-12-07 10:03:31 +08:00
chenjinsong	5106f23c2b	fix: 修改subscriber地图组件url	2023-12-06 18:23:59 +08:00
hanyuxia	27e59586ed	暂时隐藏subscriber基本信息的Analysis	2023-12-06 17:52:36 +08:00
hanyuxia	da9ae6831e	fix: 1.错误信息提示框将时间选择器组件遮住；2.subscriber kpi代码调整；	2023-12-06 17:30:45 +08:00
hanyuxia	2f315bf52c	CN-1507 时间选择器增加左对齐的风格	2023-12-06 16:46:13 +08:00
刘洪洪	2b3f6e6b31	fix: 修复实体列表、检测界面的时间在刷新界面后显示异常的问题	2023-12-06 16:37:49 +08:00
chenjinsong	74d95f110e	CN-1508 feat: subscriber流量曲线图开发	2023-12-06 16:16:12 +08:00
chenjinsong	2c12284415	CN-1484 fix: 调整error提示的位置	2023-12-01 18:08:38 +08:00
chenjinsong	60d06792b4	CN-1484 feat: 地图事件开发	2023-12-01 17:22:32 +08:00
chenjinsong	8bbebc3a8b	CN-1484 feat: 静态地图	2023-11-30 17:02:44 +08:00
hyx	d43a9c8bba	CN-1488 Subscriber详情页TAB组件开发	2023-11-30 09:16:45 +08:00
chenjinsong	d996769f7e	fix: 修复测试用例报错问题	2023-11-27 11:23:31 +08:00
hanyuxia	a9e84fd714	CN-1483 network overview单位统一	2023-11-24 17:11:42 +08:00
hanyuxia	6450e8e050	CN-1481 Subscribe详情页KPI组件开发;CN-1482 Subscribe详情页top app组件开发	2023-11-24 14:39:33 +08:00
chenjinsong	f25805ea0a	CN-1456 feat: 一些国际化	2023-11-22 16:48:17 +08:00
刘洪洪	5d42334074	fix: 恢复被误删的代码	2023-11-22 10:47:52 +08:00
刘洪洪	b30a8a8a25	fix: 实体列表恢复事件数量，并完善下拉详情和列表事件数量的一致性	2023-11-22 10:44:17 +08:00
刘洪洪	bfb1d93d95	fix: 修复npm--event的严重程度前色块标识丢失的问题	2023-11-21 18:33:22 +08:00
刘洪洪	0fa7aeebe6	fix: 修复实体详情tab因前面接口报错导致后面tab的数量显示为0的问题	2023-11-21 18:09:39 +08:00
hanyuxia	6e8566db75	fix: npm 下钻表格自定义配置metric时，界面混乱（名称过长导致）	2023-11-21 17:47:38 +08:00