perf: 样式调整

1.dashboard-table背景色
2.metric preview Options字色、小标题与输入框间距加大
3.所有输入框、分页按钮背景色
4.cascade、下拉框的active字色
5.dashboard 图表横向间距

nezha-fronted/package-lock.json

@@ -7,8 +7,7 @@
     "@sindresorhus/is": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
-      "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==",
+      "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow=="
-      "dev": true
     },
     "@types/q": {
       "version": "1.5.2",
@@ -340,9 +339,9 @@
       "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
-      "version": "1.9.0",
+      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
-      "integrity": "sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A=="
+      "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
     "axios": {
       "version": "0.19.0",
@@ -1590,7 +1589,6 @@
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz",
       "integrity": "sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=",
-      "dev": true,
       "requires": {
         "clone-response": "1.0.2",
         "get-stream": "3.0.0",
@@ -1604,14 +1602,12 @@
         "lowercase-keys": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
-          "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=",
+          "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY="
-          "dev": true
         },
         "normalize-url": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz",
           "integrity": "sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==",
-          "dev": true,
           "requires": {
             "prepend-http": "^2.0.0",
             "query-string": "^5.0.1",
@@ -1621,14 +1617,12 @@
         "prepend-http": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
+          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
-          "dev": true
         },
         "query-string": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
           "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
-          "dev": true,
           "requires": {
             "decode-uri-component": "^0.2.0",
             "object-assign": "^4.1.0",
@@ -1639,7 +1633,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
           "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
-          "dev": true,
           "requires": {
             "is-plain-obj": "^1.0.0"
           }
@@ -1929,7 +1922,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
       "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
-      "dev": true,
       "requires": {
         "mimic-response": "^1.0.0"
       }
@@ -3218,14 +3210,12 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
-      "dev": true
     },
     "decompress-response": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
       "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
-      "dev": true,
       "requires": {
         "mimic-response": "^1.0.0"
       }
@@ -3516,8 +3506,7 @@
     "duplexer3": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
-      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
-      "dev": true
     },
     "duplexify": {
       "version": "3.7.1",
@@ -4349,7 +4338,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
       "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
-      "dev": true,
       "requires": {
         "inherits": "^2.0.1",
         "readable-stream": "^2.0.0"
@@ -4999,8 +4987,7 @@
     "get-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
+      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
-      "dev": true
     },
     "get-value": {
       "version": "2.0.6",
@@ -5084,7 +5071,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
       "integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==",
-      "dev": true,
       "requires": {
         "@sindresorhus/is": "^0.7.0",
         "cacheable-request": "^2.1.1",
@@ -5147,20 +5133,20 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "6.10.2",
+          "version": "6.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.11.0.tgz",
-          "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
+          "integrity": "sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==",
           "requires": {
-            "fast-deep-equal": "^2.0.1",
+            "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
             "json-schema-traverse": "^0.4.1",
             "uri-js": "^4.2.2"
           }
         },
         "fast-deep-equal": {
-          "version": "2.0.1",
+          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -5195,8 +5181,7 @@
     "has-symbol-support-x": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz",
-      "integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw==",
+      "integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw=="
-      "dev": true
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -5208,7 +5193,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz",
       "integrity": "sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==",
-      "dev": true,
       "requires": {
         "has-symbol-support-x": "^1.4.1"
       }
@@ -5435,8 +5419,7 @@
     "http-cache-semantics": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-      "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
+      "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w=="
-      "dev": true
     },
     "http-deceiver": {
       "version": "1.2.7",
@@ -5648,7 +5631,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
       "integrity": "sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=",
-      "dev": true,
       "requires": {
         "from2": "^2.1.1",
         "p-is-promise": "^1.1.0"
@@ -5833,8 +5815,7 @@
     "is-object": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz",
-      "integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA=",
+      "integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA="
-      "dev": true
     },
     "is-path-cwd": {
       "version": "1.0.0",
@@ -5863,8 +5844,7 @@
     "is-plain-obj": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
-      "dev": true
     },
     "is-plain-object": {
       "version": "2.0.4",
@@ -5893,8 +5873,7 @@
     "is-retry-allowed": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
-      "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==",
+      "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg=="
-      "dev": true
     },
     "is-stream": {
       "version": "1.1.0",
@@ -5967,7 +5946,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isurl/-/isurl-1.0.0.tgz",
       "integrity": "sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==",
-      "dev": true,
       "requires": {
         "has-to-string-tag-x": "^1.2.0",
         "is-object": "^1.0.1"
@@ -6008,8 +5986,7 @@
     "json-buffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
-      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
+      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
-      "dev": true
     },
     "json-loader": {
       "version": "0.5.7",
@@ -6066,7 +6043,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
       "integrity": "sha512-eguHnq22OE3uVoSYG0LVWNP+4ppamWr9+zWBe1bsNcovIMy6huUJFPgy4mGwCd/rnl3vOLGW1MTlu4c57CT1xA==",
-      "dev": true,
       "requires": {
         "json-buffer": "3.0.0"
       }
@@ -6254,8 +6230,7 @@
     "lowercase-keys": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
-      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
-      "dev": true
     },
     "lru-cache": {
       "version": "4.1.5",
@@ -6525,8 +6500,7 @@
     "mimic-response": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
-      "dev": true
     },
     "minimalistic-assert": {
       "version": "1.0.1",
@@ -6796,9 +6770,9 @@
       }
     },
     "node-sass": {
-      "version": "4.13.0",
+      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
-      "integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==",
+      "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
       "requires": {
         "async-foreach": "^0.1.3",
         "chalk": "^1.1.1",
@@ -7187,20 +7161,17 @@
     "p-cancelable": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
-      "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
+      "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ=="
-      "dev": true
     },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
-      "dev": true
     },
     "p-is-promise": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
-      "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
+      "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4="
-      "dev": true
     },
     "p-limit": {
       "version": "1.3.0",
@@ -7230,7 +7201,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz",
       "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==",
-      "dev": true,
       "requires": {
         "p-finally": "^1.0.0"
       }
@@ -7379,8 +7349,7 @@
     "pify": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
-      "dev": true
     },
     "pinkie": {
       "version": "2.0.4",
@@ -10269,7 +10238,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
       "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
-      "dev": true,
       "requires": {
         "lowercase-keys": "^1.0.0"
       }
@@ -11292,8 +11260,7 @@
     "strict-uri-encode": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
-      "dev": true
     },
     "string-width": {
       "version": "2.1.1",
@@ -11500,8 +11467,7 @@
     "timed-out": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
-      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=",
+      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
-      "dev": true
     },
     "timers-browserify": {
       "version": "2.0.11",
@@ -11918,7 +11884,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
       "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
-      "dev": true,
       "requires": {
         "prepend-http": "^2.0.0"
       },
@@ -11926,16 +11891,14 @@
         "prepend-http": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
+          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
-          "dev": true
         }
       }
     },
     "url-to-options": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz",
-      "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=",
+      "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k="
-      "dev": true
     },
     "use": {
       "version": "3.1.1",
@@ -12114,7 +12077,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/vue-resource/-/vue-resource-1.5.1.tgz",
       "integrity": "sha512-o6V4wNgeqP+9v9b2bPXrr20CGNQPEXjpbUWdZWq9GJhqVeAGcYoeTtn/D4q059ZiyN0DIrDv/ADrQUmlUQcsmg==",
-      "dev": true,
       "requires": {
         "got": "^8.0.3"
       }

nezha-fronted/package.json

@@ -13,7 +13,7 @@
     "axios": "^0.19.0",
     "echarts": "^4.6.0",
     "element-ui": "^2.13.0",
-    "node-sass": "^4.13.0",
+    "node-sass": "^4.13.1",
     "vue": "^2.5.2",
     "vue-i18n": "^8.15.1",
     "vue-resource": "^1.5.1",

nezha-fronted/src/assets/stylus/index.scss

@@ -1,5 +1,7 @@
 $global-text-color-active: #ee9d3f; // 全局文字active字色
 
+$content-right-background-color: #fcfcfc; //右侧背景色
+
 $header-text-color: #e5e5e5; // header默认字色
 $header-text-color-active: #fff; // header高亮字色
 $header-text-color-hover: #444; //header hover字色
@@ -20,4 +22,6 @@ $box-title-color: #333; //弹框标题字体颜色
 
 $content-left-text-color: #666; //左侧菜单默认字色
 
+$dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色
+
 @import './main.scss';

nezha-fronted/src/assets/stylus/main.scss

@@ -93,7 +93,7 @@ li{
 }
 /* begin--按钮组件*/
 .nz-btn-min-width-35 {
-  min-width: 35px;
+  min-width: 45px;
 }
 .nz-btn-min-width-60 {
   min-width: 60px;
@@ -267,6 +267,7 @@ li{
   position: absolute;
   right: 8px;
   color: #666;
+  top: 0;
 }
 /* end--el-input扩展 */
 
@@ -324,7 +325,7 @@ li{
   float: left;
   width: 256px;
   height: 100%;
-  border-right: 1px solid #cccccc;
+  border-right: 1px solid #eeeeee;
   padding: 0 25px 0 15px;
   box-sizing: border-box;
 }
@@ -382,9 +383,10 @@ li{
 
 /* begin--右侧内容*/
 .content-right {
-  height: calc(100% - 131px);
+  height: 100%;
   margin-left: 256px;
   padding: 0 20px 0 20px;
+  background-color: $content-right-background-color;
 }
 .content-right-option {
   cursor: pointer;
@@ -406,8 +408,10 @@ li{
 }
 /* begin--顶部工具栏*/
 .top-tools {
-  margin: 26px 0 41px 0;
+  display: flex;
-  height: 1px;
+  height: 68px;
+  align-items : center;
+  justify-content: space-between
 }
 .top-tools .top-tool-search {
   width: 260px;
@@ -435,7 +439,6 @@ li{
   font-size: 14px;
   border-left: 1px solid white;
   border-bottom: 1px solid #d4d4d4;
-
 }
 .nz-table.el-table .el-table__header th:first-of-type {
   border-left: none;
@@ -446,13 +449,28 @@ li{
 .nz-table.el-table--border td, .el-table--border th, .nz-table .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
   border-right: none;
 }
+.chart-table .nz-table.el-table td {
+  background-color: white;
+}
 .nz-table.el-table td {
   padding: 0;
+  background-color: $content-right-background-color;
 }
 .nz-table.el-table th {
   padding: 0;
 }
-
+.nz-table.el-table th:last-of-type {
+  background-color: $content-right-background-color;
+}
+.nz-table .el-table__body-wrapper {
+  background-color: $content-right-background-color;
+}
+.chart-table .nz-table.el-table th:last-of-type {
+  background-color: white;
+}
+.chart-table .nz-table .el-table__body-wrapper {
+  background-color: white;
+}
 //小信息栏边框
 .nz-table.el-table th .cell{
   height: 36px;
@@ -734,6 +752,11 @@ li{
   font-size: 16px;
   color: black;
 }
+.right-box-form .el-form-item.metric-title-position .el-form-item__label {
+  padding: 0;
+  font-size: 14px;
+  color: #666;
+}
 .pop-item-wider .right-box-form .el-form-item .el-form-item__label {
   font-size: 14px;
   line-height: 32px;
@@ -888,8 +911,11 @@ li{
 
 
 /* begin--自定义可编辑的el-select下拉框样式*/
+.el-select-dropdown__wrap.el-scrollbar__wrap {
+  margin-bottom: 0 !important;
+}
 .config-dropdown { /* 若宽度不合适，自行增加新类覆盖宽度 */
-  width: 500px;
+  width: 490px;
 }
 .asset-dropdown {
   width: 400px;
@@ -939,3 +965,24 @@ li{
   color: #BA3939;
 }
 
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover,
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover,
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+  color:$global-text-color-active !important;
+  background-color: $dropdown-hover-background-color !important;
+}
+
+.el-button--text,
+.el-button--text:focus,
+.el-button--text:hover,
+.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path,
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
+.el-select-dropdown__item.selected,
+.el-date-table td.today span {
+  color: $global-text-color-active !important;
+}
+
+.el-date-table td.end-date span, .el-date-table td.start-date span {
+  background-color: $global-text-color-active !important;
+}

nezha-fronted/src/components/charts/chart-list.vue

@@ -1,8 +1,8 @@
 <style scoped>
   .chartBox {
     box-sizing: border-box;
-    padding-bottom: 10px;
     float:left;
+    padding: 0 10px 10px 10px;
   }
   .noData{
     text-align: center

nezha-fronted/src/components/common/header.vue

@@ -58,7 +58,7 @@
           <el-menu-item :index="'3-' + index">
             <div @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">
               <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
-              <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'">
+              <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData">
                 <template v-slot:optionZone>
                   <div @click="closeAllPop" class="menu-edit">
                     <i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>

nezha-fronted/src/components/common/pagination.vue

@@ -60,7 +60,7 @@ export default {
     float: left;
   }
   .pagination {
-    padding-top: 12px;
+    padding-top: 16px;
     text-align: center;
   }
 
@@ -84,11 +84,21 @@ export default {
   .el-pagination .el-pager .more::before {
     line-height: 20px;
   }
+  .el-pagination .el-pager .more {
+    background-color: $content-right-background-color;
+  }
+  .btn-next, .btn-prev {
+    background-color: $content-right-background-color !important;
+  }
+  .pagination input {
+    background-color: $content-right-background-color !important;
+  }
   .el-pager li.number{
     font-family: NotoSansSC-Regular;
     color: #666666;
     letter-spacing: 0;
     font-weight:normal;
+    background-color: $content-right-background-color;
   }
   .el-pager li.number.active{
     font-family: NotoSansSC-Regular;

nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue

@@ -61,9 +61,9 @@
     props: {
       chartInfo: Object,
       elementTarget:Object,
-      seriesData:Object,
+      seriesData:Array,
-      chartCount:Object,
+      chartCount:String,
-      series:Object
+      series:Array
     },
     data() {
       return {

nezha-fronted/src/components/common/searchInput.vue

@@ -1200,7 +1200,7 @@
     }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 
     .new-search{
         display: flex;
@@ -1216,7 +1216,7 @@
     }
     .new-search .search-input-all{
         width: 240px;
-        background: #fff;
+        background-color: $content-right-background-color;
         color: rgba(0,0,0,.55);
         height: 24px;
         line-height: 24px;
@@ -1226,6 +1226,9 @@
         position: relative;
 
     }
+    input {
+        background-color: $content-right-background-color;
+    }
     .search-input-all .btn-retract{
         padding: 0px 4px;
         text-align: center;

nezha-fronted/src/components/page/alert/config.vue

@@ -22,14 +22,19 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
-        <button id="alert-add" @click="toAdd"
+        <div>
-                class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
+
+        </div>
+        <div>
+          <button id="alert-add" @click="toAdd"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
                     <span class="top-tool-btn-txt">
                       <i class="nz-icon-create-square nz-icon"></i>
                       {{$t('overall.add')}}</span>
-        </button>
+          </button>
-        <div class="top-tool-search float-right">
+          <div class="top-tool-search float-right">
-          <search-input :searchMsg="searchMsg" @search="search"></search-input>
+            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+          </div>
         </div>
       </div>
       <el-table
@@ -37,7 +42,7 @@
         :data="tableData"
         border
         tooltip-effect="light"
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;">
         <el-table-column
           :resizable="false"

nezha-fronted/src/components/page/alert/list.vue

@@ -16,6 +16,7 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
+        <div></div>
         <div class="top-tool-search float-right">
           <search-input :searchMsg="searchMsg" @search="search"></search-input>
         </div>
@@ -25,7 +26,7 @@
         :data="tableData"
         border
         tooltip-effect="light"
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;">
         <el-table-column
           :resizable="false"

nezha-fronted/src/components/page/asset/asset.vue

@@ -31,18 +31,21 @@
 
     <div class="content-right">
       <div class="top-tools">
-        <button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-add">
+        <div></div>
-          <span class="top-tool-btn-txt">
+        <div>
-             <i class="nz-icon-create-square nz-icon"></i>
+          <button @click.stop="tagShow('showAdd')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-add">
-            {{$t('overall.add')}}</span>
+            <span class="top-tool-btn-txt">
-          <!-- ADD按钮 -->
+               <i class="nz-icon-create-square nz-icon"></i>
-        </button>
+              {{$t('overall.add')}}</span>
-        <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
+            <!-- ADD按钮 -->
+          </button>
+          <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
+        </div>
       </div>
 
       <el-table
         class="nz-table"
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;"
         :data="tableData"
         border

nezha-fronted/src/components/page/config/account.vue

@@ -22,21 +22,24 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
-        <button type="button" @click="toAdd"
+        <div></div>
-                class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="account-add">
+        <div>
+          <button type="button" @click="toAdd"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="account-add">
                 <span class="top-tool-btn-txt">
                   <i class="nz-icon-create-square nz-icon"></i>
                   {{$t('overall.add')}}</span>
-        </button>
+          </button>
-        <div class="top-tool-search float-right">
+          <div class="top-tool-search float-right">
-          <search-input :searchMsg="searchMsg" @search="search"></search-input>
+            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+          </div>
         </div>
       </div>
       <el-table
         class="nz-table"
         :data="tableData"
         border
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;">
         <el-table-column
           :resizable="false"

nezha-fronted/src/components/page/dashboard/chartMetric.vue

@@ -92,7 +92,7 @@
     width: 100px;
   }
   .li-list-part-label-val-list .el-select--mini {
-    width: calc(100% - 45px);
+    width: calc(100% - 45px) !important;
   }
   .nz-tab-chart-item-box{
     padding:0;

nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue

@@ -143,7 +143,7 @@
 <style>
   .li-list-part-label-val-list .metric-title-position .el-form-item__label {
     font-size: 14px;
-    height: 10px;
+    height: 15px;
     color: #666;
     line-height: 14px;
     text-align: left;
@@ -163,11 +163,11 @@
 <template>
   <el-form :model="elementInfo" ref="elementInfo"   >
     <el-row >
-      <el-col span="16">
+      <el-col :span="16">
         <!-- <span  class="star-red">*</span>&nbsp; -->
         {{$t('dashboard.panel.chartForm.metric')}}
       </el-col>
-      <el-col span="8" style="text-align: right;">
+      <el-col :span="8" style="text-align: right;">
         <div class="nz-tab-item-box"  v-show="tableShow == 1">
         <!-- <div class="nz-btn-group float-left"  v-show="tableShow == 2"> -->
           <div @click="" class="nz-tab-style nz-tab-style-light">
@@ -202,15 +202,15 @@
       </el-col>
     </el-row>
     <el-row  v-if="tableShow == 2">
-      <el-col span="24" class="mt1">
+      <el-col :span="24" class="mt1">
         <el-form-item prop="expression" :rules="{ required: true,  message:$t('validate.required'), trigger: 'blur' }"><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
           <el-input size="mini" @input="changeExpression" class="full-width" ref="metricExpression" type="textarea" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
         </el-form-item>
       </el-col>
     </el-row>
     <el-row  v-if="tableShow == 1">
-      <el-col span="24" >
+      <el-col :span="24" >
-        <el-form-item :label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
+        <el-form-item label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
               <!--
               <el-select  ref="metricSelect" class="full-width"  filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric"  @change="selectMetric">
                 <el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
@@ -229,7 +229,7 @@
     </el-row>
     <!--create chart组件显示框  -->
     <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
-      <el-col span="9" style="margin-bottom: 20px;">
+      <el-col :span="9" style="margin-bottom: 20px;">
         <div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
         <div class="li-list-part">
           <el-scrollbar style="height: 100%">
@@ -243,12 +243,12 @@
         </div>
       </el-col>
 
-      <el-col span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col>
+      <el-col :span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col>
 
-      <el-col span="14">
+      <el-col :span="14">
         <div class="li-list-part-label-val-list" >
           <el-scrollbar style="height: 100%">
-            <el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
+            <el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
               <el-select  v-model="item.value" ref="tagSelect" size="mini"
                           placeholder=""
                           collapse-tags
@@ -264,48 +264,6 @@
       </el-col>
 
     </el-row>
-<!-- create chart组件显示框 -->
-    <!-- <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
-      <!-- <el-col span="12">
-        <div class="metric-title-label">{{elementInfo.metric}}</div>
-        <div class="li-list-part">
-          <ul class="no-list-style">
-            <li class="li-cursor" v-if="!item.isSelect"
-                v-for="(item,index) in elementInfo.tagList"
-                @click="getLidata(index,item)"
-                :key="index">
-              <div>
-                <span >{{ item.name }}</span>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </el-col>
-      <el-col span="12">
-        <div class="li-list-part-label-val-list" >
-          <el-form-item class="metric-title-position"   v-for="(item, index) in elementInfo.selectedTagList" :key="index"  :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
-            <el-row >{{item.name}}</el-row>
-            <el-row class="metric-title-row-position" > -->
-              
-            <!--多选列表 -->
-              <!-- <el-col span="20" >
-                <el-select  v-model="item.value" ref="tagSelect" size="small"
-                            placeholder=""
-                            collapse-tags
-                            filterable
-                            @change="changeTag"
-                            multiple>
-                  <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j"  :value="op">{{op}}</el-option>
-                </el-select>
-              </el-col>
-              <el-col span="4" >
-                &nbsp;&nbsp;<button type="button"  @click="deleteMetricLabel(item,index)"  class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square nz-btn-style-higher"><span class="top-tool-btn-txt"><i class="el-icon-close"></i></span></button>
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </div>
-      </el-col> -->
-    <!-- </el-row>  -->
   </el-form>
 </template>
 <script>
@@ -324,7 +282,7 @@ export default {
       type: Array,
       default: () => [],
     },
-    metricCascaderList:[],
+    metricCascaderList:Array,
     countTotal: {
       type: Number,
       default: 1,

nezha-fronted/src/components/page/dashboard/metricPreview.scss

@@ -37,7 +37,12 @@
     font-weight: bold;
     padding-left:5px;
   }
-
+  input {
+    background-color: $content-right-background-color;
+  }
+  .el-input__inner {
+    background-color: $content-right-background-color;
+  }
 }
 
 /*

nezha-fronted/src/components/page/dashboard/metricPreview.vue

@@ -33,10 +33,11 @@
             <div class="table-list" >
               <div class="box-content" >
                 <el-row :gutter="20"  class="row-width" style="height: calc(100% - 65px);">
-                  <el-col :span="12" >
+                  <el-col :span="10" >
                       <metric-set ref="metricSet" @on-view-chart="getChartParam"></metric-set>
                   </el-col>
-                  <el-col :span="12" style="height: calc(100% - 10px);overflow-y: auto;overflow-x: hidden;">
+                  <el-col :span="0.5"><div>&nbsp;</div></el-col>
+                  <el-col :span="13" style="height: calc(100% - 180px);overflow-y: auto;overflow-x: hidden;">
                     <el-row class="border-area" v-show="chartCount === 'single'">
                       <div class="chartBox">
                         <line-chart-block

nezha-fronted/src/components/page/dashboard/metricSet.vue

@@ -44,9 +44,9 @@
 
       <el-row class="operate-area">
 
-        <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal">{{$t('dashboard.metric.previewChart')}}</button>
+        <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-large nz-btn-style-normal">{{$t('dashboard.metric.previewChart')}}</button>
-        <button :disabled="saveDisabled || loading" type="primary" @click="preview('change')"
+        <button :disabled="saveDisabled || loading" type="primary" @click="preview('change')" class="margin-l-10"
-                :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-light' : !(saveDisabled || loading)}"
+                :class="{'nz-btn nz-btn-disabled nz-btn-size-large nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-large nz-btn-style-light' : !(saveDisabled || loading)}"
         >{{chartSwitchWord}}</button>
         
         <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
@@ -70,11 +70,11 @@
 
       </el-row>
 <!-- options -->
-      <el-row class="mt-10">
+      <el-row class="mt-10 margin-b-10">
-        <el-checkbox-button :disabled="saveDisabled" v-model="isSave" checked >Options</el-checkbox-button>
+        <div>Options</div>
         <!-- <el-checkbox :disabled="saveDisabled" v-model="isSave" checked >options</el-checkbox> -->
       </el-row>
-      <el-form :model="chartInfo" ref="chartInfo" v-show="isSave">
+      <el-form :model="chartInfo" ref="chartInfo">
         <el-row>
           <div class="common-float-left">
             <el-form-item  label-width="80px" :label="$t('dashboard.panel.chartForm.width')" prop="span"

nezha-fronted/src/components/page/project/project.vue

@@ -24,7 +24,7 @@
     <!--metrics-->
     <div class="content-right" v-show="tableShow == 2">
       <div class="top-tools">
-        <div class="nz-tab float-left">
+        <div class="nz-tab">
           <div @click="tableShow = 1" class="nz-tab-item-box">
             <div class="nz-tab-item">{{$t('project.endpoint.endpoint')}}</div>
           </div>
@@ -32,13 +32,13 @@
             <div class="nz-tab-item nz-tab-item-active">{{$t('project.metrics.metrics')}}</div>
           </div>
         </div>
-        <div class="top-tool-search float-right"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>
+        <div class="top-tool-search"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>
       </div>
       <el-table
         :data="metricsTableData"
         class="nz-table"
         border
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;">
         <el-table-column
           :resizable="false"
@@ -60,7 +60,7 @@
     <!--endpoint-->
     <div class="content-right" v-show="tableShow == 1">
       <div class="top-tools">
-        <div class="nz-tab float-left">
+        <div class="nz-tab">
           <div class="nz-tab-item-box">
             <div class="nz-tab-item nz-tab-item-active">{{$t('project.endpoint.endpoint')}}</div>
           </div>
@@ -68,18 +68,20 @@
             <div class="nz-tab-item">{{$t('project.metrics.metrics')}}</div>
           </div>
         </div>
-        <button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="project-add-ep">
+        <div>
-          <span class='top-tool-btn-txt'>
+          <button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="project-add-ep">
-            <i class="nz-icon-create-square nz-icon"></i>
+            <span class='top-tool-btn-txt'>
-            {{$t('overall.add')}}</span>
+              <i class="nz-icon-create-square nz-icon"></i>
-        </button>
+              {{$t('overall.add')}}</span>
-        <div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
+          </button>
+          <div class="top-tool-search float-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
+        </div>
       </div>
       <el-table
         :data="endpointTableData"
         border
         class="nz-table"
-        height="calc(100% - 65px)"
+        height="calc(100% - 195px)"
         style="width: 100%;">
         <el-table-column
           :resizable="false"