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

fix: 修复实体下拉预览跳转url参数不对的问题

See merge request cyber-narrator/cn-ui!33

.eslintrc.js

@@ -1,7 +1,8 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true
+    es2021: true,
+    jest: true
   },
   extends: [
     'plugin:vue/vue3-essential',

.gitlab-ci.yml

@@ -2,6 +2,7 @@
 stages:
   - gen_git-log
   - build_project
+  - test
   - build_image
 
 cache:
@@ -10,7 +11,7 @@ cache:
       - package.json
   paths:
     - node_modules
-    - dist/
+#    - dist/
 
 before_script:
   - export CNUI_TAG=$(date +%Y%m%d%H%M%S)
@@ -41,21 +42,38 @@ build_project:
     - cnpm install --save-dev --unsafe-perm
     - echo "npm run build"
     - cnpm run build
+  artifacts:
+    name: "$CI_JOB_NAME-$CI_COMMIT_REF_NAME"
+    when: on_success
+    paths:
+      - dist/
   only:
     - dev
     - tags
   tags:
     - galaxy
 
+test:
+  stage: test
+  script:
+    - cnpm run test
+  when: on_success
+  only:
+    - dev
+  tags:
+    - galaxy
+
 build_image:
+  dependencies:
+    - build_project
   stage: build_image
   script:
     - echo "docker build"
-    - sudo docker build -t cn-ui:$CNUI_TAG .
+    - sudo docker build --no-cache -t cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG .
     - echo "docker tag"
-    - sudo docker tag cn-ui:$CNUI_TAG 192.168.40.153:9080/cyber-narrator/cn-ui:$CNUI_TAG
+    - sudo docker tag cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG
     - echo "docker push"
-    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui:$CNUI_TAG
+    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG
   when: on_success
   only:
     - dev
@@ -64,6 +82,8 @@ build_image:
 
 
 build_release_image:
+  dependencies:
+    - build_project
   stage: build_image
   script:
     - echo 'tag名称是'
@@ -71,7 +91,7 @@ build_release_image:
     - echo '提交的版本是'
     - echo $CI_COMMIT_REF_NAME
     - echo "docker build"
-    - sudo docker build -t cn-ui:$CI_COMMIT_TAG .
+    - sudo docker build --no-cache -t cn-ui:$CI_COMMIT_TAG .
     - echo "docker tag"
     - sudo docker tag cn-ui:$CI_COMMIT_TAG 192.168.40.153:9080/cyber-narrator/cn-ui:$CI_COMMIT_TAG
     - echo "docker push"

babel.config.js

@@ -12,8 +12,9 @@ module.exports = {
   ],
   plugins: [
     '@vue/babel-plugin-jsx',
-    ['@babel/proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
     ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
     '@babel/transform-runtime',
     'lodash'
   ],

jest.config.js

@@ -0,0 +1,34 @@
+module.exports = {
+  roots: [
+    '<rootDir>/test'
+  ],
+  testMatch: [
+    '<rootDir>/test/**/__tests__/**/*.{vue,js,jsx,ts,tsx}',
+    '<rootDir>/test/**/*.{spec,test}.{vue,js,jsx,ts,tsx}'
+  ],
+  setupFilesAfterEnv: ['<rootDir>/test/init.js'],
+  verbose: true,
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(vue)$': '<rootDir>/node_modules/vue-jest',
+    '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '<rootDir>/node_modules/babel-jest'
+  },
+  transformIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+    '^.+\\.module\\.(css|sass|scss|less)$'
+  ],
+  moduleFileExtensions: [
+    'vue',
+    'js',
+    'jsx',
+    'ts',
+    'tsx',
+    'json',
+    'node'
+  ],
+  moduleNameMapper: {
+    '@/(.*)$': '<rootDir>/src/$1'
+  },
+  resetMocks: true
+}

package.json

@@ -6,11 +6,13 @@
     "serve": "vue-cli-service serve",
     "build": "cross-env NODE_ENV=production vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "test": "jest",
     "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
   },
   "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",
@@ -39,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",
@@ -48,17 +52,23 @@
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-typescript": "^6.0.0",
-    "@types/jest": "^26.0.10",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/vue": "^6.4.2",
+    "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.161",
     "@typescript-eslint/eslint-plugin": "^3.10.1",
     "@typescript-eslint/parser": "^3.10.1",
     "@vue/babel-plugin-jsx": "^1.0.0",
+    "@vue/babel-preset-app": "^5.0.8",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/component-compiler-utils": "^3.2.0",
+    "@vue/test-utils": "^2.2.7",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.0.0",
     "compression-webpack-plugin": "^8.0.1",
     "cross-env": "^7.0.3",
     "eslint": "^7.22.0",
@@ -67,7 +77,10 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-vue": "^7.7.0",
+    "jest": "^26.0.0",
+    "ts-jest": "^26.4.4",
     "uglifyjs-webpack-plugin": "^2.2.0",
+    "vue-jest": "^5.0.0-alpha.10",
     "vue3-ace-editor": "^2.0.2"
   },
   "browserslist": [

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'
 }

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>

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>

public/images/flag/185-united states of america.svg

@@ -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>

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>

public/images/flag/218-south korea.svg

@@ -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>

public/images/logo-title.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="278px" height="134px" viewBox="0 0 278 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <defs>
+        <filter x="-17.8%" y="-24.0%" width="135.5%" height="147.9%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-4.6%" y="-33.1%" width="109.2%" height="166.2%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="🪁login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="登录定" transform="translate(-821.000000, -321.000000)">
+            <g id="编组-29备份-2" transform="translate(-92.000000, 0.483548)">
+                <g id="编组-3" transform="translate(845.000000, 261.000000)">
+                    <g id="编组" transform="translate(77.000000, 70.000000)">
+                        <g id="编组-2" filter="url(#filter-1)" transform="translate(92.000000, 0.000000)">
+                            <g id="编组-6" transform="translate(35.050168, 0.000000)" fill="#07C8EA">
+                                <path d="M27.0984325,0.0122014594 L31.8461546,0.0441807494 C33.4287159,0.0529564615 35.0111814,0.057058831 36.5933025,0.0481199837 C39.7135537,0.0288820298 40.9989786,1.482222 40.9483988,4.6197574 C40.8553785,10.3255597 40.893168,16.0325764 40.9093577,21.7387835 L40.9152603,25.1623944 L40.9214617,37.9840697 L40.9100279,44.3951016 C40.8908425,49.6015915 40.4443448,50.033571 35.0933494,50.052809 C30.3405147,50.0699729 25.5830136,50.1620025 20.8322952,50.0868551 L20.7215855,50.0942095 L20.7215855,50.0942095 L20.5477593,50.0992315 C18.9139006,50.0992315 17.5893964,48.7747273 17.5893964,47.1408687 C17.5893964,45.50701 18.9139006,44.1825058 20.5477593,44.1825058 L20.474,44.184 L20.4742959,44.1750333 C21.1471703,44.1739628 21.8199738,44.181749 22.4925791,44.1939776 L23.5363069,44.2159125 C27.0892892,44.2985782 30.6348941,44.4415229 34.1543247,43.9933811 L34.9660278,43.8791747 L34.9660278,6.26547692 C33.1063476,6.26547692 31.2448143,6.23793166 29.3832537,6.20623276 L26.5911206,6.15849312 C21.9382921,6.0834815 17.2909993,6.05560833 12.6777715,6.44036741 C8.6401071,6.77790605 5.98379485,10.2529801 5.89658827,14.448603 C5.6888441,24.353954 5.80079615,34.2622872 5.81918245,44.6967563 L0.447293679,44.6970037 L0.446704038,54.9559323 C0.117345075,53.9801448 0.113539117,52.6941057 0.104327596,51.8104584 C-0.0299705283,39.8654379 -0.0177616079,27.9186685 0.0467712572,15.9718991 C0.0973510704,7.02275274 6.25064696,0.487095115 15.2364124,0.139063039 C19.1868702,-0.0134803334 23.1421729,-0.0121848483 27.0984325,0.0122014594 Z" id="形状结合"></path>
+                            </g>
+                            <g id="编组-6" fill="#427497">
+                                <path d="M25.7134192,0.139063039 C34.6991847,0.487095115 40.8524806,7.02275274 40.9030604,15.9718991 L40.904,16.078 L40.902,16.078 L40.9025818,16.0941369 C40.9025818,17.6439559 39.6910759,18.9108125 38.1634453,18.9993255 L37.9924532,19.0042656 C36.3852335,19.0042656 35.0823245,17.7013566 35.0823245,16.0941369 C35.0823245,16.0780245 35.0824554,16.0619426 35.0827163,16.0458923 L35.0846058,16.0783793 C35.0750677,15.535054 35.0646363,14.991824 35.0532433,14.448603 C34.9660368,10.2529801 32.3097245,6.77790605 28.2720601,6.44036741 C23.6588323,6.05560833 19.0115395,6.0834815 14.358711,6.15849312 L11.566578,6.20623276 C9.70501736,6.23793166 7.84348402,6.26547692 5.98380382,6.26547692 L5.98380382,43.8791747 C9.76950351,44.4638711 13.587236,44.3049371 17.4135248,44.2159125 L18.4572525,44.1939776 C24.024744,44.0927552 29.6058224,44.2959137 35.128241,47.3070283 C35.128241,46.4331109 35.1291226,45.5631201 35.1306492,44.6967563 C35.1675419,43.1280395 36.4488408,41.8672653 38.0246093,41.8672653 C39.6211734,41.8672653 40.9154443,43.1615363 40.9154443,44.7581003 C40.9154443,44.8307331 40.9127656,44.9027403 40.9075017,44.9740284 L40.9088955,44.6972456 C40.8930463,47.0683764 40.8721613,49.4394518 40.845504,51.8104584 C40.8298068,53.3162655 40.8298068,55.990576 39.2077646,56.3068929 C37.5857223,56.6232099 35.9043795,55.3887179 34.756741,54.3638596 C31.4359146,51.4029636 27.806377,49.8569316 23.2908206,50.0090864 C17.486351,50.2067126 11.6679283,50.0737959 5.85648222,50.052809 C0.505486811,50.033571 0.0589891496,49.6015915 0.0398037033,44.3951016 C0.0171299939,37.9836163 0.0345713088,31.5738798 0.0345713088,25.1623944 C0.0363154403,18.3154317 0.113057226,11.4667201 0.00143281049,4.6197574 C-0.0491470027,1.482222 1.2362779,0.0288820298 4.35652914,0.0481199837 C5.93865019,0.057058831 7.52111576,0.0529564615 9.10367704,0.0441807494 L13.8513991,0.0122014594 C17.8076588,-0.0121848483 21.7629614,-0.0134803334 25.7134192,0.139063039 Z" id="形状结合"></path>
+                            </g>
+                        </g>
+                        <g id="编组备份-3" filter="url(#filter-2)" transform="translate(0.000000, 78.000000)" fill="#FFFFFF">
+                            <path d="M115.414634,3.4395964 C118.349928,2.7814294 120.475231,3.29905032 122.160731,5.90343768 C124.483413,9.49250456 127.148437,12.8399007 129.656213,16.2987054 C130.134509,16.9585864 130.56694,17.6544608 131.390854,18.88681 L131.390854,3.34275672 L136.97561,3.34275672 L136.97561,29.405484 C133.211489,30.4201581 132.565299,30.0088038 130.615261,26.8070956 C127.699624,22.0182451 124.570227,17.3716547 121.53174,12.6650751 C121.328628,12.749917 121.124697,12.8347588 120.921585,12.9196007 L120.921585,29.5546 L115.414634,29.5546 L115.414634,3.4395964 Z" id="Fill-3"></path>
+                            <path d="M52.5622826,19.5533129 C52.5622826,20.896183 52.5088273,22.2433081 52.5906808,23.5802213 C52.6199142,24.0550766 52.8596279,24.7231077 53.2146047,24.9324524 C54.4716401,25.6745201 57.2421295,24.9758532 58.2268768,23.7963741 C59.7353193,21.9905626 60.0802732,17.5781534 58.8733522,15.5408713 C57.9153325,13.9248317 56.2523707,13.4984832 53.9153706,13.9903583 C51.9625807,14.4022399 52.6833924,15.8736103 52.5756465,17.0105397 C52.4954635,17.8504718 52.5597769,18.7048708 52.5622826,19.5533129 M52.5330493,0 L52.5330493,9.65368764 C53.208758,9.5405053 53.6698102,9.49284958 54.1166633,9.38477321 C59.6952278,8.0333931 63.9023291,10.7650872 65.0299024,16.4812208 C66.1015147,21.9071651 64.1203266,26.9127179 59.9833855,28.7985229 C55.9491788,30.6358212 51.8139081,29.8256739 47.7396098,28.8470296 C47.3829626,28.7610791 46.9837181,27.8930642 46.9812124,27.3867221 C46.934439,19.0265469 46.9645076,10.6663717 46.9268751,2.30619654 C46.9219104,1.14373732 47.3194844,0.630587319 48.4453872,0.535275875 C49.7375027,0.424646521 51.0204305,0.203387813 52.5330493,0" id="Fill-5"></path>
+                            <path d="M19.5137739,23.4304503 C19.9932034,24.8985873 20.4620513,26.3353612 20.9268293,27.7602679 C14.4720316,31.407724 6.23789114,30.2659338 2.48710831,25.2529068 C-1.22541783,20.2898914 -0.709359604,11.0682613 3.55178365,6.23408942 C7.21547147,2.07888852 15.6189181,1.27107406 20.5540301,4.64219483 C20.064019,6.07049216 19.569938,7.51150431 19.047368,9.03558657 C14.6893621,7.55219171 10.4103114,6.14678104 7.12023675,10.7351332 C5.254613,13.3374317 5.32949842,19.2684681 7.28465909,21.8139737 C10.743226,26.3184081 15.1354187,24.6230997 19.5137739,23.4304503" id="Fill-7"></path>
+                            <path d="M80.9573503,17.4186957 C80.6994597,14.8122308 79.7157449,13.6997668 77.8026508,13.6278585 C75.6024709,13.5441065 74.4971096,14.6464187 74.0851334,17.4186957 L80.9573503,17.4186957 Z M85.2271429,28.6702323 C81.6093756,29.9578141 78.1497488,30.3511949 74.691744,29.2725702 C70.8371715,28.0704323 68.9305652,25.1475708 68.5664366,21.0217254 C68.1731129,16.5684856 69.1925106,12.666825 73.0543819,10.2946966 C76.3404597,8.27534184 79.851989,8.46568738 82.955597,10.8132824 C86.3227725,13.3596828 86.3714311,17.194511 86.1832845,21.2679056 L74.1800176,21.2679056 C74.761488,24.9149262 77.0054606,25.5857885 84.4437394,24.4377934 C84.6910873,25.7719041 84.9400571,27.1178586 85.2271429,28.6702323 L85.2271429,28.6702323 Z" id="Fill-9"></path>
+                            <path d="M25.3874943,30.8228052 C27.273054,31.3110201 28.457617,31.5073987 28.9411833,31.4119412 C30.9031674,31.0255922 31.8121184,29.009122 31.0620691,27.1434634 C28.7485252,21.3855088 26.4909674,15.603831 24.097561,9.54171142 L30.054319,9.54171142 C31.3765794,13.67717 34.2426251,22.3985378 34.3454245,22.3888832 C34.4546317,22.3786269 37.0270604,13.7593538 38.2422885,9.54425319 L43.7560976,9.54425319 C42.7483475,12.6968943 41.8846793,15.858008 40.7279074,18.901353 C39.1117199,23.1562747 37.3588605,27.3612083 35.512142,31.5153065 C33.6983565,35.5956933 30.1210084,37.5842041 24.3206821,35.2889865 C24.4266166,34.7659469 24.7822207,33.2772198 25.3874943,30.8228052 Z" id="Fill-11"></path>
+                            <path d="M234.415104,8.91275606 C240.021771,8.71254074 243.950192,12.7288259 244.138705,18.8507945 C244.331212,25.1524435 240.866885,29.6752563 235.685171,29.8865947 C229.702277,30.1295911 225.972753,26.2467828 225.762672,19.5583931 C225.578153,13.6708647 229.297293,9.09500335 234.415104,8.91275606 Z M234.692852,13.9760256 C237.392359,13.8724659 239.283821,15.9498548 239.374586,19.1163903 C239.467275,22.3758639 237.799265,24.7152498 235.304366,24.8245628 C232.423713,24.9502506 230.628017,22.9419015 230.526867,19.4823895 C230.438024,16.4371162 232.228721,14.0702914 234.692852,13.9760256 Z" id="Fill-13"></path>
+                            <path d="M200.239759,20.786111 C197.664552,20.8988821 196.292264,21.6284773 196.296349,23.2098363 C196.300526,24.7732545 197.562105,25.5643612 200.031561,25.6164751 C201.586435,25.6497938 202.385352,25.9804068 202.385352,23.3029579 C202.385352,21.2268237 202.1218,20.7040956 200.239759,20.786111 Z M195.974185,29.5438157 C192.681025,28.9030706 190.853512,26.6655885 190.878298,23.384119 C190.903083,20.2008971 192.687635,18.0659342 195.933702,17.440567 C197.008564,17.2338199 198.11069,17.1509501 199.203728,17.0885843 C200.211669,17.0304901 201.224567,17.0757694 202.23664,17.0757694 C201.947476,13.5226239 201.356756,13.3218571 193.403934,14.1138181 C193.270093,13.4534235 193.099073,12.7810682 193.005715,12.0967524 C192.91153,11.4090193 192.89418,10.7101799 192.829738,9.82851455 C196.569035,8.87423144 200.225714,8.3291709 203.912962,9.87806551 C205.883404,10.7050539 207.160681,12.3351096 207.250734,14.3684075 C207.461411,19.1663072 207.318481,23.9804391 207.318481,28.9141768 C203.589098,29.7411652 199.816754,30.2930604 195.974185,29.5438157 Z" id="Fill-17"></path>
+                            <path d="M149.508052,20.786111 C146.932844,20.8988821 145.560557,21.6284773 145.564642,23.2098363 C145.568819,24.7732545 146.830398,25.5643612 149.299854,25.6164751 C150.854727,25.6497938 151.653645,25.9804068 151.653645,23.3029579 C151.653645,21.2268237 151.390093,20.7040956 149.508052,20.786111 Z M145.242477,29.5438157 C141.949318,28.9030706 140.121805,26.6655885 140.14659,23.384119 C140.171376,20.2008971 141.955928,18.0659342 145.201994,17.440567 C146.276856,17.2338199 147.378982,17.1509501 148.47202,17.0885843 C149.479962,17.0304901 150.49286,17.0757694 151.504932,17.0757694 C151.215769,13.5226239 150.625049,13.3218571 142.672227,14.1138181 C142.538385,13.4534235 142.367366,12.7810682 142.274007,12.0967524 C142.179823,11.4090193 142.162473,10.7101799 142.098031,9.82851455 C145.837328,8.87423144 149.494007,8.3291709 153.181254,9.87806551 C155.151697,10.7050539 156.428973,12.3351096 156.519027,14.3684075 C156.729703,19.1663072 156.586774,23.9804391 156.586774,28.9141768 C152.857391,29.7411652 149.085047,30.2930604 145.242477,29.5438157 Z" id="Fill-17备份"></path>
+                            <path d="M214.368819,9.69369425 L221.009306,9.69369425 L221.009306,14.1842677 L214.659803,14.1842677 C214.659803,17.2278693 214.46217,20.0881822 214.726242,22.9064564 C214.912101,24.8906828 216.670619,25.2673495 218.414,25.1378703 C219.297043,25.07229 220.169154,24.8646188 221.178346,24.6998271 C221.447464,26.0938303 221.682942,27.3104301 221.95122,28.6918217 C218.65957,30.1530867 215.340167,30.4170898 212.263812,28.7515166 C210.96784,28.0503112 209.500306,26.2636666 209.442277,24.9133837 C209.153817,18.2393203 209.311082,11.5459192 209.311082,4.69193022 C210.769366,4.43885727 212.402576,4.157198 214.368819,3.81668457 L214.368819,9.69369425 Z" id="Fill-19"></path>
+                            <path d="M247.317073,29.2612484 L247.317073,19.8647936 L247.317073,13.6517012 C247.317073,10.1104359 247.31206,10.0838292 250.648221,9.42209492 C253.724541,8.8118575 256.802532,8.55179851 260,9.73279246 C259.7176,11.2193343 259.458594,12.5882916 259.207944,13.908327 L252.803818,13.908327 L252.803818,29.2612484 L247.317073,29.2612484 Z" id="Fill-25"></path>
+                            <path d="M175.02439,29.2612484 L175.02439,19.8647936 L175.02439,13.6517012 C175.02439,10.1104359 175.019377,10.0838292 178.355538,9.42209492 C181.431858,8.8118575 184.509849,8.55179851 187.707317,9.73279246 C187.424917,11.2193343 187.165912,12.5882916 186.915261,13.908327 L180.511135,13.908327 L180.511135,29.2612484 L175.02439,29.2612484 Z" id="Fill-25备份"></path>
+                            <path d="M159.804878,29.2612484 L159.804878,19.8647936 L159.804878,13.6517012 C159.804878,10.1104359 159.799865,10.0838292 163.136026,9.42209492 C166.212346,8.8118575 169.290337,8.55179851 172.487805,9.73279246 C172.205405,11.2193343 171.946399,12.5882916 171.695749,13.908327 L165.291623,13.908327 L165.291623,29.2612484 L159.804878,29.2612484 Z" id="Fill-25备份-2"></path>
+                            <path d="M89.4146341,29.2612484 L89.4146341,19.8647936 L89.4146341,13.6517012 C89.4146341,10.1104359 89.4096212,10.0838292 92.7457824,9.42209492 C95.8221023,8.8118575 98.9000932,8.55179851 102.097561,9.73279246 C101.815161,11.2193343 101.556155,12.5882916 101.305505,13.908327 L94.9013786,13.908327 L94.9013786,29.2612484 L89.4146341,29.2612484 Z" id="Fill-25备份-3"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

public/images/logo.svg

@@ -1,14 +1,31 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="36px" height="27px" viewBox="0 0 36 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 8</title>
-    <g id="Dashboards-重构" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Network-Analytics_Network-Overview" transform="translate(-62.000000, -17.000000)">
-            <g id="编组-8" transform="translate(62.000000, 17.000000)">
-                <g id="编组-6" transform="translate(16.714286, 0.000000)" fill="#38ACD2">
-                    <path d="M17.2339653,0.0225148942 C18.7034774,0.013513634 19.3088605,0.693517934 19.2850395,2.16154166 C19.2324689,5.36517202 19.2686112,8.56962068 19.2694326,11.773251 C19.2694326,14.7731256 19.2776468,17.7721819 19.2669684,20.7720564 C19.2579328,23.2081248 19.0476504,23.410244 16.5275481,23.4192453 C14.3379832,23.4271009 12.1463155,23.468474 9.95759183,23.4373656 L9.81338222,23.4344346 C9.76856364,23.4387551 9.72312343,23.4409659 9.67716346,23.4409659 C8.90768211,23.4409659 8.28389423,22.8212427 8.28389423,22.0567754 C8.28389423,21.2923081 8.90768211,20.6725848 9.67716346,20.6725848 L9.642,20.674 L9.64253362,20.6690886 C11.7876709,20.6656961 13.9312779,20.8521924 16.054746,20.5879296 L16.4675847,20.530659 L16.4675847,2.93155856 C12.9642481,2.93155856 9.44694746,2.72534787 5.97071757,3.0133882 C4.06914096,3.1713194 2.81812533,4.79727433 2.77705456,6.76036737 C2.6828656,11.222083 2.72821584,15.6850917 2.7394565,20.3677855 L2.74,20.913 L0.21065723,20.9133136 L0.209644072,25.711202 C0.0552591026,25.2549048 0.0534654644,24.654429 0.0491340779,24.2416331 C-0.0141149065,18.6526688 -0.00836499885,13.0628862 0.0220273703,7.47310352 C0.0458484163,3.2858809 2.94380188,0.227907288 7.17573393,0.0650663065 C10.5246444,-0.0634062267 13.8809477,0.0413357112 17.2339653,0.0225148942 Z" id="形状结合"></path>
+<svg width="96px" height="77px" viewBox="0 0 96 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 2</title>
+    <defs>
+        <filter x="-17.8%" y="-24.0%" width="135.5%" height="147.9%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="🪁login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="登录定" transform="translate(-912.000000, -321.000000)">
+            <g id="编组-29备份-2" transform="translate(-92.000000, 0.483548)">
+                <g id="编组-3" transform="translate(845.000000, 261.000000)">
+                    <g id="logo" transform="translate(77.000000, 70.000000)">
+                        <g id="编组-2" filter="url(#filter-1)" transform="translate(92.000000, 0.000000)">
+                            <g id="编组-6" transform="translate(35.050168, 0.000000)" fill="#07C8EA">
+                                <path d="M27.0984325,0.0122014594 L31.8461546,0.0441807494 C33.4287159,0.0529564615 35.0111814,0.057058831 36.5933025,0.0481199837 C39.7135537,0.0288820298 40.9989786,1.482222 40.9483988,4.6197574 C40.8553785,10.3255597 40.893168,16.0325764 40.9093577,21.7387835 L40.9152603,25.1623944 L40.9214617,37.9840697 L40.9100279,44.3951016 C40.8908425,49.6015915 40.4443448,50.033571 35.0933494,50.052809 C30.3405147,50.0699729 25.5830136,50.1620025 20.8322952,50.0868551 L20.7215855,50.0942095 L20.7215855,50.0942095 L20.5477593,50.0992315 C18.9139006,50.0992315 17.5893964,48.7747273 17.5893964,47.1408687 C17.5893964,45.50701 18.9139006,44.1825058 20.5477593,44.1825058 L20.474,44.184 L20.4742959,44.1750333 C21.1471703,44.1739628 21.8199738,44.181749 22.4925791,44.1939776 L23.5363069,44.2159125 C27.0892892,44.2985782 30.6348941,44.4415229 34.1543247,43.9933811 L34.9660278,43.8791747 L34.9660278,6.26547692 C33.1063476,6.26547692 31.2448143,6.23793166 29.3832537,6.20623276 L26.5911206,6.15849312 C21.9382921,6.0834815 17.2909993,6.05560833 12.6777715,6.44036741 C8.6401071,6.77790605 5.98379485,10.2529801 5.89658827,14.448603 C5.6888441,24.353954 5.80079615,34.2622872 5.81918245,44.6967563 L0.447293679,44.6970037 L0.446704038,54.9559323 C0.117345075,53.9801448 0.113539117,52.6941057 0.104327596,51.8104584 C-0.0299705283,39.8654379 -0.0177616079,27.9186685 0.0467712572,15.9718991 C0.0973510704,7.02275274 6.25064696,0.487095115 15.2364124,0.139063039 C19.1868702,-0.0134803334 23.1421729,-0.0121848483 27.0984325,0.0122014594 Z" id="形状结合"></path>
                             </g>
                             <g id="编组-6" fill="#427497">
-                    <path d="M19.2796515,7.71047301 C19.2796515,8.48046919 18.6655184,9.10467443 17.9079467,9.10467443 C17.1503751,9.10467443 16.536242,8.48046919 16.536242,7.71047301 C16.536242,7.70438876 16.5362803,7.69831361 16.5363568,7.6922478 L16.5373057,7.70225534 C16.532813,7.44217878 16.5278999,7.18214774 16.5225344,6.92212099 C16.4814291,4.91205752 15.2293621,3.24719877 13.3261873,3.08548879 C11.2386964,2.90852947 9.13640761,2.91375781 7.03121842,2.94625398 L4.92550309,2.98210165 C4.22356947,2.99325545 3.52175425,3.00170123 2.82049805,3.00170123 L2.82049805,21.021891 C4.19690236,21.2379613 5.58229019,21.2420622 6.97158301,21.2130673 L7.80558667,21.1931298 L8.53591703,21.1759185 C11.2145687,21.1207428 13.9006337,21.191491 16.557885,22.6641271 L16.559,21.413 C16.5761661,20.6622764 17.180207,20.0580137 17.9231037,20.0580137 C18.6756527,20.0580137 19.2857143,20.6780806 19.2857143,21.4429718 C19.2857143,21.4721841 19.2848245,21.5011851 19.2830709,21.5299484 L19.2826266,21.4139472 C19.2751561,22.549879 19.2653122,23.6857843 19.2527476,24.8216567 C19.2453486,25.5430675 19.2453486,26.8242918 18.4807903,26.9758347 C17.716232,27.1273777 16.923722,26.5359501 16.3827764,26.044955 C14.8174871,24.6264316 13.1066851,23.8857497 10.9782533,23.9586448 C8.24228541,24.0533248 5.49974066,23.9896462 2.76048433,23.9795917 C0.238263922,23.9703751 0.0278048523,23.7634198 0.0187616892,21.2690643 C0.00807431458,18.1974125 0.016295372,15.1265985 0.016295372,12.0549467 C0.0171174777,8.77466386 0.0532901303,5.49354316 0.000675362917,2.21326033 C-0.0231657035,0.710111565 0.582726227,0.0138369713 2.0534734,0.0230536025 C5.40930903,0.0423247405 8.76843308,-0.0649233317 12.1201582,0.0666231318 C16.355647,0.233360369 19.256036,3.36450135 19.2798771,7.65191061 Z" id="形状结合"></path>
+                                <path d="M25.7134192,0.139063039 C34.6991847,0.487095115 40.8524806,7.02275274 40.9030604,15.9718991 L40.904,16.078 L40.902,16.078 L40.9025818,16.0941369 C40.9025818,17.6439559 39.6910759,18.9108125 38.1634453,18.9993255 L37.9924532,19.0042656 C36.3852335,19.0042656 35.0823245,17.7013566 35.0823245,16.0941369 C35.0823245,16.0780245 35.0824554,16.0619426 35.0827163,16.0458923 L35.0846058,16.0783793 C35.0750677,15.535054 35.0646363,14.991824 35.0532433,14.448603 C34.9660368,10.2529801 32.3097245,6.77790605 28.2720601,6.44036741 C23.6588323,6.05560833 19.0115395,6.0834815 14.358711,6.15849312 L11.566578,6.20623276 C9.70501736,6.23793166 7.84348402,6.26547692 5.98380382,6.26547692 L5.98380382,43.8791747 C9.76950351,44.4638711 13.587236,44.3049371 17.4135248,44.2159125 L18.4572525,44.1939776 C24.024744,44.0927552 29.6058224,44.2959137 35.128241,47.3070283 C35.128241,46.4331109 35.1291226,45.5631201 35.1306492,44.6967563 C35.1675419,43.1280395 36.4488408,41.8672653 38.0246093,41.8672653 C39.6211734,41.8672653 40.9154443,43.1615363 40.9154443,44.7581003 C40.9154443,44.8307331 40.9127656,44.9027403 40.9075017,44.9740284 L40.9088955,44.6972456 C40.8930463,47.0683764 40.8721613,49.4394518 40.845504,51.8104584 C40.8298068,53.3162655 40.8298068,55.990576 39.2077646,56.3068929 C37.5857223,56.6232099 35.9043795,55.3887179 34.756741,54.3638596 C31.4359146,51.4029636 27.806377,49.8569316 23.2908206,50.0090864 C17.486351,50.2067126 11.6679283,50.0737959 5.85648222,50.052809 C0.505486811,50.033571 0.0589891496,49.6015915 0.0398037033,44.3951016 C0.0171299939,37.9836163 0.0345713088,31.5738798 0.0345713088,25.1623944 C0.0363154403,18.3154317 0.113057226,11.4667201 0.00143281049,4.6197574 C-0.0491470027,1.482222 1.2362779,0.0288820298 4.35652914,0.0481199837 C5.93865019,0.057058831 7.52111576,0.0529564615 9.10367704,0.0441807494 L13.8513991,0.0122014594 C17.8076588,-0.0121848483 21.7629614,-0.0134803334 25.7134192,0.139063039 Z" id="形状结合"></path>
+                            </g>
+                        </g>
+                    </g>
                 </g>
             </g>
         </g>

src/App.vue

@@ -5,6 +5,9 @@
 </template>
 <script>
 import { storageKey } from '@/utils/constants'
+import router from '@/router'
+import { post } from '@/utils/http'
+import { api } from '@/utils/api'
 const dayjs = require('dayjs')
 const utc = require('dayjs/plugin/utc')
 const timezone = require('dayjs/plugin/timezone')
@@ -26,7 +29,37 @@ export default {
     } else {
       window.$dayJs.tz.setDefault()
     }
-  }
+  },
+  mounted () {
+    this.loginAlready()
+  },
+  methods: {
+    /**
+     * 已经登录判断
+     * 如果已经登录，新打开页面按url打开，否则进入首页
+     */
+    loginAlready () {
+      // 登录判断在router/index.js下操作更合适，但该文件内引入post等方法会导致路由报错，
+      // 目前不知道其原因，后续解决该问题后，将登录操作移入router
+      const url = window.location.href
+      const currentPath = url.match(/#(\S*)/)[1]
 
+      if (currentPath === '/' || currentPath === '/login') {
+        if (localStorage.getItem(storageKey.token) !== null) {
+          // 刚进入会请求失败，故采用延时，请求成功清除延时器，避免内存泄漏
+          const timer = setTimeout(() => {
+            post(api.permissions, { token: localStorage.getItem(storageKey.token) }).then(res => {
+              if (res.code === 200) {
+                router.push({
+                  path: '/panel/networkOverview'
+                })
+                clearTimeout(timer)
+              }
+            })
+          }, 10)
+        }
+      }
+    }
+  }
 }
 </script>

src/Login.vue

@@ -2,12 +2,12 @@
   <div class="logins">
     <div class="inside">
       <div class="title">
-        <img src="../public/images/cion.png" />
+        <img src="../public/images/logo-title.svg" />
       </div>
       <el-form class="login__box">
         <el-form-item>
           <el-input
-              prefix-icon="el-icon-user"
+              prefix-icon="cn-icon cn-icon-user2"
               class="login--input login__input"
             v-model="username"
           ></el-input>
@@ -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)
     }
@@ -136,7 +137,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .logins {
   background-color: #000C18;
   background-size: auto;
@@ -146,48 +147,89 @@ export default {
   height: 100%;
   justify-content: center;
   align-items: center;
-   margin: auto;
 }
 
+:deep .el-input__inner {
+  background-color: #0B325C !important;
+  border: none;
+  border-radius: 0px;
+  border-bottom: 1px solid #295688;
+  font-size: 14px;
+  line-height: 14px;
+}
+:deep .el-input__inner:hover {
+  border-color: #295688;
+}
+:deep .el-input__inner:focus {
+  border-color: #295688;
+}
+.el-button--primary:hover, .el-button--primary:focus, .el-button--primary:active {
+  background: #21B4ED;
+  border-color: #21B4ED;
+  color: #FFFFFF;
+}
+:deep .el-loading-mask {
+  background-color: transparent;
+}
+:deep input {
+  -webkit-text-fill-color: rgba(231,234,237, .8) !important;
+  transition: background-color 500000000000000000s ease-in-out 0s !important;
+  caret-color: #fff ;
+}
 .inside {
-  opacity: 0.78;
-  background: #051a37;
-  border-radius: 6px;
-  width: 368px;
-  height: 400px;
-  /* margin-top:340px; */
+  width: 414px;
+  height: 524px;
+  background: #0B325C;
+  border: 1px solid rgba(103,179,245,0.65);
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.38);
+  border-radius: 4px;
+}
+.inside {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .inside > div {
   display: block;
 }
 
 .title {
-  margin-top: 70px;
+  margin-top: 65px;
   text-align: center;
-
 }
 .title > img {
-  height: 43px;
-  width: 248px;
-}
-.login--input{
-  width: 300px;
-  height: 40px;
-}
- .login__input:first-of-type{
-   margin-top: 45.57px;
+  height: 135px;
 }
 .login__box {
-   width: 300px;
-   height: 250px;
-   margin: auto;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+:deep .el-form-item {
+  width: 334px;
+  margin-bottom: 25px;
+}
+:deep .el-input__prefix {
+  color: #6DBBFF;
+}
+:deep .el-input__prefix i {
+  width: 17px;
+  font-size: 17px;
+}
+.login__box .el-form-item:nth-of-type(3) {
+  margin-top: 25px;
+  margin-bottom: 65px;
 }
 .login--button {
-  background: #0091ff;
-  color: #fff;
+  background: #21B4ED;
   border-radius: 4px;
   border: 0;
   font-weight: 400;
-  text-align: center;
+  font-size: 16px;
+  color: #FFFFFF;
+  line-height: 22px;
+  width: 334px;
+  height: 52px;
 }
 </style>

src/Test.vue

@@ -0,0 +1,121 @@
+<template>
+  <span test-id="count">{{count}}</span>
+  <span test-id="id">{{obj.id}}</span>
+  <span test-id="title">{{obj.title}}</span>
+  <button test-id="button" @click="click">click</button>
+  <span test-id="tab">{{lineTab}}</span>
+  <el-table
+      :data="tableData"
+      class="test-table"
+      height="100%"
+      empty-text=" "
+  >
+    <template v-for="(item, index) in tableTitles" :key="index">
+      <el-table-column>
+        <template #default="scope" :column="item">
+          <span :test-id="`${item.prop}${scope.$index}`">{{scope.row[item.prop]}}</span>
+        </template>
+      </el-table-column>
+    </template>
+  </el-table>
+</template>
+
+<script>
+/* vue-jest的测试示例 */
+import { useRoute, useRouter } from 'vue-router'
+import axios from 'axios'
+import { ref } from 'vue'
+import indexedDBUtils from '@/indexedDB'
+export default {
+  name: 'Test',
+  data () {
+    return {
+      count: 0,
+      obj: { id: 1, title: 'title' },
+      differentParamData0: null,
+      differentParamData1: null,
+      indexedDBValue: null,
+      tableData: [
+        {
+          name: 'a',
+          age: 10
+        },
+        {
+          name: 'b',
+          age: 11
+        }
+      ],
+      tableTitles: [
+        { label: 'Name', prop: 'name' },
+        { label: 'Age', prop: 'age' }
+      ],
+      mergeRequestData0: null,
+      mergeRequestData1: null,
+      mergeRequestChildData0: null,
+      mergeRequestChildData1: null
+    }
+  },
+  methods: {
+    click () {
+      this.count++
+    },
+    async getObj () {
+      axios.get('/api/getObjId').then(response => {
+        this.obj.id = response.data
+      })
+      axios.get('/api/getObjTitle').then(response => {
+        this.obj.title = response.data
+      })
+    },
+    async getCount () {
+      axios.get('/api/getCount').then(response => {
+        this.count = response.data
+      })
+    },
+    async differentRequestParam () {
+      axios.get('/api/differentParam', { params: { name: 0 } }).then(response => {
+        this.differentParamData0 = response.data
+      })
+      axios.get('/api/differentParam', { params: { name: 1 } }).then(response => {
+        this.differentParamData1 = response.data
+      })
+    },
+    /**
+     * 同一url，不同入参的axios请求内包含多个不同url请求的demo
+     * @returns {Promise<void>}
+     */
+    async mergeRequest () {
+      axios.get('/api/differentParam', { params: { name: 0 } }).then(response => {
+        this.mergeRequestData0 = response.data
+      })
+      axios.get('/api/differentParam', { params: { name: 1 } }).then(response => {
+        this.mergeRequestData1 = response.data
+        axios.get('/api/getChildId').then(response1 => {
+          this.mergeRequestChildData0 = response1.data
+        })
+        axios.get('/api/getChildTitle').then(response2 => {
+          this.mergeRequestChildData1 = response2.data
+        })
+      })
+    },
+    async setIndexedDBValue () {
+      await indexedDBUtils.selectTable('test').put({ id: 1, name: 'test' })
+    },
+    async getIndexedDBValue () {
+      this.indexedDBValue = await indexedDBUtils.selectTable('test').get(1)
+    }
+  },
+  setup () {
+    const { query } = useRoute()
+    const { currentRoute } = useRouter()
+    const localstorageValue = localStorage.getItem('key')
+    const lineTab = ref(query.lineTab || '')
+    const path = currentRoute.value.path
+    return {
+      lineTab,
+      path,
+      localstorageValue
+    }
+  }
+}
+</script>

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;
+}

src/assets/css/common/right-box-common.scss

@@ -1,9 +1,10 @@
-.el-drawer.rtl {
-  width: 700px !important;
-}
+.common-right-box {
+  height: 100%;
+
   .el-drawer__body {
     height: 100%;
   }
+
   .right-box, .right-sub-box {
     display: flex;
     flex-direction: column;
@@ -300,3 +301,4 @@
   .el-form-item__content .el-autocomplete .el-input-group {
     vertical-align: unset;
   }
+}

src/assets/css/common/table-common.scss

@@ -14,9 +14,8 @@
     z-index: 0;
   }
   .main-container {
-    padding: 10px;
+    padding: 0;
     height: 100%;
-    background-color: #f6f6f6;
     &>div {
       background-color: white;
     }
@@ -36,7 +35,7 @@
     align-items : center;
     position: relative;
     justify-content: space-between;
-    padding: 14px 20px;
+    padding: 12px 20px;
 
     &.top-tools--sub {
       align-items: center;
@@ -50,6 +49,12 @@
      .top-tool-btn {
        border-left: none;
      }
+     .top-tool-btn--search:hover {
+       border-left: none !important;
+     }
+     .top-tool-btn--search:focus {
+       border-left: none !important;
+     }
     }
 
     .top-tool-right {
@@ -74,17 +79,28 @@
     }
     .top-tool-btn {
       cursor: pointer;
-      height: 33px;
-      width: 36px;
+      height: 28px;
+      width: 72px;
       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: NotoSansHans-Medium !important;
       i {
         font-size: 14px;
-        color: $--button-gray-color;
+        color: #575757;
+        margin-right:4px;
+      }
+    }
+
+    .top-tool-btn:disabled {
+      cursor: not-allowed;
+      opacity: 0.66;
+      i {
+
       }
     }
 
@@ -94,13 +110,14 @@
       color: #666;
     }
     .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-hover-background-color;
-      border: 1px solid $--color-primary !important;
+      background-color: $--button-gray-active-background-color;
+      border: 1px solid $--border-color-primary;
       i {
-        color: $--button-gray-active-color;
+        color: #575757;
       }
     }
     .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
@@ -111,6 +128,56 @@
         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;
+      }
+    }
+
+    .btn-customize {
+      color:$blue;
+      font-size: 12px;
+      .icon-gear{
+        color:#2C72C6;
+        width:12px;
+        height:12px;
+        margin-right:2px;
+        font-size:12px;
+      }
+    }
+
+    .btn-customize:hover {
+      cursor:pointer;
+    }
+
     .top-tool-btn--dropdown {
       position: relative;
       width: auto;
@@ -130,6 +197,7 @@
       width: calc(100% - 40px);
       border: 1px solid $--right-box-border-color;
       border-bottom: none;
+      border-radius:4px;
 
       .caret-wrapper {
         height: 23px;
@@ -152,7 +220,8 @@
       th {
         border-color: $--right-box-border-color;
         padding: 8px 0;
-        background: #F9F9F9;
+        background: #FFF;
+        border-right:0px;
       }
       .el-table__header th:first-of-type {
         border-left: none;
@@ -244,7 +313,7 @@
       border-right: none !important;
     }
     /* 最后一列用box-shadow模拟边框 */
-    .el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
+    /*.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
       box-shadow: 1px 0 $--right-box-border-color;
     }
     .el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
@@ -263,7 +332,7 @@
       th:last-of-type {
         border-right: none !important;
       }
-    }
+    }*/
     .el-table--border:not(.chart-table)::after, .el-table--group:not(.chart-table)::after {
       width: 0;
     }

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;

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;
         }

src/assets/css/components/components/advancedSearch/codemirror.scss

@@ -2,7 +2,6 @@
 
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
-  font-family: monospace;
   height: 40px;
   color: black;
   direction: ltr;

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;
 
@@ -199,4 +199,16 @@
       text-align: right;
     }
   }
+
+  .el-input__inner {
+    visibility: hidden !important;
+  }
+}
+
+.my-date-picker {
+  .el-popper__arrow {
+    position: absolute;
+    top: 20px !important;
+    left: 642px !important; // element上样式设定是left，添加right不生效
+  }
 }

src/assets/css/components/components/common/chart-tab.scss

@@ -0,0 +1,64 @@
+.chart-tabs {
+  position: relative;
+
+  .chart-tabs__active-bar {
+    position: absolute;
+    height: 3px;
+    top: 0;
+    background-color: #046EC9;
+    border-radius: 5px 5px 0 0;
+    transition: all linear .2s;
+  }
+  .el-tabs.el-tabs--border-card {
+    position: absolute;
+    top: 3px;
+    width: 100%;
+    border: none;
+    box-shadow: none;
+
+    &>.el-tabs__header {
+      background-color: white;
+      border-color: #E2E5EC;
+
+      .el-tabs__nav-wrap {
+        padding-left: 27px;
+      }
+      .el-tabs__item:first-child {
+        margin-left: 0;
+      }
+    }
+    .el-tabs__content {
+      display: none;
+    }
+  }
+  .el-tabs__nav {
+    z-index: 1;
+  }
+
+  .el-tabs__item.is-top {
+    height: 35px;
+    line-height: 35px;
+
+    .chart-tabs__label {
+      color: #353636;
+      font-size: 14px;
+      font-weight: bold;
+      box-sizing: border-box;
+
+      i {
+        padding-right: 7px;
+        font-size: 16px;
+        font-weight: normal;
+      }
+    }
+    &.is-active {
+      .chart-tabs__label {
+        color: #353636;
+
+        i {
+          color: #046EC9;
+        }
+      }
+    }
+  }
+}

src/assets/css/components/components/layout/layout.scss

@@ -144,7 +144,6 @@
                 text-align: -webkit-match-parent;
                 box-sizing: border-box;
                 cursor: pointer;
-                font-family: Helvetica;
                 font-size: 12px;
                 font-weight: 400;
               }

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;
@@ -11,7 +11,9 @@
   z-index: 999999;
   box-shadow: 0 0 10px #CCC;
   box-sizing: border-box;
-
+  .pop-title {
+    margin: 10px 0;
+  }
   .el-button--mini{
     padding: 5px 7px;
   }
@@ -23,7 +25,6 @@
   top: 33px;
 }
 .custom-labels {
-  margin-top: 12px;
   width: 100%;
   height: 300px;
 }
@@ -41,8 +42,7 @@
   font-size: 14px;
 }
 .custom-label:hover{
-  color: #cccccc;
-  background-color: #DCDFE6;
+  background-color: rgba(220, 223, 230, .5)
 }
 .custom-title{
   padding: 2px 0 2px 2px;
@@ -57,6 +57,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  .custom-bottom-btns-right {
+    .el-button:nth-of-type(1) {
+      margin-right: 3px;
+    }
+    .el-button .top-tool-btn-save {
+      color: #fff;
+    }
+  }
 }
 .unshow {
   display: none;
@@ -70,12 +78,79 @@
   border-radius: 2px;
   background-color: #F9F9F9;
   transition: background-color linear .1s;
+  padding-left:10px;
+}
+
+
+.list-page .top-tools .top-tool-btn--search{
+  width:28px !important;
+  height:28px !important;
+  padding:unset !important;
+  i {
+    font-size: 14px;
+    color: #575757;
+    margin-right:unset !important;
+  }
 }
 
 .list-page {
+  .el-input--small{
+    width: 214px !important;
+    line-height: 27px;
+  }
   .el-input--small .el-input__inner {
-    height: 32.4px;
-    line-height: 32px;
-    border-radius: 0px;
+    height: 28px;
+    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;
+    }
   }
 }

src/assets/css/components/index.scss

@@ -6,9 +6,9 @@
 @import './components/common/pagination';
 // @import './components/entities/entities';
 @import './components/layout/layout';
-@import 'components/rightBox/settings/chart-box';
+@import 'components/rightBox/administration/chart-box';
 @import 'components/setting/galaxy-proxy-debug';
-@import 'components/table/settings/galaxy-proxy-table';
+@import 'components/table/administration/galaxy-proxy-table';
 @import './components/table/common';
 @import './views/charts/chart';
 @import 'views/entityExplorer/entity-explorer';
@@ -42,8 +42,8 @@
 @import './views/chartHeader';
 @import './views/charts/chartMap';
 @import 'views/charts/chartRelationShipList';
-@import './views/report/builtinReport';
-@import './components/rightBox/report/builtinReportBox';
+@import 'views/report/report';
+@import 'components/rightBox/report/reportBox';
 
 @import './views/charts2/panel';
 @import './views/charts2/networkOverviewLine';
@@ -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';
@@ -73,3 +75,16 @@
 @import './views/charts2/dnsEventChartByPie';
 //@import '../chart';
 @import './components/common/chart-error';
+@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";

src/assets/css/components/views/administration/AdministrationTabs.scss

@@ -0,0 +1,17 @@
+.administration {
+  .administration-tabs {
+    height: 18px;
+  }
+  .administration-container {
+    height: calc(100% - 26px);
+    flex-direction: column;
+    .list-page {
+      .main-container {
+        padding: 0px;
+        .cn-pagination {
+          height: 34px;
+        }
+      }
+    }
+  }
+}

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;
+    }
+  }
+}

src/assets/css/components/views/chartHeader.scss

@@ -68,7 +68,6 @@
             display: flex;
             justify-content: space-around;
             align-items: center;
-            font-family: Roboto-Regular;
             font-size: 12px;
             font-weight: 400;
         }

src/assets/css/components/views/charts/chartAlarmInfo.scss

@@ -50,7 +50,6 @@
                     .text-box__title {
                         font-size: 16px;
                         line-height: 19px;
-                        font-family: Roboto-Regular;
                         color: #333333;
                         font-weight: 400;
                         div {
@@ -86,7 +85,6 @@
                             }
 
                             .time-box__start-time {
-                                font-family: PingFangSC-Regular;
                                 font-size: 12px;
                                 color: #999999;
                                 line-height: 14px;
@@ -109,7 +107,6 @@
                             }
 
                             .time-box__start-time {
-                                font-family: PingFangSC-Regular;
                                 font-size: 12px;
                                 color: #999999;
                                 font-weight: 400;
@@ -118,7 +115,6 @@
 
                         .text__type {
                             width: auto;
-                            font-family: Roboto-Regular;
                             line-height: 16px;
                             font-size: 12px;
                             border: 1px solid;
@@ -138,7 +134,6 @@
                             width: 5px;
                             height: 5px;
                             border-radius: 50%;
-                            font-family: Roboto-Black;
                             font-size: 12px;
                             color: #666666;
                             line-height: 17px;

src/assets/css/components/views/charts/chartSingleValue.scss

@@ -306,7 +306,6 @@
         display: flex;
         align-items: center;
         margin: 16px 0 27px 0;
-        font-family: PingFangSC-Medium;
         font-size: 16px;
         color: #333333;
         line-height: 22px;
@@ -324,7 +323,6 @@
 
         .content__data__doh {
           .content__data__doh__count {
-            font-family: Roboto-Medium;
             font-size: 30px;
             color: #333333;
             font-weight: 500;
@@ -332,13 +330,11 @@
 
           .content__data__doh__percent {
             margin-top: 10px;
-            font-family: Roboto-Black;
             font-size: 14px;
             color: #666666;
             font-weight: 400;
 
             span {
-              font-family: Roboto-Medium;
               font-size: 14px;
               color: #FC8157;
               font-weight: 500;

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;
+      }
+    }
+  }
+}

src/assets/css/components/views/charts2/dnsActiveMaliciousDomain.scss

@@ -7,7 +7,6 @@
   flex-direction: column;
 
   .dns-mailcious-domain-title {
-    font-family: NotoSansHans-Medium;
     font-size: 14px;
     color: #353636;
     margin-bottom: 12px;

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;
+      }
+    }
+  }
+}

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;
+        }
+      }
+    }
+  }
+}

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;
+    }
+  }
+}

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;
+  }
+}

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;
+}

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;
+}

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;
+}

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;

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;
         }

src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss

@@ -39,6 +39,9 @@
           font-weight: 400;
           margin-bottom: 12px;
         }
+        .ddos-detection-type-value-number.ddos-event {
+          color: #E48F3E;
+        }
         .ddos-detection-type-value-number {
           font-size: 18px;
           color: #E26154;

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;
@@ -98,11 +99,11 @@
         //top: 0;
         //left: 0;
         display: flex;
-        .line-value-mpackets.mousemove-cursor {
+        .line-value-tabs.mousemove-cursor {
           border-top: 4px solid #D3D0D8;
           z-index: 0;
         }
-        .line-value-mpackets {
+        .line-value-tabs {
           cursor: pointer;
           padding: 16px 0 0 20px;
           border-top: 4px solid transparent;
@@ -122,10 +123,10 @@
               }
             }
           }
-          .line-value-mpackets-name {
+          .line-value-tabs-name {
             position: relative;
             display: flex;
-            .mpackets-name {
+            .tabs-name {
               flex: 1;
               padding-left: 19px;
             }

src/assets/css/components/views/charts2/networkOverviewTabs.scss

@@ -113,6 +113,18 @@
       .el-table thead {
         color: $grey;
       }
+      .el-table__empty-text{
+        line-height:20px !important;
+      }
+      .el-table__header th .cell {
+        display:flex;
+        flex-direction:row;
+        justify-content: center;
+        align-items: center;
+      }
+      .el-table__header tr th:nth-of-type(1) .cell {
+        justify-content: flex-start;
+      }
       .score-cell {
         display: flex !important;
         justify-content: center;

src/assets/css/components/views/charts2/npmAppCategoryScore.scss

@@ -130,6 +130,10 @@
     .data-score.data-score-green {
       background: #749F4D;
     }
+    .data-score-no-data {
+      width: 34px;
+      text-align: center;
+    }
   }
   .data-total-value {
     display: flex;

src/assets/css/components/views/charts2/npmAppEventTable.scss

@@ -114,6 +114,6 @@
     position: absolute;
     width: 100%;
     left: 0;
-    top: 68px;
+    top: 32px;
   }
 }

src/assets/css/components/views/charts2/npmRecentEvents.scss

@@ -86,6 +86,9 @@
       color: #046ECA;
       font-weight: 400
     }
+    .click-active {
+      cursor: pointer;
+    }
     .data-recent-table-eventType {
       font-size: 12px;
       color: #046ECA;

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;

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;
@@ -116,7 +119,6 @@
           margin-right: 12px;
         }
         .detection-event-severity-block {
-          font-family: NotoSansHans-Medium;
           font-size: 12px;
           color: #046EC9;
           font-weight: 500;
@@ -144,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;
               }

src/assets/css/components/views/detections/detection-overview.scss

@@ -220,5 +220,12 @@
   justify-content: center;
   align-items: center;
   padding: 0 4px;
-  color: white;
+  //color: white;
+}
+
+.performance-event-remark {
+  font-family: NotoSansSChineseRegular;
+  font-size: 12px;
+  color: #353636;
+  font-weight: 400;
 }

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%;

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 @@
     }
   }
 }
+*/

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;
@@ -57,7 +61,6 @@
     color: #353636;
   }
   .explorer-top-tools-block {
-    font-family: NotoSansHans-Medium;
     height: 28px;
     line-height: 28px;
     background: #F5F8FA;
@@ -65,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;
@@ -78,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;*/
@@ -107,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;
@@ -131,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;
@@ -158,7 +170,7 @@
             font-weight: bold;
           }
           i {
-            padding-right: 10px;
+            padding-right: 4px;
             font-size: 18px;
           }
           .cn-icon-increase {

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;
+      background: #F7F7F7;
+      box-shadow: 0 1px 0 0 rgba(226,229,236,1);
+      border-radius: 4px 4px 0 0;
     }
-  .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;
+    margin: 0 20px;
     font-size: 14px;
-      color: #333;
-    }
-    .filter__body {
-      padding: 11px 0 21px 0;
-      .filter__row {
-        padding: 0 15px;
-        align-items: center;
-        cursor: pointer;
-        transition: all linear .2s;
-        .filter__row-popover {
-          display: flex;
-          line-height: 26px;
+    color: #353636;
+    font-weight: 500;
   }
 
-        &:hover, &.filter__row--active {
-          background-color: #F3F7FA;
+  .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;
     }
-        .row__label {
-          font-size: 14px;
-          flex: 8;
+
+    .filter__body-item {
+      height: 26px;
+      line-height: 26px;
       display: flex;
-          i {
-            color: #8FA1BE;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+
+      .filter__body-item-left {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: #353636;
+        font-weight: 400;
+
+        .filter-country-flag {
+          width: 18px;
+          height: 12px;
         }
-          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 {
+          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;
         }
       }
-  .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);
-        }
+
+      .filter__body-item-right {
+        flex-shrink: 0;
+        font-family: NotoSansSChineseRegular;
+        font-size: 12px;
+        color: #717171;
+        font-weight: 400;
       }
     }
   }

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 {
 

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;
@@ -87,7 +88,7 @@
           padding-right: 20px;
 
           &.row__label--width130 {
-            flex-basis: 130px;
+            flex-basis: 140px;
             padding-right: unset;
           }
           &.row__label--width160 {
@@ -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;
+}

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;

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,22 +159,44 @@
               span:last-of-type {
                 color: #666;
               }
+            }
 
+            .row-item-label {
+              font-family: NotoSansSChineseRegular;
+              font-size: 14px;
+              color: #717171;
+              font-weight: 400;
+            }
 
+            .row-item-value {
+              font-family: NotoSansSChineseRegular;
+              font-size: 14px;
+              color: #353636;
+              font-weight: 400;
+            }
+          }
+        }
       }
     }
 
-          .show-detail {
+    .new-show-detail {
       flex-shrink: 0;
       padding: 0 30px;
       font-size: 12px;
-            color: #3976CB;
+      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;
       }
     }
 

src/assets/css/components/views/report/report.scss

@@ -1,21 +1,22 @@
-.cn-builtin {
+.cn-report {
   background: #fff;
   margin: 10px;
   height: calc(100% - 20px) !important;
   display: flex;
   flex-direction: row;
-  .cn-builtin-left {
+  .cn-report-left {
     width: 288px;
     height: 100%;
     border-right: 1px solid  #E7EAED;
     position: relative;
-    .cn-builtin-left-title {
+    overflow: auto;
+    .cn-report-left-title {
       padding: 28px 0 26px 13px;
       font-size: 16px;
       color: #333333;
       letter-spacing: 0;
     }
-    .cn-builtin-left-menu {
+    .cn-report-left-menu {
       width: 250px;
       word-break: normal;
       margin: auto;
@@ -25,13 +26,13 @@
       padding: 14px;
       cursor: pointer;
     }
-    .cn-builtin-left-menu.cn-active {
+    .cn-report-left-menu.cn-active {
       background: #F4FAFF;
       border-radius: 2px;
       color: #0091FF;
     }
   }
-  .cn-builtin-right {
+  .cn-report-right {
     flex: 1;
     .list-page .main-container {
       padding: 0;
@@ -73,7 +74,7 @@
             height: 100%;
             width: calc(100% - 32px);
             background: #fff; //盖住fixed产生的阴影
-            ::v-deep .is-leaf {
+            :deep .is-leaf {
               color: #1b2e3b;
               background: #ebeef5;
             }
@@ -139,6 +140,12 @@
                   color: #666666;
                   font-weight: 400;
                   margin-bottom: 4px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  i {
+                    padding: 2px 3px 0 0;
+                  }
                 }
                 .expand-time {
                   font-size: 12px;

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1668593055875') format('woff2'),
-       url('iconfont.woff?t=1668593055875') format('woff'),
-       url('iconfont.ttf?t=1668593055875') 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,242 @@
   -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";
+}
+
+.cn-icon-chart:before {
+  content: "\e7b8";
+}
+
+.cn-icon-user2:before {
+  content: "\e7b9";
+}
+
+.cn-icon-operation-log:before {
+  content: "\e7ba";
+}
+
+.cn-icon-role2:before {
+  content: "\e7bb";
+}
+
+.cn-icon-proxy:before {
+  content: "\e7bc";
+}
+
+.cn-icon-i18n:before {
+  content: "\e7bd";
+}
+
 .cn-icon-baocuo:before {
   content: "\e7b7";
 }

src/assets/css/themes/theme-dark.scss

@@ -31,12 +31,12 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色
 $--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
 $--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
 
-$--button-gray-color: #666; // 灰色按钮字色
+$--button-gray-color: #353636; // 灰色按钮字色
 $--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
 $--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
 $--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
-$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
-$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
+$--button-gray-hover-background-color: #EBF1F4; // 灰色按钮hover背景色
+$--button-gray-active-background-color: #E0E7EA; // 灰色按钮focus背景色
 $--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
 $--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
 $--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度

src/assets/css/themes/theme-light.scss

@@ -2,10 +2,10 @@
 
 /** 重写element-ui变量 **/
 
-$--color-primary: #0091ff; // 主题色
-$--color-primary-dark-10: darken(#0091ff, 10%); // 默认主题色 深10%
-$--color-primary-light-10: lighten(#0091ff, 10%); // 默认主题色 浅10%
-$--color-primary-light-20: lighten(#0091ff, 20%); // 默认主题色 浅20%
+$--color-primary: #699DC9; // 主题色
+$--color-primary-dark-10: darken(#699DC9, 10%); // 默认主题色 深10%
+$--color-primary-light-10: lighten(#699DC9, 10%); // 默认主题色 浅10%
+$--color-primary-light-20: lighten(#699DC9, 20%); // 默认主题色 浅20%
 
 /* menu相关 */
 $--menu-background-color: #00162B; // menu背景色
@@ -31,12 +31,12 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色
 $--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
 $--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
 
-$--button-gray-color: #666; // 灰色按钮字色
+$--button-gray-color: #353636; // 灰色按钮字色
 $--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
 $--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
 $--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
-$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
-$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
+$--button-gray-hover-background-color: #EBF1F4; // 灰色按钮hover背景色
+$--button-gray-active-background-color: #E0E7EA; // 灰色按钮focus背景色
 $--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
 $--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
 $--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度

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>

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>

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>

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>

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>

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>

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>

src/components/advancedSearch/Index.vue

@@ -60,6 +60,7 @@ export default {
     // 连接符列表
     connectionList: Array
   },
+  emits: ['search'],
   methods: {
     search (parseData) {
       this.$emit('search', parseData)
@@ -114,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
         }
       }

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: {
@@ -104,6 +116,7 @@ export default {
       metaList: []
     }
   },
+  emits: ['changeMode', 'search'],
   methods: {
     // 新增条件
     addCondition (meta) {
@@ -130,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，所以是数组
+          }
         })
       }
     },
@@ -148,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) {
@@ -159,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
@@ -180,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) {
@@ -219,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) {
@@ -244,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
@@ -263,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
@@ -275,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 () {
@@ -307,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)) {
@@ -323,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)
@@ -346,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
@@ -365,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)
@@ -377,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()
     })
@@ -398,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>

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>
@@ -23,7 +35,8 @@ import CodeMirror from 'codemirror'
 import { toRaw } from 'vue'
 import _ from 'lodash'
 import { columnType } from '@/components/advancedSearch/meta/meta'
-import {handleErrorTip} from "@/components/advancedSearch/meta/error";
+import { handleErrorTip } from '@/components/advancedSearch/meta/error'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
 
 export default {
   name: 'TextMode',
@@ -36,7 +49,14 @@ export default {
       codeMirror: null
     }
   },
+  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: {
@@ -73,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: [] })
       }
     },
@@ -98,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())
@@ -106,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]
@@ -119,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: {
@@ -142,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()
@@ -150,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>

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
     }

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} `
           }
         }
       }
@@ -233,6 +233,7 @@ export default class Parser {
           break
         }
       } else if (s === ' ') {
+        // 预留
       } else if (s === '(') {
         token = new Token(types.leftBracket, s)
         token.setStart(i)
@@ -565,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
@@ -578,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
                   }
@@ -603,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
@@ -630,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 {
@@ -706,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
@@ -750,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}'`
 }

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}'`
 }

src/components/common/ChartTabs.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="chart-tabs administration-tabs">
+    <div class="chart-tabs__active-bar" :style="{'background-color': color}"></div>
+    <el-tabs v-model="currentTab" ref="elTabs" type="border-card" @tab-click="handleClick">
+      <el-tab-pane
+          v-for="(tab,index) in tabsData"
+          :key="tab.i18n"
+          :name="JSON.stringify(index)"
+          :disabled="tab.disable">
+        <template #label>
+          <div class="chart-tabs__label">
+            <i :class="tab.icon"></i>
+            <span>{{ $t(tab.i18n || tab.name) }}</span>
+          </div>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<!--  start----------------调用方式----------------start  -->
+<!--
+   组件名：<chart-tabs></chart-tabs>
+   目前有两种形式，分别是default、router
+   默认default，非路由切换：<chart-tabs :data="tabsData" />
+   路由模式router，点击tab路由切换：<chart-tabs :data="tabsData" router />
+   数据格式：
+   tabsData: [
+      {
+        i18n: 'entities.securityEvents',
+        path: '/detection/securityEvent',
+        icon: 'cn-icon cn-icon-a-SecurityEvent'
+      }
+  ]
+  需要禁用，则对应对象里添加 disable: true
+ -->
+<!--
+  active颜色：<chart-tabs :data="tabsData" color="red" />
+-->
+<!--
+  接收回调：@click
+-->
+<!--  end----------------调用方式----------------end  -->
+<script>
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+
+export default {
+  name: 'ChartTabs',
+  props: {
+    data: {
+      type: Array
+    },
+    router: {
+      type: String,
+      default: 'noRouter'
+    },
+    color: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      leftOffset: 27,
+      timer: null
+    }
+  },
+  setup (props) {
+    const tabsData = ref([])
+    const router = useRouter()
+    const store = useStore()
+    const routerPath = router.currentRoute.value.path
+    const tabList = store.getters.getChartTabList
+    let currentTab = '0'
+
+    if (props.data) {
+      tabsData.value = [...props.data]
+      tabsData.value.forEach(item => {
+        if (!item.disable) {
+          item.disable = false
+        }
+      })
+
+      // 非路由跳转，获取tabIndex定位
+      // 路由跳转，根据路由名对比传入数据，获取index从而定位
+      // 路由模式为了切换有过渡，需要设置上次tab和当前tab
+      if (props.router === 'noRouter') {
+        const { query } = useRoute()
+        const tabIndexParam = query.tabIndex
+        currentTab = ref(tabIndexParam ? JSON.stringify(tabIndexParam) : '0')
+      } else if (!tabList) {
+        // 此处为刷新界面时，根据当前路由获取index
+        currentTab = tabsData.value.findIndex(item => {
+          return item.path === routerPath
+        })
+        currentTab = JSON.stringify(currentTab)
+        store.dispatch('dispatchChartTabList', [{ path: routerPath, index: currentTab }])
+      } else {
+        // 此处为切换界面，如果window里保存的路径和tabsData里的路径一致，选择window数据并使用
+        // 两个不一致的话，则默认选择tabsData里的第一条
+        let obj0 = null
+        let obj1 = null
+        obj0 = tabsData.value.find(item => { return item.path === tabList[0].path })
+
+        if (tabList[1]) {
+          obj1 = tabsData.value.find(item => { return item.path === tabList[1].path })
+        }
+
+        if (obj0 && obj1) {
+          currentTab = tabList[1].index
+          // 场景：从遮罩面板进入界面时，重置状态，默认选中第一个tab
+          if (routerPath === tabList[0].path) {
+            currentTab = tabList[0].index
+            store.dispatch('dispatchChartTabList', [{ path: tabsData.value[0].path, index: '0' }])
+          }
+        } else if (obj0) {
+          currentTab = tabList[0].index
+        } else {
+          store.dispatch('dispatchChartTabList', [{ path: tabsData.value[0].path, index: '0' }])
+          currentTab = '0'
+        }
+      }
+    }
+
+    return {
+      currentTab,
+      tabsData
+    }
+  },
+  mounted () {
+    const time = this.router === 'noRouter' ? 900 : 0
+    this.timer = setTimeout(() => {
+      this.$nextTick(() => {
+        this.init()
+      })
+    }, time)
+  },
+  watch: {
+    currentTab (n) {
+      if (this.router === 'noRouter') {
+        const { query } = this.$route
+        const newUrl = urlParamsHandler(window.location.href, query, {
+          tabIndex: n
+        })
+        overwriteUrl(newUrl)
+      }
+
+      this.$nextTick(() => {
+        this.handleActiveBar(n)
+      })
+    }
+  },
+  methods: {
+    init () {
+      // 添加禁用小手
+      this.tabsData.forEach((item, index) => {
+        if (item.disable) {
+          const tabEle = document.getElementById('tab-' + index)
+          if (tabEle) {
+            tabEle.style.cssText = 'cursor: not-allowed;'
+          }
+        }
+      })
+      const tabList = this.$store.getters.getChartTabList
+
+      if (tabList && this.router !== 'noRouter') {
+        tabList.forEach((item) => {
+          this.$nextTick(() => {
+            this.handleActiveBar(parseFloat(item.index))
+          })
+        })
+      } else {
+        this.$nextTick(() => {
+          this.handleActiveBar(this.currentTab)
+        })
+        this.$store.dispatch('dispatchChartTabList', null)
+      }
+    },
+    handleActiveBar (index) {
+      const activeDom = document.getElementsByClassName('el-tabs__item is-top is-active')
+      const tabDom = document.getElementById('tab-' + index)
+
+      if (tabDom && activeDom) {
+        this.$nextTick(() => {
+          const offsetLeft = tabDom.offsetLeft
+          const clientWidth = tabDom.clientWidth
+          const clientLeft = tabDom.clientLeft
+          const activeBar = document.querySelector('.chart-tabs .chart-tabs__active-bar')
+
+          if (this.router === 'noRouter') {
+            activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + this.leftOffset + clientLeft - 1}px;`
+          } else {
+            // 数组长度为1，即代表刚刷新界面，获取active的dom添加样式，避免原模式错位问题
+            // 可添加css样式，也可添加class类名，两个操作选一即可
+            if (this.$store.getters.getChartTabList.length === 1) {
+              // 此处操作是因为初始化时给active加border，导致tab下移，故需要将整体往上移动对应高度
+              const topDom = document.getElementsByClassName('el-tabs__header is-top')
+              topDom[0].style.cssText += 'top: -3px'
+              activeDom[0].style.cssText += 'height: calc(100% - 1px);border-top: 4px #046EC9 solid;border-radius: 5px 5px 0 0;transition: all linear .2s;'
+            } else {
+              activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + this.leftOffset + clientLeft - 1}px;`
+              activeDom[0].style.cssText += 'height:calc(100% + 1px)'
+            }
+          }
+        })
+      }
+    },
+    handleClick (item) {
+      this.$emit('click', item)
+      const tabList = this.$store.getters.getChartTabList
+
+      if (this.router === 'noRouter') {
+        const { query } = this.$route
+        const newUrl = urlParamsHandler(window.location.href, query, {
+          t: +new Date(),
+          tabIndex: item.index
+        })
+        overwriteUrl(newUrl)
+      } else {
+        tabList.push({
+          path: this.tabsData[item.index].path,
+          index: item.index
+        })
+
+        if (tabList.length > 2) {
+          tabList.splice(0, 1)
+        }
+        this.$store.dispatch('dispatchChartTabList', tabList)
+
+        this.$router.push({
+          path: this.tabsData[item.index].path,
+          query: {
+            t: +new Date()
+          }
+        })
+      }
+    }
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
+    const path = this.$router.currentRoute.value.path
+    const list = this.$store.getters.getChartTabList
+    if (list && this.router !== 'noRouter') {
+      if (list[1]) {
+        // 去其他界面，清除状态
+        if (path !== list[0].path && path !== list[1].path) {
+          this.$store.dispatch('dispatchChartTabList', null)
+        }
+      } else if (path !== list[0].path) {
+        // 避免刷新页面之后又点击菜单栏进入该界面，还保留上次点击状态
+        this.$store.dispatch('dispatchChartTabList', null)
+      }
+    }
+  }
+}
+</script>

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 () {
@@ -141,7 +148,6 @@ export default {
     hoverError (e) {
       // const dom = document.getElementById('error-content')
       // if (dom) {
-      //   console.log('---', dom.clientHeight)
       // }
     }
   }

src/components/common/MyDatePicker/index.d.ts

@@ -1,4 +0,0 @@
-import DatePicker from './src/date-picker';
-import type { SFCWithInstall } from 'element-plus/lib/utils/types';
-declare const _DatePicker: SFCWithInstall<typeof DatePicker>;
-export default _DatePicker;

src/components/common/MyDatePicker/src/date-picker-com/basic-date-table.vue.d.ts

@@ -1,61 +0,0 @@
-import { PropType } from 'vue';
-import dayjs from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    date: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    minDate: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    maxDate: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    parsedValue: {
-        type: PropType<dayjs.Dayjs | dayjs.Dayjs[]>;
-    };
-    selectionMode: {
-        type: StringConstructor;
-        default: string;
-    };
-    showWeekNumber: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabledDate: {
-        type: FunctionConstructor;
-    };
-    cellClassName: {
-        type: FunctionConstructor;
-    };
-    rangeState: {
-        type: ObjectConstructor;
-        default: () => {
-            endDate: any;
-            selecting: boolean;
-        };
-    };
-}, {
-    handleMouseMove: (event: any) => void;
-    t: (...args: any[]) => string;
-    rows: import("vue").ComputedRef<any[][]>;
-    isWeekActive: (cell: any) => any;
-    getCellClasses: (cell: any) => string;
-    WEEKS: import("vue").ComputedRef<any>;
-    handleClick: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changerange" | "pick" | "select")[], "changerange" | "pick" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    selectionMode: unknown;
-    showWeekNumber: boolean;
-    rangeState: Record<string, any>;
-} & {
-    date?: unknown;
-    minDate?: unknown;
-    maxDate?: unknown;
-    parsedValue?: unknown;
-    disabledDate?: unknown;
-    cellClassName?: unknown;
-}>, {
-    selectionMode: unknown;
-    showWeekNumber: boolean;
-    rangeState: Record<string, any>;
-}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker-com/basic-month-table.vue.d.ts

@@ -1,50 +0,0 @@
-import dayjs from 'dayjs';
-import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
-    disabledDate: {
-        type: PropType<(_: Date) => void>;
-    };
-    selectionMode: {
-        type: StringConstructor;
-        default: string;
-    };
-    minDate: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    maxDate: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    date: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    parsedValue: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    rangeState: {
-        type: ObjectConstructor;
-        default: () => {
-            endDate: any;
-            selecting: boolean;
-        };
-    };
-}, {
-    handleMouseMove: (event: any) => void;
-    handleMonthTableClick: (event: any) => void;
-    rows: import("vue").ComputedRef<any[][]>;
-    getCellStyle: (cell: any) => any;
-    t: (...args: any[]) => string;
-    months: any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changerange" | "pick" | "select")[], "changerange" | "pick" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    selectionMode: unknown;
-    rangeState: Record<string, any>;
-} & {
-    disabledDate?: unknown;
-    minDate?: unknown;
-    maxDate?: unknown;
-    date?: unknown;
-    parsedValue?: unknown;
-}>, {
-    selectionMode: unknown;
-    rangeState: Record<string, any>;
-}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker-com/basic-year-table.vue.d.ts

@@ -1,22 +0,0 @@
-import { PropType } from 'vue';
-import dayjs from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    disabledDate: {
-        type: PropType<(_: Date) => void>;
-    };
-    parsedValue: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    date: {
-        type: PropType<dayjs.Dayjs>;
-    };
-}, {
-    startYear: import("vue").ComputedRef<number>;
-    getCellStyle: (year: any) => any;
-    handleYearTableClick: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "pick"[], "pick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
-    disabledDate?: unknown;
-    parsedValue?: unknown;
-    date?: unknown;
-}>, {}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker-com/panel-date-pick.vue.d.ts

@@ -1,136 +0,0 @@
-import dayjs, { Dayjs } from 'dayjs';
-import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
-    visible: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    parsedValue: {
-        type: PropType<dayjs.Dayjs | dayjs.Dayjs[]>;
-    };
-    format: {
-        type: StringConstructor;
-        default: string;
-    };
-    type: {
-        type: StringConstructor;
-        required: true;
-    };
-}, {
-    handleTimePick: (value: any, visible: any, first: any) => void;
-    handleTimePickClose: () => void;
-    onTimePickerInputFocus: () => void;
-    timePickerVisible: import("vue").Ref<boolean>;
-    visibleTime: import("vue").ComputedRef<any>;
-    visibleDate: import("vue").ComputedRef<any>;
-    showTime: import("vue").ComputedRef<boolean>;
-    changeToNow: () => void;
-    onConfirm: () => void;
-    footerVisible: import("vue").ComputedRef<boolean>;
-    handleYearPick: (year: any) => void;
-    showMonthPicker: () => void;
-    showYearPicker: () => void;
-    handleMonthPick: (month: any) => void;
-    hasShortcuts: import("vue").ComputedRef<boolean>;
-    shortcuts: any;
-    arrowControl: any;
-    disabledDate: any;
-    cellClassName: any;
-    selectionMode: import("vue").ComputedRef<unknown>;
-    handleShortcutClick: (shortcut: any) => void;
-    prevYear_: () => void;
-    nextYear_: () => void;
-    prevMonth_: () => void;
-    nextMonth_: () => void;
-    innerDate: import("vue").Ref<{
-        clone: () => dayjs.Dayjs;
-        isValid: () => boolean;
-        year: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        month: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        date: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        day: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        hour: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        minute: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        second: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        millisecond: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
-        get: (unit: dayjs.UnitType) => number;
-        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        format: (template?: string) => string;
-        diff: (date: dayjs.ConfigType, unit?: "M" | "week" | "month" | "year" | "day" | "date" | "hour" | "minute" | "second" | "millisecond" | "d" | "y" | "h" | "m" | "s" | "ms" | "w" | "quarter" | "Q", float?: boolean) => number;
-        valueOf: () => number;
-        unix: () => number;
-        daysInMonth: () => number;
-        toDate: () => Date;
-        toJSON: () => string;
-        toISOString: () => string;
-        toString: () => string;
-        utcOffset: () => number;
-        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        locale: {
-            (): string;
-            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
-        };
-        localeData: () => any;
-        week: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        weekYear: () => number;
-        dayOfYear: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-    }>;
-    t: (...args: any[]) => string;
-    yearLabel: import("vue").ComputedRef<string>;
-    currentView: import("vue").Ref<string>;
-    month: import("vue").ComputedRef<number>;
-    handleDatePick: (value: Dayjs) => void;
-    handleVisibleTimeChange: (value: any) => void;
-    handleVisibleDateChange: (value: any) => void;
-    timeFormat: import("vue").ComputedRef<any>;
-    userInputTime: any;
-    userInputDate: any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    visible: boolean;
-    format: unknown;
-    type: unknown;
-} & {
-    parsedValue?: unknown;
-}>, {
-    visible: boolean;
-    format: unknown;
-}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker-com/panel-date-range.vue.d.ts

@@ -1,210 +0,0 @@
-import { PropType } from 'vue';
-import dayjs from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    unlinkPanels: BooleanConstructor;
-    parsedValue: {
-        type: PropType<dayjs.Dayjs[]>;
-    };
-    type: {
-        type: StringConstructor;
-        required: true;
-    };
-}, {
-    shortcuts: any;
-    disabledDate: any;
-    cellClassName: any;
-    minTimePickerVisible: import("vue").Ref<boolean>;
-    maxTimePickerVisible: import("vue").Ref<boolean>;
-    handleMinTimeClose: () => void;
-    handleMaxTimeClose: () => void;
-    handleShortcutClick: (shortcut: any) => void;
-    rangeState: import("vue").Ref<{
-        endDate: any;
-        selecting: boolean;
-    }>;
-    minDate: any;
-    maxDate: any;
-    handleRangePick: (val: any, close?: boolean) => void;
-    onSelect: (selecting: any) => void;
-    handleChangeRange: (val: any) => void;
-    btnDisabled: import("vue").ComputedRef<boolean>;
-    enableYearArrow: import("vue").ComputedRef<boolean>;
-    enableMonthArrow: import("vue").ComputedRef<boolean>;
-    rightPrevMonth: () => void;
-    rightPrevYear: () => void;
-    rightNextMonth: () => void;
-    rightNextYear: () => void;
-    leftPrevMonth: () => void;
-    leftPrevYear: () => void;
-    leftNextMonth: () => void;
-    leftNextYear: () => void;
-    hasShortcuts: import("vue").ComputedRef<boolean>;
-    leftLabel: import("vue").ComputedRef<string>;
-    rightLabel: import("vue").ComputedRef<string>;
-    leftDate: import("vue").Ref<{
-        clone: () => dayjs.Dayjs;
-        isValid: () => boolean;
-        year: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        month: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        date: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        day: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        hour: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        minute: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        second: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        millisecond: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
-        get: (unit: dayjs.UnitType) => number;
-        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        format: (template?: string) => string;
-        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
-        valueOf: () => number;
-        unix: () => number;
-        daysInMonth: () => number;
-        toDate: () => Date;
-        toJSON: () => string;
-        toISOString: () => string;
-        toString: () => string;
-        utcOffset: () => number;
-        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        locale: {
-            (): string;
-            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
-        };
-        localeData: () => any;
-        week: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        weekYear: () => number;
-        dayOfYear: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-    }>;
-    rightDate: import("vue").Ref<{
-        clone: () => dayjs.Dayjs;
-        isValid: () => boolean;
-        year: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        month: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        date: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        day: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        hour: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        minute: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        second: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        millisecond: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
-        get: (unit: dayjs.UnitType) => number;
-        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        format: (template?: string) => string;
-        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
-        valueOf: () => number;
-        unix: () => number;
-        daysInMonth: () => number;
-        toDate: () => Date;
-        toJSON: () => string;
-        toISOString: () => string;
-        toString: () => string;
-        utcOffset: () => number;
-        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        locale: {
-            (): string;
-            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
-        };
-        localeData: () => any;
-        week: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        weekYear: () => number;
-        dayOfYear: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-    }>;
-    showTime: import("vue").ComputedRef<boolean>;
-    t: (...args: any[]) => string;
-    minVisibleDate: import("vue").ComputedRef<any>;
-    maxVisibleDate: import("vue").ComputedRef<any>;
-    minVisibleTime: import("vue").ComputedRef<any>;
-    maxVisibleTime: import("vue").ComputedRef<any>;
-    arrowControl: any;
-    handleDateInput: (value: any, type: any) => void;
-    handleDateChange: (value: any, type: any) => void;
-    handleTimeInput: (value: any, type: any) => void;
-    handleTimeChange: (value: any, type: any) => void;
-    handleMinTimePick: (value: any, visible: any, first: any) => void;
-    handleMaxTimePick: (value: any, visible: any, first: any) => void;
-    handleClear: () => void;
-    handleConfirm: (visible?: boolean) => void;
-    timeFormat: import("vue").ComputedRef<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    unlinkPanels: boolean;
-    type: unknown;
-} & {
-    parsedValue?: unknown;
-}>, {
-    unlinkPanels: boolean;
-}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker-com/panel-month-range.vue.d.ts

@@ -1,179 +0,0 @@
-import dayjs from 'dayjs';
-import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
-    unlinkPanels: BooleanConstructor;
-    parsedValue: {
-        type: PropType<dayjs.Dayjs[]>;
-    };
-}, {
-    shortcuts: any;
-    disabledDate: any;
-    onSelect: (selecting: any) => void;
-    handleRangePick: (val: any, close?: boolean) => void;
-    rangeState: import("vue").Ref<{
-        endDate: any;
-        selecting: boolean;
-    }>;
-    handleChangeRange: (val: any) => void;
-    minDate: any;
-    maxDate: any;
-    enableYearArrow: import("vue").ComputedRef<boolean>;
-    leftLabel: import("vue").ComputedRef<string>;
-    rightLabel: import("vue").ComputedRef<string>;
-    leftNextYear: () => void;
-    leftPrevYear: () => void;
-    rightNextYear: () => void;
-    rightPrevYear: () => void;
-    t: (...args: any[]) => string;
-    leftDate: import("vue").Ref<{
-        clone: () => dayjs.Dayjs;
-        isValid: () => boolean;
-        year: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        month: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        date: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        day: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        hour: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        minute: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        second: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        millisecond: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
-        get: (unit: dayjs.UnitType) => number;
-        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        format: (template?: string) => string;
-        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
-        valueOf: () => number;
-        unix: () => number;
-        daysInMonth: () => number;
-        toDate: () => Date;
-        toJSON: () => string;
-        toISOString: () => string;
-        toString: () => string;
-        utcOffset: () => number;
-        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        locale: {
-            (): string;
-            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
-        };
-        localeData: () => any;
-        week: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        weekYear: () => number;
-        dayOfYear: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-    }>;
-    rightDate: import("vue").Ref<{
-        clone: () => dayjs.Dayjs;
-        isValid: () => boolean;
-        year: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        month: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        date: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        day: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        hour: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        minute: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        second: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        millisecond: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
-        get: (unit: dayjs.UnitType) => number;
-        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        format: (template?: string) => string;
-        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
-        valueOf: () => number;
-        unix: () => number;
-        daysInMonth: () => number;
-        toDate: () => Date;
-        toJSON: () => string;
-        toISOString: () => string;
-        toString: () => string;
-        utcOffset: () => number;
-        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        locale: {
-            (): string;
-            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
-        };
-        localeData: () => any;
-        week: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        weekYear: () => number;
-        dayOfYear: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-    }>;
-    hasShortcuts: import("vue").ComputedRef<boolean>;
-    handleShortcutClick: (shortcut: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    unlinkPanels: boolean;
-} & {
-    parsedValue?: unknown;
-}>, {
-    unlinkPanels: boolean;
-}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker.d.ts

@@ -1,154 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    name: {
-        type: (ArrayConstructor | StringConstructor)[];
-        default: string;
-    };
-    popperClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    format: {
-        type: StringConstructor;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    clearIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    editable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    prefixIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<ComponentSize>;
-        validator: (val: string) => boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    popperOptions: {
-        type: import("vue").PropType<import("@popperjs/core").Options>;
-        default: () => {};
-    };
-    modelValue: {
-        type: import("vue").PropType<string | Date | Date[]>;
-        default: string;
-    };
-    rangeSeparator: {
-        type: StringConstructor;
-        default: string;
-    };
-    startPlaceholder: StringConstructor;
-    endPlaceholder: StringConstructor;
-    defaultValue: {
-        type: import("vue").PropType<Date | Date[]>;
-    };
-    defaultTime: {
-        type: import("vue").PropType<Date | Date[]>;
-    };
-    isRange: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabledHours: {
-        type: FunctionConstructor;
-    };
-    disabledMinutes: {
-        type: FunctionConstructor;
-    };
-    disabledSeconds: {
-        type: FunctionConstructor;
-    };
-    disabledDate: {
-        type: FunctionConstructor;
-    };
-    cellClassName: {
-        type: FunctionConstructor;
-    };
-    shortcuts: {
-        type: ArrayConstructor;
-        default: () => any[];
-    };
-    arrowControl: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    validateEvent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    unlinkPanels: BooleanConstructor;
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    type: unknown;
-    name: unknown;
-    popperClass: unknown;
-    clearable: boolean;
-    clearIcon: unknown;
-    editable: boolean;
-    prefixIcon: unknown;
-    readonly: boolean;
-    disabled: boolean;
-    placeholder: unknown;
-    popperOptions: unknown;
-    modelValue: unknown;
-    rangeSeparator: unknown;
-    isRange: boolean;
-    shortcuts: unknown;
-    arrowControl: boolean;
-    validateEvent: boolean;
-    unlinkPanels: boolean;
-} & {
-    format?: unknown;
-    size?: unknown;
-    startPlaceholder?: unknown;
-    endPlaceholder?: unknown;
-    defaultValue?: unknown;
-    defaultTime?: unknown;
-    disabledHours?: unknown;
-    disabledMinutes?: unknown;
-    disabledSeconds?: unknown;
-    disabledDate?: unknown;
-    cellClassName?: unknown;
-}>, {
-    type: unknown;
-    name: unknown;
-    popperClass: unknown;
-    clearable: boolean;
-    clearIcon: unknown;
-    editable: boolean;
-    prefixIcon: unknown;
-    readonly: boolean;
-    disabled: boolean;
-    placeholder: unknown;
-    popperOptions: unknown;
-    modelValue: unknown;
-    rangeSeparator: unknown;
-    isRange: boolean;
-    shortcuts: unknown;
-    arrowControl: boolean;
-    validateEvent: boolean;
-    unlinkPanels: boolean;
-}>;
-export default _default;