Merge branch 'cherry-pick-53b40851' into 'dev-23.02'

CN-1156 fix: 修复s3=0时无法下载和预览的问题 See merge request cyber-narrator/cn-ui!32
CN-1156 fix: 修复s3=0时无法下载和预览的问题
2023-07-05 03:32:42 +00:00 · 2023-07-05 11:32:36 +08:00 · 2023-03-16 18:56:10 +08:00 · 2023-03-16 10:03:26 +00:00 · 2023-03-16 18:03:19 +08:00 · 2023-03-14 11:42:29 +00:00
218 changed files with 12646 additions and 9300 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,8 @@
 module.exports = {
  env: {
    browser: true,
-    es2021: true
+    es2021: true,
+    jest: true
  },
  extends: [
    'plugin:vue/vue3-essential',
--- a/.gitlab-ci.yml
+++ b/.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)
@@ -18,7 +19,7 @@ before_script:
 generate_git-log:
  stage: gen_git-log
  script:
-    - if (( `grep git-log.html ./public/index.html | wc -l` == 0 )); then         sed -i 's+</body>+<a style="position:fixed;top:0;left:0;z-index:999;font-size:12px;color:darkblue;text-decoration:none;" target="_blank" href="./git-log.html">R</a>\n</body>+g' ./public/index.html;         echo "添加更新记录链接"; fi;
+    - if (( `grep git-log.html ./public/index.html | wc -l` == 0 )); then         sed -i 's+</body>+<a style="position:fixed;top:0;left:0;z-index:999;font-size:12px;color:transparent;text-decoration:none;display:none;" target="_blank" href="./git-log.html">R</a>\n</body>+g' ./public/index.html;         echo "添加更新记录链接"; fi;
    - echo "最近的100个提交记录"
    - echo "<!DOCTYPE html><html><head><meta charset='utf-8'></head><body><pre>" > ./public/git-log.html
    - "git log -100 --pretty=format:'%ad : %s' >> ./public/git-log.html"
@@ -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"
--- a/babel.config.js
+++ b/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'
  ],
--- a/jest.config.js
+++ b/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
+}
--- a/0
+++ b/0
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
    "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": {
@@ -48,17 +49,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 +74,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": [
--- a/public/images/bg.png
+++ b/public/images/bg.png
--- a/public/images/logo-title.svg
+++ b/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>
--- a/public/images/logo.svg
+++ b/public/images/logo.svg
@@ -1,16 +1,33 @@
 <?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>
-                </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>
+<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="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>
    </g>
-</svg>
+</svg>
--- a/src/App.vue
+++ b/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>
--- a/src/Login.vue
+++ b/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>
@@ -136,58 +136,99 @@ export default {
 }
 </script>

-<style>
- .logins{
+<style scoped>
+.logins {
  background-color: #000C18;
  background-size: auto;
  background-repeat: round;
  background-image: url('../public/images/bg.png');
  display: flex;
-   height: 100%;
+  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;
+  height: 135px;
 }
-.login--input{
-  width: 300px;
-  height: 40px;
+.login__box {
+  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__input:first-of-type{
-   margin-top: 45.57px;
- }
- .login__box{
-   width: 300px;
-   height: 250px;
-   margin: auto;
- }
 .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>
--- a/src/Test.vue
+++ b/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>
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -4,7 +4,7 @@
  display: none !important;
 }
 * {
-  font-family: NotoSansSChineseRegular;
+  font-family: NotoSansSChineseRegular, serif;
  box-sizing: border-box;
 }
 html, body, #app {
@@ -43,3 +43,20 @@ body {
 .el-form-item__error {
  padding-top: 0 !important;
 }
+
+/* 请求报错样式关于popover的修改 */
+.error-popover {
+  //min-width: 30px !important;
+  display: inline-block;
+  background: #FFE7E6 !important;
+  border: 1px solid rgba(226,97,84,0.42) !important;
+  padding: 6.6px 12px !important;
+  border-radius: 4px !important;
+  font-size: 14px !important;
+  color: #F53A19 !important;
+  font-weight: 400 !important;
+  line-height: 1.2 !important;
+  .el-popper__arrow {
+    display: none !important;
+  }
+}
--- a/src/assets/css/common/table-common.scss
+++ b/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;
    }
--- a/src/assets/css/components/components/advancedSearch/codemirror.scss
+++ b/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;
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -199,4 +199,8 @@
      text-align: right;
    }
  }
+
+  .el-input__inner {
+    visibility: hidden !important;
+  }
 }
--- a/src/assets/css/components/components/common/chart-error.scss
+++ b/src/assets/css/components/components/common/chart-error.scss
@@ -0,0 +1,80 @@
+.error-component {
+  position: absolute;
+  //width: 100%;
+  //height: 100%;
+  left: 0;
+  top: 0;
+}
+.error-block {
+  display: inline-block;
+  //width: 100%;
+  //max-width: calc(100% - 24px);
+  //max-height: calc(100% - 24px);
+  //line-height: 24px;
+  background: #FFE7E6;
+  font-size: 14px;
+  color: #F53A19;
+  font-weight: 400;
+  padding: 7.6px 12px;
+  margin: 12px;
+  z-index: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  //white-space: nowrap;
+  word-break: break-all;
+  border: 1px solid rgba(226,97,84,0.42);
+  border-radius: 4px;
+}
+
+.error-block-info {
+  position: absolute;
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  font-size: 14px;
+  color: #575757;
+  line-height: 24px;
+  font-weight: 400;
+  font-family: NotoSansSChineseRegular, serif;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.new-error-icon {
+  position: relative;
+  display: inline-block;
+}
+
+.new-error-icon .error-content {
+  position: absolute;
+  z-index: 2;
+  top: -42px;
+  left: 0;
+  visibility: hidden;
+  max-width: 220px;
+  overflow: scroll;
+  height: auto;
+  background: #FFE7E6;
+  border: 1px solid rgba(226,97,84,0.42);
+  border-radius: 4px;
+  font-size: 14px;
+  color: #F53A19;
+  font-weight: 400;
+  padding: 5px 12px;
+}
+
+.error-icon-default {
+  font-size: 16px;
+  margin-left: -2px;
+  margin-right: 8px;
+}
+
+.error-icon-tooltip {
+  font-size: 16px !important;
+  margin-bottom: -1px;
+  margin-left: 6px;
+}
--- a/src/assets/css/components/components/common/chart-tab.scss
+++ b/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;
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/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;
              }
--- a/src/assets/css/components/components/rightBox/administration/chart-box.scss
+++ b/src/assets/css/components/components/rightBox/administration/chart-box.scss
--- a/src/assets/css/components/components/rightBox/report/builtinReportBox.scss
+++ b/src/assets/css/components/components/rightBox/report/builtinReportBox.scss
--- a/src/assets/css/components/components/table/administration/galaxy-proxy-table.scss
+++ b/src/assets/css/components/components/table/administration/galaxy-proxy-table.scss
--- a/src/assets/css/components/components/table/common.scss
+++ b/src/assets/css/components/components/table/common.scss
@@ -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,28 @@
  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;
  }
 }
--- a/src/assets/css/components/index.scss
+++ b/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';
@@ -72,3 +72,9 @@
@import 'views/charts2/dnsEventChart';
@import './views/charts2/dnsEventChartByPie';
 //@import '../chart';
+@import './components/common/chart-error';
+@import './components/common/chart-tab';
+
+@import 'views/administration/AdministrationTabs';
+
+@import 'views/setting/knowledgeBase';
--- a/src/assets/css/components/views/administration/AdministrationTabs.scss
+++ b/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;
+        }
+      }
+    }
+  }
+}
--- a/src/assets/css/components/views/chartHeader.scss
+++ b/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;
        }
--- a/src/assets/css/components/views/charts/chartAlarmInfo.scss
+++ b/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;
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ b/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;
--- a/src/assets/css/components/views/charts2/dnsActiveMaliciousDomain.scss
+++ b/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;
--- a/src/assets/css/components/views/charts2/linkDirectionGrid.scss
+++ b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
@@ -13,6 +13,13 @@
      font-size: 14px;
      color: #046ECA;
    }
+    .link-block-error {
+      position: absolute;
+      width: calc(100% - 20px);
+      height: calc(100% - 60px);
+      margin-left: -12px;
+      margin-top: 10px;
+    }
    .data-grid {
      height: 100px;
      .egress-row {
--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -3,7 +3,7 @@

  .network-overview-apps-header {
    display: flex;
-    justify-content: space-between;
+    //justify-content: space-between;

    .network-overview-apps-title {
      font-size: 14px;
--- a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
+++ b/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;
--- a/src/assets/css/components/views/charts2/networkOverviewLine.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss
@@ -98,11 +98,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 +122,10 @@
              }
            }
          }
-          .line-value-mpackets-name {
+          .line-value-tabs-name {
            position: relative;
            display: flex;
-            .mpackets-name {
+            .tabs-name {
              flex: 1;
              padding-left: 19px;
            }
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -4,7 +4,7 @@
  height:calc(100% - 64px);
  font-size:12px;
  .tab-hide{
-    margin-top:40px;
+    margin-top:42px;
  }
  .cn-chart__tabs {
    height:100%;
@@ -32,13 +32,11 @@
          .div-yellow {
            height: 12px;
            background: #e5a219;
-            border: 1px solid #e5a219;
            border-left: none;
          }
          .div-green {
            height: 12px;
            background: #749f4d;
-            border: 1px solid #749f4d;
            border-right: none;
          }
        }
@@ -115,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: start;
+      }
      .score-cell {
        display: flex !important;
        justify-content: center;
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/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;
@@ -179,3 +183,6 @@
    color: $grey;
  }
 }
+.npm-app-border {
+  border: 1px solid #E2E5EC;
+}
--- a/src/assets/css/components/views/charts2/npmAppEventTable.scss
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -110,4 +110,10 @@
  .el-table--group::after,.el-table--border::after,.el-table::before {
    height: 0px;
  }
+  .table-error {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 68px;
+  }
 }
--- a/src/assets/css/components/views/charts2/npmEventsByType.scss
+++ b/src/assets/css/components/views/charts2/npmEventsByType.scss
@@ -3,6 +3,7 @@
  width: 100%;
  height: 100%;
  .npm-event-title {
+    display: flex;
    font-size: 14px;
    color: #353636;
    font-weight: 600;
--- a/src/assets/css/components/views/charts2/npmLine.scss
+++ b/src/assets/css/components/views/charts2/npmLine.scss
@@ -4,6 +4,7 @@
  width: 100%;
  border: 1px solid #f0f0f0;
  .npm-line-title {
+    display: flex;
    font-size: 14px;
    color: #353636;
    font-weight: 500;
@@ -14,6 +15,7 @@
    margin: 20px 20px 0 20px;
    justify-content: space-between;
    .npm-line-header-title {
+      display: flex;
      font-size: 14px;
      color: #353636;
      font-weight: 500;
--- a/src/assets/css/components/views/charts2/npmMap.scss
+++ b/src/assets/css/components/views/charts2/npmMap.scss
@@ -1,4 +1,5 @@
 .cn-chart__map-title {
+  display: flex;
  font-size: 14px;
  color: #353636;
  font-weight: 600;
--- a/src/assets/css/components/views/charts2/npmRecentEvents.scss
+++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss
@@ -2,6 +2,7 @@
  height: 100%;
  width: 100%;
  .npm-recent-title {
+    display: flex;
    font-size: 14px;
    color: #353636;
    font-weight: 600;
@@ -85,6 +86,9 @@
      color: #046ECA;
      font-weight: 400
    }
+    .click-active {
+      cursor: pointer;
+    }
    .data-recent-table-eventType {
      font-size: 12px;
      color: #046ECA;
--- a/src/assets/css/components/views/charts2/npmRelatedSessions.scss
+++ b/src/assets/css/components/views/charts2/npmRelatedSessions.scss
@@ -2,6 +2,7 @@
  height: 100%;
  width: 100%;
  .npm-sessions-title {
+    display: flex;
    font-size: 14px;
    color: #353636;
    font-weight: 500;
@@ -27,6 +28,14 @@
      border-bottom-left-radius: 4px;
      border-right: none;
    }
+    .npm-sessions-div-gray {
+      height: 100%;
+      background: rgba(113,113,113,0.30);
+      border: 1px solid rgba(113,113,113,0.30);
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      border-right: none;
+    }
  }

  .npm-sessions-body {
@@ -45,15 +54,10 @@
          display: flex;
          align-items: center;
          .npm-sessions-as-client-i18n {
-            ont-size: 12px;
+            font-size: 12px;
            color: #717171;
            font-weight: 400;
          }
-          .npm-sessions-as-client-percent {
-            font-size: 18px;
-            color: #353636;
-            font-weight: 700;
-          }
          .npm-sessions-as-client-green,.npm-sessions-as-client-red {
            width: 8px;
            height: 8px;
@@ -66,6 +70,11 @@
            background: red;
          }
        }
+        .npm-sessions-as-client-percent {
+          font-size: 18px;
+          color: #353636;
+          font-weight: 700;
+        }
      }
    }
    .npm-sessions-body-right {
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -18,7 +18,7 @@
      align-items: center;
      padding-left: 10px;
      color: #666;
-      background-color: #F3F7FA;
+      //background-color: #F3F7FA;
      cursor: pointer;

      span {
@@ -33,7 +33,18 @@
      i.arrow-rotate {
        transform: rotate(90deg) translate(2px, 3px);
      }
+      .new-detection-filter-header-title {
+        font-size: 14px;
+        color: #353636;
+        font-weight: 600;
+      }
+      .new-detection-filter-icon {
+        margin-left: 8px;
+        margin-bottom: 2px;
+        font-weight: bold !important;
+      }
    }
+
    .filter__body {
      padding: 5px 0 0 15px;

@@ -69,4 +80,17 @@
      }
    }
  }
+  .new-detection-filter-title {
+    display: flex;
+    flex: 0 0 32px;
+    align-items: center;
+    padding-left: 27px;
+    background-color: #EFF2F5;
+    cursor: pointer;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 600;
+    margin: -10px;
+    margin-bottom: 10px;
+  }
 }
--- a/src/assets/css/components/views/detections/detection-list/detection-list.scss
+++ b/src/assets/css/components/views/detections/detection-list/detection-list.scss
@@ -40,7 +40,7 @@
      height: 100%;
      overflow: auto;

-      .cn-detection__shadow {
+      .cn-detection__shadow, .new-cn-detection__shadow {
        position: fixed;
        height: 100vh;
        width:100vw;
@@ -49,6 +49,10 @@
        z-index: 1;
        background-color: rgba(0, 0, 0, .2);
      }
+
+      .new-cn-detection__shadow {
+        z-index: 4;
+      }
    }
  }

--- a/src/assets/css/components/views/detections/detection-list/row.scss
+++ b/src/assets/css/components/views/detections/detection-list/row.scss
@@ -2,13 +2,22 @@
  display: flex;

  .cn-detection__collapse {
-    margin-bottom: 1px;
-    padding-top: 18px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
-    background-color: #F3F7FA;
+    margin-bottom: 1px;
+    //padding-top: 18px;
+    background-color: #EFF2F5;
+
+    .cn-detection__collapse-block {
+      min-height: 66px;
+      height: 100%;
+      max-height: 88px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }

    span {
      transform: rotate(0);
@@ -99,6 +108,24 @@
          line-height: 14px;
          margin-left: 5px;
        }
+        .detection-event-severity-color-block {
+          width: 5px;
+          height: 20px;
+          border-radius: 2.5px;
+          margin-left: -16px;
+          margin-right: 12px;
+        }
+        .detection-event-severity-block {
+          font-size: 12px;
+          color: #046EC9;
+          font-weight: 500;
+          padding: 2px 10px;
+          background: rgba(56,172,210,0.10);
+          border: 1px solid #ADC7DB;
+          box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+          border-radius: 3px;
+          margin-right: 10px;
+        }
      }

      .cn-detection__body {
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -62,8 +62,11 @@

      .row__content {
        display: flex;
-        color: #3976CB;
-        
+        //color: #3976CB;
+        color: #046ECA;
+        font-weight: 500;
+        font-size: 14px;
+
        &.row__content--link {
          font-style: italic;
          text-decoration: underline;
@@ -77,6 +80,10 @@
          cursor: pointer;
        }
        span{
+          font-style: italic;
+          color: #046ECA;
+        }
+        .row__content--span {
          font-style: italic;
          color: #1890FF;
        }
@@ -169,13 +176,16 @@
          span {
            padding-left: 5px;
            font-size: 14px;
-            color: #3976CB;
+            //color: #3976CB;
+            color: #046ECA;
+            font-weight: 600 !important;
          }
        }
        .timeline__security-type {
          font-size: 12px;
-          color: #3976CB;
+          color: #046ECA;
          margin-bottom: 10px;
+          font-weight: 500;
        }
        .timeline__start-time {
          font-size: 12px;
@@ -210,5 +220,6 @@
  justify-content: center;
  align-items: center;
  padding: 0 4px;
-  color: white;
+  //todo 此处文字显示白色，暂时取消
+  //color: white;
 }
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -26,7 +26,7 @@
    justify-content: flex-start;
  }

-  .explorer-top-tools {
+  .explorer-top-tools, .explorer-detection-top-tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
@@ -46,6 +46,37 @@
      }
    }
  }
+  .explorer-detection-top-tools {
+    display: flex;
+    justify-content: space-between;
+  }
+  .explorer-top-tools-title {
+    font-size: 24px;
+    line-height: 24px;
+    font-weight: 900;
+    color: #353636;
+  }
+  .explorer-top-tools-block {
+    height: 28px;
+    line-height: 28px;
+    background: #F5F8FA;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 500;
+    padding: 0 10px;
+    margin-right: 10px;
+    border: 1px solid #E2E5EC;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+  .detection-icon-setting {
+    margin-right: 10px;
+    font-size: 14px;
+  }
+  .detection-border {
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+  }
  .explorer-container {
    display: flex;
    overflow: visible; /*overflow: hidden;*/
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -87,7 +87,7 @@
          padding-right: 20px;

          &.row__label--width130 {
-            flex-basis: 130px;
+            flex-basis: 140px;
            padding-right: unset;
          }
          &.row__label--width160 {
--- a/src/assets/css/components/views/report/builtinReport.scss
+++ b/src/assets/css/components/views/report/builtinReport.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;
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
@@ -0,0 +1,365 @@
+.knowledge-base {
+  &.list-page {
+    height: calc(100% - 52px);
+  }
+  .type-tag {
+    display: inline-block;
+    padding: 0 10px;
+    background-color: #EBF7FA;
+    color: #046ECA;
+    box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+    border-radius: 12px;
+  }
+
+  .top-title {
+    font-size: 24px;
+    color: #353636;
+    font-weight: 900;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    padding-bottom: 8px;
+    padding-top: 20px;
+    margin-left:20px;
+  }
+}
+.edit-knowledge-base {
+  height: 100%;
+
+  .edit-knowledge-base__header {
+    padding: 30px 0 30px 20px;
+    font-size: 24px;
+    line-height: 24px;
+    font-weight: 900;
+    color: #353636;
+  }
+  .edit-knowledge-base__body {
+    display: flex;
+    height: calc(100% - 147px);
+    padding-left: 20px;
+    overflow: auto;
+
+    .el-steps {
+      margin-left: 10px;
+
+      .el-step {
+        transition: flex-basis ease-in-out .28s;
+      }
+      .el-step__head {
+        .el-step__line {
+          top: 26px;
+          bottom: 2px;
+          background-color: #38ACD2;
+          border-color: transparent;
+          opacity: 0.66;
+        }
+
+        &.is-finish, &.is-process {
+          .el-step__icon {
+            border-color: #38ACD2;
+            color: white;
+            background: #38ACD2;
+          }
+        }
+
+        &.is-process {
+          .el-step__line {
+            opacity: 1;
+          }
+        }
+
+        &.is-wait {
+          .el-step__icon {
+            border-color: #38ACD2;
+            color: #38ACD2;
+          }
+        }
+
+        .el-step__icon-inner {
+          font-size: 16px;
+          font-weight: normal;
+        }
+      }
+    }
+
+    .el-collapse {
+      width: 655px;
+      margin-left: 5px;
+      border: none;
+
+      .el-collapse-item.upload-collapse {
+        .el-collapse-item__wrap {
+          height: 260px;
+        }
+      }
+      .el-collapse-item {
+        min-height: 58px;
+        position: relative;
+
+        .el-collapse-item__header {
+          height: unset;
+          line-height: unset;
+          border: none;
+          font-size: 16px;
+          color: #333333;
+
+          &.focusing:focus:not(:hover) {
+            color: unset;
+          }
+          .form-sub-title {
+            padding-left: 35px;
+          }
+        }
+        [role|=tab] {
+          display: flex;
+          align-items: flex-start;
+        }
+        .el-collapse-item__arrow {
+          position: absolute;
+          color: #38ACD2;
+          font-weight: bold;
+        }
+        .el-collapse-item__wrap {
+          padding-left: 35px;
+          border: none;
+        }
+        .el-collapse-item__content {
+          position: relative;
+          padding-bottom: 20px;
+        }
+        .form-input .el-input__inner{
+          padding-right: 50px !important;
+        }
+
+        .upload-error-tip, .preview-error-tip {
+          color: $--color-danger;
+        }
+        .upload-error-tip {
+          margin-top: -11px;
+        }
+        .el-upload {
+          margin-top: 12px;
+
+          .upload-tip {
+            font-size: 12px;
+            color: #999999;
+          }
+          .el-upload-dragger {
+            width: 320px;
+            border-radius: 2px;
+            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+          }
+
+        }
+        .el-upload--error .el-upload-dragger {
+          border-color: $--color-danger;
+        }
+        .el-upload-list {
+          .el-upload-list__item {
+            padding: 0 5px;
+            margin-top: unset;
+            height: 36px;
+            line-height: 36px;
+            background: #F5F8FA;
+            border-radius: 2px;
+            color: #353636;
+
+            .el-icon-close {
+              top: 11px;
+            }
+            .el-icon-close-tip {
+              top: 11px;
+            }
+            .el-progress.el-progress--line {
+              top: unset;
+            }
+          }
+        }
+      }
+    }
+
+    .el-form {
+      margin-top: 20px;
+      width: 620px;
+
+      label {
+        padding-bottom: 6px;
+        font-size: 14px;
+        color: #333333;
+        line-height: unset;
+      }
+
+      .el-form-item {
+        margin-bottom: 12px;
+      }
+      .el-form-item__content {
+        line-height: unset;
+
+        .el-input__inner {
+          padding-left: 8px;
+          font-size: 14px;
+          color: #353636;
+        }
+        .el-textarea__inner {
+          padding-left: 8px;
+        }
+
+        .form-select {
+          width: 100%;
+
+          .el-input__inner {
+            background-color: #F5F8FA;
+          }
+        }
+      }
+    }
+    .skeleton-border {
+      position: relative;
+      margin-top: 12px;
+      padding: 15px;
+      border: 1px solid #DCDFE6;
+      border-radius: 2px;
+
+      .skeleton-item-row:not(:nth-of-type(6)) {
+        margin-bottom: 5px;
+      }
+      .el-skeleton__item {
+        background: #F5F8FA;
+      }
+      .skeleton-tip {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 14px;
+        color: #353636;
+      }
+    }
+    .imported-tip {
+      margin-top: 8px;
+      margin-bottom: 4px;
+      font-size: 14px;
+      color: #333333;
+
+      .cn-icon {
+        font-size: 16px;
+        color: #38ACD2;
+      }
+    }
+    .imported-table-box {
+      position: relative;
+      height: 367px;
+      border: 1px solid #DEDEDE;
+      border-radius: 2px;
+      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &.imported-table-box--error {
+        border-color: $--color-danger;
+      }
+      .imported-table {
+        padding: 0 12px;
+        width: 100%;
+        table-layout: fixed;
+
+        th {
+          text-align: left;
+          font-size: 14px;
+          color: #353636;;
+        }
+        td {
+          font-size: 14px;
+          color: #353636;
+        }
+        .imported-data-msg, .imported-data-item, .imported-data-value {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .imported-data-msg {
+          width: 140px;
+        }
+
+        .el-icon-close {
+          color: #666;
+          font-weight: bold;
+          cursor: pointer;
+
+          &:hover {
+            color: #111;
+          }
+        }
+        .el-icon-success {
+          color: #749F4D;
+        }
+        .el-icon-error {
+          color: #E26154;
+        }
+      }
+
+      .imported-pagination.pagination {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        margin-top: 4px;
+        padding-top: 8px;
+        height: 42px;
+        border-top: 1px solid #eee;
+
+        .btn-prev, .btn-next, .number {
+          margin: 0 2px;
+        }
+        .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
+          border: none;
+          font-size: 12px;
+        }
+        .el-pagination .el-pager li {
+          color: #353636;
+        }
+        .el-pagination .el-pager li.active {
+          background-color: #38ACD2;
+          color: white;
+        }
+      }
+    }
+  }
+  .edit-knowledge-base__footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    margin-top: 3px;
+    box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.10);
+
+    .footer__btn {
+      margin: 0 10px;
+      height: 30px;
+      min-width: 74px;
+      padding: 0 15px;
+      color: white;
+      background-color: #38ACD2;
+      border: none;
+      border-radius: 4px;
+      outline: none;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background-color linear .2s, color linear .1s;
+    }
+    .footer__btn:hover:not(.footer__btn--disabled) {
+      background-color: lighten(#38ACD2, 10%);
+    }
+    .footer__btn--light {
+      background-color: #F5F6F7;
+      border: 1px solid $--border-color-primary;
+      color: #333;
+    }
+    .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
+      background-color: white;
+      border-color: lighten(#38ACD2, 40%);
+      color: #38ACD2;
+    }
+    .footer__btn--disabled {
+      opacity: .6;
+      cursor: default;
+    }
+  }
+}
--- a/src/assets/css/font/iconfont.css
+++ b/src/assets/css/font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1663570533591') format('woff2'),
-       url('iconfont.woff?t=1663570533591') format('woff'),
-       url('iconfont.ttf?t=1663570533591') format('truetype');
+  src: url('iconfont.woff2?t=1670817031037') format('woff2'),
+       url('iconfont.woff?t=1670817031037') format('woff'),
+       url('iconfont.ttf?t=1670817031037') format('truetype');
 }

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

+.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";
+}
+
+.cn-icon-a-SecurityEvent:before {
+  content: "\e7ae";
+}
+
+.cn-icon-bianji1:before {
+  content: "\e7af";
+}
+
+.cn-icon-a-PerformanceEvent:before {
+  content: "\e7b0";
+}
+
+.cn-icon-xinjian:before {
+  content: "\e7b1";
+}
+
+.cn-icon-a-RegulatoryRiskEvent:before {
+  content: "\e7b2";
+}
+
+.cn-icon-Delete1:before {
+  content: "\e7b3";
+}
+
+.cn-icon-a-EvaluatedTarget:before {
+  content: "\e7b4";
+}
+
+.cn-icon-a-GeneralSettings:before {
+  content: "\e7b5";
+}
+
+.cn-icon-Thresholds:before {
+  content: "\e7b6";
+}
+
 .cn-icon-good:before {
  content: "\e7ad";
 }
--- a/src/assets/css/font/iconfont.js
+++ b/src/assets/css/font/iconfont.js
--- a/src/assets/css/font/iconfont.ttf
+++ b/src/assets/css/font/iconfont.ttf
--- a/src/assets/css/font/iconfont.woff
+++ b/src/assets/css/font/iconfont.woff
--- a/src/assets/css/font/iconfont.woff2
+++ b/src/assets/css/font/iconfont.woff2
--- a/src/assets/css/themes/theme-dark.scss
+++ b/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时边框色相对于主题色变浅的幅度
--- a/src/assets/css/themes/theme-light.scss
+++ b/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时边框色相对于主题色变浅的幅度
--- a/src/components/advancedSearch/Index.vue
+++ b/src/components/advancedSearch/Index.vue
@@ -60,6 +60,7 @@ export default {
    // 连接符列表
    connectionList: Array
  },
+  emits: ['search'],
  methods: {
    search (parseData) {
      this.$emit('search', parseData)
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -104,6 +104,7 @@ export default {
      metaList: []
    }
  },
+  emits: ['changeMode', 'search'],
  methods: {
    // 新增条件
    addCondition (meta) {
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -23,7 +23,7 @@ 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'

 export default {
  name: 'TextMode',
@@ -36,6 +36,7 @@ export default {
      codeMirror: null
    }
  },
+  emits: ['changeMode', 'search'],
  methods: {
    initCodeMirror () {
      this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {
--- a/src/components/advancedSearch/meta/parser.js
+++ b/src/components/advancedSearch/meta/parser.js
@@ -233,6 +233,7 @@ export default class Parser {
          break
        }
      } else if (s === ' ') {
+        // 预留
      } else if (s === '(') {
        token = new Token(types.leftBracket, s)
        token.setStart(i)
--- a/src/components/advancedSearch/meta/sql-parser.js
+++ b/src/components/advancedSearch/meta/sql-parser.js
@@ -4,7 +4,7 @@ import { riskLevelMapping } from '@/utils/constants'
 import _ from 'lodash'
 // 补全语句，用于解析
 const sqlPrev = 'select a from b where '
-export default class SqlParser/* extends SqlParserVisitor*/ {
+export default class SqlParser/* extends SqlParserVisitor */ {
  constructor (init, columnList) {
    // super()
    this.tempMeta = null
--- a/src/components/common/ChartTabs.vue
+++ b/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>
--- a/src/components/common/Error.vue
+++ b/src/components/common/Error.vue
@@ -0,0 +1,148 @@
+<template>
+  <div v-if="showDefault" class="error-component">
+    <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>
+      </svg>
+      {{ content }}
+    </div>
+  </div>
+
+  <div id="error-com">
+    <div v-if="tooltip !== undefined">
+      <el-popover
+          :width="localPopoverWidth"
+          placement="top-start"
+          trigger="hover"
+          :visible-arrow="false"
+          popper-class="error-popover"
+          :content="content">
+        <template #reference>
+          <span>
+            <svg class="icon error-icon-tooltip" aria-hidden="true">
+              <use xlink:href="#cn-icon-baocuo"></use>
+            </svg>
+<!--            为后续自定义icon插槽做预备-->
+<!--            <i v-if="icon" :class="`icon cn-icon-${icon}`"></i>-->
+          </span>
+        </template>
+      </el-popover>
+<!--      不使用popover实现hover，后续考虑替换为该方案-->
+<!--      <span class="new-error-icon" @mouseenter="hoverError">-->
+<!--        <svg class="icon item-popover-up" aria-hidden="true">-->
+<!--          <use xlink:href="#cn-icon-baocuo"></use>-->
+<!--        </svg>-->
+<!--        <div id="error-content" class="error-content">-->
+<!--          rview/appCompanyCyclrview/appCompanyCycleTrafficTotal?startTime=getSecond(this.timeFilter.startTime)&endTime=getSecond(this.timeFilter.endTime)&appCompanies=%27Tencent%27,%27Jingdong%27,%27Akamai%27,%27Bytedance%27,%27Baidu%27,%27Huawei%27,%27Beike%27,%27Aiqiyi%27,%27Ctrip%27,%27Meituan%27-->
+<!--        </div>-->
+<!--      </span>-->
+    </div>
+
+    <div class="error-block-info" v-if="info !== undefined">
+      <div>
+        <svg class="icon error-icon-default" aria-hidden="true">
+          <use xlink:href="#cn-icon-baocuo"></use>
+        </svg>
+        {{ content }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<!--  start----------------调用方式----------------start  -->
+<!--
+   组件在全局注册了，调用时: <chart-error :content="content"></chart-error>
+-->
+<!--
+   目前有三种形式，分别是default、tooltip、info
+   默认，即红框展示：<chart-error :content="content" />
+   在标题之后显示，需要鼠标移动到图标上显示弹窗：<chart-error tooltip :content="content" />
+   文字提示：<chart-error info :content="content" />
+ -->
+<!--
+  自定义宽度：<chart-error width="300" :content="content" />
+  自定义弹窗宽度：<chart-error tooltip width="300" :content="content" />
+  注意：info模式不支持宽度设置
+-->
+<!--
+  自定义icon图标：<chart-error tooltip icon="baocuo" :content="content" />，此时icon全称为'cn-icon-baocuo'
+-->
+<!--  end----------------调用方式----------------end  -->
+<script>
+export default {
+  name: 'Error',
+  props: {
+    // 工具栏提示类型
+    tooltip: {
+      type: String
+    },
+    // 文字提示类型
+    info: {
+      type: String
+    },
+    // 报错信息内容，如果不传，默认为"Error"
+    content: {
+      type: String,
+      default: 'Error！'
+    },
+    // 报错信息模块宽度，如果类型选择tooltip，则为弹窗宽度，info模式没有宽度设置
+    width: {
+      type: String
+    },
+    // 报错信息模块最大宽度
+    maxWidth: {
+      type: String
+      // default: '350'
+    },
+    // 自定义icon图标
+    icon: {
+      type: String
+    },
+    // 自定义svg图标
+    svg: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      showDefault: false, // 是否显示default，分别是default、tooltip、info
+      showSmall: false, // 显示错误的类型，true为图表模块内显示报错，false为标题后显示报错
+      localWidth: '',
+      localMaxWidth: '',
+      localPopoverWidth: ''
+    }
+  },
+  mounted () {
+    this.initData()
+  },
+  methods: {
+    initData () {
+      if (this.tooltip !== undefined) {
+        this.showDefault = false
+        this.localPopoverWidth = this.width !== undefined
+      }
+
+      // 默认default模式
+      this.showDefault = this.tooltip === undefined && this.info === undefined
+
+      if (this.width) {
+        // 避免宽度出现负数的情况
+        this.localWidth = Math.abs(parseFloat(this.width)) + 'px'
+      }
+
+      if (this.maxWidth) {
+        // 避免宽度出现负数的情况
+        this.localMaxWidth = Math.abs(parseFloat(this.maxWidth)) + 'px'
+      }
+    },
+    /**
+     * 鼠标移入事件，用于获取弹窗dom，修改距离父元素的top
+     */
+    hoverError (e) {
+      // const dom = document.getElementById('error-content')
+      // if (dom) {
+      // }
+    }
+  }
+}
+</script>
--- a/src/components/common/MyDatePicker/index.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/index.js
+++ b/src/components/common/MyDatePicker/index.js
--- a/src/components/common/MyDatePicker/src/date-picker-com/basic-date-table.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker-com/basic-month-table.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker-com/basic-year-table.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker-com/panel-date-pick.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker-com/panel-date-range.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker-com/panel-month-range.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker.d.ts
+++ b/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;
--- a/src/components/common/MytTimePicker/index.d.ts
+++ b/src/components/common/MytTimePicker/index.d.ts
@@ -1,10 +0,0 @@
-import TimePicker from './src/time-picker';
-import CommonPicker from './src/common/picker.vue';
-import TimePickPanel from './src/time-picker-com/panel-time-pick.vue';
-import type { SFCWithInstall } from 'element-plus/lib/utils/types';
-export * from './src/common/date-utils';
-export * from './src/common/constant';
-export * from './src/common/props';
-declare const _TimePicker: SFCWithInstall<typeof TimePicker>;
-export { CommonPicker, TimePickPanel };
-export default _TimePicker;
--- a/src/components/common/MytTimePicker/index.js
+++ b/src/components/common/MytTimePicker/index.js
--- a/src/components/common/MytTimePicker/src/common/constant.d.ts
+++ b/src/components/common/MytTimePicker/src/common/constant.d.ts
@@ -1,12 +0,0 @@
-export declare const DEFAULT_FORMATS_TIME = "HH:mm:ss";
-export declare const DEFAULT_FORMATS_DATE = "YYYY-MM-DD";
-export declare const DEFAULT_FORMATS_DATEPICKER: {
-    date: string;
-    week: string;
-    year: string;
-    month: string;
-    datetime: string;
-    monthrange: string;
-    daterange: string;
-    datetimerange: string;
-};
--- a/src/components/common/MytTimePicker/src/common/date-utils.d.ts
+++ b/src/components/common/MytTimePicker/src/common/date-utils.d.ts
@@ -1,3 +0,0 @@
-export declare const rangeArr: (n: any) => number[];
-export declare const extractDateFormat: (format: any) => any;
-export declare const extractTimeFormat: (format: any) => any;
--- a/src/components/common/MytTimePicker/src/common/picker.vue.d.ts
+++ b/src/components/common/MytTimePicker/src/common/picker.vue.d.ts
@@ -1,182 +0,0 @@
-import type { Options } from '@popperjs/core';
-declare const _default: import("vue").DefineComponent<{
-    name: {
-        type: (ArrayConstructor | StringConstructor)[];
-        default: string;
-    };
-    popperClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    format: {
-        type: StringConstructor;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    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<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;
-}, {
-    elPopperOptions: Options;
-    isDatesPicker: import("vue").ComputedRef<boolean>;
-    handleEndChange: () => void;
-    handleStartChange: () => void;
-    handleStartInput: (event: any) => void;
-    handleEndInput: (event: any) => void;
-    onUserInput: (e: any) => void;
-    handleChange: () => void;
-    handleKeydown: (event: any) => void;
-    popperPaneRef: import("vue").ComputedRef<any>;
-    onClickOutside: () => void;
-    pickerSize: import("vue").ComputedRef<any>;
-    isRangeInput: import("vue").ComputedRef<boolean>;
-    onMouseLeave: () => void;
-    onMouseEnter: () => void;
-    onClearIconClick: (event: any) => void;
-    showClose: import("vue").Ref<boolean>;
-    triggerClass: import("vue").ComputedRef<unknown>;
-    onPick: (date?: any, visible?: boolean) => void;
-    handleFocus: (e: any) => void;
-    pickerVisible: import("vue").Ref<boolean>;
-    pickerActualVisible: import("vue").Ref<boolean>;
-    displayValue: import("vue").ComputedRef<any>;
-    parsedValue: import("vue").ComputedRef<any>;
-    setSelectionRange: (start: any, end: any, pos: any) => void;
-    refPopper: any;
-    pickerDisabled: import("vue").ComputedRef<boolean>;
-    onSetPickerOption: (e: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "focus" | "blur")[], "update:modelValue" | "change" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    name: unknown;
-    popperClass: unknown;
-    type: 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;
-}>, {
-    name: unknown;
-    popperClass: unknown;
-    type: 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;
--- a/src/components/common/MytTimePicker/src/common/props.d.ts
+++ b/src/components/common/MytTimePicker/src/common/props.d.ts
@@ -1,103 +0,0 @@
-import type { PropType } from 'vue';
-import type { Options } from '@popperjs/core';
-export declare const defaultProps: {
-    name: {
-        type: (ArrayConstructor | StringConstructor)[];
-        default: string;
-    };
-    popperClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    format: {
-        type: StringConstructor;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    clearIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    editable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    prefixIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    size: {
-        type: PropType<ComponentSize>;
-        validator: (val: string) => boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    popperOptions: {
-        type: PropType<Options>;
-        default: () => {};
-    };
-    modelValue: {
-        type: PropType<string | Date | Date[]>;
-        default: string;
-    };
-    rangeSeparator: {
-        type: StringConstructor;
-        default: string;
-    };
-    startPlaceholder: StringConstructor;
-    endPlaceholder: StringConstructor;
-    defaultValue: {
-        type: PropType<Date | Date[]>;
-    };
-    defaultTime: {
-        type: 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;
-};
--- a/src/components/common/MytTimePicker/src/time-picker-com/basic-time-spinner.vue.d.ts
+++ b/src/components/common/MytTimePicker/src/time-picker-com/basic-time-spinner.vue.d.ts
@@ -1,86 +0,0 @@
-import { Ref, PropType } from 'vue';
-import { Dayjs } from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    role: {
-        type: StringConstructor;
-        required: true;
-    };
-    spinnerDate: {
-        type: PropType<Dayjs>;
-        required: true;
-    };
-    showSeconds: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    arrowControl: BooleanConstructor;
-    amPmMode: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabledHours: {
-        type: FunctionConstructor;
-    };
-    disabledMinutes: {
-        type: FunctionConstructor;
-    };
-    disabledSeconds: {
-        type: FunctionConstructor;
-    };
-}, {
-    getRefId: (item: any) => string;
-    spinnerItems: import("vue").ComputedRef<string[]>;
-    currentScrollbar: any;
-    hours: import("vue").ComputedRef<any>;
-    minutes: import("vue").ComputedRef<any>;
-    seconds: import("vue").ComputedRef<any>;
-    hoursList: import("vue").ComputedRef<any[]>;
-    minutesList: import("vue").ComputedRef<any[]>;
-    arrowHourList: import("vue").ComputedRef<any[]>;
-    arrowMinuteList: import("vue").ComputedRef<any[]>;
-    arrowSecondList: import("vue").ComputedRef<any[]>;
-    getAmPmFlag: (hour: any) => string;
-    emitSelectRange: (type: any) => void;
-    adjustCurrentSpinner: (type: any) => void;
-    typeItemHeight: (type: any) => any;
-    listHoursRef: Ref<HTMLElement>;
-    listMinutesRef: Ref<HTMLElement>;
-    listSecondsRef: Ref<HTMLElement>;
-    onIncreaseClick: () => void;
-    onDecreaseClick: () => void;
-    handleClick: (type: any, { value, disabled }: {
-        value: any;
-        disabled: any;
-    }) => void;
-    secondsList: import("vue").ComputedRef<any[]>;
-    timePartsMap: import("vue").ComputedRef<{
-        hours: import("vue").ComputedRef<any>;
-        minutes: import("vue").ComputedRef<any>;
-        seconds: import("vue").ComputedRef<any>;
-    }>;
-    arrowListMap: import("vue").ComputedRef<{
-        hours: import("vue").ComputedRef<any[]>;
-        minutes: import("vue").ComputedRef<any[]>;
-        seconds: import("vue").ComputedRef<any[]>;
-    }>;
-    listMap: import("vue").ComputedRef<{
-        hours: import("vue").ComputedRef<any[]>;
-        minutes: import("vue").ComputedRef<any[]>;
-        seconds: import("vue").ComputedRef<any[]>;
-    }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "select-range" | "set-option")[], "change" | "select-range" | "set-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    role: unknown;
-    spinnerDate: unknown;
-    showSeconds: boolean;
-    arrowControl: boolean;
-    amPmMode: unknown;
-} & {
-    disabledHours?: unknown;
-    disabledMinutes?: unknown;
-    disabledSeconds?: unknown;
-}>, {
-    showSeconds: boolean;
-    arrowControl: boolean;
-    amPmMode: unknown;
-}>;
-export default _default;
--- a/src/components/common/MytTimePicker/src/time-picker-com/panel-time-pick.vue.d.ts
+++ b/src/components/common/MytTimePicker/src/time-picker-com/panel-time-pick.vue.d.ts
@@ -1,45 +0,0 @@
-import { PropType } from 'vue';
-import dayjs, { Dayjs } from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    visible: BooleanConstructor;
-    actualVisible: {
-        type: BooleanConstructor;
-        default: any;
-    };
-    datetimeRole: {
-        type: StringConstructor;
-    };
-    parsedValue: {
-        type: PropType<string | dayjs.Dayjs>;
-    };
-    format: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {
-    transitionName: import("vue").ComputedRef<"" | "el-zoom-in-top">;
-    arrowControl: any;
-    onSetOption: (e: any) => void;
-    t: (...args: any[]) => string;
-    handleConfirm: (visible: boolean, first: any) => void;
-    handleChange: (_date: Dayjs) => void;
-    setSelectionRange: (start: any, end: any) => void;
-    amPmMode: import("vue").ComputedRef<"" | "A" | "a">;
-    showSeconds: import("vue").ComputedRef<any>;
-    handleCancel: () => void;
-    disabledHours: any;
-    disabledMinutes: any;
-    disabledSeconds: any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "select-range" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    visible: boolean;
-    actualVisible: boolean;
-    format: unknown;
-} & {
-    datetimeRole?: unknown;
-    parsedValue?: unknown;
-}>, {
-    visible: boolean;
-    actualVisible: boolean;
-    format: unknown;
-}>;
-export default _default;
--- a/src/components/common/MytTimePicker/src/time-picker-com/panel-time-range.vue.d.ts
+++ b/src/components/common/MytTimePicker/src/time-picker-com/panel-time-range.vue.d.ts
@@ -1,44 +0,0 @@
-import { PropType } from 'vue';
-import dayjs from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    visible: BooleanConstructor;
-    actualVisible: BooleanConstructor;
-    parsedValue: {
-        type: PropType<string | dayjs.Dayjs[]>;
-    };
-    format: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {
-    arrowControl: any;
-    onSetOption: (e: any) => void;
-    setMaxSelectionRange: (start: any, end: any) => void;
-    setMinSelectionRange: (start: any, end: any) => void;
-    btnConfirmDisabled: import("vue").ComputedRef<boolean>;
-    handleCancel: () => void;
-    handleConfirm: (visible?: boolean) => void;
-    t: (...args: any[]) => string;
-    showSeconds: import("vue").ComputedRef<any>;
-    minDate: import("vue").ComputedRef<any>;
-    maxDate: import("vue").ComputedRef<any>;
-    amPmMode: import("vue").ComputedRef<"" | "A" | "a">;
-    handleMinChange: (date: any) => void;
-    handleMaxChange: (date: any) => void;
-    minSelectableRange: import("vue").Ref<any[]>;
-    maxSelectableRange: import("vue").Ref<any[]>;
-    disabledHours_: (role: any, compare: any) => any[];
-    disabledMinutes_: (hour: any, role: any, compare: any) => any;
-    disabledSeconds_: (hour: any, minute: any, role: any, compare: any) => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "select-range" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    visible: boolean;
-    actualVisible: boolean;
-    format: unknown;
-} & {
-    parsedValue?: unknown;
-}>, {
-    visible: boolean;
-    actualVisible: boolean;
-    format: unknown;
-}>;
-export default _default;
--- a/src/components/common/MytTimePicker/src/time-picker-com/useTimePicker.d.ts
+++ b/src/components/common/MytTimePicker/src/time-picker-com/useTimePicker.d.ts
@@ -1,155 +0,0 @@
-import { Dayjs } from 'dayjs';
-export declare const getTimeLists: (disabledHours: any, disabledMinutes: any, disabledSeconds: any) => {
-    getHoursList: (role: any, compare?: any) => any[];
-    getMinutesList: (hour: any, role: any, compare?: any) => any[];
-    getSecondsList: (hour: any, minute: any, role: any, compare?: any) => any[];
-};
-export declare const getAvaliableArrs: (disabledHours: any, disabledMinutes: any, disabledSeconds: any) => {
-    getAvaliableHours: (role: any, compare?: any) => any;
-    getAvaliableMinutes: (hour: any, role: any, compare?: any) => any;
-    getAvaliableSeconds: (hour: any, minute: any, role: any, compare?: any) => any;
-};
-export declare const useOldValue: (props: {
-    parsedValue?: string | Dayjs | Dayjs[];
-    visible: boolean;
-}) => import("vue").Ref<string | {
-    clone: () => Dayjs;
-    isValid: () => boolean;
-    year: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    month: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    date: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    day: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    hour: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    minute: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    second: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    millisecond: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    set: (unit: import("dayjs").UnitType, value: number) => Dayjs;
-    get: (unit: import("dayjs").UnitType) => number;
-    add: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
-    subtract: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
-    startOf: (unit: import("dayjs").OpUnitType) => Dayjs;
-    endOf: (unit: import("dayjs").OpUnitType) => Dayjs;
-    format: (template?: string) => string;
-    diff: (date: import("dayjs").ConfigType, unit?: "year" | "month" | "date" | "day" | "hour" | "minute" | "second" | "millisecond" | "week" | "d" | "M" | "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: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isSame: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    locale: {
-        (): string;
-        (preset: string | ILocale, object?: Partial<ILocale>): Dayjs;
-    };
-    localeData: () => any;
-    week: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    weekYear: () => number;
-    dayOfYear: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    isSameOrAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isSameOrBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-} | {
-    clone: () => Dayjs;
-    isValid: () => boolean;
-    year: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    month: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    date: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    day: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    hour: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    minute: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    second: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    millisecond: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    set: (unit: import("dayjs").UnitType, value: number) => Dayjs;
-    get: (unit: import("dayjs").UnitType) => number;
-    add: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
-    subtract: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
-    startOf: (unit: import("dayjs").OpUnitType) => Dayjs;
-    endOf: (unit: import("dayjs").OpUnitType) => Dayjs;
-    format: (template?: string) => string;
-    diff: (date: import("dayjs").ConfigType, unit?: "year" | "month" | "date" | "day" | "hour" | "minute" | "second" | "millisecond" | "week" | "d" | "M" | "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: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isSame: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    locale: {
-        (): string;
-        (preset: string | ILocale, object?: Partial<ILocale>): Dayjs;
-    };
-    localeData: () => any;
-    week: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    weekYear: () => number;
-    dayOfYear: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    isSameOrAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isSameOrBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-}[]>;
--- a/src/components/common/MytTimePicker/src/time-picker.d.ts
+++ b/src/components/common/MytTimePicker/src/time-picker.d.ts
@@ -1,154 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    isRange: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    name: {
-        type: (ArrayConstructor | StringConstructor)[];
-        default: string;
-    };
-    popperClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    format: {
-        type: StringConstructor;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    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[]>;
-    };
-    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<{
-    isRange: boolean;
-    name: unknown;
-    popperClass: unknown;
-    type: unknown;
-    clearable: boolean;
-    clearIcon: unknown;
-    editable: boolean;
-    prefixIcon: unknown;
-    readonly: boolean;
-    disabled: boolean;
-    placeholder: unknown;
-    popperOptions: unknown;
-    modelValue: unknown;
-    rangeSeparator: unknown;
-    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;
-}>, {
-    isRange: boolean;
-    name: unknown;
-    popperClass: unknown;
-    type: unknown;
-    clearable: boolean;
-    clearIcon: unknown;
-    editable: boolean;
-    prefixIcon: unknown;
-    readonly: boolean;
-    disabled: boolean;
-    placeholder: unknown;
-    popperOptions: unknown;
-    modelValue: unknown;
-    rangeSeparator: unknown;
-    shortcuts: unknown;
-    arrowControl: boolean;
-    validateEvent: boolean;
-    unlinkPanels: boolean;
-}>;
-export default _default;
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -11,6 +11,7 @@
        :page-size="Number(pageObj.pageSize)"
        :layout="layout"
        :total="pageObj.total"
+        v-bind="bind"
    >
      <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"
                 :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size"
@@ -23,8 +24,8 @@
 </template>

 <script>
-import { defaultPageSize } from '@/utils/constants'
-import { storageKey } from '@/utils/constants'
+import { defaultPageSize, storageKey } from '@/utils/constants'
+
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -42,15 +43,23 @@ export default {
    layout: {
      type: String,
      default: 'total, prev, pager, next, slot'
+    },
+    bind: {
+      type: Object,
+      default: () => {}
+    },
+    storePageNoOnUrl: {
+      type: Boolean,
+      default: true
    }
  },
  /**
   * 添加vue3的setup，目的是添加/获取地址栏的参数
   */
-  setup () {
+  setup (props) {
    const { query } = useRoute()
    const pageSize = ref(defaultPageSize)
-    const currentPageNo = ref(query.pageNo || 1)
+    const currentPageNo = ref(props.storePageNoOnUrl ? (query.pageNo || (props.pageObj.pageNo || 1)) : (props.pageObj.pageNo || 1))

    return {
      pageSize,
@@ -186,7 +195,6 @@ export default {
      }
    }

-    this.size(this.pageSize)
    this.currentPageNo = parseInt(this.currentPageNo)
    this.current(this.currentPageNo)
  },
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-ele-click-outside="changeDropdown" style="position: relative;z-index: 99" class="date-range-box">
+  <div v-ele-click-outside="changeDropdown" style="position: relative;z-index: 1" class="date-range-box">
    <div @click="showDropdown" class="date-range-text">
      <div class="calendar-popover-text"><i class="cn-icon cn-icon-Data"></i></div>
      <div class="calendar-popover-text" style="display: flex" v-if="isCustom">
@@ -25,6 +25,7 @@
                class="date_style"
                style="position: absolute;top: -53px;left: -536px;"
                :clearable="false"
+                :default-time="defaultTime"
                type="datetimerange"
                @change="timeArrChange"
            />
@@ -76,7 +77,7 @@
 </template>

 <script>
-import { ref, computed } from 'vue'
+import { ref, computed, watch, reactive } from 'vue'
 import { storageKey } from '@/utils/constants'
 import { getMillisecond, timestampToList } from '@/utils/date-util'
 import { useStore } from 'vuex'
@@ -86,7 +87,7 @@ export default {
  props: {
    startTime: {
      type: Number,
-      default: window.$dayJs.tz().valueOf() - 1 * 60 * 60 * 1000
+      default: window.$dayJs.tz().valueOf() - 60 * 60 * 1000
    },
    endTime: {
      type: Number,
@@ -127,6 +128,11 @@ export default {
      { value: 2880, name: 'last 2 days' }
    ]
    const dropdownFlag = ref(false)
+    // 默认日历选择时间，即开始时间YYYY-MM-DD 00:00:00,结束时间YYYY-MM-DD 59:59:59
+    const defaultTime = ref([
+      new Date(2023, 1, 1, 0, 0, 0),
+      new Date(2023, 1, 2, 23, 59, 59)
+    ])

    // computed
    const utcStr = computed(() => {
@@ -157,6 +163,21 @@ export default {
    // refs
    const newDatePicker = ref(null)

+    // echarts框选时间范围
+    const rangeEchartsData = reactive({
+      value: computed(() => store.state.panel.rangeEchartsData)
+    })
+
+    watch(() => rangeEchartsData.value, (newVal, oldVal) => {
+      if (newVal) {
+        myStartTime.value = getMillisecond(newVal.startTime)
+        myEndTime.value = getMillisecond(newVal.endTime)
+        isCustom.value = true
+        dateRangeValue.value = -1
+        returnValue()
+      }
+    })
+
    // methods
    /**
     * 打开/关闭时间面板
@@ -256,8 +277,10 @@ export default {
      myEndTime,
      dropdownFlag,
      utcStr,
+      rangeEchartsData,
      address,
      dateRangeArr,
+      defaultTime,
      dateRangeValue,
      isCustom,
      newDateValue,
@@ -277,9 +300,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-/deep/.el-input__inner {
-  visibility: hidden !important;
-}
-</style>
--- a/src/components/common/TimeRange/TimeRefresh.vue
+++ b/src/components/common/TimeRange/TimeRefresh.vue
@@ -42,17 +42,9 @@ export default {
      unit: 2,
      dropdownShow: false,
      interLabel: ''
-      // refreshArr: [
-      //   { value: -1, label: 'off' },
-      //   { value: 30, label: '30s' },
-      //   { value: 60, label: '1m' },
-      //   { value: 300, label: '5m' },
-      //   { value: 900, label: '15m' },
-      //   { value: 1800, label: '30m' }
-      // ]
    }
  },
-  setup (props, ctx) {
+  setup () {
    const { query } = useRoute()
    const store = useStore()
    const refreshArr = [
@@ -100,13 +92,12 @@ export default {
  methods: {
    setRefresh (val) {
      this.interval = val.value
-      this.interLabel = val.value == -1 ? '' : val.label
+      this.interLabel = val.value === -1 ? '' : val.label
      this.dropdownShow = false
      const now = window.$dayJs.tz().valueOf()
      if (val && val.value !== -1) {
        // 切换轮询请求时间频率时，发现有未结束的请求，终止请求
        const cancelList = this.$store.state.panel.httpCancel
-        // console.log('timeRefresh.vue------setRefresh------查看终止数量', cancelList, cancelList.length)
        if (cancelList.length > 0) {
          cancelList.forEach((cancel, index) => {
            cancel()
@@ -119,6 +110,7 @@ export default {
        }
        this.reloadUrl(dateParam)
        this.$store.commit('setRefreshTime', val.value)
+        this.$store.commit('setRefreshFlag', true)

        // 设置定时器
        this.intervalTimer = setInterval(() => {
--- a/src/components/layout/Container.vue
+++ b/src/components/layout/Container.vue
@@ -20,7 +20,8 @@ export default {
    entityDetectionStyle () {
      const route = this.$route.name !== undefined ? this.$route.name : this.$route
      if (listScrollPath.indexOf(route.path) > -1) {
-        return 'overflow:auto;background-color: #EFF2F5;'
+        const style = route.path === listScrollPath[0] ? 'overflow:auto;background-color: #EFF2F5;' : 'overflow:auto;'
+        return style
      } else {
        return ''
      }
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -2,8 +2,9 @@
  <div class="cn-header">
    <div class="cn-header__banner">
      <div class="banner__left">
-        <span @click="shrink" class="shrink-button" :class="{'shrink-button--collapse': showMenu}"><i class="cn-icon cn-icon-navigation"></i></span>
-        <img alt="loading..." height="26" :src="logo?logo:require('../../assets/img/logo-header.svg')"/>
+        <span @click="shrink" class="shrink-button" :class="{'shrink-button--collapse': showMenu}"><i
+            class="cn-icon cn-icon-navigation"></i></span>
+        <img alt="loading..." height="26" :src="logo?logo:require('../../assets/img/logo-header.svg')" @click="jump('/panel/networkOverview', '', '', 0)" style="cursor: pointer"/>
      </div>
      <!--个人操作-->
      <div class="personal">
@@ -12,23 +13,27 @@
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
-                <div id="header-to-english" :style="language === 'en'?'color:#0091ff':''" @click="changeLocal('en')">English</div>
+                <div id="header-to-english" :style="language === 'en'?'color:#0091ff':''" @click="changeLocal('en')">
+                  English
+                </div>
              </el-dropdown-item>
              <el-dropdown-item>
-                <div id="header-to-chinese" :style="language === 'cn'?'color:#0091ff':''" @click="changeLocal('cn')">中文</div>
+                <div id="header-to-chinese" :style="language === 'cn'?'color:#0091ff':''" @click="changeLocal('cn')">
+                  中文
+                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
-          <div class='login-user header-menu--item'>{{username}}&nbsp;<i class="cn-icon cn-icon-arrow-down"></i></div>
+          <div class='login-user header-menu--item'>{{ username }}&nbsp;<i class="cn-icon cn-icon-arrow-down"></i></div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
-                <div id="header-to-changepin" @click="showPinDialog">{{$t('overall.changePassword')}}</div>
+                <div id="header-to-changepin" @click="showPinDialog">{{ $t('overall.changePassword') }}</div>
              </el-dropdown-item>
              <el-dropdown-item>
-                <div id="header-to-logout" @click="logout">{{$t('overall.logout')}}</div>
+                <div id="header-to-logout" @click="logout">{{ $t('overall.logout') }}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
@@ -38,7 +43,8 @@
    <div class="cn-header__nav">
      <i class="cn-icon cn-icon-a-NetworkAnalytics"></i>
      <el-breadcrumb class="header__left-breadcrumb" separator=">">
-        <el-breadcrumb-item class="header__left-breadcrumb-item" :id="`breadcrumb${item}`" :title="item" v-for="(item,index) in breadcrumb" :key="item">
+        <el-breadcrumb-item class="header__left-breadcrumb-item" :id="`breadcrumb${item.value}`" :title="item.value"
+                            v-for="(item,index) in breadcrumb" :key="item.value">
          <template v-if="index===3">
            <div class="header__left-breadcrumb-item-select">
              <el-popover placement="bottom-start"
@@ -48,20 +54,21 @@
                          :hide-after="0"
                          :show-after="0"
                          popper-class="breadcrumb__popper"
-                          @show="showBreadcrumbPopover(item)"
+                          @show="showBreadcrumbPopover(item.value)"
                          @hide="hideBreadcrumbPopover()"
                          trigger="click">
                <template #reference>
-                  <div class="breadcrumb-button"  id="breadcrumbButton" :class="showBackground?'breadcrumb-button__active':''"  >
-                    <span  id="breadcrumbValue">
+                  <div class="breadcrumb-button" id="breadcrumbButton"
+                       :class="showBackground?'breadcrumb-button__active':''">
+                    <span id="breadcrumbValue">
                      <template v-if="curTabProp === 'qtype'">
-                        <span>{{dnsQtypeMapData.get(item) ? dnsQtypeMapData.get(item):item}}</span>
+                        <span>{{ dnsQtypeMapData.get(item.value)}}</span>
                      </template>
                      <template v-else-if="curTabProp === 'rcode'">
-                        <span>{{dnsRcodeMapData.get(item) ? dnsRcodeMapData.get(item):item}}</span>
+                        <span>{{ dnsRcodeMapData.get(item.value)}}</span>
                      </template>
                      <template v-else>
-                        <span>{{item}}</span>
+                        <span>{{ item.value }}</span>
                      </template>
                    </span><i class="cn-icon-xiala cn-icon"></i>
                  </div>
@@ -73,16 +80,17 @@
                              v-model="dropDownValue"
                              @input="dropDownSearch"></el-input>
                  </div>
-                  <ul class="select-dropdown" id="breadcrumbSelectDropdown"  @scroll="scrollList()">
-                    <li v-for="item in breadcrumbColumnValueListShow" title='' :key="item" :id="item" class="select-dropdown__item" @click="changeValue(item)" :class="selected?'':''">
+                  <ul class="select-dropdown" id="breadcrumbSelectDropdown" @scroll="scrollList()">
+                    <li v-for="item in breadcrumbColumnValueListShow" title='' :key="item" :id="item"
+                        class="select-dropdown__item" @click="changeValue(item)">
                      <template v-if="curTabProp === 'qtype'">
-                        <span>{{dnsQtypeMapData.get(item) ? dnsQtypeMapData.get(item):item}}</span>
+                        <span>{{ dnsQtypeMapData.get(item) }}</span>
                      </template>
                      <template v-else-if="curTabProp === 'rcode'">
-                        <span>{{dnsRcodeMapData.get(item) ? dnsRcodeMapData.get(item):item}}</span>
+                        <span>{{ dnsRcodeMapData.get(item) }}</span>
                      </template>
                      <template v-else>
-                        <span>{{item}}</span>
+                        <span>{{ item }}</span>
                      </template>
                    </li>
                  </ul>
@@ -91,38 +99,17 @@
            </div>
          </template>
          <template v-else-if="index===2">
-            <span v-if="route===wholeScreenRouterMapping.dns" >{{$t(item)}}</span>
-            <span v-else class="route-menu" @click="jump(route,item,'',3)">{{$t(item)}}</span>
+            <span v-if="route===wholeScreenRouterMapping.dns">{{ $t(item.value) }}</span>
+            <span v-else class="route-menu" @click="jump(route,item.value,'',3)">{{ $t(item.value) }}</span>
          </template>
+          <!-- index=0和index=1的点击跳转由breadcrumb里的数据控制 -->
          <template v-else-if="index===1">
-            <span class="route-menu" @click="jump(route,'','',2)" v-if="route.indexOf('detection') === -1">{{item}}</span>
-            <div class="header__left-breadcrumb-item-select" v-if="route.indexOf('detection') > -1">
-              <el-popover placement="bottom-start"
-                          v-if="route.indexOf('detection') > -1"
-                          ref="breadcrumbPopover"
-                          :show-arrow="false"
-                          :append-to-body="false"
-                          :hide-after="0"
-                          :show-after="0"
-                          popper-class="breadcrumb__popper"
-                          trigger="click">
-                <template #reference>
-                  <div class="breadcrumb-button"  id="breadcrumbButton2" :class="showBackground?'breadcrumb-button__active':''"  v-if="route.indexOf('detection') > -1">
-                    <span id="breadcrumbValue2"> {{item}}</span><i class="cn-icon-xiala cn-icon"></i>
-                  </div>
-                </template>
-                <el-row type="flex" justify="center" style="width: fit-content;flex-direction: column;">
-                  <ul class="select-dropdown" id="breadcrumbSelectDropdown2">
-                    <li v-for="item in detectionMenuList" title='' :key="item.name" :id="item.name" class="select-dropdown__item" @click="jump(item.path,'','',2)">
-                      <span>{{$t(item.i18n)}}</span>
-                    </li>
-                  </ul>
-                </el-row>
-              </el-popover>
-            </div>
+            <span v-if="item.clickable" class="route-menu" @click="jump(route,'','',2)">{{ item.value }}</span>
+            <span v-else>{{ item.value }}</span>
          </template>
          <template v-else>
-            <span>{{item}}</span>
+            <span v-if="item.clickable" class="route-menu" @click="jump(item.route,'','',0)">{{ item.value }}</span>
+            <span v-else>{{ item.value }}</span>
          </template>
        </el-breadcrumb-item>
      </el-breadcrumb>
@@ -140,22 +127,26 @@
      <div class="cn-menu__left">
        <div class="left-menu" v-for="menu in otherMenu" :key="menu.id" @click="jump(menu.route,'','',0)">
          <i :class="menu.icon"></i>
-          <span>{{$t(menu.i18n || menu.name)}}</span>
+          <span>{{ $t(menu.i18n || menu.name) }}</span>
          <i class="cn-icon cn-icon-right"></i>
        </div>
      </div>
      <div class="cn-menu__middle">
        <div class="middle-menus middle-menus--network-analytics">
-          <div class="middle-menus__header">{{$t('overall.networkAnalytics')}}</div>
+          <div class="middle-menus__header">{{ $t('overall.networkAnalytics') }}</div>
          <div class="middle-menus__body">
            <div style="width: 260px;">
              <template v-for="(menu, index) in networkAnalyticsMenu.children" :key="index">
-                <div class="middle-menu" v-if="index < 5" @click="jump(menu.route,'','',2)">{{$t(menu.i18n || menu.name)}}</div>
+                <div class="middle-menu" v-if="index < 5" @click="jump(menu.route,'','',2)">
+                  {{ $t(menu.i18n || menu.name) }}
+                </div>
              </template>
            </div>
            <div>
              <template v-for="(menu, index) in networkAnalyticsMenu.children" :key="index">
-                <div class="middle-menu" v-if="index >= 5 && index < 10" @click="jump(menu.route,'','',2)">{{$t(menu.i18n || menu.name)}}</div>
+                <div class="middle-menu" v-if="index >= 5 && index < 10" @click="jump(menu.route,'','',2)">
+                  {{ $t(menu.i18n || menu.name) }}
+                </div>
              </template>
            </div>
          </div>
@@ -167,12 +158,12 @@
    <el-dialog v-model="showChangePin"
               width="30%"
               :before-close="handleClose">
-      <el-form  :rules="changePassFormRules" :model="changePassForm" ref="changePassForm">
+      <el-form :rules="changePassFormRules" :model="changePassForm" ref="changePassForm">
        <el-row :gutter="20">
-            <el-col :span="24">
-              <el-form-item :label="$t('overall.currentPassword')" prop="oldPwd">
-                <el-input v-model="changePassForm.oldPwd" type="password"></el-input>
-              </el-form-item>
+          <el-col :span="24">
+            <el-form-item :label="$t('overall.currentPassword')" prop="oldPwd">
+              <el-input v-model="changePassForm.oldPwd" type="password"></el-input>
+            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('overall.newPassword')" prop="newPwd">
@@ -188,8 +179,8 @@
      </el-form>
      <template #footer>
        <span class="dialog-footer">
-          <el-button @click="showChangePin = false">{{$t('overall.cancel')}}</el-button>
-          <el-button type="primary" @click="submit">{{$t('overall.update')}}</el-button>
+          <el-button @click="showChangePin = false">{{ $t('overall.cancel') }}</el-button>
+          <el-button type="primary" @click="submit">{{ $t('overall.update') }}</el-button>
        </span>
      </template>
    </el-dialog>
@@ -197,14 +188,10 @@
 </template>

 <script>
-import { useRoute } from 'vue-router'
 import { get, put } from '@/utils/http'
 import {
  curTabState,
-  dbDrilldownTableConfig,
  entityType,
-  networkOverviewSearchUrl,
-  networkOverviewTabList,
  networkTable,
  operationType,
  storageKey,
@@ -213,9 +200,18 @@ import {
 } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
-import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig,getDnsMapData } from '@/utils/tools'
+import {
+  combineTabList,
+  getDefaultCurTab,
+  getTabList,
+  overwriteUrl,
+  urlParamsHandler,
+  combineDrilldownTableWithUserConfig,
+  getDnsMapData,
+  handleSpecialValue
+} from '@/utils/tools'
 import { getNowTime, getSecond } from '@/utils/date-util'
-import { db } from '@/indexedDB'
+import _ from 'lodash'

 export default {
  name: 'Header',
@@ -238,17 +234,32 @@ export default {
        newPwd2: ''
      },
      changePassFormRules: {
-        oldPwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
-        newPwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
-        newPwd2: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: passwordComparison, trigger: 'blur' }]
+        oldPwd: [{
+          required: true,
+          message: this.$t('validate.required'),
+          trigger: 'blur'
+        }],
+        newPwd: [{
+          required: true,
+          message: this.$t('validate.required'),
+          trigger: 'blur'
+        }],
+        newPwd2: [{
+          required: true,
+          message: this.$t('validate.required'),
+          trigger: 'blur'
+        }, {
+          validator: passwordComparison,
+          trigger: 'blur'
+        }]
      },
      showMenu: false,
      dropDownValue: '',
      breadcrumbColumnValueListShow: [],
-      curTabProp:'',
-      dnsRcodeMapData:[],
-      dnsQtypeMapData:[],
-      isDnsMapType:false,
+      curTabProp: '',
+      dnsRcodeMapData: new Map(),
+      dnsQtypeMapData: new Map(),
+      isDnsMapType: false,
      valueMeta: [],
      showBackground: false,
      selected: false,
@@ -269,7 +280,8 @@ export default {
      curPageNum: 1,
      curTabState: curTabState,
      urlChangeParams: {},
-      wholeScreenRouterMapping
+      wholeScreenRouterMapping,
+      logo: '' // 此处logo的url未被初始化，可能后续会改动
    }
  },
  computed: {
@@ -277,7 +289,7 @@ export default {
      return this.$store.getters.menuList.find(menu => menu.code === 'networkAnalytics')
    },
    otherMenu () {
-      return this.$store.getters.menuList.filter(menu => menu.code !== 'networkAnalytics')
+      return this.$store.getters.menuList.filter(menu => ['networkAnalytics', 'chart', 'I18N'].indexOf(menu.code) === -1)

      /* function excludeButton (menu) {
        for (let i = 0; i < menu.length; i++) {
@@ -293,27 +305,28 @@ export default {
      } */
    },
    breadcrumb () {
-      const breadcrumbMap = []
-      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
-      this.$store.getters.menuList.forEach(menu => {
-        if (this.$_.isEmpty(menu.children) && menu.route) {
-          breadcrumbMap.push({ name: this.$t(menu.i18n), path: menu.route, columnName: menu.columnName, columnValue: menu.columnValue })
-        } else if (!this.$_.isEmpty(menu.children)) {
-          menu.children.forEach(child => {
-            breadcrumbMap.push({ name: child.i18n ? this.$t(child.i18n) : child.name, parentName: menu.i18n ? this.$t(menu.i18n) : menu.name, path: child.route, columnName: child.columnName, columnValue: child.columnValue })
-          })
+      const breadcrumb = []
+      this.generateBreadcrumb(breadcrumb, this.$store.getters.menuList)
+      // 写死一级和二级菜单是否可以点击跳转
+      if (breadcrumb[0]) {
+        if (['knowledgeBase'].indexOf(breadcrumb[0].code) > -1) {
+          breadcrumb[0].clickable = true
        }
-      })
-      const breadcrumb = breadcrumbMap.find(b => this.route === b.path)
+        if (breadcrumb[1]) {
+          if (breadcrumb[1].route && breadcrumb[1].route.indexOf('/panel/') === 0) {
+            breadcrumb[1].clickable = true
+          }
+        }
+      }
+
      const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
      const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
-      let result = []
+
+      let result = [...breadcrumb]
      if (fourthMenu) {
-        result = breadcrumb ? [breadcrumb.parentName, breadcrumb.name, thirdMenu, fourthMenu] : []
+        result = [...result, { value: thirdMenu }, { value: fourthMenu }]
      } else if (thirdMenu) {
-        result = breadcrumb ? [breadcrumb.parentName, breadcrumb.name, thirdMenu] : []
-      } else {
-        result = breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
+        result = [...result, { value: thirdMenu }]
      }
      return result
    },
@@ -335,24 +348,75 @@ export default {
      if (this.from !== n) {
        this.from = n
      }
+    },
+    async breadcrumb (n) {
+      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
+      if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+        if (this.dnsQtypeMapData.size === 0) {
+          this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+        }
+        if (this.dnsRcodeMapData.size === 0) {
+          this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+        }
+      }
    }
  },
  async mounted () {
    this.from = Object.keys(this.entityType)[0]
-    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
-    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+    // 是否需要dns的qtype和rcode的数据字典
+    if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+      if (this.dnsQtypeMapData.size === 0) {
+        this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+      }
+      if (this.dnsRcodeMapData.size === 0) {
+        this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+      }
+    }
    this.initDropdownList()
  },
  setup () {
    const dateRangeValue = 60
-    const { startTime, endTime } = getNowTime(dateRangeValue)
-    const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
+    const {
+      startTime,
+      endTime
+    } = getNowTime(dateRangeValue)
+    const chartTimeFilter = ref({
+      startTime,
+      endTime,
+      dateRangeValue
+    })
    return {
      chartTimeFilter,
      entityType // 所有entity类型，用于header下拉框选择
    }
  },
  methods: {
+    generateBreadcrumb (breadcrumb, menus) {
+      const menu = menus.find(m => m.route === this.route)
+      if (menu) {
+        breadcrumb.unshift({
+          code: menu.code,
+          value: menu.i18n ? this.$t(menu.i18n) : menu.name,
+          route: menu.route,
+          type: menu.type
+        })
+        return true
+      } else {
+        for (let i = 0; i < menus.length; i++) {
+          if (!_.isEmpty(menus[i].children)) {
+            if (this.generateBreadcrumb(breadcrumb, menus[i].children)) {
+              breadcrumb.unshift({
+                code: menus[i].code,
+                value: menus[i].i18n ? this.$t(menus[i].i18n) : menus[i].name,
+                route: menus[i].route,
+                type: menus[i].type
+              })
+              return true
+            }
+          }
+        }
+      }
+    },
    handleClose () {
      this.showChangePin = false
    },
@@ -377,25 +441,25 @@ export default {
        window.location.reload()
      })
    },
-    getCurTabByLabel(label){
+    getCurTabByLabel (label) {
      let curTab = null
-      let tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
-      let curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
+      const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
+      const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
      if (curTableInCode && curTableInCode.tabList) {
-        curTab = curTableInCode.tabList.find(item => item.label == label)
+        curTab = curTableInCode.tabList.find(item => item.label === label)
      }
      return curTab
    },
    async initDropdownList () {
-      //是否需要dns的qtype和rcode的数据字典
+      // 是否需要dns的qtype和rcode的数据字典
      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
-      let currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
-      let columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
+      const currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
+      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
      let type = 'ip'
-      let tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
-      let curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
+      const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
+      const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
      if (curTableInCode && curTableInCode.tabList) {
-        let curTab = curTableInCode.tabList.find(item => item.label == columnName)
+        const curTab = curTableInCode.tabList.find(item => item.label === columnName)
        if (curTab) {
          type = curTab.prop
        }
@@ -407,19 +471,29 @@ export default {
        type: type,
        name: this.dropDownValue ? this.dropDownValue : ''
      }
+      // 有的界面刷新时没有drilldownList接口地址，会报404
+      if (!curTableInCode.url.drilldownList) {
+        return true
+      }
      get(curTableInCode.url.drilldownList, params).then(async response => {
        if (response.code === 200) {
          this.breadcrumbColumnValueListShow = response.data.result
-          this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
-          this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+          if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+            if (this.dnsQtypeMapData.size === 0) {
+              this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+            }
+            if (this.dnsRcodeMapData.size === 0) {
+              this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+            }
+          }
          this.$nextTick(() => {
            this.breadcrumbColumnValueListShow.forEach(item => {
              const selectedDom = document.getElementById(item)
              if (selectedDom) {
                let itemName = item
-                if(this.curTabProp === 'qtype'){
+                if (this.curTabProp === 'qtype') {
                  itemName = this.dnsQtypeMapData.get(item)
-                }else if(this.curTabProp === 'rcode'){
+                } else if (this.curTabProp === 'rcode') {
                  itemName = this.dnsRcodeMapData.get(item)
                }
                if (itemName === currentValue) {
@@ -454,34 +528,31 @@ export default {
    changeValue (value) {
      // 设置面包屑显示的内容及hover时的title
      let valName = value
-      if(this.tab === 'qtype'){
-        valName =this.dnsQtypeMapData.get(value)
-      }else if(this.tab === 'rcode'){
-        valName =this.dnsRcodeMapData.get(value)
+      if (this.tab === 'qtype') {
+        valName = this.dnsQtypeMapData.get(value)
+      } else if (this.tab === 'rcode') {
+        valName = this.dnsRcodeMapData.get(value)
      }
      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
      document.getElementById('breadcrumbValue').innerText = value
-      //document.getElementById('breadcrumbButton').setAttribute('title', valName)
      document.getElementById(this.valueMenuId).setAttribute('title', valName)
      document.getElementById('breadcrumbButton').click()
-      // const columnName = this.$store.getters.getBreadcrumbColumnName
      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
-      //const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
-      let curTab = this.getCurTabByLabel()
+      const curTab = this.getCurTabByLabel(columnName)
      if (curTab) {
        const queryCondition = []
        const searchProps = curTab.dillDownProp
        if (curTab.prop === 'protocolPort') {
          const valueGroup = value.split(':')
          if (valueGroup) {
-            queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
+            queryCondition.push('common_l7_protocol=\'' + valueGroup[0] + '\'')
            queryCondition.push('common_server_port=' + valueGroup[1])
          }
-          console.log(queryCondition.join(' AND '))
+          // console.log(queryCondition.join(' AND '))
          this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
        } else {
          searchProps.forEach(item => {
-            queryCondition.push(item + "='" + value.replaceAll("'", "\\\\'") + "'")
+            queryCondition.push(item + '=\'' + handleSpecialValue(value) + '\'')
          })
          this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
        }
@@ -495,7 +566,10 @@ export default {
    submit () {
      this.$refs.changePassForm.validate((valid) => {
        if (valid) {
-          put(api.pin, { oldPin: this.changePassForm.oldPwd, newPin: this.changePassForm.newPwd }).then(res => {
+          put(api.pin, {
+            oldPin: this.changePassForm.oldPwd,
+            newPin: this.changePassForm.newPwd
+          }).then(res => {
            if (res.code === 200) {
              this.$message.success('Success')
              this.showChangePin = false
@@ -516,17 +590,17 @@ export default {
      }
      this.urlChangeParams = {}
    },
-    async handleCurDrilldownTableConfig (thirdMenu, fourthMenu) {
-      const userId = localStorage.getItem(storageKey.userId)
+    async handleCurDrilldownTableConfig (thirdMenu) {
+      // const userId = localStorage.getItem(storageKey.userId)
      const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
-      const drillDownTableConfigs = await combinDrilldownTableWithUserConfig()
+      const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
+      const drillDownTableConfigs = await combineDrilldownTableWithUserConfig()
      const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType)
      const tables = currentTableConfig ? currentTableConfig.tables : []
      const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
      if (tables && tables.length > 0) {
        const curTable = tables.find(table => table.id === tableType)
        if (curTable) {
-          const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
          const tabList = getTabList(curTable, metric)// 未下钻的tab列表
          if (tabList && tabList.length > 0) {
            combineTabList(tableType, tabList, commonTabList)
@@ -540,6 +614,9 @@ export default {
      }
    },
    jump (route, columnName, columnValue, opeType) {
+      if (route === '/panel/linkMonitor' && opeType === 3) {
+        return true
+      }
      this.showMenu = false
      const menus = this.breadcrumb
      if (opeType) {
@@ -564,18 +641,18 @@ export default {
                child.columnName = columnName
                this.urlChangeParams[this.curTabState.thirdMenu] = columnName
                this.urlChangeParams[this.curTabState.fourthMenu] = columnValue
-                //const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
-                //let curTab = this.getCurTabByLabel()
-                //const type = curTab ? curTab.prop : ''
-                //this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
-                //this.urlChangeParams[this.curTabState.dimensionType] = type
+                // const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
+                // let curTab = this.getCurTabByLabel()
+                // const type = curTab ? curTab.prop : ''
+                // this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
+                // this.urlChangeParams[this.curTabState.dimensionType] = type
                this.urlChangeParams[this.curTabState.panelName] = columnValue
              } else if (columnName) { // 点击的为列名
                child.columnValue = ''
                child.columnName = columnName
                this.urlChangeParams[this.curTabState.thirdMenu] = columnName
                this.urlChangeParams[this.curTabState.fourthMenu] = ''
-                this.urlChangeParams[this.curTabState.panelName] = columnValue
+                this.urlChangeParams[this.curTabState.panelName] = columnName
                const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
                const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
                const curTab = getDefaultCurTab(tableType, metric, columnName)
@@ -605,11 +682,20 @@ export default {
        })
      } else if (opeType === 3) {
        this.$router.push({
-          query: { ...this.$route.query, fourthPanel: '', t: +new Date() }
+          query: {
+            ...this.$route.query,
+            fourthPanel: '',
+            t: +new Date()
+          }
        })
-      } else if (opeType != 4) {
+      } else if (opeType !== 4) {
        this.$router.push({
-          query: { ...this.$route.query, fourthPanel: '', thirdPanel: '', t: +new Date() }
+          query: {
+            ...this.$route.query,
+            fourthPanel: '',
+            thirdPanel: '',
+            t: +new Date()
+          }
        })
      }
      if (route === this.route) {
--- a/src/components/rightBox/report/ReportBox.vue
+++ b/src/components/rightBox/report/ReportBox.vue
@@ -8,7 +8,7 @@
    </div>
    <div class="right-box__container">
      <div class="container__form">
-        <el-form ref="userForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
+        <el-form ref="reportForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
          <!--name-->
          <el-form-item :label="$t('report.name')" prop="name">
            <el-input id="account-input-name" v-model="editObject.name" maxlength="64" placeholder=" " show-word-limit size="small" type="text"></el-input>
@@ -19,7 +19,6 @@
                       v-model="editObject.config.timeConfig.type"
                       class="right-box__select"
                       collapse-tags
-                       :disabled="!!editObject.id"
                       placeholder=" "
                       popper-class="right-box-select-dropdown right-box-select-report "
                       size="small"
@@ -31,7 +30,6 @@
            </el-select>
            <template v-if="editObject.config.timeConfig.type === 'this'">
              <el-select id="reportBoxTimeUnitSelect"
-                         :disabled="!!editObject.id"
                         v-model="editObject.config.timeConfig.unit"
                         class="right-box__select"
                         collapse-tags
@@ -45,7 +43,7 @@
              </el-select>
            </template>
            <div v-else-if="editObject.config.timeConfig.type === 'last' || editObject.config.timeConfig.type === 'previous'" style="display: flex;">
-              <el-input v-model.number="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder=" " :disabled="!!editObject.id">
+              <el-input v-model.number="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder=" ">
                <template #prepend><i @click="timeOffsetHandle('m')" class="cn-icon cn-icon-a-"></i></template>
                <template #append><i @click="timeOffsetHandle('p')" class="cn-icon cn-icon-a-1"></i></template>
              </el-input>
@@ -53,7 +51,6 @@
                         v-model="editObject.config.timeConfig.unit"
                         class="right-box__select right-box__select-single"
                         collapse-tags
-                         :disabled="!!editObject.id"
                         placeholder=" "
                         popper-class="right-box-select-dropdown  el-select-last"
                         size="small"
@@ -73,10 +70,8 @@
                    v-model="editObject.config.startTime"
                    size="small"
                    :format="dateFormat"
-                    :disabled="!!editObject.id"
                    :disabled-date="startDisabledDate"
                    @change="startTimeChang"
-                    @focus="startFocus"
                    prefix-icon="cn-icon cn-icon-shijian"
                    type="datetime"
                    placeholder=" "
@@ -93,10 +88,8 @@
                    v-model="editObject.config.endTime"
                    size="small"
                    :format="dateFormat"
-                    :disabled="!!editObject.id"
                    :disabled-date="endDisabledDate"
                    @change="endTimeChange"
-                    @focus="endFocus"
                    prefix-icon="cn-icon cn-icon-shijian"
                    type="datetime"
                    placeholder=" "
@@ -105,41 +98,41 @@
            </div>
          </el-form-item >
          <el-form-item class="el-height">
-            <el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize' || !!editObject.id" :label="$t('report.enableTimeSchedule')" size="large" />
+            <el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize'" :label="$t('report.enableTimeSchedule')" size="large" />
          </el-form-item>
          <!--Enable time schedule-->
          <el-form-item prop="enableTimeSchedule" v-if="scheduleChecked">
            <div class="enable-tab">
-              <div class="enable-tabs" @click="editObject.id ? null : (scheduleType = type.value)" v-for="type in scheduleTypeList" :key="type.value" :class="{'active': scheduleType === type.value, 'disable': editObject.id}">{{$t(type.name)}}</div>
+              <div class="enable-tabs" @click="scheduleTypeChange(type.value)" v-for="type in scheduleTypeList" :key="type.value" :class="{'active': scheduleType === type.value}">{{$t(type.name)}}</div>
            </div>
            <div class="enable-tabs-daily" v-if="scheduleType === scheduleTypeList[0].value">
              <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-              <el-input v-model.number="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
+              <el-input v-model.number="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;">
                <template #append>{{$t('report.day')}}</template>
              </el-input>
            </div>
-            <div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value" :disabled="!!editObject.id">
+            <div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value">
              <!-- 每隔几周暂时隐藏 -->
              <!-- <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
              <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="Please input">
                <template #append>{{$t('report.week')}}</template>
              </el-input>-->
-              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" style="margin-top: 0.3125rem" :disabled="!!editObject.id">
+              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" style="margin-top: 0.3125rem">
                <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- 月 -->
            <div class="enable-tabs-per-month" v-else-if="scheduleType === scheduleTypeList[2].value">
              <div class="enable-month-tab">
-                <div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'daily')" :class="{'active': monthScheduleType === 'daily', 'disable': editObject.id}">{{$t('report.date')}}</div>
-                <div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'weekly')" :class="{'active': monthScheduleType === 'weekly', 'disable': editObject.id}">{{$t('report.week')}}</div>
-                <el-checkbox v-model="monthIsCycle" :label="$t('report.cycle')" size="large" :disabled="!!editObject.id"/>
+                <div class="enable-month-tabs" @click="monthScheduleType = 'daily'" :class="{'active': monthScheduleType === 'daily'}">{{$t('report.date')}}</div>
+                <div class="enable-month-tabs" @click="monthScheduleType = 'weekly'" :class="{'active': monthScheduleType === 'weekly'}">{{$t('report.week')}}</div>
+                <el-checkbox v-model="monthIsCycle" :label="$t('report.cycle')" size="large"/>
              </div>
              <div class="enable-month-data-tab">
                <!-- 自定义月，循环 -->
                <template v-if="monthIsCycle">
                  <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-                  <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
+                  <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;">
                    <template #append>{{$t('report.month')}}</template>
                  </el-input>
                </template>
@@ -147,8 +140,8 @@
                <template v-else>
                  <div class="enable-month-moon-custom">{{$t('report.custom')}}</div>
                  <div class="enable-month-all">
-                    <el-checkbox v-model="monthCheckedAll" class="enable-month-all-months" :indeterminate="monthIsIndeterminate" @change="monthCheckAllChange" :label="$t('report.allMonths')" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.months" @change="monthCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="monthCheckedAll" class="enable-month-all-months" :indeterminate="monthIsIndeterminate" @change="monthCheckAllChange" :label="$t('report.allMonths')"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.months" @change="monthCheckChange">
                      <el-checkbox v-for="(item, index) in monthList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
@@ -156,8 +149,8 @@
                <!-- 按日期 -->
                <template v-if="monthScheduleType === 'daily'">
                  <div class="enable-month-data-tabs">
-                    <el-checkbox v-model="dateCheckedAll" :indeterminate="dateIsIndeterminate" @change="dateCheckAllChange" :label="$t('report.all')" size="large" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.monthDates" @change="dateCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="dateCheckedAll" :indeterminate="dateIsIndeterminate" @change="dateCheckAllChange" :label="$t('report.all')" size="large"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.monthDates" @change="dateCheckChange">
                      <el-checkbox v-for="item in dateList" :key="item" :label="item"/>
                    </el-checkbox-group>
                  </div>
@@ -170,7 +163,6 @@
                             class="right-box__select"
                             multiple
                             placeholder=" "
-                             :disabled="!!editObject.id"
                             popper-class="right-box-select-dropdown right-box-select-report"
                             size="small"
                             @change="()=>{ this.$forceUpdate() }">
@@ -179,8 +171,8 @@
                    </template>
                  </el-select>
                  <div class="enable-month-week">
-                    <el-checkbox v-model="monthWeekdayCheckedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="monthWeekdayIsIndeterminate" @change="monthWeekdayCheckAllChange" size="large" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" @change="monthWeekdayCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="monthWeekdayCheckedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="monthWeekdayIsIndeterminate" @change="monthWeekdayCheckAllChange" size="large"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" @change="monthWeekdayCheckChange">
                      <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
@@ -230,7 +222,7 @@
                       :disabled="!!editObject.id"
                       popper-class="right-box-select-dropdown right-box-select-report"
                       size="small"
-                       @change="typeChange">
+            >
              <template v-for="category in categoryList" :key="category.id">
                <el-option :label="category.name" :value="category.id"></el-option>
              </template>
@@ -241,26 +233,29 @@
 <!--            <el-input v-model="param.value" placeholder=" " v-for="(param, index) in editObject.categoryParams" :key="index" size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
              <template #prepend>{{param.key}}</template>
            </el-input>-->
-            <el-select v-model="param.value"
-                       v-for="(param, index) in editObject.categoryParams"
-                       :key="index"
-                       class="right-box__select right-box__select--param"
-                       placeholder=" "
-                       filterable
-                       :disabled="!!editObject.id"
-                       popper-class="right-box-select-dropdown right-box-select-report "
-                       size="small"
-            >
-              <template #prefix>
-                {{$t(param.i18n)}}
-              </template>
-              <template v-for="paramOption in paramsOptions">
-                <template v-if="paramOption.key === param.key">
+            <template v-for="(param, index) in editObject.categoryParams" :key="index">
+              <el-input v-if="param.labelType === 'input'" v-model="param.value" placeholder=" " size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
+                <template #prepend>{{param.key}}</template>
+              </el-input>
+              <el-select v-model="param.value"
+                         v-else
+                         class="right-box__select right-box__select--param"
+                         placeholder=" "
+                         filterable
+                         :disabled="!!editObject.id"
+                         popper-class="right-box-select-dropdown right-box-select-report "
+                         size="small"
+              >
+                <template #prefix>
+                  {{$t(param.i18n)}}
+                </template>
+                <template v-for="paramOption in paramsOptions">
+                  <template v-if="paramOption.key === param.key">
                    <el-option :key="p" :value="p" v-for="p in paramOption.options"></el-option>
                  </template>
                </template>
-
-            </el-select>
+              </el-select>
+            </template>
          </el-form-item>
        </el-form>
      </div>
@@ -283,28 +278,8 @@ import { api } from '@/utils/api'
 import _ from 'lodash'
 import { get, post, put } from '@/utils/http'
 import { dateFormat, getMillisecond } from '@/utils/date-util'
-import { ref } from 'vue'
-const paramValidator = (rule, value, callback) => {
-  let validate = true
-  if (value && value.length > 0) {
-    const hasEmpty = value.some(v => {
-      return !v.value && v.value !== 0
-    })
-    validate = !hasEmpty
-  }
-  return validate
-}
-const nameValidator = (rule, value, callback) => {
-  let validate = true
-  const reg = /^[\u4e00-\u9fa5A-Za-z0-9\-\_]*$/
-  if (reg.test(value)) {
-    validate = true
-  } else {
-    validate = false
-  }
-  return validate
-}
-
+import { ref, getCurrentInstance } from 'vue'
+import i18n from '@/i18n'
 export default {
  name: 'ReportBox',
  mixins: [rightBoxMixin],
@@ -313,32 +288,21 @@ export default {
    currentCategoryId: Number
  },
  setup () {
+    const { proxy } = getCurrentInstance()
+
    const startTime = ref('')
    const endTime = ref('')
-    const focus = ref('')
-    const focusDate = ref('')
    function endTimeChange (val) {
      endTime.value = val
    }
    function startTimeChang (val) {
      startTime.value = val
    }
-    function startFocus (val) {
-      focus.value = val.target.value
-    }
-    function endFocus (val) {
-      focusDate.value = val.target.value
-    }
    const endDisabledDate = (time) => {
      if (time.getTime() > new Date()) {
        return true
      }
-      if (startTime.value != '' && startTime.value > time) {
-        return true
-      }
-      if (focusDate.value != '' && endTime.value > time) {
-        return false
-      } else if (endTime.value != '' && endTime.value < time) {
+      if (startTime.value !== '' && startTime.value > time) {
        return true
      }
    }
@@ -346,22 +310,71 @@ export default {
      if (time.getTime() > new Date()) {
        return true
      }
-      if (focus.value != '' && startTime.value > time) {
-        return false
-      } else if (startTime.value != '' && startTime.value > time) {
+      if (endTime.value !== '' && endTime.value < time) {
        return true
      }
-      if (endTime.value != '' && endTime.value < time) {
-        return true
+    }
+
+    const paramValidator = (rule, value, callback) => {
+      let validate = true
+      if (value && value.length > 0) {
+        const hasEmpty = value.some(v => {
+          return !v.value && v.value !== 0
+        })
+        validate = !hasEmpty
      }
+      return validate
+    }
+    const nameValidator = (rule, value, callback) => {
+      let validate = true
+      const reg = /^[\u4e00-\u9fa5A-Za-z0-9\-\_]*$/
+      validate = reg.test(value)
+      return validate
+    }
+    const startTimeValidator = (rule, value, callback) => {
+      const form = proxy.$refs.reportForm
+      if (form.model.config.endTime) {
+        form.validateField('config.endTime', () => null)
+      }
+      callback()
+    }
+    const endTimeValidator = (rule, value, callback) => {
+      let validate = true
+      if (startTime.value !== '' && value <= startTime.value) {
+        validate = false
+      }
+      return validate
+    }
+    const rules = { // 表单校验规则
+      name: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'blur' },
+        { validator: nameValidator, message: i18n.global.t('validate.onlyAllowNumberLetterChinese-_'), trigger: 'blur' }
+      ],
+      categoryId: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' }
+      ],
+      schedulerStart: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' }
+      ],
+      'config.startTime': [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' },
+        { validator: startTimeValidator, trigger: 'change' }
+      ],
+      'config.endTime': [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' },
+        { validator: endTimeValidator, message: i18n.global.t('validate.endTimeGreaterThanStart'), trigger: 'change' }
+      ],
+      categoryParams: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'blur' },
+        { validator: paramValidator, message: i18n.global.t('validate.required'), trigger: 'blur' }
+      ]
    }
    return {
      endDisabledDate,
      startDisabledDate,
      startTimeChang,
      endTimeChange,
-      startFocus,
-      endFocus
+      rules
    }
  },
  data () {
@@ -391,48 +404,20 @@ export default {
      monthWeekdayCheckedAll: false,
      monthWeekdayIsIndeterminate: false,

-      rules: { // 表单校验规则
-        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: nameValidator, message: this.$t('validate.onlyAllowNumberLetterChinese-_'), trigger: 'blur' }
-        ],
-        categoryId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        schedulerStart: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        'config.startTime': [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        'config.endTime': [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        categoryParams: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: paramValidator, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      },
      paramsOptions: []
    }
  },
  watch: {
    scheduleType (n, o) {
      this.editObject.config.schedulerConfig.type = n
-      if (!this.editObject.id) {
-        this.cleanScheduleConfig()
-      }
+      this.cleanScheduleConfig()
    },
    scheduleChecked (n) {
      this.editObject.config.isScheduler = n ? 1 : 0
-      if (!this.editObject.id) {
-        this.cleanScheduleConfig()
-      }
+      this.cleanScheduleConfig()
    },
    monthScheduleType (n) {
-      if (!this.editObject.id) {
-        this.cleanScheduleConfig()
-      }
+      this.cleanScheduleConfig()
    },
    monthIsCycle (n) {
      if (!this.editObject.id) {
@@ -566,15 +551,13 @@ export default {
          this.editObject.config.timeConfig.offset--
        }
      }
-    },
-    typeChange (id) {
-
    },
    cleanScheduleConfig () {
      this.editObject.config.schedulerConfig.monthDates = []
      this.editObject.config.schedulerConfig.weekDates = []
      this.editObject.config.schedulerConfig.months = []
      this.editObject.config.schedulerConfig.monthWeekDates = []
+      this.editObject.config.schedulerConfig.interval = 1
      this.monthIsCycle = true
      this.dateCheckedAll = false
      this.dateIsIndeterminate = false
@@ -588,11 +571,14 @@ export default {
        this.scheduleChecked = false
      }
    },
+    scheduleTypeChange (val) {
+      this.scheduleType = val
+    },
    save () {
      if (this.blockOperation.save) { return }
      this.blockOperation.save = true

-      this.$refs.userForm.validate((valid) => {
+      this.$refs.reportForm.validate((valid) => {
        if (valid) {
          let startTime = ''
          let endTime = ''
--- a/src/components/table/CnDataList.vue
+++ b/src/components/table/CnDataList.vue
@@ -2,31 +2,29 @@
  <div :class="from" class="list-page">
    <!-- 主页面 -->
    <div class="main-list">
-      <!-- 顶部工具栏 -->
      <div class="main-container">
+        <!-- 顶部工具栏 -->
        <div class="top-tools">
          <div class="top-tool-left" style="min-width: 300px">
            <slot name="top-tool-left"></slot>
-          </div>
-          <div class="top-tool-right">
-<!--           <el-input v-model="keyWord" value="keyWord"></el-input>
-            <el-button @click="onsearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
            <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
              <div style="display: flex">
-                <el-input
-                    v-model="keyWord"  size="small" @keyup.enter="onsearch"></el-input>
-<!--                <el-button icon="el-icon-search" @click="onsearch" size="small"></el-button>-->
-                <button   class="top-tool-btn" style="border-radius: 0px"
-                        type="button" @click="onsearch">
+                <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
+                <!--                <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
+                <button class="top-tool-btn  top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
                  <i class="el-icon-search"></i>
                </button>
              </div>
            </div>
+          </div>
+          <div class="top-tool-right">
+<!--           <el-input v-model="keyWord" value="keyWord"></el-input>
+            <el-button @click="onSearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
+
            <slot name="top-tool-right"></slot>
-            <button v-if="showLayout.indexOf('elementSet') > -1"  class="top-tool-btn"
-                    type="button" @click="tools.showCustomTableTitle = true">
-              <i class="cn-icon-gear cn-icon"></i>
-            </button>
+            <div  v-if="showLayout.indexOf('elementSet') > -1" class="btn-customize"  @click="tools.showCustomTableTitle = true">
+              <i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>
+            </div>
          </div>
        </div>
        <div class="cn-table">
@@ -94,7 +92,7 @@ export default {
    updateCustomTableTitle (custom) {
      this.$emit('update:customTableTitle', custom)
    },
-    onsearch () {
+    onSearch () {
      const params = {
        q: this.keyWord
      }
--- a/src/components/table/ColumnCustomize.vue
+++ b/src/components/table/ColumnCustomize.vue
@@ -19,18 +19,18 @@
      </div>
    </div>
    <div class="custom-bottom-btns">
-      <el-button size="mini" v-if="isCancel" :id="tableId+'-element-set-none'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new is-cancel" type="button" @click="batchHandler(false)">
+      <el-button size="mini" v-if="isCancel" :id="tableId+'-element-set-none'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new is-cancel" @click="batchHandler(false)">
        <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
      </el-button>
-      <el-button size="mini" v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="batchHandler(true)">
+      <el-button size="mini" v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="batchHandler(true)">
        <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
      </el-button>
-      <div>
-        <el-button size="mini" :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="esc">
+      <div class="custom-bottom-btns-right">
+        <el-button size="mini" :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="esc">
          <span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>
        </el-button>
-        <el-button size="mini" :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" type="button" @click="save" style="background-color: #0091ff;color:#DCDFE6">
-          <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
+        <el-button size="mini" :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" @click="save" style="background-color: #0091ff;color:#DCDFE6">
+          <span class="top-tool-btn-txt top-tool-btn-save">{{$t('overall.save')}}</span>
        </el-button>
      </div>
    </div>
@@ -86,6 +86,7 @@ export default {
    // 单选
    handler (val, index) {
      if (!this.allowedAll && !val.allowed && (index === 0 || index === 1 || val.NotSet)) {
+        //
      } else {
        this.custom[index].show = !this.custom[index].show
      }
--- a/src/components/table/administration/ChartTable.vue
+++ b/src/components/table/administration/ChartTable.vue
@@ -110,7 +110,6 @@
 <script>
 import table from '@/mixins/table'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
-import { api } from '@/utils/api'

 export default {
  name: 'chartTable',
--- a/src/components/table/administration/GalaxyProxyTable.vue
+++ b/src/components/table/administration/GalaxyProxyTable.vue
--- a/src/components/table/administration/I18nTable.vue
+++ b/src/components/table/administration/I18nTable.vue
--- a/src/components/table/administration/OperationLogTable.vue
+++ b/src/components/table/administration/OperationLogTable.vue
@@ -92,7 +92,7 @@ export default {
          show: true
        },
        {
-          label: this.$t('config.operationlog.type'),
+          label: this.$t('overall.type'),
          prop: 'type',
          show: true
        },
--- a/src/components/table/administration/RoleTable.vue
+++ b/src/components/table/administration/RoleTable.vue
@@ -47,29 +47,6 @@
        <span v-else>{{scope.row[item.prop]}}</span>
      </template>
    </el-table-column>
-    <el-table-column
-            :resizable="false"
-            :width="operationWidth"
-            fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </template>
-    </el-table-column>
  </el-table>
 </template>

--- a/src/components/table/administration/UserTable.vue
+++ b/src/components/table/administration/UserTable.vue
@@ -62,29 +62,6 @@
        <span v-else>{{scope.row[item.prop]}}</span>
      </template>
    </el-table-column>
-    <el-table-column
-      :resizable="false"
-      :width="operationWidth"
-      fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </template>
-    </el-table-column>
  </el-table>
 </template>

--- a/src/components/table/report/reportTestTable.vue
+++ b/src/components/table/report/reportTestTable.vue
@@ -6,7 +6,7 @@
        :data="tableData"
        :height="height"
        :expand-row-keys="expandedIds"
-        empty-text=""
+        :empty-text="$t('npm.noData')"
        border
        tooltip-effect="light"
        :row-key="(row) => { return row.id }"
@@ -188,24 +188,8 @@
          <span v-else>{{ scope.row[item.prop] || '-' }}</span>
        </template>
      </el-table-column>
-      <el-table-column
-          :resizable="false"
-          :width="operationWidth"
-          fixed="right">
-        <template #header>
-          <div class="table-operation-title">{{ $t('overall.option') }}</div>
-        </template>
-        <template #default="scope">
-          <div class="table-operation-items">
-            <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i
-                class="cn-icon cn-icon-bianji"></i></button>
-            <button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i
-                class="cn-icon cn-icon-shanchu"></i></button>
-          </div>
-        </template>
-      </el-table-column>
    </el-table>
-    <div class="table-operation-all">
+<!--    <div class="table-operation-all">
      <el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
      <div class="table-operation-all-span">
        <span>{{ $t('overall.all') }}</span>
@@ -216,7 +200,7 @@
          <span>{{ $t('report.batchDeletion') }}</span>
        </div>
      </div>
-    </div>
+    </div>-->
  </div>
 </template>

@@ -308,6 +292,7 @@ export default {
      loadingTableId: '',
      loadingPreviewId: '',
      downDataList: [],
+      disableEdit:false,//编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
      // pageObj: {
      //   pageNo: 1,
      //   pageSize: 20,
@@ -556,6 +541,12 @@ export default {
        })
        // this.selectIds = selectIds
      }
+      this.batchDeleteObjs = objs
+      if(objs.length > 1) {
+        this.disableEdit = true
+      }else {
+        this.disableEdit = false
+      }
    },
    /**
     * 全选按钮
@@ -574,6 +565,13 @@ export default {
        this.$refs.dataTable.clearSelection()
      }

+      this.batchDeleteObjs = objs
+      if(objs.length > 1) {
+        this.disableEdit = true
+      }else {
+        this.disableEdit = false
+      }
+
      // this.selectIds = selectIds
    },
    /**
--- a/src/components/table/report/builtinReportTable.vue
+++ b/src/components/table/report/builtinReportTable.vue
@@ -1,172 +0,0 @@
-<template>
-  <el-table
-      id="userTable"
-      ref="dataTable"
-      :data="tableData"
-      :height="height"
-      border
-      @header-dragend="dragend"
-      @sort-change="tableDataSort"
-      @selection-change="selectionChange"
-  >
-    <el-table-column
-        :resizable="false"
-        align="center"
-        type="selection"
-        width="55">
-    </el-table-column>
-    <el-table-column
-        v-for="(item, index) in customTableTitles"
-        :key="`col-${index}`"
-        :fixed="item.fixed"
-        :label="item.label"
-        :min-width="`${item.minWidth}`"
-        :prop="item.prop"
-        :resizable="true"
-        :sort-orders="['ascending', 'descending']"
-        :sortable="item.sortable"
-        :width="`${item.width}`"
-    >
-      <template #header>
-        <span class="data-column__span">{{item.label}}</span>
-        <div class="col-resize-area"></div>
-      </template>
-      <template #default="scope" :column="item">
-        <span v-if="item.prop === 'dataRange'">
-          <template v-if="scope.row.startTime && scope.row.endTime">
-            {{dateFormatByAppearance(scope.row.startTime)}}<span style="padding: 0 5px">-</span>{{dateFormatByAppearance(scope.row.endTime)}}
-          </template>
-        </span>
-        <span v-else-if="item.prop === 'type'">
-            {{$_.get(scope.row.reportTemp, 'name')}}
-        </span>
-        <span v-else-if="item.prop === 'state'">
-            {{getJobStatus(scope.row)}}
-        </span>
-        <span v-else>{{scope.row[item.prop]}}</span>
-      </template>
-
-    </el-table-column>
-    <el-table-column
-        :resizable="false"
-        :width="operationWidth"
-        fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items" v-if="scope.row.state === 1">
-          <div class="table-operation-item--no-border" @click="tableOperation(['download', scope.row, 1])">
-            <loading :loading="loadingTableId === scope.row.id"></loading>
-            <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
-              <use xlink:href="#cn-icon-download2"></use>
-            </svg>
-          </div>
-          <div class="table-operation-item--no-border" @click="tableOperation(['preview', scope.row])">
-            <loading :loading="loadingPreviewId === scope.row.id"></loading>
-            <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-              <use xlink:href="#cn-icon-preview"></use>
-            </svg>
-          </div>
-<!--          <div class="table-operation-item&#45;&#45;no-border" @click="tableOperation(['rerun', scope.row])">
-            <loading :loading="loadingPreviewId === scope.row.id"></loading>
-            <svg class="icon2" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-              <use xlink:href="#cn-icon-refresh"></use>
-            </svg>
-          </div>-->
-        </div>
-      </template>
-    </el-table-column>
-  </el-table>
-  <div class="table-operation-all">
-    <el-checkbox v-model="checkboxAll" @change="selectAll(tableData)"></el-checkbox>
-    <div class="table-operation-all-span">
-      <span>{{ $t('overall.all') }}</span>
-      <div class="table-operation-back-down" :class="{'table-operation-all-checkbox': batchDow, 'table-operation-all-loading': loading}" @click="tableOperation(['download', this.checkboxIds, 2])">
-        <loading :loading="loading"></loading>
-        <span>{{$t('report.batchDow')}}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import table from '@/mixins/table'
-import Loading from '@/components/common/Loading'
-export default {
-  name: 'builtinReportTable',
-  mixins: [table],
-  components: {
-    Loading
-  },
-  data () {
-    return {
-      tableTitle: [ // 原始table列
-        {
-          label: this.$t('config.user.name'),
-          prop: 'name',
-          show: true,
-          sortable: 'custom'
-        }, /* {
-          label: this.$t('config.chart.remark'),
-          prop: 'remark',
-          show: true
-        }, */{
-          label: this.$t('overall.type'),
-          prop: 'type',
-          show: true,
-          sortable: 'custom'
-        }, {
-          label: this.$t('report.dataRange'),
-          prop: 'dataRange',
-          show: true,
-          minWidth: 110
-        }, {
-          label: this.$t('overall.completionTime'),
-          prop: 'finishTime',
-          show: true
-        }, {
-          label: this.$t('overall.status'),
-          prop: 'state',
-          show: true,
-          width: 130,
-          sortable: 'custom'
-        }
-      ],
-      checkboxAll: false,
-      checkboxIds: '',
-      batchDow: false,
-      builtinId: '',
-      indeterminate: false,
-      loading: false,
-      loadingTableId: '',
-      loadingPreviewId: ''
-
-    }
-  },
-  methods: {
-    getJobStatus (report) {
-      if (report.state === 1 && report.upload === 1) {
-        return this.$t('overall.completed')
-      } else {
-        return this.$t('overall.inProgress')
-      }
-    },
-    selectionChange (objs) {
-      this.$emit('selectionChange', objs)
-      this.checkboxIds = objs.map(item => { return item.id }).join(',')
-      this.checkboxAll = objs.length > 0 || objs.length === this.tableData.length
-      this.batchDow = objs.length > 0
-    },
-    selectAll (objs) {
-      if (objs) {
-        objs.forEach(item => {
-          this.$refs.dataTable.toggleAllSelection(item)
-        })
-      } else {
-        this.$refs.dataTable.clearSelection()
-      }
-    }
-  }
-}
-</script>
--- a/src/components/table/setting/KnowledgeBaseTable.vue
+++ b/src/components/table/setting/KnowledgeBaseTable.vue
@@ -0,0 +1,135 @@
+<template>
+  <el-table
+      id="knowledgeBaseTable"
+      ref="dataTable"
+      :data="tableData"
+      :height="height"
+      border
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @selection-change="selectionChange"
+  >
+    <el-table-column
+        :resizable="false"
+        align="center"
+        type="selection"
+        width="55">
+    </el-table-column>
+    <el-table-column
+        v-for="(item, index) in customTableTitles"
+        :key="`col-${index}`"
+        :fixed="item.fixed"
+        :label="item.label"
+        :min-width="`${item.minWidth}`"
+        :prop="item.prop"
+        :resizable="true"
+        :sort-orders="['ascending', 'descending']"
+        :sortable="item.sortable"
+        :width="`${item.width}`"
+        class="data-column"
+    >
+      <template #header>
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template  #default="scope" :column="item">
+        <template v-if="item.prop === 'name'">
+          <template v-if="scope.row.i18n">
+            <span>{{$t(scope.row.i18n)}}</span>
+          </template>
+          <template v-else-if="scope.row.name">
+            <span>{{scope.row.name}}</span>
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <template v-else-if="item.prop === 'tagType'">
+          <span class="type-tag">{{tagTypeText(scope.row[item.prop])}}</span>
+        </template>
+        <template v-else-if="item.prop === 'utime' || item.prop === 'ctime'">
+          <template v-if="scope.row[item.prop]">
+            {{dateFormatByAppearance(scope.row[item.prop])}}
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <template v-else-if="item.prop === 'cuser' || item.prop === 'uuser'">
+          <template v-if="scope.row[item.prop]">
+            {{scope.row[item.prop].username || '-'}}
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import { knowledgeBaseType } from '@/utils/constants'
+export default {
+  name: 'knowledgeBaseTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 100,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.roles.name'),
+          prop: 'tagName',
+          show: true,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.type'),
+          prop: 'tagType',
+          show: true
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true
+        },
+        {
+          label: this.$t('overall.createdBy'),
+          prop: 'cuser',
+          show: true
+        },
+        {
+          label: this.$t('config.user.createTime'),
+          prop: 'ctime',
+          show: false,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('overall.updatedBy'),
+          prop: 'uuser',
+          show: false
+        },
+        {
+          label: this.$t('overall.updateTime'),
+          prop: 'utime',
+          show: false,
+          sortable: 'custom'
+        }
+      ]
+    }
+  },
+  computed: {
+    tagTypeText () {
+      return function (type) {
+        const t = knowledgeBaseType.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    }
+  }
+}
+</script>
--- a/Show More
+++ b/Show More