Merge branch 'cherry-pick-3f450020' into 'dev-23.07'

fix: 修复实体下拉预览跳转url参数不对的问题 See merge request cyber-narrator/cn-ui!33
fix: 修复实体下拉预览跳转url参数不对的问题
2023-07-17 12:08:09 +00:00 · 2023-07-17 20:08:03 +08:00 · 2023-07-17 11:09:03 +08:00 · 2023-07-17 10:48:22 +08:00 · 2023-07-17 10:48:13 +08:00 · 2023-07-17 09:50:21 +08:00
198 changed files with 19381 additions and 3819 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -91,11 +91,11 @@ build_release_image:
    - echo '提交的版本是'
    - echo $CI_COMMIT_REF_NAME
    - echo "docker build"
-    - sudo docker build --no-cache -t cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG .
+    - sudo docker build --no-cache -t cn-ui:$CI_COMMIT_TAG .
    - echo "docker tag"
-    - sudo docker tag cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG
+    - sudo docker tag cn-ui:$CI_COMMIT_TAG 192.168.40.153:9080/cyber-narrator/cn-ui:$CI_COMMIT_TAG
    - echo "docker push"
-    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG
+    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui:$CI_COMMIT_TAG
  only:
    - tags
  tags:
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
  "dependencies": {
    "@amcharts/amcharts4": "^4.10.24",
    "@amcharts/amcharts4-geodata": "^4.1.20",
+    "@antv/g6": "^4.8.17",
    "axios": "^0.21.1",
    "babel-plugin-lodash": "^3.3.4",
    "codemirror": "^5.65.1",
@@ -40,7 +41,9 @@
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.11.4",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-private-methods": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.12.1",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-typescript": "^7.10.4",
    "@commitlint/cli": "^9.1.2",
--- a/public/assets/knowledgeBaseTemplate.zip
+++ b/public/assets/knowledgeBaseTemplate.zip
--- a/public/config.js
+++ b/public/config.js
@@ -1,4 +1,5 @@
-var BASE_CONFIG = {
-  baseUrl: 'http://192.168.44.54:8090/',
-  version: '2.0.2021.05.11.19.43'
+const BASE_CONFIG = {
+  baseUrl: 'http://192.168.44.54:8091/',
+  version: '23.06',
+  apiVersion: 'v1'
 }
--- a/public/images/flag/011-china.svg
+++ b/public/images/flag/011-china.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect y="85.331" style="fill:#D80027;" width="512" height="341.337"/>
+<g>
+	<polygon style="fill:#FFDA44;" points="178.923,189.567 193.579,234.674 241.008,234.674 202.637,262.552 217.294,307.661
+		178.923,279.782 140.552,307.661 155.208,262.552 116.837,234.674 164.266,234.674 	"/>
+	<polygon style="fill:#FFDA44;" points="271.3,339.593 256.91,329.138 242.522,339.592 248.017,322.678 233.628,312.223
+		251.414,312.223 256.91,295.307 262.408,312.223 280.193,312.223 265.804,322.677 	"/>
+	<polygon style="fill:#FFDA44;" points="308.837,287.927 291.052,287.927 285.556,304.841 280.06,287.928 262.273,287.927
+		276.664,277.472 271.166,260.557 285.556,271.01 299.945,260.557 294.449,277.472 	"/>
+	<polygon style="fill:#FFDA44;" points="308.837,224.063 294.449,234.518 299.944,251.432 285.556,240.979 271.166,251.434
+		276.664,234.517 262.273,224.065 280.061,224.063 285.556,207.147 291.052,224.063 	"/>
+	<polygon style="fill:#FFDA44;" points="271.3,172.397 265.805,189.313 280.193,199.766 262.408,199.767 256.91,216.684
+		251.414,199.766 233.629,199.768 248.018,189.312 242.522,172.396 256.91,182.851 	"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/public/images/flag/142-australia.svg
+++ b/public/images/flag/142-australia.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect y="85.333" style="fill:#0052B4;" width="512" height="341.337"/>
+<g>
+	<path style="fill:#F0F0F0;" d="M223.397,255.996c0.273-0.304,0.543-0.609,0.813-0.916c-0.27,0.308-0.546,0.61-0.82,0.916H223.397z"
+		/>
+	<polygon style="fill:#F0F0F0;" points="189.217,297.923 200.175,320.836 224.922,315.118 213.839,337.971 233.739,353.752
+		208.963,359.337 209.032,384.735 189.217,368.845 169.403,384.735 169.472,359.337 144.696,353.752 164.596,337.971
+		153.513,315.118 178.259,320.836 	"/>
+	<polygon style="fill:#F0F0F0;" points="387.076,326.387 392.303,337.316 404.106,334.588 398.82,345.488 408.312,353.016
+		396.494,355.679 396.526,367.793 387.076,360.215 377.626,367.793 377.658,355.679 365.841,353.016 375.332,345.488
+		370.047,334.588 381.85,337.316 	"/>
+	<polygon style="fill:#F0F0F0;" points="338.453,210.448 343.68,221.378 355.483,218.649 350.197,229.55 359.688,237.078
+		347.871,239.741 347.903,251.856 338.453,244.276 329.002,251.856 329.035,239.741 317.217,237.078 326.708,229.55
+		321.424,218.649 333.226,221.378 	"/>
+	<polygon style="fill:#F0F0F0;" points="387.076,144.198 392.303,155.128 404.106,152.398 398.82,163.3 408.311,170.827
+		396.494,173.491 396.526,185.605 387.076,178.025 377.626,185.605 377.658,173.491 365.841,170.827 375.332,163.3 370.047,152.398
+		381.85,155.128 	"/>
+	<polygon style="fill:#F0F0F0;" points="429.547,193.886 434.774,204.815 446.576,202.087 441.292,212.987 450.783,220.514
+		438.965,223.178 438.998,235.292 429.547,227.714 420.097,235.292 420.129,223.178 408.312,220.514 417.803,212.987
+		412.517,202.087 424.32,204.815 	"/>
+	<polygon style="fill:#F0F0F0;" points="399.179,251.856 403.289,264.508 416.593,264.508 405.83,272.328 409.942,284.98
+		399.179,277.161 388.414,284.98 392.526,272.328 381.763,264.508 395.067,264.508 	"/>
+	<polygon style="fill:#F0F0F0;" points="256,85.333 256,115.886 210.833,140.985 256,140.985 256,200.344 196.897,200.344
+		256,233.179 256,255.996 229.32,255.996 155.826,215.17 155.826,255.996 100.174,255.996 100.174,207.423 12.744,255.996
+		0,255.996 0,225.443 45.167,200.344 0,200.344 0,140.985 59.103,140.985 0,108.139 0,85.333 26.68,85.333 100.174,126.16
+		100.174,85.333 155.826,85.333 155.826,133.906 243.256,85.333 	"/>
+</g>
+<polygon style="fill:#D80027;" points="144,85.33 112,85.33 112,154.662 0,154.662 0,186.662 112,186.662 112,255.996 144,255.996
+	144,186.662 256,186.662 256,154.662 144,154.662 "/>
+<polygon style="fill:#0052B4;" points="155.826,200.344 256,255.996 256,240.259 184.153,200.344 "/>
+<polygon style="fill:#F0F0F0;" points="155.826,200.344 256,255.996 256,240.259 184.153,200.344 "/>
+<g>
+	<polygon style="fill:#D80027;" points="155.826,200.344 256,255.996 256,240.259 184.153,200.344 	"/>
+	<polygon style="fill:#D80027;" points="71.846,200.344 0,240.259 0,255.996 0,255.996 100.174,200.344 	"/>
+</g>
+<polygon style="fill:#0052B4;" points="100.174,140.982 0,85.33 0,101.067 71.847,140.982 "/>
+<polygon style="fill:#F0F0F0;" points="100.174,140.982 0,85.33 0,101.067 71.847,140.982 "/>
+<g>
+	<polygon style="fill:#D80027;" points="100.174,140.982 0,85.33 0,101.067 71.847,140.982 	"/>
+	<polygon style="fill:#D80027;" points="184.154,140.982 256,101.067 256,85.33 256,85.33 155.826,140.982 	"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/public/images/flag/185-united
+++ b/public/images/flag/185-united
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect y="85.331" style="fill:#F0F0F0;" width="512" height="341.337"/>
+<g>
+	<rect y="127.994" style="fill:#D80027;" width="512" height="42.663"/>
+	<rect y="213.331" style="fill:#D80027;" width="512" height="42.663"/>
+	<rect y="298.657" style="fill:#D80027;" width="512" height="42.663"/>
+	<rect y="383.994" style="fill:#D80027;" width="512" height="42.663"/>
+</g>
+<rect y="85.331" style="fill:#2E52B2;" width="256" height="183.797"/>
+<g>
+	<polygon style="fill:#F0F0F0;" points="99.822,160.624 95.699,173.308 82.363,173.308 93.154,181.143 89.031,193.826
+		99.822,185.991 110.606,193.826 106.484,181.143 117.275,173.308 103.938,173.308 	"/>
+	<polygon style="fill:#F0F0F0;" points="103.938,219.08 99.822,206.397 95.699,219.08 82.363,219.08 93.154,226.916 89.031,239.599
+		99.822,231.763 110.606,239.599 106.484,226.916 117.275,219.08 	"/>
+	<polygon style="fill:#F0F0F0;" points="47.577,219.08 43.46,206.397 39.337,219.08 26.001,219.08 36.792,226.916 32.669,239.599
+		43.46,231.763 54.245,239.599 50.123,226.916 60.912,219.08 	"/>
+	<polygon style="fill:#F0F0F0;" points="43.46,160.624 39.337,173.308 26.001,173.308 36.792,181.143 32.669,193.826 43.46,185.991
+		54.245,193.826 50.123,181.143 60.912,173.308 47.577,173.308 	"/>
+	<polygon style="fill:#F0F0F0;" points="99.822,114.85 95.699,127.535 82.363,127.535 93.154,135.371 89.031,148.054
+		99.822,140.218 110.606,148.054 106.484,135.371 117.275,127.535 103.938,127.535 	"/>
+	<polygon style="fill:#F0F0F0;" points="43.46,114.85 39.337,127.535 26.001,127.535 36.792,135.371 32.669,148.054 43.46,140.218
+		54.245,148.054 50.123,135.371 60.912,127.535 47.577,127.535 	"/>
+	<polygon style="fill:#F0F0F0;" points="156.183,160.624 152.061,173.308 138.725,173.308 149.515,181.143 145.394,193.826
+		156.183,185.991 166.969,193.826 162.846,181.143 173.637,173.308 160.301,173.308 	"/>
+	<polygon style="fill:#F0F0F0;" points="160.301,219.08 156.183,206.397 152.061,219.08 138.725,219.08 149.515,226.916
+		145.394,239.599 156.183,231.763 166.969,239.599 162.846,226.916 173.637,219.08 	"/>
+	<polygon style="fill:#F0F0F0;" points="216.663,219.08 212.546,206.397 208.423,219.08 195.088,219.08 205.877,226.916
+		201.755,239.599 212.546,231.763 223.331,239.599 219.208,226.916 229.999,219.08 	"/>
+	<polygon style="fill:#F0F0F0;" points="212.546,160.624 208.423,173.308 195.088,173.308 205.877,181.143 201.755,193.826
+		212.546,185.991 223.331,193.826 219.208,181.143 229.999,173.308 216.663,173.308 	"/>
+	<polygon style="fill:#F0F0F0;" points="156.183,114.85 152.061,127.535 138.725,127.535 149.515,135.371 145.394,148.054
+		156.183,140.218 166.969,148.054 162.846,135.371 173.637,127.535 160.301,127.535 	"/>
+	<polygon style="fill:#F0F0F0;" points="212.546,114.85 208.423,127.535 195.088,127.535 205.877,135.371 201.755,148.054
+		212.546,140.218 223.331,148.054 219.208,135.371 229.999,127.535 216.663,127.535 	"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/public/images/flag/207-germany.svg
+++ b/public/images/flag/207-germany.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect y="85.331" style="fill:#D80027;" width="512" height="341.337"/>
+<rect y="85.331" width="512" height="113.775"/>
+<rect y="312.882" style="fill:#FFDA44;" width="512" height="113.775"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/public/images/flag/218-south
+++ b/public/images/flag/218-south
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect y="85.331" style="fill:#FFFFFF;" width="512" height="341.337"/>
+<path style="fill:#D80027;" d="M318.33,255.994c0,15.583-27.906,54.539-62.33,54.539s-62.33-38.957-62.33-54.539
+	c0-34.424,27.906-62.33,62.33-62.33S318.33,221.57,318.33,255.994z"/>
+<path style="fill:#0052B4;" d="M318.33,255.994c0,34.424-27.906,62.33-62.33,62.33s-62.33-27.906-62.33-62.33"/>
+<rect x="324.205" y="300.55" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -119.6501 327.8224)" width="23.374" height="15.582"/>
+<rect x="296.657" y="328.085" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -147.1889 316.408)" width="23.374" height="15.582"/>
+<rect x="357.26" y="333.586" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -133.3277 360.8719)" width="23.374" height="15.582"/>
+<rect x="329.712" y="361.143" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -160.8823 349.464)" width="23.374" height="15.582"/>
+<rect x="340.732" y="317.068" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -126.4889 344.3472)" width="23.374" height="15.582"/>
+<rect x="313.185" y="344.614" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -154.0356 332.936)" width="23.374" height="15.582"/>
+<rect x="307.483" y="165.555" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 455.5344 535.3814)" width="62.33" height="15.582"/>
+<rect x="296.656" y="168.315" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 401.8486 518.6624)" width="23.374" height="15.581"/>
+<rect x="324.193" y="195.864" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 429.3763 585.1636)" width="23.374" height="15.581"/>
+<rect x="329.693" y="135.257" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 481.6206 485.591)" width="23.374" height="15.582"/>
+<rect x="357.252" y="162.807" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 509.1863 552.108)" width="23.374" height="15.582"/>
+<rect x="125.671" y="347.369" transform="matrix(0.7071 0.7071 -0.7071 0.7071 297.0721 -6.8758)" width="62.33" height="15.582"/>
+<rect x="175.435" y="344.62" transform="matrix(0.7071 0.7071 -0.7071 0.7071 303.9983 -29.0962)" width="23.374" height="15.581"/>
+<rect x="147.898" y="317.072" transform="matrix(0.7071 0.7071 -0.7071 0.7071 276.4547 -17.6934)" width="23.374" height="15.582"/>
+<rect x="158.724" y="314.322" transform="matrix(0.7071 0.7071 -0.7071 0.7071 283.386 -39.9269)" width="62.33" height="15.582"/>
+<rect x="125.672" y="149.023" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 378.6212 156.7987)" width="62.33" height="15.582"/>
+<rect x="142.182" y="165.56" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 418.4998 173.3536)" width="62.33" height="15.582"/>
+<rect x="158.712" y="182.089" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 458.4043 189.8812)" width="62.33" height="15.581"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -40,6 +40,7 @@
 <script>
 import { mapActions } from 'vuex'
 import { post, get } from '@/utils/http'
+import axios from 'axios'
 import { useRouter } from 'vue-router'
 import { storageKey } from '@/utils/constants'
 import { api } from '@/utils/api'
@@ -69,21 +70,21 @@ export default {
        return
      }
      this.loading = true
-      post(api.login, { username: this.username, pin: this.pin }).then(
+      axios.post(api.login, { username: this.username, pin: this.pin }).then(
        res => {
-          if (res.code === 200) {
-            if (!_.isEmpty(res.data.lang)) {
-              localStorage.setItem(storageKey.language, res.data.lang)
+          if (res.data.code === 200) {
+            if (!_.isEmpty(res.data.data.lang)) {
+              localStorage.setItem(storageKey.language, res.data.data.lang)
            }
-            if (!_.isEmpty(res.data.theme)) {
-              localStorage.setItem(storageKey.theme, res.data.theme)
+            if (!_.isEmpty(res.data.data.theme)) {
+              localStorage.setItem(storageKey.theme, res.data.data.theme)
            }
            res.loginSuccessPath = this.$route.query.redirect
            this.loginSuccess(res)
            localStorage.setItem(storageKey.username, this.username)
-            localStorage.setItem(storageKey.userId, res.data.userId)
-            localStorage.setItem(storageKey.token, res.data.token)
-          } else if (res.code === 518005) {
+            localStorage.setItem(storageKey.userId, res.data.data.userId)
+            localStorage.setItem(storageKey.token, res.data.data.token)
+          } else if (res.data.code === 518005) {
            this.$message.error(this.$t('Incorrect username or password'))
            this.loading = false
            this.blockOperation.query = false
@@ -97,7 +98,7 @@ export default {
        console.error(e)
        this.loading = false
        this.blockOperation.query = false
-        this.$message.error(this.$t('tip.unknownError'))
+        this.$message.error(this.errorMsgHandler(e))
      })
    },
    queryAppearance () {
@@ -119,7 +120,7 @@ export default {
      window.$dayJs.tz.setDefault(data.timezone)
      localStorage.setItem(storageKey.timezoneOffset, window.$dayJs.tz().utcOffset() / 60)
      localStorage.setItem(storageKey.timezoneLocalOffset, dayjs().utcOffset() / 60)
-      localStorage.setItem(storageKey.dateFormat, data.dateFormat)
+      localStorage.setItem(storageKey.dateFormat, data.date_format)
      localStorage.setItem(storageKey.sysName, data.system_name)
      localStorage.setItem(storageKey.sysLogo, data.system_logo)
    }
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -60,3 +60,12 @@ body {
    display: none !important;
  }
 }
+
+// 表头单词换行不被拆开
+.el-table th > .cell  {
+  word-break: keep-all !important;
+}
+// 表格内容换行，不对中文生效，避免中文出现省略号
+.el-table .cell {
+  word-break: break-word !important;
+}
--- a/src/assets/css/common/right-box-common.scss
+++ b/src/assets/css/common/right-box-common.scss
@@ -1,302 +1,304 @@
-.el-drawer.rtl {
-  width: 700px !important;
-}
-.el-drawer__body {
+.common-right-box {
  height: 100%;
-}
-.right-box, .right-sub-box {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  height: 100%;
-  width: 100%;

-  .el-date-editor {
-    .el-input__inner {
-      padding-left: 32px;
-    }
+  .el-drawer__body {
+    height: 100%;
  }
-}

-.right-box__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 60px;
-  padding: 0 20px;
-  border-bottom: 1px solid $--right-box-border-color;
+  .right-box, .right-sub-box {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    height: 100%;
+    width: 100%;

-  .header__title {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-  }
-  .header__operation {
-    i {
-      color: #999;
-      font-size: 14px;
-    }
-  }
-}
-
-.right-box__container {
-  height: calc(100% - 130px);
-  padding: 0 30px;
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  .el-textarea__inner {
-    padding: 5px 70px 4px 15px;
-  }
-  .container__form-width.container__form{
-    .input-box {
-      .el-textarea {
-        .el-textarea__inner {
-          width: 530px;
-          height: 32px;
-          padding: 5px 70px 4px 10px;
-        }
-        .el-input__count {
-          right: -40px;
-          line-height: 29px;
-          height: 25px;
-        }
+    .el-date-editor {
+      .el-input__inner {
+        padding-left: 32px;
      }
    }
  }
-  .el-form-item__content {
-    .input-box {
-      .el-textarea {
-        .el-textarea__inner {
-          width: 517px;
-          height: 32px;
-          padding: 5px 70px 4px 10px;
-        }
-        .el-input__count {
-          right: -40px;
-          line-height: 29px;
-          height: 25px;
-        }
+
+  .right-box__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 60px;
+    padding: 0 20px;
+    border-bottom: 1px solid $--right-box-border-color;
+
+    .header__title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
+    .header__operation {
+      i {
+        color: #999;
+        font-size: 14px;
      }
    }
  }
-  .form-row-item {
-    .input-box {
-      .el-textarea {
-        .el-textarea__inner {
-          width: 466px;
-          height: 32px;
-          padding: 5px 70px 4px 10px;
-        }
-        .el-input__count {
-          right: 0;
+
+  .right-box__container {
+    height: calc(100% - 130px);
+    padding: 0 30px;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .el-textarea__inner {
+      padding: 5px 70px 4px 15px;
+    }
+    .container__form-width.container__form{
+      .input-box {
+        .el-textarea {
+          .el-textarea__inner {
+            width: 530px;
+            height: 32px;
+            padding: 5px 70px 4px 10px;
+          }
+          .el-input__count {
+            right: -40px;
+            line-height: 29px;
+            height: 25px;
+          }
        }
      }
    }
-  }
-  .el-form-item {
-    .el-input__count {
-      line-height: 29px;
-      height: 25px;
+    .el-form-item__content {
+      .input-box {
+        .el-textarea {
+          .el-textarea__inner {
+            width: 517px;
+            height: 32px;
+            padding: 5px 70px 4px 10px;
+          }
+          .el-input__count {
+            right: -40px;
+            line-height: 29px;
+            height: 25px;
+          }
+        }
+      }
    }
-  }
-  .el-form-item {
-    .el-input--small.not-fixed-height {
-      height: 32px;
+    .form-row-item {
+      .input-box {
+        .el-textarea {
+          .el-textarea__inner {
+            width: 466px;
+            height: 32px;
+            padding: 5px 70px 4px 10px;
+          }
+          .el-input__count {
+            right: 0;
+          }
+        }
+      }
+    }
+    .el-form-item {
      .el-input__count {
        line-height: 29px;
        height: 25px;
      }
    }
-  }
-  .el-input__inner, .el-textarea__inner {
-    padding: 0 10px;
-    border-radius: $--border-radius-primary;
-    border: 1px solid $--right-box-border-color;
-  }
-  .el-textarea__inner {
-    padding: 5px 70px 4px 15px;
-  }
-  .el-form {
-    padding-top: 20px;
-
    .el-form-item {
-      margin-bottom: 16px;
-      .el-form-item__label{
-        padding-bottom: 6px;
-        font-size: 14px;
-        line-height: 16px;
-        color: #666;
-      }
-
-      .el-input__inner:hover {
-        border-color: darken($--right-box-border-color, 10%);
-      }
-      .el-input__inner:focus {
-        border-color: darken($--right-box-border-color, 20%);
+      .el-input--small.not-fixed-height {
+        height: 32px;
+        .el-input__count {
+          line-height: 29px;
+          height: 25px;
+        }
      }
    }
-    .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
-    }
-
-    .form__sub-title {
-      display: flex;
-      justify-content: space-between;
+    .el-input__inner, .el-textarea__inner {
      padding: 0 10px;
-      margin-bottom: 20px;
-      line-height: 32px;
-      font-size: 14px;
-      font-weight: bold;
-      color: #555;
-      background-color: #F6F6F6;
-    }
-    /* 虚线框类型的form-item */
-    .form__dotted-item {
-      padding: 10px 10px 6px 10px;
-      margin-bottom: 10px;
-      border: 1px dashed $--border-color-primary;
      border-radius: $--border-radius-primary;
+      border: 1px solid $--right-box-border-color;
+    }
+    .el-textarea__inner {
+      padding: 5px 70px 4px 15px;
+    }
+    .el-form {
+      padding-top: 20px;

      .el-form-item {
-        margin-bottom: 0;
-
-        .el-form-item__label {
-          width: 100%;
+        margin-bottom: 16px;
+        .el-form-item__label{
+          padding-bottom: 6px;
+          font-size: 14px;
+          line-height: 16px;
+          color: #666;
        }
-        .form__labels-label {
-          display: flex;
-          justify-content: space-between;
+
+        .el-input__inner:hover {
+          border-color: darken($--right-box-border-color, 10%);
+        }
+        .el-input__inner:focus {
+          border-color: darken($--right-box-border-color, 20%);
        }
      }
+      .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
+      }
+
+      .form__sub-title {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        margin-bottom: 20px;
+        line-height: 32px;
+        font-size: 14px;
+        font-weight: bold;
+        color: #555;
+        background-color: #F6F6F6;
+      }
+      /* 虚线框类型的form-item */
+      .form__dotted-item {
+        padding: 10px 10px 6px 10px;
+        margin-bottom: 10px;
+        border: 1px dashed $--border-color-primary;
+        border-radius: $--border-radius-primary;
+
+        .el-form-item {
+          margin-bottom: 0;
+
+          .el-form-item__label {
+            width: 100%;
+          }
+          .form__labels-label {
+            display: flex;
+            justify-content: space-between;
+          }
+        }
+      }
+      .form__create-btn {
+        margin-bottom: 20px;
+        width: 300px;
+        height: 28px;
+        border: 1px solid lighten($--color-primary, 60%);
+        border-radius: $--border-radius-primary;
+        background-color: lighten($--color-primary, 95%);
+
+        i {
+          color: $--color-primary;
+        }
+      }
+      .form__flex-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .one-third-form-item-left{
+        display: inline-block;
+        width: calc(50% - 5px);
+      }
+      .one-third-form-item-right{
+        display: inline-block;
+        width: calc(50% - 5px);
+      }
+      .form-item--half-width-other-two{
+        display: inline-block;
+        width: calc(50% - 10px);
+      }
+      .form-item--half-width-other{
+        display: inline-block;
+        width: calc(50% - 10px);
+      }
    }
-    .form__create-btn {
-      margin-bottom: 20px;
+  }
+
+  .right-box__footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 70px;
+    box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77);
+
+    .footer__btn {
+      margin: 0 15px;
+      height: 30px;
+      min-width: 74px;
+      padding: 0 15px;
+      color: white;
+      background-color: $--color-primary;
+      border: none;
+      border-radius: 4px;
+      outline: none;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background-color linear .2s, color linear .1s;
+    }
+    .footer__btn:hover:not(.footer__btn--disabled) {
+      background-color: lighten($--color-primary, 10%);
+    }
+    .footer__btn--light {
+      background-color: white;
+      border: 1px solid $--border-color-primary;
+      color: #333;
+    }
+    .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
+      background-color: white;
+      border-color: lighten($--color-primary, 40%);
+      color: $--color-primary;
+    }
+    .footer__btn--disabled {
+      opacity: .6;
+      cursor: default;
+    }
+  }
+  /* 隐藏label新增按钮处级联选择器的input */
+  .hide-casc-input {
+    position: relative;
+
+    .hide-input {
+      position: absolute;
+      top: 0;
      width: 300px;
-      height: 28px;
-      border: 1px solid lighten($--color-primary, 60%);
-      border-radius: $--border-radius-primary;
-      background-color: lighten($--color-primary, 95%);
+      opacity: 0;
+    }
+  }
+  .label__multi-text {
+    display: flex;
+    justify-content: space-between;
+  }
+  .right-box__select {
+    width: 100%;
+  }
+  .el-select-last.right-box-select-dropdown {
+    left: 1698px;
+  }
+  .limit-height .el-cascader-menu {
+    max-height: 200px;
+    overflow: auto;
+  }

-      i {
-        color: $--color-primary;
+  .form-items--half-width-group {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .form-item--half-width {
+      width: calc(50% - 10px);
+
+      .el-select {
+        width: 100%;
      }
    }
-    .form__flex-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    .one-third-form-item-left{
-      display: inline-block;
-      width: calc(50% - 5px);
-    }
-    .one-third-form-item-right{
-      display: inline-block;
-      width: calc(50% - 5px);
-    }
-    .form-item--half-width-other-two{
-      display: inline-block;
-      width: calc(50% - 10px);
-    }
-    .form-item--half-width-other{
-      display: inline-block;
-      width: calc(50% - 10px);
-    }
  }
-}
-
-.right-box__footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 70px;
-  box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77);
-
-  .footer__btn {
-    margin: 0 15px;
-    height: 30px;
-    min-width: 74px;
-    padding: 0 15px;
-    color: white;
-    background-color: $--color-primary;
-    border: none;
-    border-radius: 4px;
-    outline: none;
-    font-size: 14px;
-    cursor: pointer;
-    transition: background-color linear .2s, color linear .1s;
-  }
-  .footer__btn:hover:not(.footer__btn--disabled) {
-    background-color: lighten($--color-primary, 10%);
-  }
-  .footer__btn--light {
-    background-color: white;
-    border: 1px solid $--border-color-primary;
-    color: #333;
-  }
-  .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
-    background-color: white;
-    border-color: lighten($--color-primary, 40%);
-    color: $--color-primary;
-  }
-  .footer__btn--disabled {
-    opacity: .6;
-    cursor: default;
-  }
-}
-/* 隐藏label新增按钮处级联选择器的input */
-.hide-casc-input {
-  position: relative;
-
-  .hide-input {
+  .cn-icon-minus-position {
+    display: inline-flex;
+    flex-direction: column;
    position: absolute;
-    top: 0;
-    width: 300px;
-    opacity: 0;
+    right: 0;
+    top: 50%;
+    height: 100%;
+    transform: translateY(-50%);
+    justify-content: space-between;
+  }
+  .form-item--end-with-btn { // 末尾留出btn宽度空间的form item
+
+  }
+  .el-form-item__content .el-autocomplete .el-input-group {
+    vertical-align: unset;
  }
 }
-.label__multi-text {
-  display: flex;
-  justify-content: space-between;
-}
-.right-box__select {
-  width: 100%;
-}
-.el-select-last.right-box-select-dropdown {
-  left: 1698px;
-}
-.limit-height .el-cascader-menu {
-  max-height: 200px;
-  overflow: auto;
-}
-
-.form-items--half-width-group {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  .form-item--half-width {
-    width: calc(50% - 10px);
-
-    .el-select {
-      width: 100%;
-    }
-  }
-}
-.cn-icon-minus-position {
-  display: inline-flex;
-  flex-direction: column;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  height: 100%;
-  transform: translateY(-50%);
-  justify-content: space-between;
-}
-.form-item--end-with-btn { // 末尾留出btn宽度空间的form item
-
-}
-.el-form-item__content .el-autocomplete .el-input-group {
-  vertical-align: unset;
-}
--- a/src/assets/css/components/components/advancedSearch/advanced-search.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search.scss
@@ -42,6 +42,10 @@
        color: #A6AAAE;
        font-size: 20px;
      }
+      .cn-icon-filter {
+        color: #A6AAAE;
+        font-size: 20px;
+      }
      .el-icon-search {
        color: #3976CB;
        font-size: 32px;
@@ -64,6 +68,10 @@
        color: #A6AAAE;
        font-size: 14px;
      }
+      .cn-icon-filter {
+        color: #A6AAAE;
+        font-size: 14px;
+      }
      .el-icon-search {
        color: white;
        font-size: 16px;
--- a/src/assets/css/components/components/advancedSearch/advanced-search2.scss
+++ b/src/assets/css/components/components/advancedSearch/advanced-search2.scss
@@ -10,9 +10,9 @@
      right: 10px;

      .search__suffix {
-        margin-left: 8px;
+        // margin-left: 8px;

-        .cn-icon-search-advance, .cn-icon-search-normal {
+        .cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter {
          color: #A6AAAE;
          font-size: 18px;
        }
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -1,7 +1,7 @@
 .date-range-box {
  font-size: 14px;
  border-radius: 2px;
-  margin-right: 10px;
+  //margin-right: 10px;
  display: flex;
  cursor: pointer;

@@ -204,3 +204,11 @@
    visibility: hidden !important;
  }
 }
+
+.my-date-picker {
+  .el-popper__arrow {
+    position: absolute;
+    top: 20px !important;
+    left: 642px !important; // element上样式设定是left，添加right不生效
+  }
+}
--- a/src/assets/css/components/components/table/common.scss
+++ b/src/assets/css/components/components/table/common.scss
@@ -1,5 +1,5 @@
 .pop-custom {
-  padding: 0 12px 12px 12px;
+  padding: 12px;
  border: 1px solid #EBEEF5;
  position: absolute;
  top: 55px;
@@ -103,3 +103,54 @@
    border-radius: 2px 0px 0px 2px;
  }
 }
+
+.list {
+  list-style: none;
+  padding-inline-start: 0 !important;
+  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: 0;
+    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;
+    }
+  }
+}
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -65,6 +65,8 @@
@import './views/charts2/linkBlock';
@import './views/charts2/linkTrafficSankey';
@import './views/charts2/linkDirectionGrid';
+@import './views/charts2/domainNameResolution.scss';
+@import './views/charts2/informationAggregation.scss';
@import 'views/charts2/linkTrafficLine';
@import 'views/charts2/dnsTrafficLine';
@import 'views/charts2/dnsRecentEvents';
@@ -76,5 +78,13 @@
@import './components/common/chart-tab';

@import 'views/administration/AdministrationTabs';
+@import 'views/administration/Appearance.scss';

@import 'views/setting/knowledgeBase';
+@import 'views/charts2/entityDetailLine';
+@import 'views/charts2/entityDetailTabs';
+@import 'views/charts2/digitalCertificate';
+@import 'views/charts2/entityDetailBasicInfo';
+
+@import "views/charts2/graphRightListBlock";
+@import "views/charts2/graphRightDetailBlock";
--- a/src/assets/css/components/views/administration/Appearance.scss
+++ b/src/assets/css/components/views/administration/Appearance.scss
@@ -0,0 +1,62 @@
+.appearance{
+  height: 100%;
+  display:flex;
+  flex-direction:column;
+  .appearance-form {
+    padding-top:40px;
+    padding-left:100px;
+    background-color: white;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .el-input {
+      width:600px;
+    }
+    .el-form .el-form-item .el-form-item__label {
+      padding-bottom: 6px;
+      font-size: 14px;
+      line-height: 16px;
+    }
+  }
+  .edit-appearance-base__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100px;
+    margin-top: 3px;
+    padding-left:200px;
+
+    .footer__btn {
+      margin: 0 10px;
+      height: 30px;
+      min-width: 74px;
+      padding: 0 15px;
+      color: white;
+      background-color: #38ACD2;
+      border: none;
+      border-radius: 4px;
+      outline: none;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background-color linear .2s, color linear .1s;
+    }
+    .footer__btn:hover:not(.footer__btn--disabled) {
+      background-color: lighten(#38ACD2, 10%);
+    }
+    .footer__btn--light {
+      background-color: #F5F6F7;
+      border: 1px solid $--border-color-primary;
+      color: #333;
+    }
+    .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
+      background-color: white;
+      border-color: lighten(#38ACD2, 40%);
+      color: #38ACD2;
+    }
+    .footer__btn--disabled {
+      opacity: .6;
+      cursor: default;
+    }
+  }
+}
--- a/src/assets/css/components/views/charts2/digitalCertificate.scss
+++ b/src/assets/css/components/views/charts2/digitalCertificate.scss
@@ -0,0 +1,70 @@
+.digital-certificate {
+  $font-family: NotoSansSChineseRegular;
+
+  .digital-certificate-header {
+    display: flex;
+    align-items: center;
+
+    .digital-certificate-header__icon {
+      width: 4px;
+      height: 16px;
+      background: #38ACD2;
+      border-radius: 1px;
+      margin-right: 6px;
+    }
+
+    .digital-certificate-header-name {
+      font-family: PingFangSC-Semibold;
+      font-size: 14px;
+      color: #575757;
+      font-weight: 600;
+    }
+  }
+
+  .digital-certificate-body {
+    height: auto;
+    min-height: 262px;
+    padding: 20px;
+    background: rgba(113, 113, 113, 0.04);
+    border: 1px solid #E2E5ECFF;
+    border-radius: 4px;
+
+    .digital-certificate-body-tags {
+      display: flex;
+      margin-bottom: 20px;
+    }
+
+    .certificate-list-list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .certificate-list-item {
+      width: 50%;
+      display: flex;
+      margin-bottom: 10px;
+
+      .certificate-list-item__label {
+        width: 176px;
+        font-family: $font-family;
+        font-size: 14px;
+        color: #717171;
+        font-weight: 400;
+      }
+
+      .certificate-list-item__value, .certificate-list-item__value1 {
+        width: calc(100% - 176px - 75px);
+        font-family: $font-family;
+        font-size: 14px;
+        color: #353636;
+        font-weight: 400;
+      }
+
+      .certificate-list-item__value1 {
+        padding-bottom: 2px;
+        border-bottom: 1px #353636 solid;
+        word-break: break-word;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts2/domainNameResolution.scss
+++ b/src/assets/css/components/views/charts2/domainNameResolution.scss
@@ -0,0 +1,78 @@
+.type-data__column {
+  display:flex;
+  flex-direction: column;
+  margin-left:5px;
+  margin-right:0px;
+  margin-top:0px;
+  .type-data {
+    display:flex;
+    flex-flow:row wrap;
+    margin-top:0px;
+    .type-title {
+      display:flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      margin-bottom:15px;
+      margin-right:10px;
+      font-family: PingFangSC-Semibold;
+      font-size: 14px;
+      color: #575757;
+      line-height: 20px;
+      font-weight: 600;
+      .title-mark {
+        width: 4px;
+        height: 16px;
+        margin-left:0px;
+        margin-right: 6px;
+        background: #38ACD2;
+        border-radius: 1px;
+      }
+      .type-title-word {
+        margin-right: 6px;
+      }
+    }
+
+    .more{
+      margin-bottom:20px;
+      .button {
+        color:#909399;
+        cursor: pointer;
+      }
+    }
+    .type-content {
+      margin-bottom:0px;
+      display:flex;
+      flex-flow: row wrap;
+      width:100%;
+      .data-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: rgba(119,131,145,0.06);
+        border: 1px solid rgba(119,131,145,0.36);
+        border-radius: 2px;
+        height:28px;
+        padding:8px 15px;
+        margin-right:10px;
+        margin-bottom:15px;
+        font-size: 12px;
+        color: #353636;
+        font-weight: 400;
+      }
+    }
+
+    .type-error-content {
+      width:100%;
+      height: 40px;
+      margin-bottom: 12px;
+      position: relative;
+
+      .type-error-content__block {
+        position: absolute;
+        left: -12px;
+        top: -12px;
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
+++ b/src/assets/css/components/views/charts2/entityDetailBasicInfo.scss
@@ -0,0 +1,186 @@
+.el-popper.analysis-popper {
+  top: -5px !important;
+  padding: 0;
+  border: 1px solid #C5C5C5;
+  border-radius: 4px;
+  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+
+  .el-popper__arrow {
+    display: none;
+  }
+  .analysis-entry {
+    display: flex;
+    flex-direction: column;
+
+    .analysis-entry__header {
+      height: 42px;
+      line-height: 42px;
+      background-color: #F7F7F7;
+      padding-left: 20px;
+      color: #353636;
+      border-radius: 4px 4px 0 0;
+    }
+    .analysis-entry__body {
+      display: flex;
+      height: 134px;
+      align-items: center;
+      justify-content: space-evenly;
+
+      .analysis-entry-item {
+        display: flex;
+        flex-direction: column;
+        min-width: 70px;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+          div i, span {
+            color: #046ECA;
+          }
+        }
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 9px;
+          height: 46px;
+          width: 46px;
+          border-radius: 50%;
+          background-color: #F5F6F8;
+
+          i {
+            color: #353636;
+            font-size: 22px;
+          }
+        }
+        span {
+          font-size: 12px;
+          color: #353636;
+        }
+      }
+    }
+  }
+}
+.entity-detail-basic-info {
+  position: relative;
+  padding: 35px 30px 0 30px;
+  height: 100%;
+  border: 1px solid #E2E5EC;
+  border-radius: 4px;
+
+  .dividing-line {
+    height: 1px;
+    width: 100%;
+    margin-top: 21px;
+    background-color: #EFF2F5;
+  }
+  .entity-type {
+    color: #717171;
+  }
+  .entity-basic-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .entity-basic-info__name {
+      display: flex;
+      align-items: center;
+
+      span {
+        padding-right: 12px;
+        font-family: Helvetica-Bold;
+        font-size: 32px;
+        color: #353636;
+        font-weight: bold;
+      }
+      div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 28px;
+        width: 28px;
+        border-radius: 50%;
+        background-color: #EFF1F4;
+        cursor: pointer;
+
+        i {
+          color: #717171;
+          font-size: 12px;
+        }
+      }
+    }
+    .analysis-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 24px;
+      padding: 0 10px;
+      font-size: 12px;
+      color: #046ECA;
+      cursor: pointer;
+      background-color: #FFF;
+      transition: background-color linear .2s;
+
+      &.analysis-btn--active {
+        background-color: #EBF7FA;
+        border-radius: 2px;
+      }
+      i {
+        padding-right: 4px;
+        font-size: 14px;
+      }
+    }
+  }
+  .entity-tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-top: 16px;
+    margin-bottom: -10px;
+
+    .entity-tag {
+      margin-bottom: 10px;
+      margin-right: 10px;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+  .entity-detail-info {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: space-around;
+    padding: 10px 0;
+
+    .detail-card {
+      display: flex;
+      padding: 0 12px;
+      width: 298px;
+      height: 83px;
+      align-items: center;
+
+      i {
+        font-size: 22px;
+        color: #353636;
+        margin-right: 14px;
+      }
+      .detail-card__text {
+        .detail-card__label {
+          margin-bottom: 6px;
+          font-size: 12px;
+          color: #717171;
+        }
+        .detail-card__value {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+          overflow: hidden;
+          color: #222;
+          line-height: 18px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/charts2/entityDetailLine.scss
+++ b/src/assets/css/components/views/charts2/entityDetailLine.scss
@@ -0,0 +1,68 @@
+.entity-detail-line {
+  height: 100%;
+  border-radius: 4px;
+
+  .line-header-right {
+    .panel__tools {
+      display: flex;
+      align-items: center;
+
+      & > .el-select {
+        width: 162px;
+        margin-right: 10px;
+
+        .select-prefix {
+          font-size: 14px;
+          color: #999;
+          padding: 0 6px 0 3px;
+        }
+
+        .el-input__inner {
+          font-size: 14px;
+          color: #353636;
+        }
+
+        .common-select {
+          top: 32px !important;
+        }
+      }
+
+      .panel__time {
+        display: flex;
+      }
+    }
+    .line-select-metric {
+      margin-right: 20px;
+
+      .el-input__inner {
+        width: 127px;
+        height: 24px;
+        line-height: 24px;
+        padding-left: 4px;
+        font-size: 12px;
+        color: #2C72C6;
+        font-weight: 400;
+        border-radius: 2px;
+      }
+    }
+
+    .line-select-reference-line {
+      margin-left: 0 !important;
+      line-height: 1;
+    }
+
+    .line-margin-right {
+      margin-right: 10px;
+    }
+
+    .line-date-right {
+      margin-right: 20px;
+    }
+
+    .entity-detail-date-time-range {
+      height: 24px;
+      line-height: 24px;
+      border: 1px solid #DCDFE6;
+    }
+  }
+}
--- a/src/assets/css/components/views/charts2/entityDetailTabs.scss
+++ b/src/assets/css/components/views/charts2/entityDetailTabs.scss
@@ -0,0 +1,102 @@
+.entity-detail-tabs {
+  position: relative;
+  $tab-border-color: #E2E5EC;
+  $tab-border-radius: 4px;
+  height: 100%;
+
+  .entity-detail-tabs__active-bar {
+    position: absolute;
+    height: 3px;
+    top: 1px;
+    background-color: #046EC9;
+    border-radius: 4px 4px 0 0;
+    transition: all linear .2s;
+    z-index: 3;
+  }
+
+  .cn-chart__tabs--border-card {
+    height: 100%;
+    border: none;
+    box-shadow: none;
+
+    & > .el-tabs__header {
+      background-color: #fff;
+      border-bottom: 1px solid $tab-border-color;
+
+      .el-tabs__item {
+        color: #353636;
+        user-select: none; // 避免鼠标框选文字
+
+        i {
+          margin-right: 8px;
+        }
+
+      }
+
+      .el-tabs__item:not(.is-disabled):not(.is-active):hover {
+        color: #353636;
+      }
+
+      .el-tabs__item.is-active {
+        color: #046ECA;
+        background-color: #FFFFFF;
+        border-right-color: $tab-border-color;
+        border-left-color: $tab-border-color;
+        border-radius: 4px 4px 0 0;
+        box-shadow: 0 1px $tab-border-color inset;
+
+        &:hover {
+          color: #046ECA;
+        }
+      }
+
+      .el-tabs__item:first-of-type.is-active {
+        box-shadow: 1px 1px $tab-border-color inset;
+      }
+    }
+
+    .el-tabs__content {
+      height: calc(100% - 39px);
+      border: 1px solid $tab-border-color;
+      border-top: none;
+      padding: 30px 20px 20px 20px; // 根据原型调整上边距为30px，但20px更协调
+    }
+
+    .tab-pane--border-card {
+      position: relative;
+      height: 100%;
+      overflow: auto;
+    }
+    .tab-pane-warn--icon {
+      width: 16px;
+      color: #E48F3E;
+      margin-left: 10px;
+      margin-right: 0 !important;
+    }
+  }
+
+  .entity-detail-event-border {
+    border: 1px solid #E2E5EC;
+    border-radius: $tab-border-radius;
+    margin-bottom: 10px;
+  }
+
+  .entity-detail-event-block {
+    width: calc(100% - 2px);
+  }
+
+  .entity-detail-event-error {
+    margin-top: 18px;
+    margin-left: 8px;
+  }
+
+  .entity-detail-performance {
+    height: 46px;
+    border-radius: $tab-border-radius;
+  }
+
+  .entity-detail-security {
+    height: 70px;
+    border-radius: $tab-border-radius;
+  }
+}
--- a/src/assets/css/components/views/charts2/graphRightDetailBlock.scss
+++ b/src/assets/css/components/views/charts2/graphRightDetailBlock.scss
@@ -0,0 +1,205 @@
+$font-size: 12px;
+.graph-detail-basic-info {
+  position: relative;
+  padding-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  //height: 100%;
+
+  .graph-detail-header {
+    display: flex;
+    flex-direction: column;
+
+    .entity-graph-type {
+      font-size: 12px;
+      color: #717171;
+      font-weight: 400;
+    }
+  }
+
+  .entity-type {
+    color: #717171;
+  }
+
+  .graph-basic-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .graph-basic-info-name__block {
+      display: flex;
+      align-items: center;
+
+      .graph-basic-info-name {
+        padding-right: 10px;
+        max-width: 260px;
+        font-size: 20px;
+        color: #353636;
+        font-weight: 700;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .graph-basic-info-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 18px;
+        width: 18px;
+        border-radius: 50%;
+        background-color: #EFF1F4;
+        cursor: pointer;
+        flex-shrink: 0;
+
+        i {
+          color: #717171;
+          font-size: 10px;
+          -webkit-transform: scale(0.8); // 强制给文字进行缩放，达到12px以下小字体的效果
+        }
+      }
+    }
+  }
+
+  .graph-detail__icon {
+    width: 50px;
+    height: 50px;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+    margin-right: 10px;
+    border-radius: 50%;
+    background-color: #F3F7FA;
+
+    i {
+      font-size: 26px;
+      color: #4E84B4;
+    }
+  }
+}
+
+.graph-close {
+  color: #575757;
+  font-size: 8px;
+  cursor: pointer;
+}
+
+.graph-basic-info__block {
+  margin-top: 12px;
+  margin-bottom: 18px;
+
+  .graph-header__icon {
+    width: 3px !important;
+    height: 14px !important;
+  }
+
+  .graph-basic-info__block-content {
+
+    .graph-content-item, .graph-content-relationship-item {
+      display: flex;
+      line-height: 24px;
+    }
+
+    .graph-content-item {
+
+      .graph-content-item-label, .graph-content-item-value {
+        width: 130px;
+        font-family: NotoSansSChineseRegular;
+        font-size: $font-size;
+        color: #717171;
+        font-weight: 400;
+        padding-right: 10px;
+        flex-shrink: 0;
+      }
+
+      .graph-content-item-value {
+        width: 230px;
+        color: #353636;
+        font-weight: 400;
+        overflow-wrap: break-word;
+        line-height: normal;
+        margin-top: 0.15rem;
+      }
+    }
+
+    .graph-content-relationship-item {
+      justify-content: space-between;
+      line-height: 24px;
+
+      .graph-relationship-item-label, .graph-relationship-item-value {
+        font-size: $font-size;
+        color: #353636;
+        font-weight: 400;
+        //height: 40px;
+        display: flex;
+        align-items: center !important;
+        padding-top: 1px;
+
+        .graph-relationship-item-label-icon {
+          font-size: 14px;
+        }
+      }
+
+      .graph-relationship-item-value {
+        color: #717171;
+
+        i {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .graph-tag-list {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    margin: 6px 0;
+
+    .graph-tag-item {
+      margin-bottom: 10px;
+      margin-right: 9px;
+      padding: 0 8px;
+      height: 24px;
+      line-height: 24px;
+      font-size: 12px;
+
+      span {
+        margin-top: -1px;
+      }
+    }
+  }
+}
+
+.padding-b-10 {
+  padding-bottom: 10px;
+}
+
+.padding-b-4 {
+  padding-bottom: 4px;
+}
+
+//修改popover样式
+.graph-popover {
+  width: auto !important;
+  background: #303133 !important;
+  color: #fff !important;
+  font-size: 12px !important;
+  padding: 10px !important;
+}
+
+.graph-popover .el-popper__arrow::before {
+  background: #303133 !important;
+}
+
+.graph-expand-relationship__icon {
+  font-size: 13px;
+}
+
+.graph-basic-info__block-title {
+  font-size: 13px;
+  color: #353636;
+  font-weight: 600;
+}
--- a/src/assets/css/components/views/charts2/graphRightListBlock.scss
+++ b/src/assets/css/components/views/charts2/graphRightListBlock.scss
@@ -0,0 +1,154 @@
+$font-size: 12px;
+.graph-list-header {
+  display: flex;
+  justify-content: space-between;
+
+  .graph-list-header-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    span {
+      font-size: 16px;
+      color: #353636;
+      line-height: 21px;
+      font-weight: 600;
+    }
+
+    .graph-list-header-icon {
+      font-size: 21px;
+      color: #717171;
+      margin-right: 9px;
+    }
+  }
+
+  .graph-list-header-number {
+    font-size: 12px;
+    color: #717171;
+    font-weight: 400;
+
+    span {
+      font-weight: bold;
+    }
+  }
+}
+
+.graph-list-expand-btn-block {
+  margin-top: 16px;
+  margin-bottom: 24px;
+
+  .graph-list-expand-btn {
+    height: 28px;
+    line-height: 28px;
+    background: #38ACD2;
+    border-radius: 3px;
+    font-size: 12px;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+    padding: 14px 10px;
+    cursor: pointer;
+    border: 1px solid rgba(46,136,166,0.85);
+
+    i {
+      font-size: 16px;
+      margin-right: 7px;
+    }
+
+    &.graph-list-expand-btn--disabled {
+      opacity: .4;
+      cursor: default;
+    }
+  }
+}
+
+.graph-list-content-header {
+  font-size: 14px;
+  color: #353636;
+  font-weight: 500;
+}
+
+.graph-list-content {
+  padding: 0 10px;
+
+  .graph-list-item-ip {
+    margin-bottom: 10px;
+    font-size: $font-size;
+    color: #353636;
+    font-weight: 400;
+  }
+
+  .graph-list-item-block {
+    width: 100%;
+    background: rgba(247, 247, 247, 1);
+    border: 1px solid rgba(226, 229, 236, 1);
+    border-radius: 2px;
+    padding: 10px 15px;
+
+    .graph-list-item, .graph-list-item__app {
+      display: flex;
+
+      .graph-list-item-label, .graph-list-item-label__app {
+        width: 72px;
+        //margin-right: 15px;
+        font-size: $font-size;
+        color: #717171;
+        font-weight: 400;
+        flex-shrink: 0;
+      }
+
+      .graph-list-item-label__app {
+        width: 83px;
+        display: flex;
+        align-items: flex-start;
+        line-height: 22px;
+      }
+
+      .graph-list-country-flag {
+        width: 16px;
+        height: 14px;
+        margin-right: 5px;
+      }
+
+      .graph-list-item-value {
+        font-size: $font-size;
+        color: #353636;
+        font-weight: 400;
+        line-height: 18px;
+        display: flex;
+        align-items: center;
+        margin-top: 0.15rem;
+      }
+
+      .graph-list-item-value1 {
+        display: flex;
+        align-content: center;
+      }
+    }
+
+    .graph-list-item {
+      align-items: center;
+    }
+  }
+}
+
+.padding-b-20 {
+  padding-bottom: 20px;
+}
+
+.padding-b-16 {
+  padding-bottom: 16px;
+}
+
+.padding-b-12 {
+  padding-bottom: 12px;
+}
+
+.graph-list-dividing-line {
+  width: 300px;
+  height: 1px;
+  background: #ECECEC;
+  margin: 11px 0;
+}
--- a/src/assets/css/components/views/charts2/informationAggregation.scss
+++ b/src/assets/css/components/views/charts2/informationAggregation.scss
@@ -0,0 +1,70 @@
+.information-aggregation__table {
+    .information-aggregation-tags {
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      align-items: flex-start;
+      margin-bottom:6px;
+      padding-top:10px !important;
+      padding-bottom:4px !important;
+    }
+  .information-aggregation__valid {
+    background: #eff3e9;
+    border-radius: 10px;
+    font-size: 12px;
+    color: #7E9F54;
+    font-weight: 500;
+    width:fit-content;
+    padding-left:10px;
+    padding-right:10px;
+    height: 20px;
+    line-height: 20px;
+  }
+  .information-aggregation__invalid {
+    background: #ededed;
+    border-radius: 10px;
+    font-size: 12px;
+    color: #717171;
+    font-weight: 500;
+    width:fit-content;
+    padding-left:10px;
+    padding-right:10px;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  .el-table {
+    font-size: 12px;
+    color: #353636;
+    font-weight: 400;
+  }
+  .el-table thead {
+    font-size: 12px;
+    line-height: 12px;
+    color: #353636;
+    font-weight: 500;
+    height:32px;
+  }
+
+  .el-table th {
+    padding: 4px 0;
+  }
+
+  .el-table--border th, .el-table--border td {
+    border-right: 0px !important;
+  }
+
+  .el-table--border {
+    //border: 1px solid #E2E5EC;
+    border-radius: 4px;
+  }
+}
+.margin-r-6{
+  margin-right: 6px;
+}
+.margin-b-6{
+  margin-bottom: 6px;
+}
+.padding-0{
+  padding:0px !important;
+}
--- a/src/assets/css/components/views/charts2/linkDirectionGrid.scss
+++ b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
@@ -17,8 +17,7 @@
      position: absolute;
      width: calc(100% - 20px);
      height: calc(100% - 60px);
-      margin-left: -12px;
-      margin-top: 10px;
+      margin-top: 50px;
    }
    .data-grid {
      height: 100px;
--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -256,7 +256,15 @@
          position: relative;
        }
        .el-tabs__item.is-top {
-          height: 32px;
+          height: 50px;
+          line-height: 60px;
+
+          &.is-active {
+            color: #046eca;
+          }
+        }
+        .el-tabs__active-bar {
+          background-color: #306DC2;
        }
        .el-tabs__item.is-top:nth-child(2) {
          padding: 0;
@@ -264,7 +272,7 @@
        .body__searcher {
          position: absolute;
          right: 28px;
-          top: 9px;
+          top: 11px;
          width: 280px;
          .el-input.el-input--mini {
            .el-input__inner {
@@ -282,9 +290,9 @@
            }
          }
        }
-        .el-tabs__nav-wrap::after {
+        /*.el-tabs__nav-wrap::after {
          height: 0;
-        }
+        }*/
        .el-tabs__header {
          padding-left: 20px;
        }
--- a/src/assets/css/components/views/charts2/networkOverviewLine.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss
@@ -30,6 +30,7 @@
  .line-header {
    display: flex;
    justify-content: space-between;
+    height: 73px;
    .line-select.line-header-right {
      display: flex;
      //flex: 1;
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -123,7 +123,7 @@
        align-items: center;
      }
      .el-table__header tr th:nth-of-type(1) .cell {
-        justify-content: start;
+        justify-content: flex-start;
      }
      .score-cell {
        display: flex !important;
--- a/src/assets/css/components/views/charts2/npmAppEventTable.scss
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -114,6 +114,6 @@
    position: absolute;
    width: 100%;
    left: 0;
-    top: 68px;
+    top: 32px;
  }
 }
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -1,3 +1,14 @@
+.panel-box2.panel-box2--entity-detail {
+  height: 100%;
+
+  .chart-list {
+    height: 100%;
+
+    &>.vue-grid-layout {
+      margin-top: 0;
+    }
+  }
+}
 .panel-box2 {
  height: calc(100% - 20px);
  .panel__header {
@@ -60,7 +71,7 @@
        .el-input__inner {
          font-size: 14px;
          color: #353636;
-          background-color: #F5F8FA;
+          background-color: #FFFFFF;
        }
        .common-select {
          top: 32px !important;
--- a/src/assets/css/components/views/detections/detection-list/row.scss
+++ b/src/assets/css/components/views/detections/detection-list/row.scss
@@ -107,6 +107,9 @@
          letter-spacing: 0;
          line-height: 14px;
          margin-left: 5px;
+          font-style: italic;
+          padding: 0 2px;
+          font-weight: 500;
        }
        .detection-event-severity-color-block {
          width: 5px;
@@ -143,12 +146,12 @@
            flex-wrap: wrap;

            .basic-info__item {
-              padding-right: 40px;
+              padding-right: 30px;
              display: flex;
              align-items: center;

              i {
-                padding-right: 6px;
+                padding-right: 5px;
                color: #8FA1BE;
                font-size: 14px;
              }
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -220,6 +220,12 @@
  justify-content: center;
  align-items: center;
  padding: 0 4px;
-  //todo 此处文字显示白色，暂时取消
  //color: white;
 }
+
+.performance-event-remark {
+  font-family: NotoSansSChineseRegular;
+  font-size: 12px;
+  color: #353636;
+  font-weight: 400;
+}
--- a/src/assets/css/components/views/detections/detections.scss
+++ b/src/assets/css/components/views/detections/detections.scss
@@ -20,7 +20,7 @@
      display: flex;
      justify-content:space-between;
      align-items:center;
-      padding: 10px 20px 10px 0px;
+      padding: 10px 20px 10px 0;
      flex: 0 0 40px;

      font-size: 14px;
@@ -37,7 +37,7 @@
    }

    .chart-content {
-      height:calc(100% - 40px);
+      height: 147px;
    }
    .statistics__severity {
      width: 33%;
--- a/src/assets/css/components/views/entityExplorer/entity-detail.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-detail.scss
@@ -1,3 +1,67 @@
+.entity-detail {
+  .entity-tag {
+    display: flex;
+    height: 28px;
+    padding: 0 12px;
+    justify-content: center;
+    line-height: 28px;
+    font-size: 14px;
+    border: 1px solid;
+    border-radius: 2px;
+
+    &.entity-tag--small {
+      height: 20px;
+      line-height: 20px;
+      padding: 0 6px;
+      font-size: 12px;
+    }
+    $normal-color: #778391;
+    $normal-light-color: #F7F8F9;
+    $negative-color: #E26154;
+    $negative-light-color: #FEF6F5;
+    $positive-color: #749F4D;
+    $positive-light-color: #F7FAF5;
+    &.entity-tag--level-one-normal {
+      border-color: $normal-color;
+      color: white;
+      background-color: $normal-color;
+    }
+    &.entity-tag--level-one-negative {
+      border-color: $negative-color;
+      color: white;
+      background-color: $negative-color;
+    }
+    &.entity-tag--level-one-positive {
+      border-color: $positive-color;
+      color: white;
+      background-color: $positive-color;
+    }
+    &.entity-tag--level-two-normal {
+      border-color: $normal-color;
+      color: $normal-color;
+      background-color: $normal-light-color;
+    }
+    &.entity-tag--level-two-negative {
+      border-color: $negative-color;
+      color: $negative-color;
+      background-color: $negative-light-color;
+    }
+    &.entity-tag--level-two-positive {
+      border-color: $positive-color;
+      color: $positive-color;
+      background-color: $positive-light-color;
+    }
+    &.entity-tag--level-two-negative-no-background {
+      border-color: $negative-color;
+      color: $negative-color;
+    }
+    &.entity-tag--level-two-positive-no-background {
+      border-color: $positive-color;
+      color: $positive-color;
+    }
+  }
+}
+/*
 .entity-detail.cn-home {
  .panel-chart {
    width: 100%;
@@ -105,3 +169,4 @@
    }
  }
 }
+*/
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -37,7 +37,7 @@
    }
    .el-button--mini{
      padding: 4px 6px !important;
-      min-height: 26px !important;
+      min-height: 28px !important;
      &.active i {
        color: $--color-primary;
      }
@@ -50,6 +50,10 @@
    display: flex;
    justify-content: space-between;
  }
+  .explorer-top-tools-new {
+    display: flex;
+    justify-content: space-between;
+  }
  .explorer-top-tools-title {
    font-size: 24px;
    line-height: 24px;
@@ -64,7 +68,7 @@
    color: #353636;
    font-weight: 500;
    padding: 0 10px;
-    margin-right: 10px;
+    margin-right: 20px;
    border: 1px solid #E2E5EC;
    border-radius: 2px;
    cursor: pointer;
@@ -77,6 +81,13 @@
    border: 1px solid #E2E5EC;
    border-radius: 4px;
  }
+  .explorer-result {
+    margin-top: 10px;
+    margin-bottom: 18px;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 400;
+  }
  .explorer-container {
    display: flex;
    overflow: visible; /*overflow: hidden;*/
@@ -106,9 +117,9 @@

      .overview-left {
        display: flex;
-        flex-direction: column;
+        //flex-direction: column;
        align-items: center;
-        padding: 0 30px;
+        padding: 0 0 0 30px;

        .overview-left-span {
          font-size: 16px;
@@ -130,12 +141,14 @@
      .overview-right {
        display: flex;
        flex-direction: column;
-        padding: 0 30px;
+        justify-content: center;
+        padding: 0 15px;

        .right-row {
          display: flex;
-          height: 30px;
+          height: 18px;
          align-items: center;
+          color: #666666;

          .right-label-loading {
            position: relative;
@@ -157,7 +170,7 @@
            font-weight: bold;
          }
          i {
-            padding-right: 10px;
+            padding-right: 4px;
            font-size: 18px;
          }
          .cn-icon-increase {
--- a/src/assets/css/components/views/entityExplorer/entity-filter.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-filter.scss
@@ -1,104 +1,100 @@
 .entity-filter-case {
  display: flex;
  flex-direction: column;
-  width: 280px;
-  margin-right: 10px;
+  width: 320px;
+  margin-right: 20px;
  overflow: auto;
  z-index: 1;
+  border: 1px solid rgba(226, 229, 236, 1) !important;
+  border-radius: 4px !important;

  .filter-case__header {
-    background-color: #E1E6ED;
-    margin-bottom: 10px;
-    padding-left: 8px;
-    height: 36px;
-    line-height: 36px;
-    color: #666;
-    font-size: 14px;
-  }
-  .entity-filter {
-    display: flex;
-    flex-direction: column;
-    border: 1px solid #E7EAED;
-    margin-bottom: 10px;
-    background-color: white;
-
-    .filter__header {
-      height: 46px;
-      margin: 0 15px;
-      line-height: 46px;
-      border-bottom: 1px solid #EFF2F5;
+      padding-left: 8px;
+      height: 36px;
+      line-height: 36px;
+      color: #666;
      font-size: 14px;
-      color: #333;
+      background: #F7F7F7;
+      box-shadow: 0 1px 0 0 rgba(226,229,236,1);
+      border-radius: 4px 4px 0 0;
    }
-    .filter__body {
-      padding: 11px 0 21px 0;
-      .filter__row {
-        padding: 0 15px;
+
+  .filter__header {
+    height: 46px;
+    line-height: 46px;
+    margin: 0 20px;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 500;
+  }
+
+  .filter__body {
+    width: calc(100% - 40px);
+    margin: 0 20px;
+
+    .filter-hr {
+      width: calc(100% + 20px);
+      margin-left: -10px;
+      margin-top: 10px;
+      height: 1px;
+      background: #EFF2F5;
+      //background: #000;
+    }
+
+    .filter__body-item {
+      height: 26px;
+      line-height: 26px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+
+      .filter__body-item-left {
+        display: flex;
        align-items: center;
-        cursor: pointer;
-        transition: all linear .2s;
-        .filter__row-popover {
-          display: flex;
-          line-height: 26px;
+        font-size: 14px;
+        color: #353636;
+        font-weight: 400;
+
+        .filter-country-flag {
+          width: 18px;
+          height: 12px;
        }

-        &:hover, &.filter__row--active {
-          background-color: #F3F7FA;
-        }
-        .row__label {
-          font-size: 14px;
-          flex: 8;
-          display: flex;
-          i {
-            color: #8FA1BE;
-          }
-          span {
-            padding-left: 6px;
-            color: #333;
-          }
-        }
-        .row__value {
-          color: #666;
-          position: relative;
-          display: inline-block;
+        .filter__body-item-left-index {
+          width: 16px;
+          height: 16px;
          text-align: center;
-          flex: 1;
-          .chart__loading img {
-            left: unset;
-            right: 0;
-          }
-        }
-      }
-    }
-  }
-}
-.filter__row-popover {
-  .pop-title {
-    i {
-      margin-right: 6px;
-    }
-  }
-  .entity-pop-custom {
-    .filter-top-box {
-      .chart__loading {
-        height: calc(100% - 65px);
-        top: 64px;
-      }
-      .top-table-percent{
-        display:grid;
-        grid-template-columns: 50% auto;
-        grid-template-rows: 100%;
-        grid-row-gap: 0px;
-        grid-column-gap: 0px;
-        .top-table-progress{
-          align-content: center;
-          padding-top: 8px;
-        }
-      }
-      .customer-no-border-table {
-        .el-table__body-wrapper {
-          height: calc(100% - 36px);
+          background: #EFF2F5;
+          border-radius: 2px;
+          margin-right: 6px;
+          font-family: NotoSansHans-Black;
+          font-size: 9px;
+          color: #96A2B0;
+          font-weight: 900;
+          display: flex;
+          align-items: center;
+          justify-content: center;
        }
+
+        .filter__body-item-left-label {
+          max-width: 180px;
+          font-family: NotoSansSChineseRegular;
+          font-size: 14px;
+          color: #353636;
+          font-weight: 400;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .filter__body-item-right {
+        flex-shrink: 0;
+        font-family: NotoSansSChineseRegular;
+        font-size: 12px;
+        color: #717171;
+        font-weight: 400;
      }
    }
  }
--- a/src/assets/css/components/views/entityExplorer/entityList/card.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/card.scss
@@ -5,6 +5,7 @@
  background: #FFFFFF;
  border-radius: 2px;
  transition: all .2s;
+  border: 1px solid #E2E5EC;

  &:hover .cn-entity__header .header__content {

--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -34,6 +34,7 @@
    .overview__title {
      color: #333;
      font-size: 14px;
+      font-weight: 600;
    }
    .overview__content-loading.overview__content {
      position: relative;
@@ -130,6 +131,9 @@
              background-color: #F6C738;
            }
          }
+          &.row__content--width90 {
+            width: 90px;
+          }
          &.row__content--width200 {
            width: 200px;
          }
@@ -144,7 +148,7 @@
        }
        .row__contents {
          display: flex;
-          flex-direction: column;
+          //flex-direction: column;

          .row__content {
            padding: 2px 0;
@@ -156,15 +160,26 @@
            &:last-of-type {
              padding-bottom: 0;
            }
+
+            .el-popper {
+              min-width: 90px !important;
+            }
+          }
+          .row__content-accept {
+            margin-left: 39px;
          }
          .row__charts-msg {
            width: auto;
-            padding-right: 20px;
+            padding-right: 10px;
+          }
+          .new-row__charts-msg {
+            width: auto;
+            padding-right: 10px;
          }
          .row__charts {
            height: 20px;
            width: 60px;
-            padding-left: 5px;
+            //padding-left: 5px;
          }
        }
        .row__charts {
@@ -176,6 +191,12 @@
          color: #666666;
        }
      }
+
+      .overview__row-related {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+      }
    }

    .overview__content.domain__content {
@@ -292,3 +313,11 @@
    }
  }
 }
+.margin-l-140 {
+  margin-left: 140px;
+}
+
+.line-center {
+  display: flex;
+  align-items: center;
+}
--- a/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
@@ -1,5 +1,5 @@
 .entity-list {
-  width: calc(100% - 290px);
+  width: 100%;
  height: calc(100% - 42px);
  flex: 1;
  position: relative;
--- a/src/assets/css/components/views/entityExplorer/entityList/row.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/row.scss
@@ -1,5 +1,8 @@
 .cn-entity--list {
  display: flex;
+  border: 1px #E2E5EC solid;
+  margin-bottom: 10px;
+  border-radius: 4px;

  .cn-entity__collapse {
    margin-bottom: 1px;
@@ -9,6 +12,7 @@
    justify-content: center;
    align-items: flex-start;
    background-color: #F3F7FA;
+    border-radius: 4px 0 0 4px;

    span {
      transform: rotate(0);
@@ -36,9 +40,11 @@
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
+    align-content: center;
    padding: 16px 0;
    margin-bottom: 1px;
    background-color: white;
+    border-radius: 0 4px 4px 0;

    .cn-entity__icon {
      margin-left: 26px;
@@ -70,6 +76,12 @@
        font-size: 16px;
        padding-bottom: 3px;
        color: #333333;
+        .cn-entity__header-title {
+          margin-right: 10px;
+        }
+        .cn-entity__header-tag {
+
+        }
      }

      .cn-entity__body {
@@ -87,7 +99,7 @@
            flex-wrap: wrap;

            .basic-info__item {
-              padding-right: 40px;
+              padding-right: 30px;

              .item__box {
                display: flex;
@@ -105,7 +117,7 @@
                }

                i {
-                  padding-right: 6px;
+                  padding-right: 5px;
                  color: #8FA1BE;
                  font-size: 12px;
                  height: 13px;
@@ -126,7 +138,7 @@
                .row__charts {
                  height: 19px;
                  width: 60px;
-                  padding-left: 5px;
+                  margin-left: 4px;
                }
              }

@@ -147,25 +159,47 @@
              span:last-of-type {
                color: #666;
              }
-
-
            }
-          }

-          .show-detail {
-            flex-shrink: 0;
-            padding: 0 30px;
-            font-size: 12px;
-            color: #3976CB;
+            .row-item-label {
+              font-family: NotoSansSChineseRegular;
+              font-size: 14px;
+              color: #717171;
+              font-weight: 400;
+            }

-            &:hover {
-              cursor: pointer;
+            .row-item-value {
+              font-family: NotoSansSChineseRegular;
+              font-size: 14px;
+              color: #353636;
+              font-weight: 400;
            }
          }
        }
      }
    }

+    .new-show-detail {
+      flex-shrink: 0;
+      padding: 0 30px;
+      font-size: 12px;
+      color: #2C72C6;
+      font-weight: 400;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      i {
+        font-size: 12px;
+        margin-right: 5px;
+      }
+    }
+
    .cn-entity__detail-overview {
      flex-basis: 100%;
      padding: 0 10px;
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
@@ -11,6 +11,12 @@
    border-radius: 12px;
  }

+  .list-desc{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
  .top-title {
    font-size: 24px;
    color: #353636;
@@ -22,6 +28,593 @@
    padding-top: 20px;
    margin-left:20px;
  }
+  .knowledge-base__content {
+    display:flex;
+    flex-direction:row;
+    padding:12px 20px 20px 20px;
+    height:calc(100% - 52px);
+    .left-filter {
+      margin-right:20px;
+      width:320px;
+      min-width:320px;
+      height:100%;
+      display:flex;
+      flex-direction:column;
+      background: #FFFFFF;
+      border: 1px solid rgba(226,229,236,1);
+      border-radius: 4px;
+      overflow: auto;
+      .filter-title {
+        height:32px;
+        padding-left:20px;
+        align-items: center;
+        display: flex;
+        background: #F7F7F7;
+        box-shadow: 0 1px 0 0 rgba(226,229,236,1);
+        border-radius: 4px 4px 0 0;
+        font-size: 14px;
+        color: #353636;
+        font-weight: 500;
+        //font-family: $fontFamily !important;
+      }
+      .knowledge-filter {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 0;
+        .filter__header {
+          display: flex;
+          flex: 0 0 32px;
+          align-items: center;
+          padding-left: 20px;
+          color: #666;
+          cursor: pointer;
+          margin-top:15px;
+          span {
+            font-size: 14px;
+            padding-left: 0;
+          }
+          i {
+            font-size: 12px;
+            transition: all linear .1s;
+            transform: rotate(0) translate(0, 2px);
+          }
+          i.arrow-rotate {
+            transform: rotate(90deg) translate(2px, 3px);
+          }
+          .new-knowledge-filter-header-title {
+            //font-family: $fontFamily !important;
+            font-size: 14px;
+            color: #353636;
+            font-weight: 500;
+          }
+          .new-knowledge-filter-icon {
+            margin-left: 8px;
+            margin-bottom: 2px;
+            font-weight: bold !important;
+            color: #575757;
+          }
+        }
+        .filter__body {
+          padding: 3px 0 0 20px;
+          .el-tree {
+            font-size:14px;
+            color: #353636;
+            font-weight: 400;
+            .el-tree-node {
+              .el-tree-node__content {
+                margin-bottom: 2px;
+                .custom-tree-node {
+                  flex: 1;
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  padding-right: 20px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  .count-tree-node {
+                    color: #717171;
+                  }
+                }
+              }
+            }
+          }
+          .el-checkbox-group {
+            display: flex;
+            flex-direction: column;
+          }
+          .el-checkbox {
+            display: flex;
+            align-items: center;
+            padding: 5px 0;
+            margin-right: 5px;
+            .el-checkbox__input {
+              .el-checkbox__inner {
+                background: #F2F7F9;
+                border: 1px solid rgba(0,0,0,0.15);
+                border-radius: 2px;
+              }
+            }
+            .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+              border-color: #38ACD2;
+              background: #38ACD2;
+              border-radius: 2px;
+            }
+            .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
+              background: #FFFFFF;
+              border-radius: 1px;
+            }
+            .el-checkbox__input.is-checked {
+              .el-checkbox__inner {
+                border-color: #38ACD2;
+                background: #38ACD2;
+                border-radius: 2px;
+              }
+            }
+            .el-checkbox__input.is-focus {
+              .el-checkbox__inner {
+                border-color: #38ACD2;
+              }
+            }
+
+            .el-checkbox__label {
+              width: 100%;
+              padding-right:15px;
+              padding-left:7px;
+            }
+            .filter__checkbox-label {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              font-weight: 400;
+              //font-family: NotoSansSChineseRegular !important;
+              color: #353636;
+              font-size: 14px;
+              .filter-label {
+                display: flex;
+                //color: #353636;
+              }
+              .filter-count {
+                color: #717171 !important;
+              }
+              .severity-color-block {
+                width: 4px;
+                height: 15px;
+                border-radius: 2px;
+              }
+            }
+            &:last-of-type {
+              padding-bottom: 0;
+            }
+          }
+        }
+      }
+
+      .knowledge-filter:last-child {
+        .filter__header {
+          margin-top:10px !important;
+        }
+      }
+    }
+    .right-list-card {
+      display:flex;
+      flex-direction:column;
+      justify-content: space-between;
+      width: calc(100% - 340px);
+      max-width: calc(100% - 340px);
+      height:100%;
+      .top-tools {
+        display: flex;
+        align-items : center;
+        flex-direction:row;
+        justify-content: space-between ;
+        //height:28px;
+        width:100%;
+        margin-bottom:20px;
+        .top-tools__right {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          //padding-bottom: 18px;
+
+          &>div {
+            //padding: 0 0 0 10px;
+          }
+          .el-button {
+            color: #575757;
+          }
+          .el-button--mini{
+            padding: 7px 9px !important;
+            min-height: 28px !important;
+            &.active i {
+              color: #046ECA;
+            }
+            i {
+              font-size: 12px;
+            }
+          }
+        }
+        .top-tools__left {
+          display: flex;
+          align-items : center;
+          flex-direction:row;
+          .top-tool-btn {
+            cursor: pointer;
+            height: 28px;
+            width: 28px;
+            border: 1px solid $--border-color-primary;
+            outline: none;
+            border-radius: $--button-border-radius;
+            background-color: $--button-gray-background-color;
+            transition: background-color linear .1s;
+            font-size:12px;
+            font-weight: 500;
+            //font-family: $fontFamily !important;
+            i {
+              font-size: 14px;
+              color: #575757;
+              margin-right:4px;
+            }
+          }
+          .top-tool-btn:disabled {
+            cursor: not-allowed;
+            opacity: 0.66;
+            i {
+
+            }
+          }
+          .top-tool-btn:hover:not(.cn-btn-disabled) {
+            border: 1px solid $--border-color-primary;
+            background-color: $--button-gray-hover-background-color;
+          }
+          .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
+            background-color: $--button-gray-active-background-color;
+            border: 1px solid $--border-color-primary;
+            i {
+              color: #575757;
+            }
+          }
+          .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
+            background-color: $--button-gray-hover-background-color;
+            border-color: #FFC4B9;
+            i {
+              color: #F0745A;
+            }
+          }
+          .top-tool-btn--create {
+            background-color: #38ACD2 !important;
+            border-color: #2E88A6 !important;
+            color:#FFFFFF;
+            i {
+              color: #FFFFFF;
+            }
+          }
+          .top-tool-btn--create:hover {
+            background-color: #57B8D9 !important;
+            border-color: #2E88A6 !important;
+            color:#FFFFFF;
+            i {
+              color: #FFFFFF;
+            }
+          }
+          .top-tool-btn--create:focus {
+            background-color: #31A5CD !important;
+            border-color: #2E88A6 !important;
+            color:#FFFFFF !important;
+            i {
+              color: #FFFFFF !important;
+            }
+          }
+          .top-tool-btn--create:disabled {
+            opacity: 0.66;
+            background-color: #38ACD2 !important;
+            border-color: #2E88A6 !important;
+            color:#FFFFFF;
+            i {
+              color: #FFFFFF;
+            }
+          }
+          .top-tool-search {
+            display:flex;
+            width:242px;//calc(100% - 256px);
+            .el-input--small{
+              line-height: 27px;
+              .el-input__inner {
+                height: 28px;
+                border-radius: 2px 0 0 2px;
+              }
+            }
+            .top-tool-btn {
+              border-left: none;
+              border-radius: 0 2px 2px 0 !important;
+            }
+            .top-tool-btn--search:hover {
+              border-left: none !important;
+              border-radius: 0 2px 2px 0 !important;
+            }
+            .top-tool-btn--search:focus {
+              border-left: none !important;
+              border-radius: 0 2px 2px 0 !important;
+            }
+          }
+        }
+      }
+      .list-mode__row {
+        width: 100%;
+        height:calc(100% - 102px);
+        //overflow-y:auto;
+        margin-bottom:0px;
+        padding-bottom:30px;
+        .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
+          border-color: #38ACD2;
+          background: #38ACD2;
+          border-radius: 2px;
+        }
+        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+          background-color: #38ACD2;
+          border-color: #38ACD2;
+        }
+        .el-table--border {
+          border: 1px solid rgba(226,229,236,1);
+          border-radius: 4px;
+          border-right:none;
+          border-bottom:none;
+        }
+        .el-table--border th ,.el-table--border td {
+          border-right: none;
+        }
+        .el-table {
+          th {
+            padding-top:6px;
+            padding-bottom:6px;
+            font-size:12px;
+            line-height:12px;
+            color: #353636;
+            font-weight: 500;
+          }
+          td {
+            padding-top:8px;
+            padding-bottom:8px;
+            font-size:12px;
+            line-height:12px;
+            color: #353636;
+            font-weight: 400;
+          }
+          .cell {
+            height: 20px;
+            line-height: 20px;
+          }
+
+        }
+      }
+      .list-mode__card {
+        width: 100%;
+        height:calc(100% - 134px);
+        overflow-y:auto;
+        padding-right: 2px;
+        margin-bottom:30px;
+        .table-no-data{
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          line-height: 60px;
+          color: #909399;
+        }
+        .el-checkbox-group {
+          display: grid;
+          grid-template-rows: repeat(auto-fill, 218px);
+          grid-template-columns: repeat(auto-fit, minmax(282px, 1fr));
+          grid-gap: 30px;
+        }
+        .card-selected{
+          box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
+          border: 1px solid rgba(197,197,197,1) !important;
+        }
+        .card-item {
+          background: #FFFFFF;
+          border: 1px solid rgba(226,229,236,1);
+          border-radius: 4px;
+          /*width:282px;
+          margin-bottom:30px;
+          margin-right:30px;*/
+          height:218px;
+          display:flex;
+          flex-direction:column;
+
+          .card-content {
+            height:calc(100% - 32px);
+            padding:16px;
+            display:flex;
+            flex-direction: column;
+            .card-title {
+              //font-family: NotoSansSC-Bold;
+              font-size: 16px;
+              color: #353636;
+              font-weight: 700;
+              margin-bottom:6px;
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              .card-title-name {
+                width:210px;
+                overflow: hidden; //超出的文本隐藏
+                text-overflow: ellipsis; //溢出用省略号显示
+                white-space:nowrap;
+                word-break: break-all;
+              }
+              .card-title-more {
+                position: relative;
+                color:#575757;
+                .el-checkbox__input.is-checked .el-checkbox__inner {
+                  background-color: #38ACD2;
+                  border-color: #38ACD2;
+                }
+                .el-checkbox__input.is-checked .el-checkbox__inner::after {
+                  left: 5px;
+                  top: 2px;
+                }
+                .el-checkbox__inner {
+                  border-radius: 50%;
+                  width:16px;
+                  height:16px;
+                  background-color: #DEDEDE;
+                  border-color: #DEDEDE;
+                  z-index:1;
+                }
+                .el-checkbox__inner::after {
+                  left: 5px;
+                  top: 2px;
+                  transform: rotate(45deg) scaleY(1);
+                }
+                .card-operate {
+                  background: #FFFFFF;
+                  border: 1px solid rgba(197,197,197,1);
+                  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+                  border-radius: 2px;
+                  position: absolute;
+                  top: 20px;
+                  right: -10px;
+                  height: 56px;
+                  width: 80px;
+                  display:flex;
+                  flex-direction: column;
+                  padding-top:4px;
+                  padding-bottom:4px;
+                  font-family: Helvetica;
+                  font-size: 12px;
+                  font-weight: 400;
+                  .card-title-more-delete {
+                    z-index: 1;
+                    line-height: 24px;
+                    height: 24px;
+                    background: #FFFFFF;
+                    //box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+                    //border-radius: 2px;
+                    padding-left: 9px;
+                    color: #666666;
+                  }
+                  .card-title-more-delete:hover {
+                    //background: #EBF1F4;
+                    background: #F7F7F7;
+                    color: #046ECA;
+                    //border: 1px solid rgba(0,0,0,0.15);
+                  }
+                  .card-title-more-delete:active {
+                    background: #F7F7F7;
+                    color: #046ECA;
+                    //border: 1px solid rgba(0,0,0,0.15);
+                  }
+                  .card-title-more-edit {
+                    z-index: 1;
+                    line-height: 24px;
+                    height: 24px;
+                    background: #FFFFFF;
+                    //box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+                    //border-radius: 2px;
+                    padding-left: 9px;
+                    color: #666666;
+                  }
+                  .card-title-more-edit:hover {
+                    background: #F7F7F7;
+                    color: #046ECA;
+                    //border: 1px solid rgba(0,0,0,0.15);
+                  }
+                  .card-title-more-edit:active {
+                    background: #F7F7F7;
+                    color: #046ECA;
+                    //border: 1px solid rgba(0,0,0,0.15);
+                  }
+                }
+              }
+            }
+            .card-id {
+              //font-family: NotoSansSChineseRegular;
+              font-size: 12px;
+              color: #999999;
+              font-weight: 400;
+              margin-bottom:16px;
+              line-height: 12px;
+            }
+            .card-desc {
+              //font-family: NotoSansSChineseRegular;
+              font-size: 12px;
+              color: #717171;
+              line-height: 18px;
+              font-weight: 400;
+              margin-bottom:0px;
+              max-height:88px;
+
+              overflow: hidden;
+              display: -webkit-box;
+              -webkit-line-clamp: 5;
+              line-clamp: 5;
+              -webkit-box-orient: vertical;
+            }
+          }
+          .card-operate__footer {
+            height:40px;
+            //border:1px solid #7E9F54;
+            display:flex;
+            flex-direction: row;
+            justify-content:space-between ;
+            font-size: 14px;
+            font-weight: 400;
+            align-items: center;
+            padding-left:16px;
+            padding-right:16px;
+            padding-bottom:20px;
+            .card-type {
+              display:flex;
+              flex-direction:row;
+              .card-category {
+                font-size: 12px;
+                line-height: 16px;
+                color: #38ACD2;
+                font-weight: 400;
+                border: 1px solid rgba(56,172,210,1);
+                height:20px;
+                width: fit-content;
+                padding-left:11px;
+                padding-right:11px;
+                box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                border-radius: 10px;
+                margin-right:4px;
+              }
+              .card-source {
+                height:20px;
+                width: fit-content;
+                padding-left:11px;
+                padding-right:11px;
+                background: rgba(56,172,210,0.10);
+                box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+                border-radius: 10px;
+                font-size: 12px;
+                color: #046ECA;
+                font-weight: 400;
+              }
+            }
+            .card-enable {
+            }
+          }
+        }
+        .card-item:hover{
+          box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
+        }
+        .card-item__enable {
+          background: #FFFFFF;
+          border: 1px solid rgba(226,229,236,1);
+          box-shadow: 3px 3px 11px 0 rgba(0,0,0,0.1);
+          border-radius: 4px;
+        }
+      }
+      .knowledge-pagination {
+        height:56px;
+        width:100%;
+        background: #FFFFFF;
+        box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.07);
+      }
+    }
+  }
 }
 .edit-knowledge-base {
  height: 100%;
@@ -39,6 +632,12 @@
    padding-left: 20px;
    overflow: auto;

+    .enable-form__mt {
+      .el-form {
+        margin-top:6px;
+      }
+    }
+
    .el-steps {
      margin-left: 10px;

@@ -83,8 +682,9 @@
    }

    .el-collapse {
-      width: 655px;
+      width: 855px;
      margin-left: 5px;
+      padding-right: 200px;
      border: none;

      .el-collapse-item.upload-collapse {
@@ -94,6 +694,7 @@
      }
      .el-collapse-item {
        min-height: 58px;
+        position: relative;

        .el-collapse-item__header {
          height: unset;
@@ -121,6 +722,7 @@
        .el-collapse-item__wrap {
          padding-left: 35px;
          border: none;
+          overflow: visible;
        }
        .el-collapse-item__content {
          position: relative;
@@ -142,11 +744,22 @@
          .upload-tip {
            font-size: 12px;
            color: #999999;
+
+            span {
+              padding-left: 6px;
+              color: #326EC3;
+            }
          }
          .el-upload-dragger {
+            padding-top: 20px;
            width: 320px;
            border-radius: 2px;
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+            .cn-icon-upload2 {
+              font-size: 40px;
+              color: #999;
+            }
          }

        }
@@ -203,13 +816,20 @@
          padding-left: 8px;
        }

-        .form-select {
+        .form-select__disable {
          width: 100%;

          .el-input__inner {
            background-color: #F5F8FA;
          }
        }
+        .form-select__enable {
+          width: 100%;
+
+          .el-input__inner {
+            background-color: white !important;
+          }
+        }
      }
    }
    .skeleton-border {
@@ -247,7 +867,7 @@
    }
    .imported-table-box {
      position: relative;
-      height: 367px;
+      height: 394px !important;
      border: 1px solid #DEDEDE;
      border-radius: 2px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -255,6 +875,22 @@
      &.imported-table-box--error {
        border-color: $--color-danger;
      }
+      .entity-format-tip {
+        position: absolute;
+        left: 100%;
+        padding-left: 10px;
+        width: 200px;
+        color: #353636;
+
+        div {
+          display: flex;
+        }
+        span {
+          padding-right: 10px;
+
+          color: #909399;
+        }
+      }
      .imported-table {
        padding: 0 12px;
        width: 100%;
@@ -274,8 +910,22 @@
          overflow: hidden;
          text-overflow: ellipsis;
        }
+
+        .imported-data-item-edit__input {
+          .el-input {
+            height: 30px;
+          }
+
+          .el-input__inner {
+            width: calc(100% - 50px);
+            height: 24px;
+            line-height: 0;
+            padding: 0 !important;
+            border-radius: 2px;
+          }
+        }
        .imported-data-msg {
-          width: 140px;
+          width: 200px;
        }

        .el-icon-close {
@@ -293,20 +943,49 @@
        .el-icon-error {
          color: #E26154;
        }
+
+        .imported-data-btn {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+
+          .imported-data-left-btn {
+            font-size: 14px;
+            margin: 0 7px;
+            color: #666;
+            cursor: pointer;
+          }
+
+          .imported-data-back {
+            color: #666;
+            cursor: pointer;
+          }
+
+          .imported-data-save {
+            color: #38ACD2;
+            cursor: pointer;
+          }
+        }
      }

      .imported-pagination.pagination {
        position: absolute;
        width: 100%;
-        bottom: 0;
-        margin-top: 4px;
-        padding-top: 8px;
        height: 42px;
+        bottom: 42px !important;
+        margin-top: 4px;
+        padding-top: 10px;
        border-top: 1px solid #eee;

+        border-top: 0 !important;
+        border-bottom: 1px solid #eee;
+        margin-bottom: 0;
+        padding-bottom: 0;
+
        .btn-prev, .btn-next, .number {
          margin: 0 2px;
        }
+
        .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
          border: none;
          font-size: 12px;
@@ -319,6 +998,23 @@
          color: white;
        }
      }
+
+      .el-form {
+        margin-top: 0 !important;
+      }
+
+      .el-input {
+        height: 24px;
+      }
+
+      .el-form-item__content {
+        margin-top: -16px;
+        margin-bottom: -17px;
+      }
+
+      .el-form-item__error {
+        display: none;
+      }
    }
  }
  .edit-knowledge-base__footer {
@@ -335,7 +1031,7 @@
      min-width: 74px;
      padding: 0 15px;
      color: white;
-      background-color: #38ACD2;
+      background-color: #699DC9;
      border: none;
      border-radius: 4px;
      outline: none;
@@ -344,7 +1040,7 @@
      transition: background-color linear .2s, color linear .1s;
    }
    .footer__btn:hover:not(.footer__btn--disabled) {
-      background-color: lighten(#38ACD2, 10%);
+      background-color: lighten(#699DC9, 10%);
    }
    .footer__btn--light {
      background-color: #F5F6F7;
@@ -362,3 +1058,133 @@
    }
  }
 }
+.addTagBtn {
+  position: absolute;
+  bottom: 9px;
+  height:24px !important;
+  min-height: 24px !important;
+  font-size: 12px;
+  color: #353636;
+  font-weight: 500;
+  width: 598px;
+  margin-left: 10px;
+  background: rgb(245, 248, 250);
+  border: 1px #DEDEDE solid;
+  padding: 0 !important;
+  box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+  border-radius: 2px;
+  font-family:NotoSansHans-Medium !important;
+
+  .add-tag-btn {
+    color: #575757 !important;
+    font-size: 9px !important;
+    margin: 0 8px 2px 8px;
+  }
+
+  &:hover {
+     i {
+       color: #699DC9 !important;
+     }
+   }
+
+  span {
+    font-family:NotoSansHans-Medium !important;
+  }
+}
+.del-model-hint {
+  display:flex;
+  flex-direction: column;
+  padding-bottom:0px !important;
+  width:480px !important;
+  height:300px !important;
+  .el-dialog__header{
+    display: flex;
+    flex-direction: row;
+    border-bottom:1px solid #eee;
+    height:42px;
+    min-height:42px;
+    background: #F7F7F7;
+    box-shadow: 0 1px 0 0 rgba(53,54,54,0.08);
+    padding-left:20px;
+    padding-top:14px;
+    padding-bottom:14px;
+    .el-dialog__headerbtn {
+      display: flex !important;
+      flex-direction: row-reverse;
+      justify-content: center;
+      align-items: center;
+      font-size: 10px;
+      line-height: 10px;
+      padding-right: 5px !important;
+      i {
+        width:10px;
+        height:10px;
+      }
+    }
+    .el-dialog__title {
+      font-size: 14px !important;
+      color: #353636;
+      letter-spacing: 0;
+      font-weight: 400;
+    }
+  }
+  .el-dialog__body {
+    height:206px;
+    min-height:206px;
+    font-size: 14px;
+    color: #353636;
+    letter-spacing: 0;
+    line-height: 22px;
+    font-weight: 400;
+    padding-top:8px;
+    padding-right:20px;
+    padding-left:20px;
+    .dialog-message {
+      padding-left:0px !important;
+      padding-right:0px !important;
+    }
+    .dialog-table {
+      margin-top:10px;
+    }
+    .el-checkbox__input.is-checked .el-checkbox__inner {
+      background-color: #38ACD2;
+      border-color: #38ACD2;
+    }
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+      background-color: #38ACD2;
+      border-color: #38ACD2;
+    }
+  }
+  .el-dialog__footer {
+    height:52px;
+    min-height:52px;
+    border-top:1px solid #eee;
+    box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.07);
+    padding:11px 0 12px!important;
+    .el-button {
+      padding:8px 21px !important;
+      line-height: 12px;
+      //font-family: NotoSansHans-Medium !important;
+      font-size: 12px;
+      font-weight: 500;
+      min-height: 28px;
+    }
+    .el-button:nth-child(1) {
+      margin-right:20px;
+      width:80px;
+      height:28px;
+      color: #353636;
+      background: #F5F6F7;
+      border: 1px solid rgba(215,215,215,1);
+      border-radius: 2px;
+    }
+    .el-button:nth-child(2) {
+      width:80px;
+      height:28px;
+      margin-right:20px;
+      margin-left:0px !important;
+      background-color:#2d8cf0;
+      border-color:#2d8cf0;
+    }
+  }
+}
--- 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=1670817031037') format('woff2'),
-       url('iconfont.woff?t=1670817031037') format('woff'),
-       url('iconfont.ttf?t=1670817031037') format('truetype');
+  src: url('iconfont.woff2?t=1689317280458') format('woff2'),
+       url('iconfont.woff?t=1689317280458') format('woff'),
+       url('iconfont.ttf?t=1689317280458') format('truetype');
 }

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

+.cn-icon-add-knowledge-base:before {
+  content: "\e802";
+}
+
+.cn-icon-update-knowledge-base:before {
+  content: "\e803";
+}
+
+.cn-icon-zoom-out:before {
+  content: "\e7fd";
+}
+
+.cn-icon-to-default:before {
+  content: "\e7fe";
+}
+
+.cn-icon-reset:before {
+  content: "\e7ff";
+}
+
+.cn-icon-next-step:before {
+  content: "\e800";
+}
+
+.cn-icon-pre-step:before {
+  content: "\e801";
+}
+
+.cn-icon-zoom-in:before {
+  content: "\e7f";
+}
+
+.cn-icon-expand-continue:before {
+  content: "\e7fc";
+}
+
+.cn-icon-domain1:before {
+  content: "\e7fb";
+}
+
+.cn-icon-expand-relationship:before {
+  content: "\e7f8";
+}
+
+.cn-icon-resolve-ip:before {
+  content: "\e7f9";
+}
+
+.cn-icon-subdomain:before {
+  content: "\e7fa";
+}
+
+.cn-icon-graph:before {
+  content: "\e7f5";
+}
+
+.cn-icon-detail:before {
+  content: "\e7f6";
+}
+
+.cn-icon-tag:before {
+  content: "\e7f7";
+}
+
+.cn-icon-upload2:before {
+  content: "\e7f4";
+}
+
+.cn-icon-warn:before {
+  content: "\e7f3";
+}
+
+.cn-icon-providers:before {
+  content: "\e7f2";
+}
+
+.cn-icon-configure-policies:before {
+  content: "\e7f1";
+}
+
+.cn-icon-dns-insight:before {
+  content: "\e7ef";
+}
+
+.cn-icon-network-performance:before {
+  content: "\e7f0";
+}
+
+.cn-icon-copy:before {
+  content: "\e7ee";
+}
+
+.cn-icon-analysis:before {
+  content: "\e7ed";
+}
+
+.cn-icon-duration:before {
+  content: "\e7ec";
+}
+
+.cn-icon-select:before {
+  content: "\e7eb";
+}
+
+.cn-icon-expire-date:before {
+  content: "\e7d4";
+}
+
+.cn-icon-registry-email:before {
+  content: "\e7d5";
+}
+
+.cn-icon-geo-location:before {
+  content: "\e7d6";
+}
+
+.cn-icon-credit-rating:before {
+  content: "\e7d7";
+}
+
+.cn-icon-registration-date:before {
+  content: "\e7d8";
+}
+
+.cn-icon-app-full-name:before {
+  content: "\e7d9";
+}
+
+.cn-icon-description:before {
+  content: "\e7da";
+}
+
+.cn-icon-technology:before {
+  content: "\e7db";
+}
+
+.cn-icon-registrar:before {
+  content: "\e7dc";
+}
+
+.cn-icon-registry:before {
+  content: "\e7dd";
+}
+
+.cn-icon-operator:before {
+  content: "\e7de";
+}
+
+.cn-icon-sub-type:before {
+  content: "\e7df";
+}
+
+.cn-icon-app-name:before {
+  content: "\e7e0";
+}
+
+.cn-icon-registration-country:before {
+  content: "\e7e1";
+}
+
+.cn-icon-as:before {
+  content: "\e7e2";
+}
+
+.cn-icon-as-subnet:before {
+  content: "\e7e3";
+}
+
+.cn-icon-category2:before {
+  content: "\e7e4";
+}
+
+.cn-icon-domain-name-resolution:before {
+  content: "\e7e5";
+}
+
+.cn-icon-open-port:before {
+  content: "\e7e6";
+}
+
+.cn-icon-security-event:before {
+  content: "\e7e7";
+}
+
+.cn-icon-dns-ptr:before {
+  content: "\e7e8";
+}
+
+.cn-icon-information-aggregation:before {
+  content: "\e7e9";
+}
+
+.cn-icon-digital-certificate:before {
+  content: "\e7ea";
+}
+
+.cn-icon-save:before {
+  content: "\e7d1";
+}
+
+.cn-icon-edit1:before {
+  content: "\e7d2";
+}
+
+.cn-icon-revoke:before {
+  content: "\e7d3";
+}
+
 .cn-icon-administrations:before {
  content: "\e7be";
 }
--- a/src/assets/css/font/iconfont.js
+++ b/src/assets/css/font/iconfont.js
--- a/src/assets/css/font/iconfont.scss
+++ b/src/assets/css/font/iconfont.scss
--- 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/img/entity-symbol2/app-colored.svg
+++ b/src/assets/img/entity-symbol2/app-colored.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687771200531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7765" width="36" height="36" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M723.84487531 71.54166698c60.46291698 0 110.11458302 49.45145802 110.11458302 110.11458302v12.21270802h10.05045802c27.58870802 0 49.77179198 22.30320802 49.77179198 49.73175v256.78720896c0 27.42854198-22.34325 49.73175-49.77179198 49.73175h-10.05045802v292.22408302c0 60.50295802-49.4915 110.11458302-110.11458302 110.11458302H310.89516635a110.394875 110.394875 0 0 1-110.11458302-110.11458302v-292.22408302h-10.0905A49.81183302 49.81183302 0 0 1 140.95833333 500.38791698V243.60070802c0-27.42854198 22.30320802-49.73175 49.73175-49.73175h10.0905V181.65625C200.78058333 121.15329198 250.23204135 71.54166698 310.89516635 71.54166698z m54.97720802 688.31625H255.75779135v82.48583302a55.2575 55.2575 0 0 0 55.137375 55.137375h412.94970896a55.2575 55.2575 0 0 0 55.09733302-55.137375l-0.120125-82.48583302z m-261.47208302 27.508625c22.02291698 0 41.24291698 19.22 41.24291604 41.28295802 0 22.02291698-19.22 41.24291698-41.24291604 41.24291698-21.90279198 0-41.24291698-19.22-41.24291698-41.24291698s19.22-41.24291698 41.24291698-41.24291698z m261.59220802-237.246875H255.87791635v154.56083302h523.06429198v-154.56083302z m61.06354198-302.47475H194.73429135v248.65875h645.27145896v-248.65875z m-518.53958396 23.78475c12.41291698 0 23.5445 7.52783302 28.10925 18.97975l60.903375 150.55666604a24.865875 24.865875 0 0 1-23.10404104 34.27566698 25.106125 25.106125 0 0 1-23.26420896-15.8565l-6.56683302-16.697375H284.78800031l-6.32658396 16.53720802a25.14616698 25.14616698 0 1 1-46.76866604-18.41916604l61.70420802-150.55666698a30.43166698 30.43166698 0 0 1 28.10925-18.81958302z m217.82666698 0c40.722375 0 71.63454198 31.47275 71.63454198 69.6725 0 38.15970802-31.19245802 69.071875-74.4775 69.071875h-20.70154198v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.82583302 24.82583302 0 0 1-24.74575-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.74575-24.74575z m190.878625 0c40.722375 0 71.67458302 31.47275 71.67458302 69.6725 0 38.15970802-31.2325 69.071875-74.4775 69.071875h-20.74158302v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.66566698 24.66566698 0 0 1-24.70570802-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.70570802-24.74575zM321.10579135 348.30966698l-20.181 52.05416604H341.16666635l-20.02083302-52.05416604z m215.46420896-27.3885h-20.70154198v47.16908302h18.17891698c18.65941698 0 27.3885-11.57204198 27.3885-25.14616698 0-11.01145802-6.68695802-22.02291698-24.82583396-22.02291604z m190.7585 0h-20.70154198v47.16908302h18.138875c18.69945802 0 27.42854198-11.57204198 27.42854198-25.14616698 0-11.01145802-6.727-22.02291698-24.82583396-22.02291604z m-3.3635-194.40229198H311.01529135A55.2575 55.2575 0 0 0 255.87791635 181.65625v12.21270802h523.22445896V181.65625a55.2575 55.2575 0 0 0-55.137375-55.137375z" p-id="7766" fill="#E5A219"></path></svg>
--- a/src/assets/img/entity-symbol2/app.svg
+++ b/src/assets/img/entity-symbol2/app.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290120782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7911" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M723.84487531 71.54166698c60.46291698 0 110.11458302 49.45145802 110.11458302 110.11458302v12.21270802h10.05045802c27.58870802 0 49.77179198 22.30320802 49.77179198 49.73175v256.78720896c0 27.42854198-22.34325 49.73175-49.77179198 49.73175h-10.05045802v292.22408302c0 60.50295802-49.4915 110.11458302-110.11458302 110.11458302H310.89516635a110.394875 110.394875 0 0 1-110.11458302-110.11458302v-292.22408302h-10.0905A49.81183302 49.81183302 0 0 1 140.95833333 500.38791698V243.60070802c0-27.42854198 22.30320802-49.73175 49.73175-49.73175h10.0905V181.65625C200.78058333 121.15329198 250.23204135 71.54166698 310.89516635 71.54166698z m54.97720802 688.31625H255.75779135v82.48583302a55.2575 55.2575 0 0 0 55.137375 55.137375h412.94970896a55.2575 55.2575 0 0 0 55.09733302-55.137375l-0.120125-82.48583302z m-261.47208302 27.508625c22.02291698 0 41.24291698 19.22 41.24291604 41.28295802 0 22.02291698-19.22 41.24291698-41.24291604 41.24291698-21.90279198 0-41.24291698-19.22-41.24291698-41.24291698s19.22-41.24291698 41.24291698-41.24291698z m261.59220802-237.246875H255.87791635v154.56083302h523.06429198v-154.56083302z m61.06354198-302.47475H194.73429135v248.65875h645.27145896v-248.65875z m-518.53958396 23.78475c12.41291698 0 23.5445 7.52783302 28.10925 18.97975l60.903375 150.55666604a24.865875 24.865875 0 0 1-23.10404104 34.27566698 25.106125 25.106125 0 0 1-23.26420896-15.8565l-6.56683302-16.697375H284.78800031l-6.32658396 16.53720802a25.14616698 25.14616698 0 1 1-46.76866604-18.41916604l61.70420802-150.55666698a30.43166698 30.43166698 0 0 1 28.10925-18.81958302z m217.82666698 0c40.722375 0 71.63454198 31.47275 71.63454198 69.6725 0 38.15970802-31.19245802 69.071875-74.4775 69.071875h-20.70154198v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.82583302 24.82583302 0 0 1-24.74575-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.74575-24.74575z m190.878625 0c40.722375 0 71.67458302 31.47275 71.67458302 69.6725 0 38.15970802-31.2325 69.071875-74.4775 69.071875h-20.74158302v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.66566698 24.66566698 0 0 1-24.70570802-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.70570802-24.74575zM321.10579135 348.30966698l-20.181 52.05416604H341.16666635l-20.02083302-52.05416604z m215.46420896-27.3885h-20.70154198v47.16908302h18.17891698c18.65941698 0 27.3885-11.57204198 27.3885-25.14616698 0-11.01145802-6.68695802-22.02291698-24.82583396-22.02291604z m190.7585 0h-20.70154198v47.16908302h18.138875c18.69945802 0 27.42854198-11.57204198 27.42854198-25.14616698 0-11.01145802-6.727-22.02291698-24.82583396-22.02291604z m-3.3635-194.40229198H311.01529135A55.2575 55.2575 0 0 0 255.87791635 181.65625v12.21270802h523.22445896V181.65625a55.2575 55.2575 0 0 0-55.137375-55.137375z" p-id="7912" fill="#778391"></path></svg>
--- a/src/assets/img/entity-symbol2/domain-colored.svg
+++ b/src/assets/img/entity-symbol2/domain-colored.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688298522321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7364" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M512 61.06201172a450.93798828 450.93798828 0 1 1 0 901.87597656 450.93798828 450.93798828 0 0 1 0-901.87597656z m0 45.09379883a405.84418945 405.84418945 0 1 0 0 811.6883789 405.84418945 405.84418945 0 0 0 0-811.6883789z" p-id="7365" fill="#38ACD2"></path><path d="M229.64344446 586.23133044l15.95626722-52.586307c4.64812962-15.19314186 8.18625866-30.6637832 10.54501134-46.41192491h0.69375048c3.1912538 18.3150199 6.17438209 31.77378466 10.12876124 46.48129978l15.05439124 52.51693213h46.82817591l49.11755284-149.36453686h-48.77067761l-13.73626514 59.24631408c-3.60750391 17.06626868-6.93750745 33.855037-9.22688438 50.99068056h-0.69375136a864.41343565 864.41343565 0 0 0-11.79376257-50.64380531l-15.95626721-59.59318933h-39.33566772l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.70440892-11.79376256 48.84005335h-0.69375049A890.56783897 890.56783897 0 0 0 199.81216237 497.84748474l-12.7650143-61.05006603h-50.78255506l46.55067554 149.36453685h46.82817591zM570.27506324 496.04373279c-3.53812904 17.20501843-6.86813258 33.99378674-9.1575104 51.06005543h-0.69375047c-3.1912538-17.13564355-7.49250818-33.855037-11.79376257-50.64380531l-15.95626721-59.59318933H493.26872999l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.77378466-11.79376256 48.84005335h-0.69375137a904.30410413 904.30410413 0 0 0-9.08813463-49.18692861l-12.83438917-61.05006603h-50.78255417l46.48129978 149.29516199h46.89755078l16.09501783-52.51693213c4.57875475-15.26251673 8.11688379-30.73315807 10.40626074-46.48130068h0.69375136c3.33000354 18.38439477 6.24375697 31.84315955 10.19813611 46.48130068l15.05439124 52.51693212h46.82817502l49.11755373-149.29516198H584.15007813l-13.73626514 59.24631408zM825.22846423 496.04373279c-3.60750391 17.20501843-6.93750745 33.99378674-9.15751039 51.06005543h-0.69375048c-3.26062867-17.13564355-7.56188305-33.855037-11.79376256-50.64380531l-16.02564208-59.59318933h-39.33566773l-16.99689381 61.39694129a710.40076917 710.40076917 0 0 0-11.79376257 48.84005335h-0.69375049a893.96721827 893.96721827 0 0 0-9.15751038-49.18692861l-12.76501342-61.05006603H645.89389464l46.55067554 149.29516199h46.82817591l16.09501784-52.51693213a328.14410573 328.14410573 0 0 0 10.47563559-46.48130068h0.69375136c3.26062867 18.38439477 6.24375697 31.84315955 10.12876036 46.48130068l15.05439124 52.51693212h46.82817591l49.1869286-149.29516198h-48.84005337l-13.73626426 59.24631408z" p-id="7366" fill="#38ACD2"></path><path d="M320.17791736 643.11889184c28.65190576 164.34955323 107.87824195 274.72529762 191.82208264 274.72529761 81.30758763 0 158.24454601-103.7157373 189.04707984-259.80965612l2.42812756-12.83438916 44.40004835 7.90875828C715.4077206 835.28784972 623.34699522 962.93798828 512 962.93798828c-109.26574291 0-200.07771705-123.00200805-233.93275317-299.56157396l-2.28937782-12.48751393 44.40004835-7.70063368zM512 61.06201172c109.40449353 0 200.14709193 123.14075868 234.00212804 299.83907432l2.28937782 12.48751393-44.40004834 7.70063369C675.10080202 216.67030556 595.94384069 106.15581055 512 106.15581055c-82.07071387 0-159.56267298 105.58886413-189.81020519 263.62528552l-2.28937782 12.69563854-44.40004834-7.63125792C307.06602784 190.65465198 399.7511288 61.06201172 512 61.06201172z" p-id="7367" fill="#38ACD2"></path><path d="M549.60129065 647.28139648V962.93798828h-60.14819006V647.28139648h60.14819006z m0-586.21938476v315.6565918h-60.14819006V61.06201172h60.14819006z" p-id="7368" fill="#38ACD2"></path><path d="M151.24960938 241.43720703h721.50078124v45.09379883H151.24960938V241.43720703z m0 496.03178711h721.50078124v45.09379883H151.24960938v-45.09379883z" p-id="7369" fill="#38ACD2"></path></svg>
--- a/src/assets/img/entity-symbol2/domain-colored2.svg
+++ b/src/assets/img/entity-symbol2/domain-colored2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687771150463" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7479" width="35.9765625" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1099.86729167 250.4559668V115.17457031H125.84123698v135.28139649h974.02605469z m0 54.11255859H125.84123698v595.23814453h974.02605469V304.56852539zM71.72867839 61.06201172h1082.25117187v892.8572168H71.72867839V61.06201172z m324.31460117 504.74992185v44.34223492c0.1803752 10.31144837 2.1344401 18.12770712 5.89225608 23.50890074 3.72775374 5.38119362 11.15319987 8.05675843 22.27633663 8.05675844h99.65729541v44.34223581h-119.73906657c-20.14189651 0-34.15103728-4.65969284-41.99735827-13.9490154-7.81625876-9.28932256-11.7243877-23.32852556-11.72438769-42.14767035v-82.61183945c0-18.81914567 3.90812893-32.85834779 11.72438769-42.14767034 7.81625876-9.31938479 21.82539863-13.9490154 41.99735827-13.9490154h119.73906657v44.34223581h-99.65729541c-11.12313675 0-18.54858288 2.70562793-22.27633663 8.05675842-3.75781686 5.38119362-5.71188089 12.7465135-5.89225608 22.1560868z m327.98223044 64.15344416c0 18.12770712-3.72775374 32.01659717-11.21332523 41.66667012-7.4855706 9.62001071-21.40452288 14.43001562-41.7267946 14.43001563h-66.76888539c-20.17195963 0-34.18109951-4.65969284-41.99735738-13.9490154-7.81625876-9.28932256-11.7243877-23.32852556-11.7243877-42.14767035v-82.61183945c0-18.81914567 3.90812893-32.85834779 11.7243877-42.14767034 7.81625876-9.31938479 21.82539863-13.9490154 41.99735738-13.9490154h66.73882227c20.35233483 0 34.27128711 4.81000491 41.75685772 14.43001562 7.4855706 9.62001071 11.21332435 23.53896299 11.21332523 41.66667012v82.61183945zM678.39058559 611.20635742v-44.67292307c0-10.76238636-1.74362659-18.60870736-5.23088067-23.50890076-3.48725407-4.93025564-11.21332435-7.39538301-23.20827572-7.395383h-25.55315237c-11.12313675 0-18.57864512 2.70562793-22.30639886 8.05675842-3.72775374 5.38119362-5.6216933 12.98701406-5.62169418 22.84752534v44.31217268c0 9.86051038 1.89393956 17.4663317 5.62169418 22.84752444 3.72775374 5.38119362 11.18326211 8.05675843 22.30639886 8.05675932h25.55315237c11.99495049 0 19.63083405-2.46512737 22.93771293-7.39538301 3.30687888-4.90019251 5.14069306-12.62626367 5.50144346-23.14815036z m241.37207356-119.91944264c20.32227171 0 34.27128711 4.81000491 41.72679548 14.43001562 7.4855706 9.62001071 11.21332435 23.53896299 11.21332434 41.66667012v138.7085252h-45.63492441v-119.55869137c0-10.76238636-1.74362659-18.60870736-5.23088066-23.50890076-3.48725407-4.93025564-11.21332435-7.39538301-23.20827484-7.395383h-14.61039082v150.46297513h-46.17605l-0.24050055-150.46297513h-13.04713943c-11.12313675 0-18.54858288 2.70562793-22.30639886 8.05675842-3.72775374 5.38119362-5.59163105 12.98701406-5.59163105 22.84752534v119.55869137h-45.90548721v-138.7085252c0-18.81914567 3.90812893-32.85834779 11.72438769-42.14767035 7.81625876-9.31938479 21.82539863-13.9490154 41.99735828-13.94901539h115.28981204zM244.88886589 637.36076074h48.70130273v48.70130274H244.88886589v-48.70130274z" p-id="7480" fill="#38ACD2"></path></svg>
--- a/src/assets/img/entity-symbol2/domain.svg
+++ b/src/assets/img/entity-symbol2/domain.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290376101" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8107" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M512 61.06201172a450.93798828 450.93798828 0 1 1 0 901.87597656 450.93798828 450.93798828 0 0 1 0-901.87597656z m0 45.09379883a405.84418945 405.84418945 0 1 0 0 811.6883789 405.84418945 405.84418945 0 0 0 0-811.6883789z" p-id="8108" fill="#778391"></path><path d="M229.64344446 586.23133044l15.95626722-52.586307c4.64812962-15.19314186 8.18625866-30.6637832 10.54501134-46.41192491h0.69375048c3.1912538 18.3150199 6.17438209 31.77378466 10.12876124 46.48129978l15.05439124 52.51693213h46.82817591l49.11755284-149.36453686h-48.77067761l-13.73626514 59.24631408c-3.60750391 17.06626868-6.93750745 33.855037-9.22688438 50.99068056h-0.69375136a864.41343565 864.41343565 0 0 0-11.79376257-50.64380531l-15.95626721-59.59318933h-39.33566772l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.70440892-11.79376256 48.84005335h-0.69375049A890.56783897 890.56783897 0 0 0 199.81216237 497.84748474l-12.7650143-61.05006603h-50.78255506l46.55067554 149.36453685h46.82817591zM570.27506324 496.04373279c-3.53812904 17.20501843-6.86813258 33.99378674-9.1575104 51.06005543h-0.69375047c-3.1912538-17.13564355-7.49250818-33.855037-11.79376257-50.64380531l-15.95626721-59.59318933H493.26872999l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.77378466-11.79376256 48.84005335h-0.69375137a904.30410413 904.30410413 0 0 0-9.08813463-49.18692861l-12.83438917-61.05006603h-50.78255417l46.48129978 149.29516199h46.89755078l16.09501783-52.51693213c4.57875475-15.26251673 8.11688379-30.73315807 10.40626074-46.48130068h0.69375136c3.33000354 18.38439477 6.24375697 31.84315955 10.19813611 46.48130068l15.05439124 52.51693212h46.82817502l49.11755373-149.29516198H584.15007813l-13.73626514 59.24631408zM825.22846423 496.04373279c-3.60750391 17.20501843-6.93750745 33.99378674-9.15751039 51.06005543h-0.69375048c-3.26062867-17.13564355-7.56188305-33.855037-11.79376256-50.64380531l-16.02564208-59.59318933h-39.33566773l-16.99689381 61.39694129a710.40076917 710.40076917 0 0 0-11.79376257 48.84005335h-0.69375049a893.96721827 893.96721827 0 0 0-9.15751038-49.18692861l-12.76501342-61.05006603H645.89389464l46.55067554 149.29516199h46.82817591l16.09501784-52.51693213a328.14410573 328.14410573 0 0 0 10.47563559-46.48130068h0.69375136c3.26062867 18.38439477 6.24375697 31.84315955 10.12876036 46.48130068l15.05439124 52.51693212h46.82817591l49.1869286-149.29516198h-48.84005337l-13.73626426 59.24631408z" p-id="8109" fill="#778391"></path><path d="M320.17791736 643.11889184c28.65190576 164.34955323 107.87824195 274.72529762 191.82208264 274.72529761 81.30758763 0 158.24454601-103.7157373 189.04707984-259.80965612l2.42812756-12.83438916 44.40004835 7.90875828C715.4077206 835.28784972 623.34699522 962.93798828 512 962.93798828c-109.26574291 0-200.07771705-123.00200805-233.93275317-299.56157396l-2.28937782-12.48751393 44.40004835-7.70063368zM512 61.06201172c109.40449353 0 200.14709193 123.14075868 234.00212804 299.83907432l2.28937782 12.48751393-44.40004834 7.70063369C675.10080202 216.67030556 595.94384069 106.15581055 512 106.15581055c-82.07071387 0-159.56267298 105.58886413-189.81020519 263.62528552l-2.28937782 12.69563854-44.40004834-7.63125792C307.06602784 190.65465198 399.7511288 61.06201172 512 61.06201172z" p-id="8110" fill="#778391"></path><path d="M549.60129065 647.28139648V962.93798828h-60.14819006V647.28139648h60.14819006z m0-586.21938476v315.6565918h-60.14819006V61.06201172h60.14819006z" p-id="8111" fill="#778391"></path><path d="M151.24960938 241.43720703h721.50078124v45.09379883H151.24960938V241.43720703z m0 496.03178711h721.50078124v45.09379883H151.24960938v-45.09379883z" p-id="8112" fill="#778391"></path></svg>
--- a/src/assets/img/entity-symbol2/ip-colored.svg
+++ b/src/assets/img/entity-symbol2/ip-colored.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687770782238" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7446" width="35.7392578125" height="33" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M306.07165232 286.53100586h88.45900173v402.31184159H306.07165232V286.53100586z m254.70480646 258.08684225h92.9683825c25.1773713 0 46.59692575-3.68265995 64.25866333-10.97282467 17.66173758-7.36532077 32.01659717-16.9853306 43.06457788-29.01034421 11.12313675-12.02501272 19.1648645-25.85377829 24.27549445-41.48629492a152.94313406 152.94313406 0 0 0 0-95.44854056 111.6071521 111.6071521 0 0 0-24.27549445-41.18566989 120.25012991 120.25012991 0 0 0-43.06457788-29.01034333A167.59861869 167.59861869 0 0 0 653.74484128 286.53100586H472.31745703v402.31184159h88.45900175v-144.30015625z m0-189.39395508h68.7680432c10.14610474 0 19.84127148 0.75156302 29.31096924 2.25468995a68.39226126 68.39226126 0 0 1 24.80158936 8.79329077 47.72427072 47.72427072 0 0 1 17.13564355 18.33814456 64.48413233 64.48413233 0 0 1 6.46344479 30.96440824c0 12.77657663-2.1795339 23.07299344-6.46344479 30.96440911a47.6491138 47.6491138 0 0 1-17.21079959 18.33814456 68.09163623 68.09163623 0 0 1-24.80158936 8.71813474c-9.39454172 1.50312692-19.08970846 2.25468994-29.31096923 2.25468994H560.85161569V355.29904907z" p-id="7447" fill="#7E9F54"></path><path d="M997.43474439 61.06201172H101.72158671C79.2498442 61.06201172 61.06201172 80.60265817 61.06201172 104.65268362v814.69463276c0 24.05002634 18.18783249 43.5906719 40.65957499 43.5906719h895.71315768c22.47174337 0 40.65957499-19.54064646 40.65957497-43.5906719V104.65268362c0-24.05002634-18.18783249-43.5906719-40.65957497-43.5906719z m-20.36736551 835.73840524H122.0889531V126.44802001h854.97842578v770.35239695z" p-id="7448" fill="#7E9F54"></path></svg>
--- a/src/assets/img/entity-symbol2/ip.svg
+++ b/src/assets/img/entity-symbol2/ip.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290403407" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8307" xmlns:xlink="http://www.w3.org/1999/xlink" width="38.98828125" height="36"><path d="M306.07165232 286.53100586h88.45900173v402.31184159H306.07165232V286.53100586z m254.70480646 258.08684225h92.9683825c25.1773713 0 46.59692575-3.68265995 64.25866333-10.97282467 17.66173758-7.36532077 32.01659717-16.9853306 43.06457788-29.01034421 11.12313675-12.02501272 19.1648645-25.85377829 24.27549445-41.48629492a152.94313406 152.94313406 0 0 0 0-95.44854056 111.6071521 111.6071521 0 0 0-24.27549445-41.18566989 120.25012991 120.25012991 0 0 0-43.06457788-29.01034333A167.59861869 167.59861869 0 0 0 653.74484128 286.53100586H472.31745703v402.31184159h88.45900175v-144.30015625z m0-189.39395508h68.7680432c10.14610474 0 19.84127148 0.75156302 29.31096924 2.25468995a68.39226126 68.39226126 0 0 1 24.80158936 8.79329077 47.72427072 47.72427072 0 0 1 17.13564355 18.33814456 64.48413233 64.48413233 0 0 1 6.46344479 30.96440824c0 12.77657663-2.1795339 23.07299344-6.46344479 30.96440911a47.6491138 47.6491138 0 0 1-17.21079959 18.33814456 68.09163623 68.09163623 0 0 1-24.80158936 8.71813474c-9.39454172 1.50312692-19.08970846 2.25468994-29.31096923 2.25468994H560.85161569V355.29904907z" p-id="8308" fill="#778391"></path><path d="M997.43474439 61.06201172H101.72158671C79.2498442 61.06201172 61.06201172 80.60265817 61.06201172 104.65268362v814.69463276c0 24.05002634 18.18783249 43.5906719 40.65957499 43.5906719h895.71315768c22.47174337 0 40.65957499-19.54064646 40.65957497-43.5906719V104.65268362c0-24.05002634-18.18783249-43.5906719-40.65957497-43.5906719z m-20.36736551 835.73840524H122.0889531V126.44802001h854.97842578v770.35239695z" p-id="8309" fill="#778391"></path></svg>
--- a/src/components/advancedSearch/Index.vue
+++ b/src/components/advancedSearch/Index.vue
@@ -115,11 +115,11 @@ export default {
  },
  setup (props) {
    // 默认为文本模式
-    let searchMode = ref('text')
+    const searchMode = ref('text')
    if (props.defaultMode) {
      switch (props.defaultMode) {
        case 'tag': {
-          searchMode = 'tag'
+          searchMode.value = 'tag'
          break
        }
      }
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -15,9 +15,9 @@
                allow-create
                filterable
                size="mini"
-                v-model="meta.column.name"
+                v-model="meta.column.label"
                ref="columnSelect"
-                :placeholder="meta.column.name || ''"
+                :placeholder="meta.column.label || ''"
                @blur="columnBlur(meta, index)"
                @change="(value) => selectColumn(value, meta)"
            >
@@ -25,7 +25,7 @@
                  v-for="(column, index) in columnList"
                  :key="index"
                  :label="column.label"
-                  :value="column.name"
+                  :value="column.label"
              ></el-option>
            </el-select>
          </div>
@@ -36,6 +36,7 @@
        <!-- 值 -->
        <div class="condition__value">
          <div v-if="meta.value.isEditing">
+            <!--避免blur事件和keyup.enter重复执行-->
            <el-input v-model="meta.value.value" size="mini" @blur="valueBlur(meta)" ref="valueInput" @keyup.enter="valueBlur(meta)"></el-input>
          </div>
          <span v-else @click="valueClick(meta)">{{meta.value.label}}</span>
@@ -74,10 +75,20 @@
    </div>
    <div class="tag-search__add" @click="addCondition">{{$t('entities.advancedSearch.add')}}</div>
    <div class="search__suffixes search__suffixes--tag-mode">
-      <div class="search__suffix" @click="changeMode">
-        <i class="cn-icon cn-icon-search-normal"></i>
+      <div class="search__suffix" style="margin-right: 12px">
+        <el-popover
+            popper-class="my-popper-class"
+            placement="top"
+            :popper-style="{border: '1px red solid'}"
+            trigger="hover"
+            :content="$t('entity.switchToBasicSearch')"
+        >
+          <template #reference>
+            <i class="cn-icon cn-icon-search-normal" @click="changeMode"></i>
+          </template>
+        </el-popover>
      </div>
-      <div class="search__suffix" @click="search">
+      <div class="search__suffix new-search__suffix" @click="search">
        <i class="el-icon-search"></i>
      </div>
    </div>
@@ -89,6 +100,7 @@ import Meta, { connection, condition, columnType } from './meta/meta'
 import _ from 'lodash'
 import { handleErrorTip } from '@/components/advancedSearch/meta/error'
 import Parser, { stringInQuot } from '@/components/advancedSearch/meta/parser'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
 export default {
  name: 'TagMode',
  props: {
@@ -131,7 +143,10 @@ export default {
        this.metaList.push(newCondition)

        this.$nextTick(() => {
-          this.$refs.columnSelect.focus()
+          const selectList = this.$refs.columnSelect
+          if (selectList && selectList.length > 0) {
+            this.$refs.columnSelect[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
+          }
        })
      }
    },
@@ -149,6 +164,18 @@ export default {
      } else {
        this.metaList.splice(index - 1, 2)
      }
+
+      if (this.metaList.length > 0) {
+        const parser = new Parser(this.columnList)
+        const errorList = parser.validateMeta(this.metaList)
+        if (_.isEmpty(errorList)) {
+          this.reloadUrl({ q: parser.parseMeta(this.metaList).q })
+        }
+      } else {
+        const routeQuery = this.$route.query
+        delete routeQuery.q
+        this.reloadUrl(routeQuery, 'cleanOldParams')
+      }
    },
    // 选择搜索条件的事件
    selectColumn (value, meta) {
@@ -160,7 +187,7 @@ export default {
        meta.resetValue()
      } else {
        const selectedColumn = this.columnList.find(column => {
-          return column.name === value
+          return column.label === value
        })
        meta.column.label = selectedColumn.label
        meta.column.type = selectedColumn.type
@@ -181,12 +208,12 @@ export default {
    columnClick (meta) {
      meta.column.isEditing = true
      this.$nextTick(() => {
-        this.$refs.columnSelect.focus()
+        this.$refs.columnSelect[this.$refs.columnSelect.length - 1].focus()
      })
    },
    columnBlur (meta, index) {
      setTimeout(() => {
-        meta.column.name = meta.column.name.replace(/"/g, '')
+        meta.column.label = meta.column.label.replace(/"/g, '')
        meta.column.isEditing = false
        if (meta.isEmpty()) {
          if (this.metaList.length > 1) {
@@ -220,7 +247,10 @@ export default {
        }
      }
      this.$nextTick(() => {
-        this.$refs.valueInput.focus()
+        const selectList = this.$refs.valueInput
+        if (selectList && selectList.length > 0) {
+          this.$refs.valueInput[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
+        }
      })
    },
    operatorClick (meta) {
@@ -245,7 +275,8 @@ export default {
            str = str.substring(1, str.length)
            str = str.substring(0, str.length - 1)
          }
-          if (str.indexOf("'") > -1) {
+          // 如果此时参数为xi'an，处理为xi''an，后一个条件避免若参数为xi''an,则不处理
+          if (str.indexOf("'") > -1 && str.indexOf("''") === -1) {
            str = str.replace(/'/g, "''")
          }
          return str
@@ -264,7 +295,8 @@ export default {
            str = str.substring(1, str.length)
            str = str.substring(0, str.length - 1)
          }
-          if (str.indexOf("'") > -1) {
+          // 如果此时参数为xi'an，处理为xi''an，后一个条件避免若参数为xi''an,则不处理
+          if (str.indexOf("'") > -1 && str.indexOf("''") === -1) {
            str = str.replace(/'/g, "''")
          }
          meta.value.value = str
@@ -276,13 +308,13 @@ export default {
    valueClick (meta) {
      meta.value.isEditing = true
      this.$nextTick(() => {
-        this.$refs.valueInput.focus()
+        this.$refs.valueInput[0].focus()
      })
    },
    // 判断是否是用户自己添加的内容，用于判断是否是全局搜索
    isCustomized (value) {
      return !this.columnList.some(meta => {
-        return meta.name === value
+        return meta.label === value
      })
    },
    enterSearch () {
@@ -308,13 +340,15 @@ export default {
      const parser = new Parser(this.columnList)
      const errorList = parser.validateMeta(this.metaList)
      if (_.isEmpty(errorList)) {
+        this.reloadUrl({ mode: 'text' })
        this.$emit('changeMode', 'text', parser.parseMeta(this.metaList))
      } else {
+        this.reloadUrl({ mode: 'text' })
        this.$emit('changeMode', 'text', { metaList: [], str: '' })
      }
    },
    // 处理value，例如转换IN的值
-    handleValue (value, column, operator) {
+    handleValue (value, column, operator, flag) {
      const isArray = ['IN', 'NOT IN'].indexOf(operator) > -1
      if (isArray) {
        if (_.isArray(value)) {
@@ -324,21 +358,28 @@ export default {
          return value
        }
      } else {
-        return column.type === columnType.string ? stringInQuot(value) : value
+        let newValue = column.type === columnType.string ? stringInQuot(value) : value
+        if (flag) {
+          newValue = newValue.slice(1)
+          newValue = newValue.slice(0, newValue.length - 1)
+          return newValue
+        } else {
+          return newValue
+        }
      }
    },
    addParams (params) {
      params.forEach(param => {
        const column = this.columnList.find(column => {
-          return column.name === param.column
+          return column.label === param.column
        })
        const meta = new Meta()
-        meta.column.name = param.column
+        meta.column.label = param.column
        meta.column.type = column ? column.type : columnType.string
        meta.column.label = column ? column.label : param.column
        meta.operator.value = '='
        meta.operator.show = true
-        meta.value.value = this.handleValue(param.value, column, column.operator)
+        meta.value.value = this.handleValue(param.value, column, column.operator, 'noQuotes')
        meta.value.show = true
        meta.value.label = meta.value.value
        this.addCondition(meta)
@@ -347,16 +388,16 @@ export default {
    changeParams (params) {
      params.forEach(param => {
        const oldColumn = this.columnList.find(column => {
-          return column.name === param.oldParam.column
+          return column.label === param.oldParam.column
        })
        const newColumn = this.columnList.find(column => {
-          return column.name === param.newParam.column
+          return column.label === param.newParam.column
        })
-        const meta = this.metaList.find(m => m.column && m.column.name === oldColumn.name && m.operator.value === param.oldParam.operator && m.value.value === this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator))
+        const meta = this.metaList.find(m => m.column && m.column.label === oldColumn.label && m.operator.value === param.oldParam.operator && m.value.value === this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator))
        if (meta) {
-          meta.column.name = newColumn.name
+          meta.column.label = newColumn.label
          meta.column.type = newColumn.type
-          meta.column.label = newColumn.label ? newColumn.label : newColumn.name
+          meta.column.label = newColumn.label ? newColumn.label : newColumn.label
          meta.operator.value = param.newParam.operator
          meta.value.value = this.handleValue(param.newParam.value, newColumn, param.newParam.operator)
          meta.value.label = meta.value.value
@@ -366,9 +407,9 @@ export default {
    removeParams (params) {
      params.forEach(param => {
        const column = this.columnList.find(c => {
-          return c.name === param.column
+          return c.label === param.column
        })
-        const metaIndex = this.metaList.findIndex(m => m.column && m.column.name === param.column && m.operator.value === param.operator && m.value.value === this.handleValue(param.value, column, param.operator))
+        const metaIndex = this.metaList.findIndex(m => m.column && m.column.label === param.column && m.operator.value === param.operator && m.value.value === this.handleValue(param.value, column, param.operator))
        // 不是在首位，则删除时顺带删除前一个index（and或or），否则顺带删除后一个index
        if (metaIndex > 0) {
          this.metaList.splice(metaIndex - 1, 2)
@@ -378,10 +419,28 @@ export default {
          this.metaList.splice(metaIndex, 2)
        }
      })
+    },
+    /**
+     * 向地址栏添加/删除参数
+     */
+    reloadUrl (newParam, clean) {
+      const { query } = this.$route
+      let newUrl = urlParamsHandler(window.location.href, query, newParam)
+      if (clean) {
+        newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
+      }
+      overwriteUrl(newUrl)
    }
  },
  mounted () {
    const vm = this
+    // 如果地址栏包含参数q，则匹配出metaList到搜索栏回显使用
+    const { q } = this.$route.query
+    if (q) {
+      const parser = new Parser(this.columnList)
+      this.metaList = parser.parseStr(q).metaList
+    }
+
    this.emitter.on('advanced-search', function () {
      vm.search()
    })
@@ -399,3 +458,23 @@ export default {
  }
 }
 </script>
+
+<style lang="scss">
+.new-search__suffix {
+  width: 41px;
+  height: 41px;
+  line-height: 41px;
+  background: #38ACD2;
+  text-align: center;
+  margin-top: -10px;
+  margin-right: -10px;
+
+  .el-icon-search {
+    color: #fff !important;
+    margin-top: 9px !important;
+  }
+}
+.my-popper-class .el-popper__arrow {
+  display: none;
+}
+</style>
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -3,10 +3,22 @@
      ref="textSearch"
  ></textarea>
  <div class="search__suffixes search__suffixes--text-mode">
-    <div class="search__suffix" @click="changeMode">
-      <i class="cn-icon cn-icon-search-advance"></i>
+    <div 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>
    </div>
-    <div class="search__suffix" @click="search">
+    <div class="search__suffix-close" @click="cleanParams">
+      <i class="el-icon-error"></i>
+    </div>
+    <div class="search__suffix new-search__suffix" @click="search">
      <i class="el-icon-search"></i>
    </div>
  </div>
@@ -24,6 +36,7 @@ import { toRaw } from 'vue'
 import _ from 'lodash'
 import { columnType } from '@/components/advancedSearch/meta/meta'
 import { handleErrorTip } from '@/components/advancedSearch/meta/error'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'

 export default {
  name: 'TextMode',
@@ -38,6 +51,12 @@ export default {
  },
  emits: ['changeMode', 'search'],
  methods: {
+    cleanParams () {
+      toRaw(this.codeMirror).setValue('')
+      const routeQuery = this.$route.query
+      delete routeQuery.q
+      this.reloadUrl(routeQuery, 'cleanOldParams')
+    },
    initCodeMirror () {
      this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {
        mode: {
@@ -74,11 +93,14 @@ export default {
        const errorList = parser.validateStr(str)
        if (_.isEmpty(errorList)) {
          const metaList = parser.parseStr(str)
+          this.reloadUrl({ mode: 'tag' })
          this.$emit('changeMode', 'tag', metaList)
        } else {
+          this.reloadUrl({ mode: 'tag' })
          this.$emit('changeMode', 'tag', { metaList: [], str: '' })
        }
      } else {
+        this.reloadUrl({ mode: 'tag' })
        this.$emit('changeMode', 'tag', { str: '', metaList: [] })
      }
    },
@@ -99,7 +121,7 @@ export default {
    addParams (params) {
      let current = this.codeMirror.getValue()
      params.forEach(param => {
-        const column = this.columnList.find(c => c.name === param.column)
+        const column = this.columnList.find(c => c.label === param.column)
        current = `${current ? current + ' AND ' : ''}${param.column}${handleOperatorSpace(param.operator)}${this.handleValue(param.value, column, param.operator)}`
      })
      toRaw(this.codeMirror).setValue(current.trim())
@@ -107,7 +129,7 @@ export default {
    removeParams (params) {
      let current = this.codeMirror.getValue()
      params.forEach(param => {
-        const column = this.columnList.find(c => c.name === param.column)
+        const column = this.columnList.find(c => c.label === param.column)
        // 将对应内容替换为空串
        const sqlPiece = `${param.column}${handleOperatorSpace(param.operator)}${this.handleValue(param.value, column, param.operator)}`.trim()
        const sqlPieceWithConnection = [` AND ${sqlPiece}`, ` OR ${sqlPiece}`, `${sqlPiece} AND `, `${sqlPiece} OR `, sqlPiece]
@@ -120,14 +142,25 @@ export default {
    changeParams (params) {
      let current = this.codeMirror.getValue()
      params.forEach(param => {
-        const oldColumn = this.columnList.find(c => c.name === param.oldParam.column)
-        const newColumn = this.columnList.find(c => c.name === param.newParam.column)
+        const oldColumn = this.columnList.find(c => c.label === param.oldParam.column)
+        const newColumn = this.columnList.find(c => c.label === param.newParam.column)
        // 将oldParam内容替换为newParam
        const oldSqlPiece = `${param.oldParam.column}${handleOperatorSpace(param.oldParam.operator)}${this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator)}`.trim()
        const newSqlPiece = `${param.newParam.column}${handleOperatorSpace(param.newParam.operator)}${this.handleValue(param.newParam.value, newColumn, param.newParam.operator)}`.trim()
        current = current.replace(oldSqlPiece, newSqlPiece)
      })
      toRaw(this.codeMirror).setValue(current.trim())
+    },
+    /**
+     * 向地址栏添加/删除参数
+     */
+    reloadUrl (newParam, clean) {
+      const { query } = this.$route
+      let newUrl = urlParamsHandler(window.location.href, query, newParam)
+      if (clean) {
+        newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
+      }
+      overwriteUrl(newUrl)
    }
  },
  watch: {
@@ -143,7 +176,22 @@ export default {
    }
  },
  mounted () {
+    // 如果地址栏包含参数q，则将参数q回显到搜索栏内
+    let { q } = this.$route.query
    this.initCodeMirror()
+    if (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)
+        }
+      }
+      toRaw(this.codeMirror).setValue(q)
+    }
+
    const vm = this
    this.emitter.on('advanced-search', function () {
      vm.search()
@@ -151,3 +199,29 @@ export default {
  }
 }
 </script>
+
+<style lang="scss">
+.search__suffix-close {
+  .el-icon-error {
+    font-size: 17px;
+    color: #C4C4C4;
+    margin: 0 12px;
+    cursor: pointer;
+  }
+}
+
+.new-search__suffix {
+  width: 41px;
+  height: 41px;
+  line-height: 41px;
+  background: #38ACD2;
+  text-align: center;
+  margin-top: -10px;
+  margin-right: -10px;
+
+  .el-icon-search {
+    color: #fff !important;
+    margin-top: 9px !important;
+  }
+}
+</style>
--- a/src/components/advancedSearch/meta/meta.js
+++ b/src/components/advancedSearch/meta/meta.js
@@ -63,7 +63,7 @@ export default class Meta {

  isEmpty () {
    if (this.meta === condition) {
-      return _.isEmpty(this.column.name)
+      return _.isEmpty(this.column.label)
    } else {
      return true
    }
@@ -73,8 +73,8 @@ export default class Meta {
  isCompleteCondition () {
    if (this.meta === condition) {
      return (this.column.type === columnType.fullText)
-        ? !_.isEmpty(this.column.name)
-        : !_.isEmpty(this.column.name) && !_.isEmpty(this.operator.value) && (!_.isEmpty(this.value.value) || (_.isNumber(this.value.value) && !_.isNaN(this.value.value)))
+        ? !_.isEmpty(this.column.label)
+        : !_.isEmpty(this.column.label) && !_.isEmpty(this.operator.value) && (!_.isEmpty(this.value.value) || (_.isNumber(this.value.value) && !_.isNaN(this.value.value)))
    } else if (this.meta === connection) {
      return !!this.value
    }
--- a/src/components/advancedSearch/meta/parser.js
+++ b/src/components/advancedSearch/meta/parser.js
@@ -80,9 +80,9 @@ export default class Parser {
          str += `${meta.value.toUpperCase()} `
        } else if (meta.meta === condition) {
          if (meta.column.type === columnType.fullText) {
-            str += `'${meta.column.name}' `
+            str += `'${meta.column.label}' `
          } else if (meta.column.type === columnType.array) {
-            str += `${meta.column.name} ${meta.operator.value} (`
+            str += `${meta.column.label} ${meta.operator.value} (`
            meta.value.value.forEach((s, j) => {
              str += `'${s}'`
              if (j < meta.value.value.length) {
@@ -93,13 +93,13 @@ export default class Parser {
            str += ') '
          } else if (meta.column.type === columnType.string) {
            if (meta.operator.value.toLowerCase().indexOf('like') > -1 || meta.operator.value.toLowerCase().indexOf('in') > -1) {
-              str += `${meta.column.name} ${meta.operator.value} '${meta.value.value}' `
+              str += `${meta.column.label} ${meta.operator.value} '${meta.value.value}' `
            } else {
-              str += `${meta.column.name}${meta.operator.value}'${meta.value.value}' `
+              str += `${meta.column.label}${meta.operator.value}'${meta.value.value}' `
            }
          } else if (meta.column.type === columnType.number) {
            if (_.isNumber(Number(meta.value.value))) {
-              str += `${meta.column.name}${meta.operator.value}${meta.value.value} `
+              str += `${meta.column.label}${meta.operator.value}${meta.value.value} `
            } else {
              this.errorList.push(new ParserError(i, errorTypes.typeError, errorDesc.typeError.number))
              return
@@ -125,11 +125,11 @@ export default class Parser {
        if (meta.column.type === columnType.fullText) {
          str += "QUERY('"
          this.columnList.forEach(column => {
-            str += `${column.name}:${meta.column.name} `
+            str += `${column.label}:${meta.column.label} `
          })
          str += "') "
        } else if (meta.column.type === columnType.array) {
-          str += `${meta.column.name} ${meta.operator.value} (`
+          str += `${meta.column.label} ${meta.operator.value} (`
          meta.value.value.forEach((s, j) => {
            str += `'${s}'`
            if (j < meta.value.value.length) {
@@ -140,13 +140,13 @@ export default class Parser {
          str += ') '
        } else if (meta.column.type === columnType.string) {
          if (meta.operator.value.toLowerCase().indexOf('like') > -1 || meta.operator.value.toLowerCase().indexOf('in') > -1) {
-            str += `${meta.column.name} ${meta.operator.value} '${meta.value.value}' `
+            str += `${meta.column.label} ${meta.operator.value} '${meta.value.value}' `
          } else {
-            str += `${meta.column.name}${meta.operator.value}'${meta.value.value}' `
+            str += `${meta.column.label}${meta.operator.value}'${meta.value.value}' `
          }
        } else if (meta.column.type === columnType.number) {
          if (_.isNumber(Number(meta.value.value))) {
-            str += `${meta.column.name}${meta.operator.value}${meta.value.value} `
+            str += `${meta.column.label}${meta.operator.value}${meta.value.value} `
          }
        }
      }
@@ -566,12 +566,12 @@ export default class Parser {
            // 前面是连接符或空，后面是操作符，不在单引号内，则是key
            // 前面是连接符或操作符或空后面是连接符或空，或在单引号内，是value
            if (isInApostrophe) {
-              if (meta.column.name) {
+              if (meta.column.label) {
                meta.value.value = token.value
                meta.column.type = columnType.string
              } else {
                meta.column.type = columnType.fullText
-                meta.column.name = token.value
+                meta.column.label = token.value
              }
            } else {
              let isColumn = true
@@ -579,14 +579,14 @@ export default class Parser {
                if (prevToken) {
                  if (prevToken.type === types.connection && [types.commonOperator, types.letterOperator].indexOf(nextToken.type) > -1) {
                    meta.column.type = columnType.string
-                    meta.column.name = token.value
+                    meta.column.label = token.value
                  } else {
                    isColumn = false
                  }
                } else {
                  if ([types.commonOperator, types.letterOperator].indexOf(nextToken.type) > -1) {
                    meta.column.type = columnType.string
-                    meta.column.name = token.value
+                    meta.column.label = token.value
                  } else {
                    isColumn = false
                  }
@@ -604,7 +604,7 @@ export default class Parser {
                    meta.column.type = columnType.string
                  } else if (prevToken && (!prevToken.prevToken || prevToken.prevToken.type === types.connection)) {
                    meta.column.type = columnType.fullText
-                    meta.column.name = token.value
+                    meta.column.label = token.value
                  } else {
                    errorList.push(new ParserError(token.end, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedString))
                    break
@@ -631,14 +631,14 @@ export default class Parser {
                          meta.value.value = token.value
                        }
                      } else if (prevToken.type === types.connection) {
-                        meta.column.name = token.value
+                        meta.column.label = token.value
                        meta.column.type = columnType.fullText
                      } else {
                        errorList.push(new ParserError(token.end, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedString))
                        break
                      }
                    } else {
-                      meta.column.name = token.value
+                      meta.column.label = token.value
                      meta.column.type = columnType.fullText
                    }
                  } else {
@@ -707,10 +707,10 @@ export default class Parser {
          if (meta.column.type === columnType.fullText) {
            meta.operator.show = false
            meta.value.show = false
-            meta.column.label = meta.column.name
+            // meta.column.label = meta.column.name
            metaList.push(meta)
          } else {
-            const column = this.columnList.find(c => c.name === meta.column.name)
+            const column = this.columnList.find(c => c.label === meta.column.label)
            if (column) {
              meta.operator.show = true
              meta.value.show = true
@@ -751,6 +751,10 @@ export default class Parser {

 // 使用单引号包裹
 export function stringInQuot (value) {
+  if (value.indexOf("'") > -1) {
+    value = value.split("'").join("''") // 如xi'an，多添加一个单引号，处理为xi''an
+  }
+
  const match = `${value}`.match(/^'.+?'$/)
  return match ? value : `'${value}'`
 }
--- a/src/components/advancedSearch/meta/sql-parser.js
+++ b/src/components/advancedSearch/meta/sql-parser.js
@@ -250,6 +250,10 @@ function handleType (value) {

 // 使用单引号包裹
 export function stringInQuot (value) {
+  if (value.indexOf("'") > -1) {
+    value = value.split("'").join("''") // 如xi'an，多添加一个单引号，处理为xi''an
+  }
+
  const match = `${value}`.match(/^'.+?'$/)
  return match ? value : `'${value}'`
 }
--- a/src/components/common/Error.vue
+++ b/src/components/common/Error.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="showDefault" class="error-component">
+  <div v-if="showDefault" class="error-component" :style="style" :class="myClass">
    <div class="error-block" :style="{'max-width': localMaxWidth, 'width': localWidth}">
      <svg class="icon error-icon-default" aria-hidden="true">
        <use xlink:href="#cn-icon-baocuo"></use>
@@ -101,6 +101,12 @@ export default {
    // 自定义svg图标
    svg: {
      type: String
+    },
+    style: {
+      type: String
+    },
+    class: {
+      type: String
    }
  },
  data () {
@@ -109,7 +115,8 @@ export default {
      showSmall: false, // 显示错误的类型，true为图表模块内显示报错，false为标题后显示报错
      localWidth: '',
      localMaxWidth: '',
-      localPopoverWidth: ''
+      localPopoverWidth: '',
+      myClass: this.class
    }
  },
  mounted () {
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pagination">
+  <div class="pagination" >
    <el-pagination
        ref="page"
        @size-change="size"
@@ -60,7 +60,6 @@ export default {
    const { query } = useRoute()
    const pageSize = ref(defaultPageSize)
    const currentPageNo = ref(props.storePageNoOnUrl ? (query.pageNo || (props.pageObj.pageNo || 1)) : (props.pageObj.pageNo || 1))
-
    return {
      pageSize,
      currentPageNo
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -1,6 +1,6 @@
 <template>
-  <div v-ele-click-outside="changeDropdown" style="position: relative;z-index: 1" class="date-range-box">
-    <div @click="showDropdown" class="date-range-text">
+  <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>
@@ -14,7 +14,7 @@
        <i class="cn-icon cn-icon-dropdown" :class="dropdownFlag ? 'cn-icon-up' : ''"></i>
      </div>
    </div>
-    <transition name="el-zoom-in-top">
+    <transition name="el-zoom-in-top" style="z-index: 4;">
      <div v-if="dropdownFlag" class="date-range-panel">
        <el-row class="date-range-panel-top" style="position: relative">
          <el-col :span="16" class="date-range-panel-content date-range-panel-content-left">
@@ -22,10 +22,11 @@
            <el-date-picker
                v-model="newDateValue"
                ref="newDatePicker"
-                class="date_style"
+                popper-class="my-date-picker"
                style="position: absolute;top: -53px;left: -536px;"
                :clearable="false"
                :default-time="defaultTime"
+                :unlink-panels="true"
                type="datetimerange"
                @change="timeArrChange"
            />
@@ -79,7 +80,7 @@
 <script>
 import { ref, computed, watch, reactive } from 'vue'
 import { storageKey } from '@/utils/constants'
-import { getMillisecond, timestampToList } from '@/utils/date-util'
+import { getMillisecond, millTimestampDiffFromTz, timestampToList } from '@/utils/date-util'
 import { useStore } from 'vuex'

 export default {
@@ -95,6 +96,12 @@ export default {
    },
    dateRange: {
      type: Number
+    },
+    class: {
+      type: String
+    },
+    style: {
+      type: String
    }
  },
  emits: ['change'],
@@ -103,6 +110,7 @@ export default {
    const store = useStore()
    const myStartTime = ref(props.startTime)
    const myEndTime = ref(props.endTime)
+    const myClass = ref(props.class)
    // 时间选择器绑定的值
    const newDateValue = ref([
      new Date(...timestampToList(myStartTime.value)),
@@ -117,14 +125,14 @@ export default {
    const dateRangeValue = props.dateRange ? ref(props.dateRange) : ref(60)
    const isCustom = ref(dateRangeValue.value === -1)
    const dateRangeArr = [
-      { value: 5, name: 'last 5 Min' },
-      { value: 15, name: 'last 15 Min' },
-      { value: 30, name: 'last 30 Min' },
+      { value: 5, name: 'last 5 mins' },
+      { value: 15, name: 'last 15 mins' },
+      { value: 30, name: 'last 30 mins' },
      { value: 60, name: 'last 1 hour' },
-      { value: 180, name: 'last 3 hour' },
-      { value: 360, name: 'last 6 hour' },
-      { value: 720, name: 'last 12 hour' },
-      { value: 1440, name: 'last 1 days' },
+      { value: 180, name: 'last 3 hours' },
+      { value: 360, name: 'last 6 hours' },
+      { value: 720, name: 'last 12 hours' },
+      { value: 1440, name: 'last 1 day' },
      { value: 2880, name: 'last 2 days' }
    ]
    const dropdownFlag = ref(false)
@@ -168,7 +176,7 @@ export default {
      value: computed(() => store.state.panel.rangeEchartsData)
    })

-    watch(() => rangeEchartsData.value, (newVal, oldVal) => {
+    watch(() => rangeEchartsData.value, (newVal) => {
      if (newVal) {
        myStartTime.value = getMillisecond(newVal.startTime)
        myEndTime.value = getMillisecond(newVal.endTime)
@@ -209,19 +217,15 @@ export default {
        new Date(...timestampToList(myEndTime.value))
      ]
      newDatePicker.value.focus()
-
-      // todo 此处为弹窗打开的方向标识，控制css的position修改其left与top属性未生效，只好隐藏，后续有更好的处理办法再修改
-      const dom = document.getElementsByClassName('el-picker__popper el-popper is-light is-pure')
-      const dom1 = dom[0].getElementsByClassName('el-popper__arrow')
-      dom1[0].style.display = 'none'
    }
    /**
     * 时间选择器，选择时间，点击OK后的回调
     * @param val，开始/结束时间数组
     */
    const timeArrChange = (val) => {
-      myStartTime.value = getMillisecond(val[0])
-      myEndTime.value = getMillisecond(val[1])
+      // 按服务器时区修正时间戳
+      myStartTime.value = getMillisecond(val[0]) + millTimestampDiffFromTz()
+      myEndTime.value = getMillisecond(val[1]) + millTimestampDiffFromTz()
      isCustom.value = true
      dateRangeValue.value = -1
      returnValue()
@@ -248,6 +252,7 @@ export default {
     * 重置时间，将时间存入缓存，并触发方法请求接口刷新界面
     */
    const returnValue = () => {
+      store.commit('setTimeFilter', { startTime: myStartTime.value, endTime: myEndTime.value, range: dateRangeValue.value })
      cancelHttp()
      rangeHistory.value.unshift({
        start: myStartTime.value,
@@ -275,6 +280,7 @@ export default {
    return {
      myStartTime,
      myEndTime,
+      myClass,
      dropdownFlag,
      utcStr,
      rangeEchartsData,
--- a/src/components/common/TimeRange/TimeRefresh.vue
+++ b/src/components/common/TimeRange/TimeRefresh.vue
@@ -67,9 +67,10 @@ export default {
      if (refreshTime !== null) {
        // 此处是避免下钻后浏览器返回，获取不到url的refreshTime情况
        // 以及重新加载后改变时间但url回退仍保留上次数据的情况
-        refreshObj = refreshArr.find(item => item.value === refreshTime)
+        refreshObj = refreshArr.find(item => item.value === refreshTime) || refreshArr[0]
      } else if (query.refreshTime !== undefined) {
-        refreshObj = refreshArr.find(item => item.value === Number(query.refreshTime))
+        // 若地址栏的refreshTime不是数组里的值，直接关闭刷新
+        refreshObj = refreshArr.find(item => item.value === Number(query.refreshTime)) || refreshArr[0]
      }
    } else {
      // 浏览器回退时，清除掉地址栏的refreshTime
@@ -112,6 +113,8 @@ export default {
        this.$store.commit('setRefreshTime', val.value)
        this.$store.commit('setRefreshFlag', true)

+        // 在新的轮询开始前清除掉已经可能存在的定时器，避免新的刷新时间不生效
+        clearInterval(this.intervalTimer)
        // 设置定时器
        this.intervalTimer = setInterval(() => {
          this.$emit('change')
--- a/src/components/layout/Container.vue
+++ b/src/components/layout/Container.vue
@@ -20,8 +20,7 @@ export default {
    entityDetectionStyle () {
      const route = this.$route.name !== undefined ? this.$route.name : this.$route
      if (listScrollPath.indexOf(route.path) > -1) {
-        const style = route.path === listScrollPath[0] ? 'overflow:auto;background-color: #EFF2F5;' : 'overflow:auto;'
-        return style
+        return 'overflow:auto;'
      } else {
        return ''
      }
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -192,26 +192,27 @@ import { get, put } from '@/utils/http'
 import {
  curTabState,
  entityType,
+  fromRoute,
  networkTable,
  operationType,
  storageKey,
-  wholeScreenRouterMapping,
-  fromRoute
+  wholeScreenRouterMapping
 } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
 import {
+  combineDrilldownTableWithUserConfig,
  combineTabList,
  getDefaultCurTab,
-  getTabList,
-  overwriteUrl,
-  urlParamsHandler,
-  combineDrilldownTableWithUserConfig,
  getDnsMapData,
-  handleSpecialValue
+  getTabList,
+  handleSpecialValue,
+  overwriteUrl,
+  urlParamsHandler
 } from '@/utils/tools'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import _ from 'lodash'
+import { useRoute } from 'vue-router'

 export default {
  name: 'Header',
@@ -223,6 +224,13 @@ export default {
        callback()
      }
    }
+    const validateFiveLength = (rule, value, callback) => {
+      if (value.length < 5) {
+        callback(new Error(this.$t('validate.atLeastFive')))
+      } else {
+        callback()
+      }
+    }
    return {
      username: localStorage.getItem(storageKey.username),
      language: localStorage.getItem(storageKey.language) ? localStorage.getItem(storageKey.language) : 'en',
@@ -243,11 +251,17 @@ export default {
          required: true,
          message: this.$t('validate.required'),
          trigger: 'blur'
+        }, {
+          validator: validateFiveLength,
+          trigger: 'change'
        }],
        newPwd2: [{
          required: true,
          message: this.$t('validate.required'),
          trigger: 'blur'
+        }, {
+          validator: validateFiveLength,
+          trigger: 'change'
        }, {
          validator: passwordComparison,
          trigger: 'blur'
@@ -289,7 +303,7 @@ export default {
      return this.$store.getters.menuList.find(menu => menu.code === 'networkAnalytics')
    },
    otherMenu () {
-      return this.$store.getters.menuList.filter(menu => ['networkAnalytics', 'chart', 'I18N'].indexOf(menu.code) === -1)
+      return this.$store.getters.menuList.filter(menu => ['networkAnalytics', 'chart', 'I18N', 'entityDetail', 'temp'].indexOf(menu.code) === -1)

      /* function excludeButton (menu) {
        for (let i = 0; i < menu.length; i++) {
@@ -359,6 +373,11 @@ export default {
          this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
        }
      }
+    },
+    '$store.getters.timeFilter': function (newVal) {
+      if (newVal && Object.keys(newVal).length > 0) {
+        this.chartTimeFilter = newVal
+      }
    }
  },
  async mounted () {
@@ -375,16 +394,24 @@ export default {
    this.initDropdownList()
  },
  setup () {
-    const dateRangeValue = 60
-    const {
-      startTime,
-      endTime
-    } = getNowTime(dateRangeValue)
-    const chartTimeFilter = ref({
-      startTime,
-      endTime,
-      dateRangeValue
-    })
+    const { query } = useRoute()
+    // 获取url携带的range、startTime、endTime
+    const rangeParam = query.range
+    const startTimeParam = query.startTime
+    const endTimeParam = query.endTime
+    // 若url携带了，使用携带的值，否则使用默认值。
+
+    const dateRangeValue = rangeParam ? parseInt(query.range) : 60
+    const chartTimeFilter = ref({ dateRangeValue })
+    if (!startTimeParam || !endTimeParam) {
+      const { startTime, endTime } = getNowTime(60)
+      chartTimeFilter.value.startTime = startTime
+      chartTimeFilter.value.endTime = endTime
+    } else {
+      chartTimeFilter.value.startTime = parseInt(startTimeParam)
+      chartTimeFilter.value.endTime = parseInt(endTimeParam)
+    }
+
    return {
      chartTimeFilter,
      entityType // 所有entity类型，用于header下拉框选择
@@ -392,6 +419,23 @@ export default {
  },
  methods: {
    generateBreadcrumb (breadcrumb, menus) {
+      if (this.route === '/entityDetail') {
+        const entityMenu = menus.find(m => m.route === '/entityExplorer')
+        const entityDetailMenu = menus.find(m => m.route === '/entityDetail')
+        breadcrumb.push({
+          code: entityMenu.code,
+          value: entityMenu.i18n ? this.$t(entityMenu.i18n) : entityMenu.name,
+          route: entityMenu.route,
+          type: entityMenu.type
+        })
+        breadcrumb.push({
+          code: entityDetailMenu.code,
+          value: entityDetailMenu.i18n ? this.$t(entityDetailMenu.i18n) : entityDetailMenu.name,
+          route: entityDetailMenu.route,
+          type: entityDetailMenu.type
+        })
+        return true
+      }
      const menu = menus.find(m => m.route === this.route)
      if (menu) {
        breadcrumb.unshift({
@@ -528,13 +572,13 @@ export default {
    changeValue (value) {
      // 设置面包屑显示的内容及hover时的title
      let valName = value
-      if (this.tab === 'qtype') {
+      if (this.curTabProp === 'qtype') {
        valName = this.dnsQtypeMapData.get(value)
-      } else if (this.tab === 'rcode') {
+      } else if (this.curTabProp === 'rcode') {
        valName = this.dnsRcodeMapData.get(value)
      }
      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
-      document.getElementById('breadcrumbValue').innerText = value
+      document.getElementById('breadcrumbValue').innerText = valName
      document.getElementById(this.valueMenuId).setAttribute('title', valName)
      document.getElementById('breadcrumbButton').click()
      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
@@ -575,6 +619,15 @@ export default {
              this.showChangePin = false
            } else if (res.code === 518005) {
              this.$message.error('密码错误')
+            } else {
+              this.$message.error(res.message)
+            }
+          }).catch(e => {
+            console.error(e)
+            if (e.response.data && e.response.data.message) {
+              this.$message.error(e.response.data.message)
+            } else {
+              this.$message.error('Something went wrong...')
            }
          })
        } else {
--- a/src/components/layout/Home.vue
+++ b/src/components/layout/Home.vue
@@ -1,7 +1,9 @@
 <template>
  <div class="cn-home">
    <cn-header @refresh="refresh"></cn-header>
-    <cn-container v-if="containerShow" ref="container"></cn-container>
+    <suspense>
+      <cn-container v-if="containerShow" ref="container"></cn-container>
+    </suspense>
  </div>
 </template>

--- a/src/components/rightBox/settings/ChartBox.vue
+++ b/src/components/rightBox/settings/ChartBox.vue
@@ -376,7 +376,7 @@ export default {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
              } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
              }
            })
          } else {
@@ -386,7 +386,7 @@ export default {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
              } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
              }
            })
          }
--- a/src/components/rightBox/settings/I18nBox.vue
+++ b/src/components/rightBox/settings/I18nBox.vue
@@ -112,7 +112,7 @@ export default {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
              } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
              }
            })
          } else {
@@ -122,7 +122,7 @@ export default {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
              } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
              }
            })
          }
--- a/src/components/rightBox/settings/RoleBox.vue
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -15,7 +15,7 @@
                       show-word-limit size="small" type="text" v-model="editRole.name"></el-input>
          </el-form-item>
          <el-form-item :label="$t('overall.remark')">
-            <el-input maxlength="256" show-word-limit :rows="2" size='mini' type="textarea" v-model="editRole.remark" id="role-box-input-remark"/>
+            <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')">
@@ -26,8 +26,8 @@
            <el-tree :data="menus" :default-expand-all="expandAllFlag" :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>
+                <i v-if="data.type === '1'" class="el-icon-menu"></i>
+                <i v-if="data.type === '2'" class="el-icon-edit"></i>
              </span>
                {{$t(data.i18n)}}
              </template>
@@ -64,13 +64,26 @@ export default {
    detail: Boolean
  },
  data () {
+    const validateName = (rule, value, callback) => {
+      let validate = true
+      const reg = /^[a-zA-Z0-9\u4e00-\u9fa5\u30a1-\u30f6\u3041-\u3093\uFF00-\uFFFF\u4e00-\u9fa5\u0400-\u04FF\s]{2,64}$/
+      validate = reg.test(value)
+      if (value.length < 2) {
+        callback(new Error(this.$t('validate.atLeastTwo')))
+      } else if (!validate) {
+        callback(new Error(this.$t('validate.name')))
+      } else {
+        callback()
+      }
+    }
    return {
      editRole: {},
      url: api.role,
      rightBox: { model: { show: false } },
      rules: { // 表单校验规则
        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: validateName, trigger: 'change' }
        ]
      },
      menus: [],
@@ -113,7 +126,7 @@ export default {
        self.menus = []
        if (self.editRole.id) {
          get(api.menu + self.editRole.id).then(response => {
-            if (response.code == 200) {
+            if (response.code === 200) {
              self.menus = response.data.menus
              self.selectedIds = response.data.selectedIds
            } else {
@@ -123,7 +136,7 @@ export default {
          })
        } else {
          get(api.sysMenu).then(response => {
-            if (response.code == 200) {
+            if (response.code === 200) {
              self.menus = response.data.list
            } else {
              self.$message.error('load menu faild')
@@ -161,7 +174,7 @@ export default {
      }
    },
    save () {
-      if (this.prevent_opt.save) { return } ;
+      if (this.prevent_opt.save) { return }
      this.prevent_opt.save = true

      this.$refs.roleForm.validate((valid) => {
@@ -173,7 +186,7 @@ export default {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
              } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
              }
            })
          } else {
@@ -183,7 +196,7 @@ export default {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
              } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
              }
            })
          }
--- a/src/components/rightBox/settings/UserBox.vue
+++ b/src/components/rightBox/settings/UserBox.vue
@@ -12,30 +12,30 @@
          <!--name-->
          <el-form-item :label="$t('config.user.name')" prop="name">
            <el-input id="account-input-name" v-model="editObject.name" :disabled="editObject.username==='admin' && editObject.id === 1"
-                      maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+                      minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
          </el-form-item>
          <!--username-->
          <el-form-item :label="$t('config.user.username')" prop="username">
            <el-input id="account-input-username" v-model="editObject.username" :disabled="editObject.username==='admin' && editObject.id === 1"
-                      maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+                      minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
          </el-form-item>
          <!--password-->
          <el-form-item :label="$t('config.user.pin')" prop="pin">
-            <el-input id="account-input-password" v-model="editObject.pin"  maxlength="64" placeholder=""
+            <el-input id="account-input-password" v-model="editObject.pin" minlength="5" maxlength="64" placeholder=""
                      show-word-limit size="small" type="password" @blur="pinBlur" autocomplete="new-password"></el-input>
          </el-form-item>
          <!--pinChange-->
          <el-form-item :label="$t('config.user.confirmPin')" label-width="200px" prop="pinChange">
-            <el-input id="account-input-pinChange" v-model="editObject.pinChange"  maxlength="64" placeholder=""
+            <el-input id="account-input-pinChange" v-model="editObject.pinChange" minlength="5" maxlength="64" placeholder=""
                      show-word-limit size="small" type="password"></el-input>
          </el-form-item>
          <!--email-->
          <el-form-item label="E-mail" prop="email">
-            <el-input id="account-input-email" v-model="editObject.email" maxlength="64" show-word-limit placeholder="" size="small" type="text"></el-input>
+            <el-input id="account-input-email" v-model="editObject.email" maxlength="35" show-word-limit placeholder="" size="small" type="text"></el-input>
          </el-form-item>
          <!--mobile-->
          <el-form-item :label="$t('config.user.mobile')" prop="mobile">
-            <el-input id="account-input-mobile" v-model.number="editObject.mobile" maxlength="64" show-word-limit placeholder="" size="small" type="text"></el-input>
+            <el-input id="account-input-mobile" v-model.number="editObject.mobile" maxlength="11" show-word-limit placeholder="" size="small" type="text"></el-input>
          </el-form-item>
          <!--roles-->
          <el-form-item :label="$t('config.user.roles')" prop="roleIds">
@@ -89,7 +89,7 @@
            <el-switch
               id="account-input-status"
               v-model="editObject.status"
-               :disabled="(editObject.username === loginName) || (editObject.username==='admin' && editObject.id==1)"
+               :disabled="(editObject.username === loginName) || (editObject.username === 'admin' && editObject.id === 1)"
               :active-value="1"
               :inactive-value="0">
            </el-switch>
@@ -125,35 +125,67 @@ export default {
  data () {
    const validatePin = (rule, value, callback) => { // 确认密码的二次校验
      if (value === '' && this.editObject.pin) {
-        callback(new Error(this.$t('config.user.inputConfirmPin')))
+        callback(new Error(this.$t('config.user.confirmPin')))
      } else if (value !== this.editObject.pin) {
        callback(new Error(this.$t('config.user.confirmPinErr')))
      } else {
        callback()
      }
    }
+    const validateName = (rule, value, callback) => {
+      let validate = true
+      const reg = /^[a-zA-Z0-9\u4e00-\u9fa5\u30a1-\u30f6\u3041-\u3093\uFF00-\uFFFF\u4e00-\u9fa5\u0400-\u04FF\s]{2,64}$/
+      validate = reg.test(value)
+      if (value.length < 2) {
+        callback(new Error(this.$t('validate.atLeastTwo')))
+      } else if (!validate) {
+        callback(new Error(this.$t('validate.name')))
+      } else {
+        callback()
+      }
+    }
+    const validateUserName = (rule, value, callback) => {
+      let validate = true
+      const reg = /^[a-zA-Z0-9_]{2,64}$/
+      validate = reg.test(value)
+      if (value.length < 2) {
+        callback(new Error(this.$t('validate.atLeastTwo')))
+      } else if (!validate) {
+        callback(new Error(this.$t('validate.userName')))
+      } else {
+        callback()
+      }
+    }
    return {
      url: api.user,
      loginName: localStorage.getItem(storageKey.username),
      rules: { // 表单校验规则
        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: validateName, trigger: 'change' }
        ],
        username: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: validateUserName, trigger: 'change' }
        ],
        pin: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /^[a-zA-Z0-9]{5,64}$/, message: this.$t('validate.atLeastFive') }
        ],
        pinChange: [
          { validator: validatePin, trigger: 'blur' },
-          { required: true, message: '', trigger: 'blur' }
+          { required: true, message: this.$t('validate.required') },
+          { pattern: /^[a-zA-Z0-9]{5,64}$/, message: this.$t('validate.atLeastFive') }
        ],
        roleIds: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: this.$t('validate.email') }
+        ],
+        mobile: [
+          { required: false, message: this.$t('validate.required') },
+          { pattern: /^(1[345678]\d{9})$/, message: this.$t('validate.mobile') }
        ]
      },
      rules2: { // 表单校验规则
@@ -161,13 +193,19 @@ export default {
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        pinChange: [
-          { validator: validatePin, trigger: 'blur' }
+          { validator: validatePin, trigger: 'blur' },
+          { required: true, message: this.$t('validate.required') },
+          { pattern: /^[a-zA-Z0-9]{5,64}$/, message: this.$t('validate.atLeastFive') }
        ],
        roleIds: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: this.$t('validate.email') }
+        ],
+        mobile: [
+          { required: false, message: this.$t('validate.required') },
+          { pattern: /^(1[345678]\d{9})$/, message: this.$t('validate.mobile') }
        ]
      },
      roleData: [],
@@ -203,7 +241,7 @@ export default {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
              } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
              }
            })
          } else {
@@ -213,7 +251,7 @@ export default {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
              } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
              }
            })
          }
--- a/src/components/table/CnDataList.vue
+++ b/src/components/table/CnDataList.vue
@@ -85,7 +85,8 @@ export default {
      tools: {
        showCustomTableTitle: false // 自定义列弹框是否显示
      },
-      showLayout: []
+      showLayout: [],
+      loading: true
    }
  },
  methods: {
--- a/src/components/table/ColumnCustomize.vue
+++ b/src/components/table/ColumnCustomize.vue
@@ -1,44 +1,66 @@
 <template>
  <div class="pop-custom" v-ele-click-outside="esc">
-    <div class="pop-title">{{$t('overall.select')}}</div>
-    <div class="pop-box custom-labels">
-      <div style="height: 100%; border-radius:2%; border:1px solid #DCDFE6; overflow: auto;">
-        <!--NotSet 为true不可设置-->
-        <div
-          v-for="(item,index) in custom"
-          :key="index"
-          class="custom-label"
-          @click="handler(item,index)"
-          :id="'element-set-el-'+index"
-        >
-          <i class="cn-icon cn-icon-check" v-if="!allowedAll && !item.allowed && (index === 0 || index === 1 || item.visibility === 'disabled')"></i>
-          <i v-else class="cn-icon cn-icon-check" v-show="item.show"></i>
-          <span>{{item.label}}</span>
-        </div>
+    <transition-group name="dragTabs" class="list" tag="ul" ref="tabs">
+      <li v-for="(item, index) in custom"
+          :key="item.label"
+          class="list-item"
+          @dragenter="dragenter($event, index)"
+          @dragover="dragover($event, index)"
+          @dragstart="dragstart(index)"
+          :draggable="!item.sortable"
+      >
+        <i class="cn-icon-sort cn-icon icon-drag" :key="item.label"></i>
+        <el-checkbox
+            @change="tabChange(index)"
+            :disabled="item.disabled"
+            v-model="item.show"
+            :label="$t(item.label) "
+            size="small"
+            :key="item.label"/>
+      </li>
+    </transition-group>
+    <!--暂时保留之前代码-->
+    <!--    <div class="pop-title">{{$t('overall.select')}}</div>-->
+    <!--    <div class="pop-box custom-labels">-->
+    <!--      <div style="height: 100%; border-radius:2%; border:1px solid #DCDFE6; overflow: auto;">-->
+    <!--        &lt;!&ndash;NotSet 为true不可设置&ndash;&gt;-->
+    <!--        <div-->
+    <!--          v-for="(item,index) in custom"-->
+    <!--          :key="index"-->
+    <!--          class="custom-label"-->
+    <!--          @click="handler(item,index)"-->
+    <!--          :id="'element-set-el-'+index"-->
+    <!--        >-->
+    <!--          <i class="cn-icon cn-icon-check" v-if="!allowedAll && !item.allowed && (index === 0 || index === 1 || item.visibility === 'disabled')"></i>-->
+    <!--          <i v-else class="cn-icon cn-icon-check" v-show="item.show"></i>-->
+    <!--          <span>{{item.label}}</span>-->
+    <!--        </div>-->

-      </div>
-    </div>
-    <div class="custom-bottom-btns">
-      <el-button size="mini" v-if="isCancel" :id="tableId+'-element-set-none'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new is-cancel" @click="batchHandler(false)">
-        <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
-      </el-button>
-      <el-button size="mini" v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="batchHandler(true)">
-        <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
-      </el-button>
-      <div class="custom-bottom-btns-right">
-        <el-button size="mini" :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="esc">
-          <span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>
-        </el-button>
-        <el-button size="mini" :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" @click="save" style="background-color: #0091ff;color:#DCDFE6">
-          <span class="top-tool-btn-txt top-tool-btn-save">{{$t('overall.save')}}</span>
-        </el-button>
-      </div>
-    </div>
+    <!--      </div>-->
+    <!--    </div>-->
+    <!--    <div class="custom-bottom-btns">-->
+    <!--      <el-button size="mini" v-if="isCancel" :id="tableId+'-element-set-none'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new is-cancel" @click="batchHandler(false)">-->
+    <!--        <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>-->
+    <!--      </el-button>-->
+    <!--      <el-button size="mini" v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="batchHandler(true)">-->
+    <!--        <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>-->
+    <!--      </el-button>-->
+    <!--      <div class="custom-bottom-btns-right">-->
+    <!--        <el-button size="mini" :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="esc">-->
+    <!--          <span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>-->
+    <!--        </el-button>-->
+    <!--        <el-button size="mini" :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" @click="save" style="background-color: #0091ff;color:#DCDFE6">-->
+    <!--          <span class="top-tool-btn-txt top-tool-btn-save">{{$t('overall.save')}}</span>-->
+    <!--        </el-button>-->
+    <!--      </div>-->
+    <!--    </div>-->
  </div>
 </template>

 <script>
-import { storageKey } from '@/utils/constants'
+import indexedDBUtils from '@/indexedDB'
+import { storageKey, dbTableColumnCustomizeConfigPre } from '@/utils/constants'
+import { get } from '@/utils/http'
 export default {
  props: {
    customTableTitle: Array, // 自定义的title
@@ -48,14 +70,17 @@ export default {
  },
  data () {
    return {
-      custom: []
+      custom: [],
+      dragIndex: -1,
+      selectList: []
    }
  },
  created () {
+    /*
    const localStorageTitle = JSON.parse(localStorage.getItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId))
    if (localStorageTitle) {
      localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId, JSON.stringify(localStorageTitle))
-    }
+    } */
  },
  watch: {
    customTableTitle: {
@@ -63,10 +88,43 @@ export default {
      deep: true,
      handler (n) {
        this.custom = JSON.parse(JSON.stringify(n))
+        this.selectList = this.custom.filter(item => item.show)
      }
    }
  },
  methods: {
+    tabChange () {
+      this.selectList = this.custom.filter(item => item.show)
+      // 最少保留一个选项
+      if (this.selectList.length === 1) {
+        const obj = this.custom.find(item => item.prop === this.selectList[0].prop)
+        obj.disabled = true
+      } else if (this.selectList.length > 1) {
+        this.custom.forEach(item => {
+          // 该方案仅用于原始table列表无禁用的情况，目前无原始列表禁用的情况，后续有原始列表禁用的情况再修改
+          item.disabled = false
+        })
+      }
+      this.save()
+    },
+    /** 开始拖拽，获取键值 */
+    dragstart (index) {
+      this.dragIndex = index
+    },
+    /** 获取拖拽键值，修改数组，将数组保存到本地 */
+    dragenter (e, index) {
+      e.preventDefault()
+      if (this.dragIndex !== index) {
+        const moving = this.custom[this.dragIndex]
+        this.custom.splice(this.dragIndex, 1)
+        this.custom.splice(index, 0, moving)
+        this.dragIndex = index
+        this.save()
+      }
+    },
+    dragover (e) {
+      e.preventDefault()
+    },
    // 悬浮点击空白隐藏
    esc () {
      this.$emit('close')
@@ -92,11 +150,30 @@ export default {
      }
    },
    // 点击第二个cancel
-    save () {
+    async save () {
      this.$emit('update', this.custom)
-      localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId,
-        JSON.stringify(this.custom))
-      this.esc()
+      const userId = localStorage.getItem(storageKey.userId)
+      const tableName = dbTableColumnCustomizeConfigPre + '-' + this.tableId
+
+      const defaultConfigInDb = await indexedDBUtils.selectTable(tableName).get({ id: userId })
+      let fullVersion = ''
+      if (defaultConfigInDb && defaultConfigInDb.version) {
+        const oldVersion = defaultConfigInDb.version
+        if (oldVersion.startsWith(BASE_CONFIG.version)) {
+          const realVersion = Number(oldVersion.substring(BASE_CONFIG.version.length + 1))
+          fullVersion = BASE_CONFIG.version + '.' + (realVersion + 1)
+        } else {
+          fullVersion = BASE_CONFIG.version + '.1'
+        }
+      } else {
+        fullVersion = BASE_CONFIG.version + '.1'
+      }
+
+      await indexedDBUtils.selectTable(tableName).put({
+        id: userId,
+        version: fullVersion,
+        config: _.cloneDeep(this.custom)
+      })
    }
  },
  computed: {
--- a/src/components/table/administration/ChartTable.vue
+++ b/src/components/table/administration/ChartTable.vue
@@ -5,6 +5,7 @@
          :data="tableData"
          :height="height"
          border
+          empty-text=" "
          @header-dragend="dragend"
          @sort-change="tableDataSort"
          @selection-change="selectionChange"
@@ -16,8 +17,8 @@
            width="55">
    </el-table-column>
    <el-table-column
-            v-for="(item, index) in customTableTitles"
-            :key="`col-${index}`"
+            v-for="item in customTableTitles"
+            :key="item.prop"
            :fixed="item.fixed"
            :label="item.label"
            :min-width="`${item.minWidth}`"
@@ -81,29 +82,11 @@
        <span v-else>{{scope.row[item.prop]}}</span>
      </template>
    </el-table-column>
-    <el-table-column
-            :resizable="false"
-            :width="operationWidth"
-            fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row['buildIn'] === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </template>
-    </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
  </el-table>
 </template>

@@ -114,6 +97,12 @@ import { panelTypeAndRouteMapping } from '@/utils/constants'
 export default {
  name: 'chartTable',
  mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
  data () {
    return {
      panelTypeAndRouteMapping: panelTypeAndRouteMapping,
--- a/src/components/table/administration/GalaxyProxyTable.vue
+++ b/src/components/table/administration/GalaxyProxyTable.vue
@@ -7,6 +7,7 @@
    :height="height"
    tooltip-effect="light"
    border
+    empty-text=" "
    @header-dragend="dragend"
    @sort-change="tableDataSort"
    @selection-change="selectionChange"
@@ -18,8 +19,8 @@
      width="55">
    </el-table-column>
    <el-table-column
-      v-for="(item, index) in customTableTitles"
-      :key="`col-${index}`"
+      v-for="item in customTableTitles"
+      :key="item.prop"
      :fixed="item.fixed"
      :label="item.label"
      :min-width="`${item.minWidth}`"
@@ -91,7 +92,6 @@
      </template>
      <template #default="scope">
        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
            <div class="table-operation-item table-operation-item--more">
              <i class="cn-icon cn-icon-more-arrow-down"></i>
@@ -99,7 +99,6 @@
            <template #dropdown>
              <el-dropdown-menu >
                <el-dropdown-item :command="['copy', scope.row]"><i class="cn-icon cn-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-                <el-dropdown-item :command="['delete', scope.row]"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
                <el-dropdown-item :command="['debug', scope.row]"><i class="cn-icon cn-icon-debug"></i><span class="operation-dropdown-text">{{$t('overall.debug')}}</span></el-dropdown-item>
              </el-dropdown-menu>
            </template>
@@ -107,6 +106,11 @@
        </div>
      </template>
    </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
  </el-table>
 </template>

@@ -117,6 +121,12 @@ import { copyValue } from '@/utils/tools'
 export default {
  name: 'galaxyProxyTable',
  mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
  data () {
    return {
      tableTitle: [ // 原始table列
--- a/src/components/table/administration/I18nTable.vue
+++ b/src/components/table/administration/I18nTable.vue
@@ -5,6 +5,7 @@
      :data="tableData"
      :height="height"
      border
+      empty-text=" "
      @header-dragend="dragend"
      @sort-change="tableDataSort"
      @selection-change="selectionChange"
@@ -16,8 +17,8 @@
        width="55">
    </el-table-column>
    <el-table-column
-        v-for="(item, index) in customTableTitles"
-        :key="`col-${index}`"
+        v-for="item in customTableTitles"
+        :key="item.prop"
        :fixed="item.fixed"
        :label="item.label"
        :min-width="`${item.minWidth}`"
@@ -32,32 +33,13 @@
        <div class="col-resize-area"></div>
      </template>
      <template #default="scope" :column="item">
-        <span>{{scope.row[item.prop]}}</span>
+        <span>{{scope.row[item.prop] || '-'}}</span>
      </template>
-    </el-table-column>
-    <el-table-column
-        :resizable="false"
-        :width="operationWidth"
-        fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </template>
-    </el-table-column>
+    </el-table-column><template v-slot:empty >
+    <div class="table-no-data" v-if="isNoData">
+      <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+    </div>
+  </template>
  </el-table>
 </template>

@@ -68,6 +50,12 @@ import { api } from '@/utils/api'
 export default {
  name: 'I18nTable',
  mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
  data () {
    return {
      url: api.i18nLang,
--- a/src/components/table/administration/OperationLogTable.vue
+++ b/src/components/table/administration/OperationLogTable.vue
@@ -6,20 +6,17 @@
    :height="height"
    tooltip-effect="light"
    border
+    empty-text=" "
    class="no-operation"
    @header-dragend="dragend"
    @sort-change="tableDataSort"
    @selection-change="selectionChange"
+    :cell-style="{paddingLeft: '20px'}"
+    :header-cell-style="{paddingLeft: '20px'}"
  >
-    <el-table-column
-      :resizable="false"
-      align="center"
-      type="selection"
-      width="55">
-    </el-table-column>
    <el-table-column
      v-for="(item, index) in customTableTitles"
-      :key="`col-${index}`"
+      :key="item.prop+index"
      :fixed="item.fixed"
      :label="item.label"
      :min-width="`${item.minWidth}`"
@@ -39,24 +36,29 @@
                {{scope.row[item.prop]}}ms
              </span>
        <span v-else-if="item.prop === 'state'">
-          <template v-if="scope.row[item.prop]==operationLogStateMapping.success">
+          <template v-if="scope.row[item.prop]===operationLogStateMapping.success">
            {{$t('operationLog.state.success')}}
          </template>
-          <template v-else-if="scope.row[item.prop]==operationLogStateMapping.fail">
+          <template v-else-if="scope.row[item.prop]===operationLogStateMapping.fail">
            {{$t('operationLog.state.fail')}}
          </template>
          <template v-else>
-            {{scope.row[item.prop]}}
+            {{scope.row[item.prop] || '-'}}
          </template>
        </span>
        <span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
        <span v-else-if="item.prop === 'ctime'">{{dateFormatByAppearance(scope.row[item.prop])}}</span>
        <template v-else-if="item.prop === 'params' || item.prop === 'response'">
-          <span>{{scope.row[item.prop]}}</span>
+          <span>{{scope.row[item.prop] || '-'}}</span>
        </template>
-        <span v-else>{{scope.row[item.prop]}}</span>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
      </template>
    </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
  </el-table>
 </template>

@@ -67,6 +69,12 @@ import { operationLogStateMapping } from '@/utils/constants'
 export default {
  name: 'roleTable',
  mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
  data () {
    return {
      operationLogStateMapping: operationLogStateMapping,
--- a/src/components/table/administration/RoleTable.vue
+++ b/src/components/table/administration/RoleTable.vue
@@ -5,6 +5,7 @@
    :data="tableData"
    :height="height"
    border
+    empty-text=" "
    @header-dragend="dragend"
    @sort-change="tableDataSort"
    @selection-change="selectionChange"
@@ -13,11 +14,13 @@
      :resizable="false"
      align="center"
      type="selection"
+      :selectable="checkSelectable"
      width="55">
    </el-table-column>
+    <!--key只使用item.prop的话，拖拽后，界面无响应，添加index后问题解决-->
    <el-table-column
      v-for="(item, index) in customTableTitles"
-      :key="`col-${index}`"
+      :key="item.prop+index"
      :fixed="item.fixed"
      :label="item.label"
      :min-width="`${item.minWidth}`"
@@ -44,9 +47,14 @@
            <span>-</span>
          </template>
        </template>
-        <span v-else>{{scope.row[item.prop]}}</span>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
      </template>
    </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
  </el-table>
 </template>

@@ -55,6 +63,12 @@ import table from '@/mixins/table'
 export default {
  name: 'roleTable',
  mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
  data () {
    return {
      tableTitle: [ // 原table列
@@ -76,6 +90,12 @@ export default {
        }
      ]
    }
+  },
+  methods: {
+    // 禁止勾选buildIn为1的项，即禁止修改admin的权限
+    checkSelectable (row) {
+      return row.buildIn !== 1
+    }
  }
 }
 </script>
--- a/src/components/table/administration/UserTable.vue
+++ b/src/components/table/administration/UserTable.vue
@@ -4,7 +4,7 @@
    ref="dataTable"
    :data="tableData"
    :height="height"
-    empty-text=""
+    empty-text=" "
    border
    @header-dragend="dragend"
    @sort-change="tableDataSort"
@@ -14,11 +14,12 @@
      :resizable="false"
      align="center"
      type="selection"
+      :selectable="checkSelectable"
      width="55">
    </el-table-column>
    <el-table-column
      v-for="(item, index) in customTableTitles"
-      :key="`col-${index}`"
+      :key="item.prop+index"
      :fixed="item.fixed"
      :label="item.label"
      :min-width="`${item.minWidth}`"
@@ -43,7 +44,7 @@
        </template>
        <template v-else-if="item.prop === 'lastLoginTime'">
          <template v-if="scope.row[item.prop]">
-            {{dateFormatByAppearance(scope.row[item.prop])}}
+            {{dateFormatByAppearance(scope.row[item.prop]) || '-'}}
          </template>
          <template v-else>
            <span>-</span>
@@ -51,17 +52,22 @@
        </template>
        <template v-else-if="item.prop === 'status'">
          <el-switch
-                  v-if="scope.row.id"
-                  v-model="scope.row.status"
-                  active-value="1"
-                  :disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id==1) "
-                  inactive-value="0"
-                  @change="()=>{statusChange(scope.row)}">
+              v-if="scope.row.id"
+              v-model="scope.row.status"
+              active-value="1"
+              :disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id===1) || scope.row.buildIn === 1"
+              inactive-value="0"
+              @change="()=>{statusChange(scope.row)}">
          </el-switch>
        </template>
-        <span v-else>{{scope.row[item.prop]}}</span>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
      </template>
    </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
  </el-table>
 </template>

@@ -72,6 +78,12 @@ import { storageKey } from '@/utils/constants'

 export default {
  name: 'userTable',
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
  mixins: [table],
  data () {
    return {
@@ -144,6 +156,10 @@ export default {
        }
        this.$emit('reload')
      })
+    },
+    // 禁止勾选buildIn为1的项，即禁止修改、删除admin的账号
+    checkSelectable (row) {
+      return row.buildIn !== 1
    }
  }
 }
--- a/src/components/table/report/ReportTable.vue
+++ b/src/components/table/report/ReportTable.vue
@@ -6,8 +6,8 @@
        :data="tableData"
        :height="height"
        :expand-row-keys="expandedIds"
-        :empty-text="$t('npm.noData')"
        border
+        empty-text=" "
        tooltip-effect="light"
        :row-key="(row) => { return row.id }"
        :reserve-selection="true"
@@ -96,8 +96,8 @@
          width="30">
      </el-table-column>
      <el-table-column
-          v-for="(item, index) in customTableTitles"
-          :key="`col-${index}`"
+          v-for="item in customTableTitles"
+          :key="item.prop"
          :fixed="item.fixed"
          :label="item.label"
          :min-width="`${item.minWidth}`"
@@ -117,9 +117,7 @@
            {{ handleTimeRange(scope.row) }}
          </span>
          <span v-else-if="item.prop === 'categoryId'">
-            <span v-for="(item, i) in categoryList" :key="i">
-              <span v-if="scope.row.categoryId === item.id">{{ item.name }}</span>
-            </span>
+            <span>{{ getCategoryName(scope.row.categoryId) }}</span>
          </span>
          <span v-else-if="item.prop === 'timePlan'">
            <template v-if="scope.row.config && scope.row.config.isScheduler === 0">
@@ -188,6 +186,11 @@
          <span v-else>{{ scope.row[item.prop] || '-' }}</span>
        </template>
      </el-table-column>
+      <template v-slot:empty >
+        <div class="table-no-data" v-if="isNoData">
+          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+        </div>
+      </template>
    </el-table>
 <!--    <div class="table-operation-all">
      <el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
@@ -229,7 +232,11 @@ export default {
  props: {
    categoryList: Array,
    toolsLoading: Boolean,
-    categoryId: Number
+    categoryId: Number,
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
  },
  inject: ['reload'],
  data () {
@@ -292,7 +299,7 @@ export default {
      loadingTableId: '',
      loadingPreviewId: '',
      downDataList: [],
-      disableEdit:false,//编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
+      disableEdit: false, // 编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
      // pageObj: {
      //   pageNo: 1,
      //   pageSize: 20,
@@ -542,9 +549,9 @@ export default {
        // this.selectIds = selectIds
      }
      this.batchDeleteObjs = objs
-      if(objs.length > 1) {
+      if (objs.length > 1) {
        this.disableEdit = true
-      }else {
+      } else {
        this.disableEdit = false
      }
    },
@@ -566,9 +573,9 @@ export default {
      }

      this.batchDeleteObjs = objs
-      if(objs.length > 1) {
+      if (objs.length > 1) {
        this.disableEdit = true
-      }else {
+      } else {
        this.disableEdit = false
      }

@@ -660,7 +667,7 @@ export default {
            this.$message.error(response.msg)
          }
        })
-      })
+      }).catch(() => {})
    },
    pageJump (val) {
      this.pageObj.pageNo = val
@@ -759,6 +766,16 @@ export default {
        }
      }
      this.configCustom = str
+    },
+    getCategoryName (id) {
+      let name = '-'
+      for (let i = 0; i < this.categoryList.length; i++) {
+        if (id === this.categoryList[i].id) {
+          name = this.categoryList[i].name
+          break
+        }
+      }
+      return name
    }
  },
  beforeUnmount () {
--- a/src/components/table/setting/KnowledgeBaseTable.vue
+++ b/src/components/table/setting/KnowledgeBaseTable.vue
@@ -1,135 +0,0 @@
-<template>
-  <el-table
-      id="knowledgeBaseTable"
-      ref="dataTable"
-      :data="tableData"
-      :height="height"
-      border
-      @header-dragend="dragend"
-      @sort-change="tableDataSort"
-      @selection-change="selectionChange"
-  >
-    <el-table-column
-        :resizable="false"
-        align="center"
-        type="selection"
-        width="55">
-    </el-table-column>
-    <el-table-column
-        v-for="(item, index) in customTableTitles"
-        :key="`col-${index}`"
-        :fixed="item.fixed"
-        :label="item.label"
-        :min-width="`${item.minWidth}`"
-        :prop="item.prop"
-        :resizable="true"
-        :sort-orders="['ascending', 'descending']"
-        :sortable="item.sortable"
-        :width="`${item.width}`"
-        class="data-column"
-    >
-      <template #header>
-        <span class="data-column__span">{{item.label}}</span>
-        <div class="col-resize-area"></div>
-      </template>
-      <template  #default="scope" :column="item">
-        <template v-if="item.prop === 'name'">
-          <template v-if="scope.row.i18n">
-            <span>{{$t(scope.row.i18n)}}</span>
-          </template>
-          <template v-else-if="scope.row.name">
-            <span>{{scope.row.name}}</span>
-          </template>
-          <template v-else>
-            <span>-</span>
-          </template>
-        </template>
-        <template v-else-if="item.prop === 'tagType'">
-          <span class="type-tag">{{tagTypeText(scope.row[item.prop])}}</span>
-        </template>
-        <template v-else-if="item.prop === 'utime' || item.prop === 'ctime'">
-          <template v-if="scope.row[item.prop]">
-            {{dateFormatByAppearance(scope.row[item.prop])}}
-          </template>
-          <template v-else>
-            <span>-</span>
-          </template>
-        </template>
-        <template v-else-if="item.prop === 'cuser' || item.prop === 'uuser'">
-          <template v-if="scope.row[item.prop]">
-            {{scope.row[item.prop].username || '-'}}
-          </template>
-          <template v-else>
-            <span>-</span>
-          </template>
-        </template>
-        <span v-else>{{scope.row[item.prop] || '-'}}</span>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import table from '@/mixins/table'
-import { knowledgeBaseType } from '@/utils/constants'
-export default {
-  name: 'knowledgeBaseTable',
-  mixins: [table],
-  data () {
-    return {
-      tableTitle: [ // 原table列
-        {
-          label: 'ID',
-          prop: 'id',
-          show: true,
-          width: 100,
-          sortable: 'custom'
-        }, {
-          label: this.$t('config.roles.name'),
-          prop: 'tagName',
-          show: true,
-          sortable: 'custom'
-        }, {
-          label: this.$t('overall.type'),
-          prop: 'tagType',
-          show: true
-        }, {
-          label: this.$t('overall.remark'),
-          prop: 'remark',
-          show: true
-        },
-        {
-          label: this.$t('overall.createdBy'),
-          prop: 'cuser',
-          show: true
-        },
-        {
-          label: this.$t('config.user.createTime'),
-          prop: 'ctime',
-          show: false,
-          sortable: 'custom'
-        },
-        {
-          label: this.$t('overall.updatedBy'),
-          prop: 'uuser',
-          show: false
-        },
-        {
-          label: this.$t('overall.updateTime'),
-          prop: 'utime',
-          show: false,
-          sortable: 'custom'
-        }
-      ]
-    }
-  },
-  computed: {
-    tagTypeText () {
-      return function (type) {
-        const t = knowledgeBaseType.find(t => t.value === type)
-        return t ? t.name : ''
-      }
-    }
-  }
-}
-</script>
--- a/src/components/table/setting/KnowledgeBaseTableForRow.vue
+++ b/src/components/table/setting/KnowledgeBaseTableForRow.vue
@@ -0,0 +1,185 @@
+<template>
+  <el-table
+        id="knowledgeBaseTable"
+        ref="dataTable"
+        :data="tableData"
+        :height="height"
+        border
+        empty-text=" "
+        @header-dragend="dragend"
+        @sort-change="tableDataSort"
+        @selection-change="selectionChange"
+    >
+      <el-table-column
+          :resizable="false"
+          align="center"
+          type="selection"
+          :selectable="selectable"
+          width="55">
+      </el-table-column>
+      <el-table-column
+          v-for="(item, index) in customTableTitles"
+          :key="`col-${index}`"
+          :fixed="item.fixed"
+          :label="item.label"
+          :min-width="`${item.minWidth}`"
+          :prop="item.prop"
+          :resizable="true"
+          :sort-orders="['ascending', 'descending']"
+          :sortable="item.sortable"
+          :width="`${item.width}`"
+          class="data-column"
+      >
+        <template #header>
+          <span class="data-column__span">{{item.label}}</span>
+          <div class="col-resize-area"></div>
+        </template>
+        <template  #default="scope" :column="item">
+          <template v-if="item.prop === 'name'" >
+            <template v-if="scope.row.i18n">
+              <span :title="scope.row[item.prop]">{{$t(scope.row.i18n)}}</span>
+            </template>
+            <template v-else-if="scope.row.name">
+              <span :title="scope.row[item.prop]">{{scope.row.name}}</span>
+            </template>
+            <template v-else>
+              <span>-</span>
+            </template>
+          </template>
+          <template v-else-if="item.prop === 'category'">
+            <span >{{tagCategoryText(scope.row[item.prop])}}</span>
+          </template>
+          <template v-else-if="item.prop === 'source'">
+            <span class="type-tag">{{tagSourceText(scope.row[item.prop])}}</span>
+          </template>
+          <template v-else-if="item.prop === 'opTime' || item.prop === 'ctime'">
+            <template v-if="scope.row[item.prop]">
+              {{dateFormatByAppearance(scope.row[item.prop])}}
+            </template>
+            <template v-else>
+              <span>-</span>
+            </template>
+          </template>
+          <template v-else-if="item.prop === 'cuser' || item.prop === 'uuser'">
+            <template v-if="scope.row[item.prop]">
+              {{scope.row[item.prop].username || '-'}}
+            </template>
+            <template v-else>
+              <span>-</span>
+            </template>
+          </template>
+          <template v-else-if="item.prop === 'description'">
+            <span class="list-desc" :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+          </template>
+          <template v-else-if="item.prop === 'status'">
+            <el-switch class="card-enable"
+                       v-model="scope.row.status"
+                       active-color="#38ACD2"
+                       inactive-color="#C0CEDB"
+                       :active-value="1"
+                       :inactive-value="0"
+                       @change="changeStatus($event,scope.row.knowledgeId)"
+            >
+            </el-switch>
+          </template>
+          <span v-else>{{scope.row[item.prop] || '-'}}</span>
+        </template>
+      </el-table-column>
+      <template v-slot:empty >
+        <div class="table-no-data" v-if="isNoData">
+          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+        </div>
+      </template>
+    </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
+export default {
+  name: 'KnowledgeBaseTableForRow',
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'knowledgeId',
+          show: true,
+          width: 60,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.roles.name'),
+          prop: 'name',
+          minWidth: 100,
+          show: true,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.category'),
+          prop: 'category',
+          width: 100,
+          show: true
+        }, {
+          label: this.$t('overall.source'),
+          prop: 'source',
+          width: 130,
+          show: true
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'description',
+          minWidth: 150,
+          show: true
+        },
+        {
+          label: this.$t('overall.createdBy'),
+          prop: 'opUser',
+          show: false
+        },
+        {
+          label: this.$t('config.user.createTime'),
+          prop: 'ctime',
+          show: false,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('overall.updatedBy'),
+          prop: 'uuser',
+          show: false
+        },
+        {
+          label: this.$t('overall.updateTime'),
+          prop: 'opTime',
+          show: true,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('knowledge.status'),
+          prop: 'status',
+          show: true,
+          minWidth: 40
+        }
+      ]
+    }
+  },
+  computed: {
+    tagCategoryText () {
+      return function (type) {
+        const t = knowledgeBaseCategory.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    },
+    tagSourceText () {
+      return function (type) {
+        const t = knowledgeBaseSource.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    }
+  }
+}
+</script>
--- a/src/components/table/setting/knowledgeBaseTableForCard.vue
+++ b/src/components/table/setting/knowledgeBaseTableForCard.vue
@@ -0,0 +1,168 @@
+<template>
+  <el-checkbox-group v-model="checkList" v-if="!isNoData">
+    <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.knowledgeId" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
+      <div class="card-content">
+        <div class="card-title">
+          <div class="card-title-name" :title="data.name">{{data.name}}</div>
+          <div class="card-title-more">
+            <span v-show="!isSelectedStatus && data.showMore && data.isBuiltIn !== 1"><i class="cn-icon cn-icon-more-dark" @mouseenter="mouseenterMore(data)" test-id="mouseenter-dark"></i></span>
+            <div class="card-operate" v-show="!isSelectedStatus && data.moreOptions" @mouseleave="mouseleaveMore(data)">
+              <div class="card-title-more-edit" @click="edit(data.knowledgeId)" >{{$t('overall.edit')}}</div>
+              <div class="card-title-more-delete" @click="del(data)" >{{$t('overall.delete')}}</div>
+            </div>
+            <el-checkbox @click.stop="" :disabled="data.isBuiltIn === 1" @change="(val) => {checkboxStatusChange(val,data)}" style="position: absolute;right: -12px;" v-if="isSelectedStatus" :key="data.knowledgeId" :label="data"><br></el-checkbox>
+
+          </div>
+        </div>
+        <div class="card-id">ID:{{data.knowledgeId}}</div>
+        <div class="card-desc" :title="data.description">{{data.description?data.description:'—'}}</div>
+      </div>
+      <div class="card-operate__footer">
+        <div class="card-type">
+          <div class="card-category">{{tagCategoryText(data.category)}}</div>
+          <div class="card-source">{{tagSourceText(data.source)}}</div>
+        </div>
+        <el-switch class="card-enable"
+                   v-model="data.status"
+                   active-color="#38ACD2"
+                   inactive-color="#C0CEDB"
+                   :active-value="1"
+                   :inactive-value="0"
+                   @change="changeStatus($event,data.knowledgeId)"
+        >
+        </el-switch>
+      </div>
+    </div>
+  </el-checkbox-group>
+  <div class="table-no-data" v-else="isNoData">
+    <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+  </div>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
+export default {
+  name: 'knowledgeBaseTableForCard',
+  mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    },
+    isSelectedStatus: {
+      type: Boolean
+    }
+  },
+  data () {
+    return {
+      tableTitle: [],
+      checkList: []
+    }
+  },
+  methods: {
+    clickCard (data, event) {
+      if (data.isSelected) { // 原来为选中，当前点击后未选中
+        const index = this.checkList.indexOf(data)
+        if (index > -1) {
+          this.checkList.splice(index, 1)
+        }
+      } else {
+        const index = this.checkList.indexOf(data)
+        if (index === -1) {
+          this.checkList.push(data)
+        }
+      }
+      const val = !data.isSelected
+      data.isSelected = val
+      this.$emit('checkboxStatusChange', val, data)
+    },
+    checkboxStatusChange (val, data) {
+      data.isSelected = val
+      this.$emit('checkboxStatusChange', val, data)
+    },
+    showSelect () {
+      // this.isSelectedStatus = true
+    },
+    hideSelect () {
+      // this.isSelectedStatus = false
+    },
+    clearSelect () {
+      this.$nextTick(() => {
+        this.checkList = []
+        if (this.tableData && this.tableData.length > 0) {
+          this.tableData.forEach(data => {
+            data.isSelected = false
+          })
+        }
+      })
+    },
+    mouseenterMore (card) {
+      this.tableData.forEach(t => {
+        if (t.knowledgeId === card.knowledgeId) {
+          t.moreOptions = true
+        }
+      })
+    },
+    mouseleaveMore (card) {
+      this.tableData.forEach(t => {
+        if (t.knowledgeId === card.knowledgeId) {
+          t.moreOptions = false
+        }
+      })
+    },
+    mouseenter (card) {
+      this.tableData.forEach(t => {
+        if (t.knowledgeId === card.knowledgeId) {
+          t.showMore = true
+        }
+      })
+    },
+    mouseleave (card) {
+      this.tableData.forEach(t => {
+        if (t.knowledgeId === card.knowledgeId) {
+          t.showMore = false
+          t.moreOptions = false
+        }
+      })
+    },
+    del (data) {
+      this.$emit('delete', data)
+    },
+    edit (id) {
+      const pageNo = this.$router.currentRoute.value.query.pageNo
+      const listMode = this.$router.currentRoute.value.query.listMode
+      this.$router.push({
+        path: '/knowledgeBase/edit',
+        query: {
+          t: +new Date(),
+          pageNoForTable: pageNo || 1,
+          id: id,
+          listMode: listMode
+        }
+      })
+    }
+  },
+  mounted () {
+    this.tableData.forEach(item => {
+      item.showMore = false
+      item.moreOptions = false
+    })
+  },
+  computed: {
+    tagCategoryText () {
+      return function (type) {
+        const t = knowledgeBaseCategory.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    },
+    tagSourceText () {
+      return function (type) {
+        const t = knowledgeBaseSource.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    }
+
+  }
+}
+</script>
--- a/src/indexedDB/index.js
+++ b/src/indexedDB/index.js
@@ -1,11 +1,18 @@
-import { dbName, dbGeoDataTableName, dbDrilldownTableConfig } from '@/utils/constants'
+import { dbName, dbGeoDataTableName, dbDrilldownTableConfig, dbUserTableColumnCustomizeConfig, dbRoleTableColumnCustomizeConfig, dbOperationLogTableColumnCustomizeConfig, dbChartTableColumnCustomizeConfig, dbI18nTableColumnCustomizeConfig, dbReportTableColumnCustomizeConfig, dbGalaxySettingTableColumnCustomizeConfig } from '@/utils/constants'
 import Dexie from 'dexie'
 /* https://dexie.org/ */

 const db = new Dexie(dbName)
-db.version(3).stores({
+db.version(4).stores({
  [dbGeoDataTableName]: '++name, geo',
  [dbDrilldownTableConfig]: '++id, config',
+  [dbUserTableColumnCustomizeConfig]: '++id, config',
+  [dbRoleTableColumnCustomizeConfig]: '++id, config',
+  [dbOperationLogTableColumnCustomizeConfig]: '++id, config',
+  [dbChartTableColumnCustomizeConfig]: '++id, config',
+  [dbI18nTableColumnCustomizeConfig]: '++id, config',
+  [dbReportTableColumnCustomizeConfig]: '++id, config',
+  [dbGalaxySettingTableColumnCustomizeConfig]: '++id, config',
  test: '++id, name'
 })
 function selectTable (tableName) {
--- a/src/mixins/common.js
+++ b/src/mixins/common.js
@@ -1,5 +1,6 @@
 import { hasButton } from '@/permission'
 import { dateFormatByAppearance } from '@/utils/date-util'
+import { commonErrorTip } from '@/utils/constants'
 export default {
  data () {
    return {
@@ -29,6 +30,16 @@ export default {
    hasButton (code) {
      return hasButton(this.$store.getters.buttonList, code)
    },
+    errorMsgHandler (axiosError) {
+      if (axiosError.response) {
+        if (axiosError.response.data) {
+          return axiosError.response.data.message || commonErrorTip
+        }
+      } else if (axiosError.message) {
+        return axiosError.message
+      }
+      return commonErrorTip
+    },
    isBuiltIn (row) {
      return (row.buildIn && row.buildIn === 1) || (row.builtIn && row.builtIn === 1)
    },
--- a/src/mixins/data-list.js
+++ b/src/mixins/data-list.js
@@ -1,14 +1,17 @@
 import { tableSort } from '@/utils/tools'
-import { defaultPageSize, fromRoute, position, storageKey } from '@/utils/constants'
+import { defaultPageSize, fromRoute, position, storageKey, dbTableColumnCustomizeConfigPre } from '@/utils/constants'
 import { get, del } from '@/utils/http'
 import { ref } from 'vue'
 import pagination from '@/components/common/Pagination'
 import axios from 'axios'
 import { api } from '@/utils/api'
+import Loading from '@/components/common/Loading'
+import indexedDBUtils from '@/indexedDB'

 export default {
  components: {
-    pagination
+    pagination,
+    Loading
  },
  data () {
    return {
@@ -20,11 +23,11 @@ export default {
      pageObj: { // 分页对象
        pageNo: 1,
        pageSize: defaultPageSize,
-        total: 0
+        total: null// total为0时，elment分页组件pagination,修改当前页无效。修改为null即可解决此问题
      },
      /* 工具参数 */
      tools: {
-        loading: true, // 是否显示table加载动画
+        // loading: true, // 是否显示table加载动画
        customTableTitle: [] // 自定义列工具的数据
      },
      mainTableHeight: position.tableHeight.normal, // 主列表table高度
@@ -37,8 +40,11 @@ export default {
      tableData: [],
      scrollbarWrap: null,
      delFlag: false,
-      disableEdit:false,//编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
-      operationWidth: '165' // 操作列宽
+      disableEdit: true, // 编辑按钮是否不可用，当选择多条记录的时候，编辑按钮不可用
+      disableDelete: true,
+      operationWidth: '165', // 操作列宽
+      loading: true,
+      isNoData: false
    }
  },
  methods: {
@@ -73,35 +79,67 @@ export default {
          break
      }
    },
+    toggleLoading (loading) {
+      this.loading = loading
+    },
    selectionChange (objs) {
-      this.batchDeleteObjs = objs
-      if(this.batchDeleteObjs.length > 1) {
-        this.disableEdit = true
-      }else {
+      this.batchDeleteObjs = []
+      objs.forEach(obj => {
+        const delObj = this.batchDeleteObjs.find(item => item.id === obj.id)
+        if (delObj === undefined) {
+          this.batchDeleteObjs.push(obj)
+        }
+      })
+      if (this.batchDeleteObjs.length == 1) {
        this.disableEdit = false
+      } else {
+        this.disableEdit = true
+      }
+      if (this.batchDeleteObjs.length >= 1) {
+        this.disableDelete = false
+      } else {
+        this.disableDelete = true
      }
    },
-    getTableData (params) {
+    getTableData (params, isAll, isClearType) {
+      if (isAll) {
+        this.searchLabel = null
+      } else if (isClearType) {
+        this.searchLabel.type = ''// 换新接口需要修改的属性名称
+      }
      if (params) {
        this.searchLabel = { ...this.searchLabel, ...params }
      }
      this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-      this.tools.loading = true
+      this.isNoData = false
+      this.toggleLoading(true)
      delete this.searchLabel.total
      let listUrl = this.url
      if (this.listUrl) {
        listUrl = this.listUrl
      }
      get(listUrl, this.searchLabel).then(response => {
-        this.tools.loading = false
        if (response.code === 200) {
-          for (let i = 0; i < response.data.list.length; i++) {
-            response.data.list[i].status = response.data.list[i].status + ''
-          }
          this.tableData = response.data.list
          this.pageObj.total = response.data.total
-          // TODO 回到顶部
+          if (!this.tableData || this.tableData.length === 0) {
+            this.isNoData = true
+          } else {
+            this.isNoData = false
+          }
+        } else {
+          console.error(response)
+          this.isNoData = true
+          if (response.message) {
+            this.$message.error(response.message)
+          } else {
+            this.$message.error('Something went wrong...')
+          }
        }
+      }).catch(() => {
+        this.isNoData = true
+      }).finally(() => {
+        this.toggleLoading(false)
      })
    },
    del (row) {
@@ -119,27 +157,29 @@ export default {
            this.$message.error(response.msg)
          }
        })
-      })
+      }).catch(e => {})
+    },
+    delSelectionChange () {
    },
    delBatch () {
-      let ids = []
-      if(this.batchDeleteObjs && this.batchDeleteObjs.length > 0){
-        this.batchDeleteObjs.forEach(item =>{
+      const ids = []
+      if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
+        this.batchDeleteObjs.forEach(item => {
          ids.push(item.id)
        })
      }
-      if(ids.length === 0){
-        this.$alert(this.$t('tip.pleaseSelect'),{
+      if (ids.length === 0) {
+        this.$alert(this.$t('tip.pleaseSelect'), {
          confirmButtonText: this.$t('tip.yes'),
-          type:'warning'
-        })
-      }else {
+          type: 'warning'
+        }).catch(() => {})
+      } else {
        this.$confirm(this.$t('tip.confirmDelete'), {
          confirmButtonText: this.$t('tip.yes'),
          cancelButtonText: this.$t('tip.no'),
          type: 'warning'
        }).then(() => {
-          this.tools.loading = true
+          this.toggleLoading(true)
          axios.delete(this.url + '?ids=' + ids).then(response => {
            if (response.data.code === 200) {
              this.delFlag = true
@@ -149,9 +189,16 @@ export default {
              this.$message.error(response.data.message)
            }
          }).finally(() => {
-            this.tools.loading = false
+            this.toggleLoading(false)
+          })
+        }).catch(() => {})
+          .finally(() => {
+            if (this.isSelectedStatus != undefined) {
+              this.isSelectedStatus = false
+              this.disableDelete = true
+              this.batchDeleteObjs = []
+            }
          })
-        })
      }
    },
    newObject () {
@@ -170,6 +217,7 @@ export default {
    },
    pageSize (val) {
      this.pageObj.pageSize = val
+      this.pageObj.pageNo = 1
      localStorage.setItem(storageKey.pageSize + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId, val)
      this.getTableData()
    },
@@ -192,13 +240,13 @@ export default {
        }
      })
    },
-    editSelectRecord(){
-      if(this.batchDeleteObjs.length === 0){
-        this.$alert(this.$t('tip.pleaseSelectForEdit'),{
+    editSelectRecord () {
+      if (this.batchDeleteObjs.length === 0) {
+        this.$alert(this.$t('tip.pleaseSelectForEdit'), {
          confirmButtonText: this.$t('tip.yes'),
-          type:'warning'
-        })
-      }else {
+          type: 'warning'
+        }).catch(() => {})
+      } else {
        get(`${this.url}/${this.batchDeleteObjs[0].id}`).then(response => {
          if (response.code === 200) {
            this.object = response.data
@@ -215,8 +263,14 @@ export default {
      if (this.$refs.dataTable.loadingTableId === u.id) { // 列表单个下载
        return
      }
-      if (u.state !== 1 || u.upload !== 1) {
-        return
+      if (localStorage.getItem(storageKey.s3Enable) == 1) {
+        if (u.state !== 1 || u.upload !== 1) {
+          return
+        }
+      } else {
+        if (u.state !== 1) {
+          return
+        }
      }
      let fileName = ''
      let url = ''
@@ -277,8 +331,14 @@ export default {
      if (this.$refs.dataTable.loadingPreviewId === u.id) { // 列表单个下载
        return
      }
-      if (u.state !== 1 || u.upload !== 1) {
-        return
+      if (localStorage.getItem(storageKey.s3Enable) == 1) {
+        if (u.state !== 1 || u.upload !== 1) {
+          return
+        }
+      } else {
+        if (u.state !== 1) {
+          return
+        }
      }
      const params = {
        id: u.id
@@ -302,7 +362,9 @@ export default {
    },
    dragend () {
      this.$nextTick(() => {
-        this.$refs.dataTable.$refs.dataTable.doLayout()
+        if (this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+          this.$refs.dataTable.$refs.dataTable.doLayout()
+        }
      })
    },
    tableDataSort (orderBy) {
@@ -311,6 +373,8 @@ export default {
    },
    search (params) {
      this.pageObj.pageNo = 1
+      delete this.searchLabel.category
+      delete this.searchLabel.source
      this.getTableData(params)
    },
    getTimeString () {
@@ -345,23 +409,46 @@ export default {
      }
    }
  },
-  mounted () {
+  async mounted () {
    const pageSize = localStorage.getItem(storageKey.pageSize + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId)
    if (pageSize && pageSize !== 'undefined') {
      this.pageObj.pageSize = pageSize
    }
-    let localStorageTableTitle = localStorage.getItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId)
-    localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : this.$refs.dataTable.tableTitle
-    this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题
-      if (localStorageTableTitle[index]) {
-        item.show = localStorageTableTitle[index].show
+    const userId = localStorage.getItem(storageKey.userId)
+    const tableName = dbTableColumnCustomizeConfigPre + '-' + this.tableId
+    let localStorageTableTitle = []
+    if (indexedDBUtils.selectTable(tableName)) {
+      localStorageTableTitle = await indexedDBUtils.selectTable(tableName).get({ id: userId })
+    }
+
+    localStorageTableTitle = localStorageTableTitle && localStorageTableTitle.config
+      ? localStorageTableTitle.config
+      : (this.$refs.dataTable && this.$refs.dataTable.tableTitle ? this.$refs.dataTable.tableTitle : [])
+    // this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题
+    //   if (localStorageTableTitle[index]) {
+    //     item.show = localStorageTableTitle[index].show
+    //   }
+    //   return item
+    // })
+
+    // 不够优美，后续修改
+    // 为了避免缓存里的label在切换中英文时不一致，因为在拖拽后，键值不一致了，故根据prop匹配来修改label
+    for (let i = 0; i < localStorageTableTitle.length; i++) {
+      for (let j = 0; j < this.tools.customTableTitle.length; j++) {
+        if (localStorageTableTitle[i].prop === this.tools.customTableTitle.prop) {
+          localStorageTableTitle[i].label = this.tools.customTableTitle.label
+          break
+        }
      }
-      return item
-    })
+    }
+    this.tools.customTableTitle = localStorageTableTitle
    if (localStorageTableTitle && (localStorageTableTitle.length > this.$refs.dataTable.tableTitle.length)) {
      const arr = localStorageTableTitle.splice(this.$refs.dataTable.tableTitle.length, localStorageTableTitle.length)
      this.tools.customTableTitle = this.tools.customTableTitle.concat(arr)
    }
    // this.getTableData()
+  },
+  unmounted () {
+    this.isNoData = false
  }
 }
--- a/src/mixins/relatedServer.js
+++ b/src/mixins/relatedServer.js
@@ -19,7 +19,12 @@ export default {
      this.loadingRelationshipOne = true
      get(relationshipUrlOne, this.getQueryParams()).then(response => {
        if (response.code === 200) {
-          const relationshipDataOne = response.data.result
+          const relationshipDataOne = []
+          if (response.data.result.length > 0) {
+            response.data.result.forEach(item => {
+              relationshipDataOne.push({ value: item, show: true })
+            })
+          }
          // 将请求数据 传入方法中
          this.relatedServerWidth(relationshipDataOne, refOne, 1)
        }
@@ -30,7 +35,12 @@ export default {
      this.loadingRelationshipTwo = true
      get(relationshipUrlTow, this.getQueryParams()).then(response => {
        if (response.code === 200) {
-          const relationshipDataTwo = response.data.result
+          const relationshipDataTwo = []
+          if (response.data.result.length > 0) {
+            response.data.result.forEach(item => {
+              relationshipDataTwo.push({ value: item, show: true })
+            })
+          }
          // 将请求数据 传入方法中
          this.relatedServerWidth(relationshipDataTwo, refTow, 2)
        }
@@ -45,7 +55,7 @@ export default {
      let flag = true
      data.forEach((item) => {
        // 每条数据的宽度
-        const width = getTextRect(item.appName || item.domain || item.ip).width + 67
+        const width = getTextRect(item.value).width + 67
        if (width > 67 && width !== 0) {
          sum += width
          if (flag && sum >= relatedServerWidth && num === 1) {
--- a/src/mixins/right-box.js
+++ b/src/mixins/right-box.js
@@ -33,7 +33,7 @@ export default {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
              } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
              }
            })
          } else {
@@ -43,7 +43,7 @@ export default {
                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
              } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
              }
            })
          }
--- a/src/mixins/table.js
+++ b/src/mixins/table.js
@@ -1,4 +1,7 @@
-import { chartTableOrderOptionsMapping } from '@/utils/constants'
+import { chartTableOrderOptionsMapping, storageKey } from '@/utils/constants'
+import { getWidthByLanguage } from '@/utils/tools'
+import { put, patch } from '@/utils/http'
+import { api } from '@/utils/api'
 export default {
  props: {
    tableData: {
@@ -20,6 +23,11 @@ export default {
  },
  computed: {
    customTableTitles () {
+      if (this.customTableTitle) {
+        // 设置列宽，避免分辨率过小时，文本显示省略号
+        this.getTableWidth(this.customTableTitle)
+      }
+
      return this.customTableTitle.filter(item => item.show)
    }
  },
@@ -27,18 +35,107 @@ export default {
    customTableTitle (n) {
      if (n) {
        setTimeout(() => {
-          this.$refs.dataTable.doLayout()
+          if (this.$refs.dataTable) {
+            this.$refs.dataTable.doLayout()
+          }
        }, 200)
      }
+    },
+    tableData: {
+      handler (n) {
+        if (this.tableData && this.tableData.length > 0) {
+          // this.isInit = false
+        }
+      }
    }
  },
  data () {
    return {
      operationWidth: '165', // 操作列宽
-      show: true
+      show: true,
+      isNoData: false
    }
  },
  methods: {
+    toggleLoading (loading) {
+      this.$emit('toggleLoading', loading)
+    },
+    getTableWidth (list) {
+      if (list && list.length > 0) {
+        const language = localStorage.getItem(storageKey.language)
+        // 文字所占宽度，一个英文字母占7px，中文16px
+        let num = getWidthByLanguage(language) || 7
+        if (language !== 'cn') {
+          num = num + 1 // 最后一位加空格
+        }
+
+        list.forEach((item, index) => {
+          if (item.label && item.label !== 'IP') {
+            let tempLength = 0
+
+            if (item.label.indexOf(' ') > -1) {
+              let tempArr = []
+              tempArr = item.label.split(' ')
+              tempLength = Math.max(...tempArr.map(el => el.length))
+            } else {
+              tempLength = item.label.length
+            }
+
+            // 宽度 = 最小不可拆分单词文字宽度 + 22的padding边距
+            const newWidth = (num * tempLength) + 22
+
+            // 为了避免没有minWidth这种情况
+            if (!item.minWidth) {
+              item.minWidth = newWidth
+            }
+
+            // 排序最后一位一般是'操作'，或者是较长的字符，故不让其换行，宽度直接为字符宽度
+            if (index === list.length - 1) {
+              item.minWidth = (num * item.label.length) + 22
+            }
+
+            // 有排序的，额外添加24px的排序图标宽度
+            if (item.sortable) {
+              if (!item.initFlag) {
+                item.minWidth = item.minWidth + 32
+              }
+              // 避免customize多次点击save生成表格，导致width越来越大，保证初始化一次就确定宽度
+              item.initFlag = true
+            }
+
+            if (item.minWidth < newWidth) {
+              item.minWidth = newWidth
+            } else if (item.width < item.minWidth) {
+              item.width = item.minWidth
+            }
+          }
+        })
+      }
+    },
+    changeStatus (status, id) {
+      if (id) {
+        patch(api.knowledgeBaseEnable, { list: [{ knowledgeId: id, status: status }] }).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+          } else {
+            console.error(response)
+            if (response.message) {
+              this.$message.error(response.message)
+            } else {
+              this.$message.error('Something went wrong...')
+            }
+          }
+          this.$emit('reload')
+        })
+      }
+    },
+    selectable (row, rowIndex) {
+      if (row.isBuiltIn === 1) {
+        return false
+      } else {
+        return true
+      }
+    },
    tableOperation ([command, row]) {
      switch (command) {
        default:
@@ -49,6 +146,9 @@ export default {
    selectionChange (objs) {
      this.$emit('selectionChange', objs)
    },
+    checkboxStatusChange (isCheck, data) {
+      this.$emit('checkboxStatusChange', isCheck, data)
+    },
    dragend () {
      this.$nextTick(() => {
        this.$refs.dataTable.doLayout()
--- a/src/mock/entity.js
+++ b/src/mock/entity.js
@@ -0,0 +1,791 @@
+import Mock from 'mockjs'
+const urlAndVersion = BASE_CONFIG.baseUrl + BASE_CONFIG.apiVersion
+const openMock = true
+if (openMock) {
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/traffic/throughput.*'), 'get', function (requestObj) {
+    const titleList = ['totalBitsRate', 'inboundBitsRate', 'outboundBitsRate', 'internalBitsRate', 'throughBitsRate', 'other']
+    const arr = [{ type: 'Bits/s' }, { type: 'Packets/s' }, { type: 'Sessions/s' }]
+
+    const endTime = JSON.parse(getQuery(requestObj.url).endTime)
+    let step = 0
+    for (let i = 0; i < arr.length; i++) {
+      for (const j in titleList) {
+        let startTime = JSON.parse(getQuery(requestObj.url).startTime)
+        step = (endTime - startTime) / 100 // 每条数据的时间间隔
+
+        const values = []
+        let max = 2975
+        let min = 0
+        if (titleList[j] === 'totalBitsRate') {
+          max = 4462975
+          min = 1162975
+        }
+        for (let i = 0; i < 101; i++) {
+          const random = Math.floor(Math.random() * (max - min) + min)
+          values.push([startTime, random])
+          startTime += step
+        }
+
+        const newValues = JSON.parse(JSON.stringify(values))
+        const sortArr = newValues.sort((a, b) => a[1] - b[1])
+        const maxAnalysis = Math.floor(sortArr[sortArr.length - 1][1])
+        let avg = 0
+        let sum = 0
+        newValues.forEach((item) => {
+          sum += item[1]
+        })
+        avg = JSON.parse(sum / newValues.length)
+
+        const analysis = {
+          avg: avg,
+          max: maxAnalysis,
+          min: Math.floor(sortArr[0][1]),
+          p95: maxAnalysis * 0.95 // 模拟值，p95并未最大值的95%
+        }
+
+        // Metric为Packets/s时，没有other的tab选项
+        if (arr[i].type === 'Packets/s' && titleList[j] === 'other') {
+          analysis.avg = 0
+        }
+
+        if (arr[i].type === 'Sessions/s') {
+          // Metric为Sessions/s时，只有total选项，故total填充数据完毕终止循环，节省性能
+          arr[i].totalBitsRate = { values: values, analysis: analysis }
+          break
+        } else {
+          arr[i][titleList[j]] = { values: values, analysis: analysis }
+        }
+      }
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: arr
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/event/security.*'), 'get', function (requestObj) {
+    const result = [
+      {
+        eventId: '1298414830886991872',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.92',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'critical',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      }
+    ]
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/event/performance.*'), 'get', function (requestObj) {
+    const result = [
+      {
+        eventId: '1308078720390412288',
+        entityType: 'ip',
+        serverIp: '116.178.78.180',
+        domain: null,
+        appName: null,
+        eventSeverity: 'critical',
+        eventType: 'Http error',
+        startTime: 1683250500,
+        durationMs: 900000,
+        endTime: 1683251400
+      },
+      {
+        eventId: '1308078720390412289',
+        entityType: 'ip',
+        serverIp: '116.178.78.180',
+        domain: null,
+        appName: null,
+        eventSeverity: 'info',
+        eventType: 'Http error',
+        startTime: 1683250500,
+        durationMs: 900000,
+        endTime: 1683251400
+      }
+    ]
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(`${BASE_CONFIG.baseUrl}${BASE_CONFIG.apiVersion}/entity/detail/basic.*`), 'get', function (requestObj) {
+    const result = {
+      asn: {
+        asn: 'ASN',
+        organization: 'AS org'
+      },
+      location: {
+        country: 'China',
+        province: 'Hebei',
+        city: 'Langfang',
+        isp: 'an ISP'
+      },
+      categories: {
+        categoryName: '类别1',
+        categoryGroup: '类别组1',
+        reputationLevel: '1',
+        appCategory: '类别1',
+        appSubcategory: '子类别1',
+        appTechnology: '技术1',
+        appName: '名称1',
+        appRisk: '风险等级1',
+        appLongname: '全称1',
+        appDescription: '这是描述'
+      },
+      whois: {
+        expireDate: '23-12',
+        registrarName: '注册商',
+        registrantOrg: '注册机构',
+        registrantCountry: 'China',
+        createDate: '22-12',
+        email: '1@2.3'
+      }
+    }
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(`${BASE_CONFIG.baseUrl}${BASE_CONFIG.apiVersion}/entity/detail/kb/intelligence/tag.*`), 'get', function (requestObj) {
+    const result = {
+      malware: {
+        malwareName: 'malware'
+      },
+      darkweb: {
+        nodeType: 'nodeType'
+      },
+      psiphon3Ip: {
+        type: 1
+      },
+      userDefinedTags: [
+        {
+          id: 1,
+          tagValue: 'userTag1'
+        },
+        {
+          id: 2,
+          tagValue: 'userTag2'
+        },
+        {
+          id: 3,
+          tagValue: 'userTag3'
+        }
+      ]
+    }
+    return {
+      msg: 'success',
+      code: 200,
+      data: result
+    }
+  })
+  Mock.mock(new RegExp(`${BASE_CONFIG.baseUrl}${BASE_CONFIG.apiVersion}/entity/detail/kb/intelligence/list.*`), 'get', function (requestObj) {
+    const result = [
+      {
+        location: {
+          isp: 'dba Omsoft',
+          updateTime: 1685696510,
+          createTime: 1685696510,
+          isValid: 1
+        }
+      },
+      {
+        malware: {
+          threatType: 'command and control',
+          malwareName: 'IcedID',
+          malwareAlias: 'BokBot,IceID',
+          updateTime: 1685696510,
+          createTime: 1685696510,
+          isValid: 1
+        }
+      },
+      {
+        darkweb: {
+          nodeType: 'i2p',
+          updateTime: 1685696510,
+          createTime: 1685696510,
+          isValid: 1
+        }
+      },
+      {
+        psiphon3Ip: {
+          type: 1
+        }
+      },
+      {
+        userDefinedTag: {
+          id: 1,
+          tagValue: '门户网站',
+          updateTime: 1685696500,
+          createTime: 1685696500,
+          isValid: 1
+        }
+      },
+      {
+        userDefinedTag: {
+          id: 1,
+          tagValue: '用户tag',
+          updateTime: 1685696500,
+          createTime: 1685696500,
+          isValid: 1
+        }
+      }
+    ]
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/ip/relate/ports.*'), 'get', function (requestObj) {
+    const result = [
+      {
+        port: 80,
+        l7Protocol: 'HTTP'
+      },
+      {
+        port: 443,
+        l7Protocol: 'HTTPS'
+      },
+      {
+        port: 53,
+        l7Protocol: 'DNS'
+      }
+    ]
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/ip/relate/apps.*'), 'get', function (requestObj) {
+    const result = ['Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat']
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/ip/relate/domains.*'), 'get', function (requestObj) {
+    const result = ['-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com']
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/app/relate/ips.*'), 'get', function (requestObj) {
+    const result = ['116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242']
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/app/relate/domains.*'), 'get', function (requestObj) {
+    const result = ['-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com']
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/domain/relate/ips.*'), 'get', function (requestObj) {
+    const result = ['116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242']
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/domain/relate/apps.*'), 'get', function (requestObj) {
+    const result = ['Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat']
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/domain/relate/fqdns.*'), 'get', function (requestObj) {
+    const result = ['-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com']
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(`${urlAndVersion}/entity/explorer/query/list.*`), 'get', function (requestObj) {
+    const result = {
+      pageNo: 1,
+      pageSize: 10,
+      total: 3,
+      list: [
+        { entityValue: '192.168.12.34', entityType: 'ip' },
+        { entityValue: 'gdbzkz.com', entityType: 'domain' },
+        { entityValue: 'qqvideo', entityType: 'app' }
+      ]
+    }
+    return {
+      msg: 'success',
+      code: 200,
+      data: result
+    }
+  })
+  Mock.mock(new RegExp(`${urlAndVersion}/entity/explorer/detail/basic.*`), 'get', function (requestObj) {
+    const entityType = getEntityType(requestObj.url)
+    let result = {}
+    switch (entityType) {
+      case ('domain'): {
+        result = {
+          whois: {
+            registrarName: 'Beijing Baidu Company',
+            registrantOrg: 'Beijing Baidu Netcom Science Technology Co., Ltd.',
+            registrantCountry: 'China',
+            email: '信息已设置隐私保护',
+            createDate: 1685329698,
+            expireDate: 1685329698
+          },
+          icp: {
+            icpSiteLicense: '京ICP证030173号',
+            icpCompanyName: '北京百度网讯科技有限公司',
+            icpCompanyType: '企业'
+          },
+          category: {
+            name: '门户网站',
+            group: '互联网',
+            reputationLevel: 'Trustworthy'
+          }
+        }
+        break
+      }
+      case ('ip'): {
+        result = {
+          asn: { id: 2, asn: '14061', organization: 'DIGITALOCEAN-ASN - DigitalOcean, LLC, US' },
+          location: {
+            continent: 'North America',
+            country: 'United States',
+            province: 'New York',
+            city: '',
+            lngwgs: '-74.006',
+            latwgs: '40.713',
+            isp: 'dba Omsoft',
+            owner: 'tie net'
+          }
+        }
+        break
+      }
+      case ('app'): {
+        result = {
+          category: {
+            appName: 'QQ',
+            appId: 333,
+            appCategory: '娱乐',
+            appSubcategory: '聊天',
+            appRisk: '1',
+            appDescription: '聊天社交软件',
+            appLongname: 'Tencent qq',
+            appTechnology: 'socket',
+            appCompany: 'tencent',
+            appCompanyCategory: '互联网'
+          }
+        }
+        break
+      }
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: result
+    }
+  })
+  Mock.mock(new RegExp(`${urlAndVersion}/entity/explorer/detail/kb/intelligence/tag.*`), 'get', function (requestObj) {
+    const entityType = getEntityType(requestObj.url)
+    let result = {}
+    switch (entityType) {
+      case ('domain'): {
+        result = {
+          malware: {
+            threatType: 'command and control',
+            malwareName: '情报攻击',
+            malwareAlias: '攻击'
+          },
+          darkweb: {
+            nodeType: 'mtproxy'
+          },
+          userDefinedTags: [
+            {
+              id: 1,
+              tagValue: '门户网站'
+            }
+          ]
+        }
+        break
+      }
+      case ('ip'): {
+        result = {
+          malware: {
+            threatType: 'command and control',
+            malwareName: 'IcedID',
+            malwareAlias: 'BokBot,IceID'
+          },
+          darkweb: {
+            nodeType: '12p'
+          },
+          psiphon3Ip: {
+            type: 'high',
+            method: 'passive_ml',
+            confidence: 88,
+            confidenceLevel: 'confirmed'
+          },
+          userDefinedTags: [
+            {
+              id: 1,
+              tagValue: '门户网站'
+            }
+          ]
+        }
+        break
+      }
+      case ('app'): {
+        result = {
+          userDefinedTags: [
+            {
+              id: 1,
+              tagValue: '门户网站'
+            },
+            {
+              id: 2,
+              tagValue: '新闻软件'
+            }
+          ]
+        }
+        break
+      }
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: result
+    }
+  })
+  Mock.mock(new RegExp(`${urlAndVersion}/entity/explorer/detail/domain/relate.*`), 'get', function (requestObj) {
+    const relateType = getRelateType(requestObj.url)
+    let result = {}
+    switch (relateType) {
+      case ('ip'): {
+        result = {
+          total: 5,
+          result: ['bittorrent', 'qq_web', 'wechat', 'tencent', 'outlook']
+        }
+        break
+      }
+      case ('app'): {
+        result = {
+          total: 5,
+          result: ['192.107.175.180', '192.107.175.180', '192.107.175.180', '192.107.175.180', '192.107.175.180']
+        }
+        break
+      }
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: result
+    }
+  })
+  Mock.mock(new RegExp(`${urlAndVersion}/entity/explorer/detail/ip/relate.*`), 'get', function (requestObj) {
+    const relateType = getRelateType(requestObj.url)
+    let result = {}
+    switch (relateType) {
+      case ('domain'): {
+        result = {
+          total: 5,
+          result: ['bittorrent', 'qq_web', 'wechat', 'tencent', 'outlook']
+        }
+        break
+      }
+      case ('app'): {
+        result = {
+          total: 5,
+          result: ['gdbzkz.com', 'gdbzkz.com', 'gdbzkz.com', 'gdbzkz.com', 'gdbzkz.com']
+        }
+        break
+      }
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: result
+    }
+  })
+  Mock.mock(new RegExp(`${urlAndVersion}/entity/explorer/detail/app/relate.*`), 'get', function (requestObj) {
+    const relateType = getRelateType(requestObj.url)
+    let result = {}
+    switch (relateType) {
+      case ('ip'): {
+        result = {
+          total: 5,
+          result: ['gdbzkz.com', 'gdbzkz.com', 'gdbzkz.com', 'gdbzkz.com', 'gdbzkz.com']
+        }
+        break
+      }
+      case ('domain'): {
+        result = {
+          total: 5,
+          result: ['192.107.175.180', '192.107.175.180', '192.107.175.180', '192.107.175.180', '192.107.175.180']
+        }
+        break
+      }
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: result
+    }
+  })
+  Mock.mock(new RegExp(`${urlAndVersion}/entity/explorer/detail/traffic/performance.*`), 'get', function (requestObj) {
+    const result = {
+      resultType: 'object',
+      result: {
+        httpResponseLatencyValue: null,
+        httpResponseLatencyP50: null,
+        httpResponseLatencyP90: null,
+        httpResponseLatencyP99: null,
+        sslConLatencyValue: 191,
+        sslConLatencyP50: 137,
+        sslConLatencyP90: 311,
+        sslConLatencyP99: 1610,
+        establishLatencyValue: 42,
+        establishLatencyP50: 33,
+        establishLatencyP90: 54,
+        establishLatencyP99: 177,
+        sequenceGapLossPercentValue: 0.001,
+        sequenceGapLossPercentP50: 0,
+        sequenceGapLossPercentP90: 0.0038,
+        sequenceGapLossPercentP99: 0.0087,
+        pktRetransPercentValue: 0.0124,
+        pktRetransPercentP50: 0.0096,
+        pktRetransPercentP90: 0.0183,
+        pktRetransPercentP99: 0.0769
+      }
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: result
+    }
+  })
+  Mock.mock(new RegExp(`${urlAndVersion}/entity/explorer/overview/active.*`), 'get', function (requestObj) {
+    const data = { domainCount: 755, ipCount: 8373, appCount: 263 }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: data
+    }
+  })
+  Mock.mock(new RegExp(`${urlAndVersion}/entity/explorer/overview/new.*`), 'get', function (requestObj) {
+    const data = { domainCount: 262, ipCount: 4201, appCount: 43 }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: data
+    }
+  })
+  Mock.mock(new RegExp(`${urlAndVersion}/entity/explorer/overview/total.*`), 'get', function (requestObj) {
+    const data = { domainCount: 7686274, ipCount: 2169957, appCount: 856 }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: data
+    }
+  })
+}
+
+const getQuery = (url) => {
+  // str为？之后的参数部分字符串
+  const str = url.substr(url.indexOf('?') + 1)
+  // arr每个元素都是完整的参数键值
+  const arr = str.split('&')
+  // result为存储参数键值的集合
+  const result = {}
+  for (let i = 0; i < arr.length; i++) {
+    // item的两个元素分别为参数名和参数值
+    const item = arr[i].split('=')
+    result[item[0]] = item[1]
+  }
+  return result
+}
+
+const getEntityType = (url) => {
+  let entityType = ''
+  if (url.indexOf('/domain?') > -1) {
+    entityType = 'domain'
+  }
+  if (url.indexOf('/ip?') > -1) {
+    entityType = 'ip'
+  }
+  if (url.indexOf('/app?') > -1) {
+    entityType = 'app'
+  }
+  return entityType
+}
+
+const getRelateType = (url) => {
+  let entityType = ''
+  if (url.indexOf('/domains?') > -1) {
+    entityType = 'domain'
+  }
+  if (url.indexOf('/ips?') > -1) {
+    entityType = 'ip'
+  }
+  if (url.indexOf('/apps?') > -1) {
+    entityType = 'app'
+  }
+  return entityType
+}
--- a/src/mock/index.js
+++ b/src/mock/index.js
@@ -1,3 +1,4 @@
 import './npm'
 import './linkMonitor'
 import './dns'
+import './entity'
--- a/src/mock/linkMonitor.js
+++ b/src/mock/linkMonitor.js
@@ -114,7 +114,7 @@ if (openMock) {
    }
  })

-  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/bigramAnalysis1.*'), 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/bigramAnalysis.*'), 'get', function (requestObj) {
    const data = []
    const ingressLinkIds = ['256', '512', '768', '1024', '1280', '1536', '1792', '2048', '2304', '2816']
    const egressLinkIds = ['257', '513', '769', '1025', '1281', '1537', '1793', '2049', '2305', '2817']
@@ -132,7 +132,7 @@ if (openMock) {
    }
  })

-  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/bigramNextHopAnalysis1.*'), 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/bigramNextHopAnalysis.*'), 'get', function (requestObj) {
    const data = []
    const ingressLinkIds = ['西安', '太原', '西宁']
    const egressLinkIds = ['西安', '太原', '西宁']
@@ -150,7 +150,7 @@ if (openMock) {
    }
  })

-  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/analysis1.*'), 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/analysis.*'), 'get', function (requestObj) {
    const linkData = []
    for (let i = 0; i < 10; i++) {
      linkData.push({ linkId: 'Hundredgige' + (i + 1), egressBytes: Math.floor(Math.pow(1.3, i) * 1000000000), ingressBytes: Math.floor(Math.pow(1.5, i) * 1000000000) })
@@ -164,7 +164,7 @@ if (openMock) {
    }
  })

-  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/nextHopAnalysis1.*'), 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/nextHopAnalysis.*'), 'get', function (requestObj) {
    const linkData = [
      { linkDirection: '西安', egressBytes: 1024000000000, ingressBytes: 1224000000000 },
      { linkDirection: '太原', egressBytes: 102400000000, ingressBytes: 142400000000 },
--- a/src/permission.js
+++ b/src/permission.js
@@ -7,7 +7,7 @@ import { storageKey } from '@/utils/constants'
 import { loadI18n } from '@/i18n'

 const loginWhiteList = ['/login', '/'] // 免登陆白名单
-const permissionWhiteList = [...loginWhiteList, '/entityDetail'] // 权限白名单
+const permissionWhiteList = [...loginWhiteList] // 权限白名单

 router.beforeEach(async (to, from, next) => {
  if (to.path.indexOf('/login') == -1) {
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,10 +6,6 @@ const routes = [
    path: '/login',
    component: () => import('@/Login')
  },
-  {
-    path: '/entityDetail',
-    component: () => import('@/views/entityExplorer/EntityDetail')
-  },
  {
    path: '/',
    component: () => import('@/components/layout/Home'),
@@ -27,6 +23,14 @@ const routes = [
        path: '/entityExplorer',
        component: () => import('@/views/entityExplorer/EntityExplorer')
      },
+      {
+        path: '/entityDetail',
+        component: () => import('@/views/entityExplorer/EntityDetail')
+      },
+      {
+        path: '/entityGraph',
+        component: () => import('@/views/entityExplorer/EntityGraph')
+      },
      {
        path: '/detection',
        redirect: '/detection/securityEvent'
@@ -44,7 +48,11 @@ const routes = [
        component: () => import('@/views/setting/KnowledgeBase')
      },
      {
-        path: '/knowledgeBase/form',
+        path: '/knowledgeBase/create',
+        component: () => import('@/views/setting/KnowledgeBaseForm')
+      },
+      {
+        path: '/knowledgeBase/edit',
        component: () => import('@/views/setting/KnowledgeBaseForm')
      },
      {
@@ -67,6 +75,11 @@ const routes = [
            name: 'OperationLog',
            path: '/administration/operationLog',
            component: () => import('@/views/administration/OperationLog')
+          },
+          {
+            name: 'Appearance',
+            path: '/administration/appearance',
+            component: () => import('@/views/administration/Appearance')
          }
        ]
      },
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,7 +1,6 @@
 import { createStore } from 'vuex'
 import user from './modules/user'
 import panel from './modules/panel'
-import { storageKey } from '@/utils/constants'

 const store = createStore({
  modules: {
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -13,7 +13,8 @@ const user = {
      menuList: [],
      buttonList: [],
      roleList: [],
-      drilldownTableConfigList: []
+      drilldownTableConfigList: [],
+      timeFilter: {}
    }
  },
  mutations: {
@@ -33,6 +34,9 @@ const user = {
      state.menuList = []
      state.buttonList = []
      state.roleList = []
+    },
+    setTimeFilter (state, data) {
+      state.timeFilter = data
    }
  },
  getters: {
@@ -47,6 +51,9 @@ const user = {
    },
    drilldownTableConfigList (state) {
      return state.drilldownTableConfigList
+    },
+    timeFilter (state) {
+      return state.timeFilter
    }
  },
  actions: {
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -7,6 +7,7 @@ import { get, post } from '@/utils/http'
 import axios from 'axios'
 import { sortByOrderNum } from '@/permission'
 import { storageKey } from '@/utils/constants'
+const apiVersion = BASE_CONFIG.apiVersion

 export const api = {
  // 系统相关
@@ -20,6 +21,7 @@ export const api = {
  login: '/sys/login',
  // user
  user: '/sys/user',
+  timezone: '/sys/timezones',
  // 获取配置
  config: '/sys/config',
  // role
@@ -34,7 +36,10 @@ export const api = {
  // galaxyProxy
  galaxyProxy: '/galaxy/setting',
  // 知识库
-  knowledgeBase: '/knowledge',
+  knowledgeBase: BASE_CONFIG.apiVersion + '/knowledgeBase',
+  knowledgeBaseList: BASE_CONFIG.apiVersion + '/knowledgeBase/list',
+  knowledgeBaseEnable: BASE_CONFIG.apiVersion + '/knowledgeBase/status',
+  knowledgeBaseStatistics: BASE_CONFIG.apiVersion + '/knowledgeBase/statistics',

  // 报告相关
  reportJob: '/report/job',
@@ -217,13 +222,8 @@ export const api = {
    bigramNextHopAnalysis: '/interface/link/overview/bigramNextHopAnalysis',
    analysis: '/interface/link/overview/analysis',
    nextHopAnalysis: '/interface/link/overview/nextHopAnalysis',
-    // todo 以下几个接口因接口返回数据为空，故造模拟接口平替
-    bigramAnalysis1: 'interface/linkMonitor/bigramAnalysis1',
-    bigramNextHopAnalysis1: '/interface/linkMonitor/bigramNextHopAnalysis1',
    drilldownQuadrupleIngressAnalysis: '/interface/link/overview/drilldown/quadrupleIngressAnalysis',
-    drilldownQquadrupleEgressAnalysis: '/interface/link/overview/drilldown/quadrupleEgressAnalysis',
-    analysis1: '/interface/linkMonitor/analysis1',
-    nextHopAnalysis1: '/interface/linkMonitor/nextHopAnalysis1'
+    drilldownQquadrupleEgressAnalysis: '/interface/link/overview/drilldown/quadrupleEgressAnalysis'
  },
  dnsInsight: {
    recentEvents: '/interface/dnsInsight/recentEvents',
@@ -231,6 +231,79 @@ export const api = {
    totalTrafficAnalysis: '/interface/dns/overview/totalTrafficAnalysis',
    eventChart: '/interface/dnsInsight/eventChart',
    drilldownTrafficAnalysis: '/interface/dns/overview/drilldown/trafficAnalysis'
+  },
+  entity: {
+    throughput: apiVersion + '/entity/detail/traffic/throughput',
+    security: apiVersion + '/entity/detail/event/security',
+    performance: apiVersion + '/entity/detail/event/performance',
+    // 域名解析：ip相关app、domain
+    domainNameResolutionAboutAppsOfIp: apiVersion + '/entity/detail/ip/relate/apps',
+    domainNameResolutionAboutDomainsOfIp: apiVersion + '/entity/detail/ip/relate/domains',
+    // 域名解析：app相关ip、domain
+    domainNameResolutionAboutIpsOfApp: apiVersion + '/entity/detail/app/relate/ips',
+    domainNameResolutionAboutDomainsOfApp: apiVersion + '/entity/detail/app/relate/domains',
+    // 域名解析：domain相关ip、app、fqdn
+    domainNameResolutionAboutAppsOfDomain: apiVersion + '/entity/detail/domain/relate/apps',
+    domainNameResolutionAboutIpsOfDomain: apiVersion + '/entity/detail/domain/relate/ips',
+    domainNameResolutionAboutFQDNsOfDomain: apiVersion + '/entity/detail/domain/relate/fqdns',
+    // 开放端口：ip、domain、app相关
+    openPortOfIp: apiVersion + '/entity/detail/ip/relate/ports',
+    openPortOfDomain: apiVersion + '/entity/detail/domain/relate/ports',
+    openPortOfApp: apiVersion + '/entity/detail/app/relate/ports',
+    basicInfo: apiVersion + '/entity/detail/basic',
+    tags: apiVersion + '/entity/detail/kb/intelligence/tag',
+    informationAggregation: apiVersion + '/entity/detail/kb/intelligence/list',
+    // 实体关系
+    entityGraph: {
+      basicInfo: apiVersion + '/entity/graph/relation/basic',
+      tags: apiVersion + '/entity/graph/relation/kb/intelligence/tag',
+      relatedEntityCount: apiVersion + '/entity/graph/relation/summaryCount',
+      domainRelatedIp: apiVersion + '/entity/graph/relation/domain/relate/ips',
+      domainRelatedApp: apiVersion + '/entity/graph/relation/domain/relate/apps',
+      domainRelatedSubdomain: apiVersion + '/entity/graph/relation/domain/relate/subdomains',
+      ipRelatedDomain: apiVersion + '/entity/graph/relation/ip/relate/domains',
+      ipRelatedApp: apiVersion + '/entity/graph/relation/ip/relate/apps',
+      appRelatedIp: apiVersion + '/entity/graph/relation/app/relate/ips',
+      appRelatedDomain: apiVersion + '/entity/graph/relation/app/relate/domains'
+    },
+    entityList: {
+      list: apiVersion + '/entity/explorer/query/list', // 实体列表
+      domainBasicInfo: apiVersion + '/entity/explorer/detail/basic/domain', // Domain实体响应结果
+      ipBasicInfo: apiVersion + '/entity/explorer/detail/basic/ip', // ip实体响应
+      appBasicInfo: apiVersion + '/entity/explorer/detail/basic/app', // app实体响应
+      domainTags: apiVersion + '/entity/explorer/detail/kb/intelligence/tag/domain', // Domain实体标签响应结果
+      ipTags: apiVersion + '/entity/explorer/detail/kb/intelligence/tag/ip', // ip实体标签响应结果
+      appTags: apiVersion + '/entity/explorer/detail/kb/intelligence/tag/app', // app实体标签响应结果
+      domainThroughput: apiVersion + '/entity/explorer/detail/traffic/throughput/domain', // 实体流量信息
+      ipThroughput: apiVersion + '/entity/explorer/detail/traffic/throughput/ip', // 实体流量信息
+      appThroughput: apiVersion + '/entity/explorer/detail/traffic/throughput/app', // 实体流量信息
+      domainPerformance: apiVersion + '/entity/explorer/detail/traffic/performance/domain', // domain网络质量
+      ipPerformance: apiVersion + '/entity/explorer/detail/traffic/performance/ip', // ip网络质量
+      appPerformance: apiVersion + '/entity/explorer/detail/traffic/performance/app', // app网络质量
+      domainRelatedApp: apiVersion + '/entity/explorer/detail/domain/relate/apps', // 域名相关app
+      domainRelatedIp: apiVersion + '/entity/explorer/detail/domain/relate/ips', // 域名相关ip
+      appRelatedDomain: apiVersion + '/entity/explorer/detail/app/relate/domains', // app相关域名
+      appRelatedIp: apiVersion + '/entity/explorer/detail/app/relate/ips', // app相关ip
+      ipRelatedApp: apiVersion + '/entity/explorer/detail/ip/relate/apps', // ip相关app
+      ipRelatedDomain: apiVersion + '/entity/explorer/detail/ip/relate/domains', // ip相关域名
+      ipRelatedPort: apiVersion + '/entity/explorer/detail/ip/relate/ports', // ip开放端口
+      domainTrafficMap: apiVersion + '/entity/explorer/detail/traffic/map/domain', // domain流量地图
+      ipTrafficMap: apiVersion + '/entity/explorer/detail/traffic/map/ip', // ip流量地图
+      appTrafficMap: apiVersion + '/entity/explorer/detail/traffic/map/app', // app流量地图
+      summaryCount: apiVersion + '/entity/explorer/query/summaryCount', // 实体基数统计
+      aggCountry: apiVersion + '/entity/explorer/top/aggCountry', // 国家实体基数统计
+      aggAsn: apiVersion + '/entity/explorer/top/aggAsn', // ASN实体基数统计
+      aggCity: apiVersion + '/entity/explorer/top/aggCity', // 城市实体基数统计
+      domainSecurity: apiVersion + '/entity/explorer/detail/event/security/domain', // domain安全事件详情
+      ipSecurity: apiVersion + '/entity/explorer/detail/event/security/domain', // ip安全事件详情
+      appSecurity: apiVersion + '/entity/explorer/detail/event/security/domain', // app安全事件详情
+      domainEventPerformance: apiVersion + '/entity/explorer/detail/event/performance/domain', // domain服务质量详情
+      ipEventPerformance: apiVersion + '/entity/explorer/detail/event/performance/ip', // ip服务质量详情
+      appEventPerformance: apiVersion + '/entity/explorer/detail/event/performance/app', // app服务质量详情
+      entityActive: apiVersion + '/entity/explorer/overview/active', // entity首页active数据概览
+      entityNew: apiVersion + '/entity/explorer/overview/new', // entity首页new数据概览
+      entityTotal: apiVersion + '/entity/explorer/overview/total' // entity首页total数据概览
+    }
  }
 }

--- a/src/utils/constants.js
+++ b/src/utils/constants.js
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687771200531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7765" width="36" height="36" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M723.84487531 71.54166698c60.46291698 0 110.11458302 49.45145802 110.11458302 110.11458302v12.21270802h10.05045802c27.58870802 0 49.77179198 22.30320802 49.77179198 49.73175v256.78720896c0 27.42854198-22.34325 49.73175-49.77179198 49.73175h-10.05045802v292.22408302c0 60.50295802-49.4915 110.11458302-110.11458302 110.11458302H310.89516635a110.394875 110.394875 0 0 1-110.11458302-110.11458302v-292.22408302h-10.0905A49.81183302 49.81183302 0 0 1 140.95833333 500.38791698V243.60070802c0-27.42854198 22.30320802-49.73175 49.73175-49.73175h10.0905V181.65625C200.78058333 121.15329198 250.23204135 71.54166698 310.89516635 71.54166698z m54.97720802 688.31625H255.75779135v82.48583302a55.2575 55.2575 0 0 0 55.137375 55.137375h412.94970896a55.2575 55.2575 0 0 0 55.09733302-55.137375l-0.120125-82.48583302z m-261.47208302 27.508625c22.02291698 0 41.24291698 19.22 41.24291604 41.28295802 0 22.02291698-19.22 41.24291698-41.24291604 41.24291698-21.90279198 0-41.24291698-19.22-41.24291698-41.24291698s19.22-41.24291698 41.24291698-41.24291698z m261.59220802-237.246875H255.87791635v154.56083302h523.06429198v-154.56083302z m61.06354198-302.47475H194.73429135v248.65875h645.27145896v-248.65875z m-518.53958396 23.78475c12.41291698 0 23.5445 7.52783302 28.10925 18.97975l60.903375 150.55666604a24.865875 24.865875 0 0 1-23.10404104 34.27566698 25.106125 25.106125 0 0 1-23.26420896-15.8565l-6.56683302-16.697375H284.78800031l-6.32658396 16.53720802a25.14616698 25.14616698 0 1 1-46.76866604-18.41916604l61.70420802-150.55666698a30.43166698 30.43166698 0 0 1 28.10925-18.81958302z m217.82666698 0c40.722375 0 71.63454198 31.47275 71.63454198 69.6725 0 38.15970802-31.19245802 69.071875-74.4775 69.071875h-20.70154198v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.82583302 24.82583302 0 0 1-24.74575-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.74575-24.74575z m190.878625 0c40.722375 0 71.67458302 31.47275 71.67458302 69.6725 0 38.15970802-31.2325 69.071875-74.4775 69.071875h-20.74158302v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.66566698 24.66566698 0 0 1-24.70570802-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.70570802-24.74575zM321.10579135 348.30966698l-20.181 52.05416604H341.16666635l-20.02083302-52.05416604z m215.46420896-27.3885h-20.70154198v47.16908302h18.17891698c18.65941698 0 27.3885-11.57204198 27.3885-25.14616698 0-11.01145802-6.68695802-22.02291698-24.82583396-22.02291604z m190.7585 0h-20.70154198v47.16908302h18.138875c18.69945802 0 27.42854198-11.57204198 27.42854198-25.14616698 0-11.01145802-6.727-22.02291698-24.82583396-22.02291604z m-3.3635-194.40229198H311.01529135A55.2575 55.2575 0 0 0 255.87791635 181.65625v12.21270802h523.22445896V181.65625a55.2575 55.2575 0 0 0-55.137375-55.137375z" p-id="7766" fill="#E5A219"></path></svg>