From c5c9c868b62323ac125ffb39993674dde78f7ec8 Mon Sep 17 00:00:00 2001
From: liangling <lingliang1100@gmail.com>
Date: Thu, 28 Mar 2024 17:44:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=8F=92=E4=BB=B6a?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E6=A0=B7=E5=BC=8F=E5=86=B2=E7=AA=81=20#=20Re?=
 =?UTF-8?q?viewed,=20transaction=20id:=204819?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .stylelintrc.js                               |   6 +-
 src/alert/src/sass/query.scss                 | 102 ++++++++++--------
 src/event/src/sass/query.scss                 |  30 ++++--
 .../src/sass/custom-antd-theme.less           |   4 +-
 src/timeseries/src/sass/query.scss            |  15 +++
 src/timeseries/src/sass/variable.scss         |  21 ++--
 6 files changed, 117 insertions(+), 61 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index cdd5c41..13d5bdb 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -5,6 +5,10 @@ module.exports = {
     {
       files: ['./src/**/*.scss'],
       plugins: ['stylelint-scss', 'stylelint-order'],
+      rules: {
+        'scss/at-extend-no-missing-placeholder': true,
+        'scss/dollar-variable-pattern': '^_?[a-z]+[\\w-]*$',
+      },
     },
   ],
   rules: {
@@ -51,8 +55,6 @@ module.exports = {
         ignore: ['after-comment'],
       },
     ],
-    'scss/at-extend-no-missing-placeholder': true,
-    'scss/dollar-variable-pattern': '^_?[a-z]+[\\w-]*$',
     'selector-list-comma-newline-after': 'always',
     'selector-max-id': 3,
     'selector-no-vendor-prefix': true,
diff --git a/src/alert/src/sass/query.scss b/src/alert/src/sass/query.scss
index bdf247d..c500cb1 100644
--- a/src/alert/src/sass/query.scss
+++ b/src/alert/src/sass/query.scss
@@ -135,7 +135,7 @@
       .copy-mode-input {
         display: flex;
         align-items: center;
-        background-color: #F0F1F5;
+        background-color: #f0f1f5;
         border-radius: 2px;
         width: 88px;
         height: 26px;
@@ -144,7 +144,7 @@
         cursor: pointer;
         .fa-angle-down {
           margin-left: auto;
-          color: #979BA5;
+          color: #979ba5;
           font-size: 12px;
           width: 12px;
           height: 12px;
@@ -169,13 +169,15 @@
       width: 12px;
       height: 12px;
       margin-top: -6px;
-      color: rgba(0,0,0,.25);
+      color: rgba(0, 0, 0, 0.25);
       font-size: 12px;
       line-height: 12px;
       background: #fff;
       cursor: pointer;
       opacity: 0;
-      transition: color .3s ease,opacity .15s ease;
+      transition:
+        color 0.3s ease,
+        opacity 0.15s ease;
     }
     .metric-label {
       color: #63656e;
@@ -439,7 +441,7 @@
     display: flex;
     width: 100%;
     align-items: center;
-    color: #3A84FF;
+    color: #3a84ff;
     margin: 12px 0;
     .search-play {
       display: flex;
@@ -447,10 +449,10 @@
       justify-content: center;
       height: 26px;
       width: 26px;
-      border: 1px solid #C4C6CC;
+      border: 1px solid #c4c6cc;
       border-radius: 2px;
       background-color: white;
-      color: #979BA5;
+      color: #979ba5;
       margin-left: auto;
       cursor: pointer;
       font-size: 12px;
@@ -470,7 +472,7 @@
       margin-left: 2px;
       cursor: pointer;
       &.is-loading {
-        background: #A3C5FD;
+        background: #a3c5fd;
         color: white;
         cursor: not-allowed;
         border: none;
@@ -486,7 +488,7 @@
         margin-right: 3px;
       }
       &.is-loading {
-        color: #C4C6CC;
+        color: #c4c6cc;
         cursor: not-allowed;
       }
     }
@@ -507,7 +509,7 @@
         align-items: center;
         justify-content: center;
         transform: rotate(-90deg);
-        transition: all ease-in-out .3s;
+        transition: all ease-in-out 0.3s;
         &.is-open {
           transform: rotate(0deg);
         }
@@ -515,7 +517,7 @@
       .header-content {
         display: flex;
         align-items: center;
-        color: #979BA5;
+        color: #979ba5;
         &-item {
           margin-left: 24px;
         }
@@ -574,7 +576,6 @@
 
       /* stylelint-disable-next-line declaration-no-important */
       background-color: white !important;
-
     }
   }
 }
@@ -671,14 +672,14 @@
 .select-list {
   display: flex;
   flex-direction: column;
-  max-height: 256px; 
-  overflow-y: auto; 
+  max-height: 256px;
+  overflow-y: auto;
   overflow-anchor: none;
   &-item {
     display: flex;
     flex: 0 0 32px;
     height: 32px;
-    color: rgba(0,0,0,.65);
+    color: rgba(0, 0, 0, 0.65);
     align-items: center;
     padding: 0 12px;
     &:hover {
@@ -686,7 +687,7 @@
       background-color: #f5f5f5;
     }
     &.active {
-      color: rgba(0,0,0,.65);
+      color: rgba(0, 0, 0, 0.65);
       font-weight: 600;
       background-color: #f0f8ff;
     }
@@ -733,7 +734,7 @@
   width: auto !important;
   min-width: 100px !important;
   // .target-dropdown-list:last-child div div {
-  //   position: static !important; 
+  //   position: static !important;
   //   top: auto !important;
   //   left: auto !important;
   //   right: auto !important;
@@ -777,7 +778,7 @@
       justify-content: center;
       margin-left: 10px;
       font-size: 14px;
-      transition: all .3s;
+      transition: all 0.3s;
       &.reflesh-pendding {
         animation: 1s rowup linear infinite normal;
       }
@@ -814,7 +815,7 @@
       color: #63656e;
       height: 22px;
       &:hover {
-        border-color: rgba(58,132,255,.30);
+        border-color: rgba(58, 132, 255, 0.3);
         background-color: #edf4ff;
         color: #3a84ff;
         cursor: pointer;
@@ -826,11 +827,11 @@
     .ant-tabs-tab {
       padding: 8px 0 12px 0;
     }
-    .ant-tabs-tab+.ant-tabs-tab {
+    .ant-tabs-tab + .ant-tabs-tab {
       margin: 0 0 0 6px;
     }
     .ant-tabs-tab.ant-tabs-tab-active .tab-tag {
-      border-color: rgba(58,132,255,.30);
+      border-color: rgba(58, 132, 255, 0.3);
       background-color: #edf4ff;
       color: #3a84ff;
     }
@@ -984,7 +985,7 @@
         }
         .ant-checkbox-input,
         .ant-checkbox-inner {
-          top: -3px !important
+          top: -3px !important;
         }
       }
     }
@@ -1060,40 +1061,40 @@
 }
 body {
   &.theme-dark {
-   $monitor-font-color: #ccccdc;
-   $monitor-bg-color: #111217;
-   $monitor-border-color: #2C2D36;
-   $monitor-label-bg-color: #22252b;
-   $monitor-metric-bg-color: #282b31;
+    $monitor-font-color: #ccccdc;
+    $monitor-bg-color: #111217;
+    $monitor-border-color: #2c2d36;
+    $monitor-label-bg-color: #22252b;
+    $monitor-metric-bg-color: #282b31;
     .variable-editor,
     .monitor-grafana {
-      color:$monitor-font-color !important;
+      color: $monitor-font-color !important;
       background-color: $monitor-bg-color !important;
       .variable-line-label {
-        color:$monitor-font-color !important;
+        color: $monitor-font-color !important;
         background: $monitor-label-bg-color !important;
       }
       .function-menu-anchor,
       .condition-input-add,
       .search-play {
-        color: #63656E !important;
-        background: #191B1F !important;
+        color: #63656e !important;
+        background: #191b1f !important;
         border-color: $monitor-border-color !important;
       }
       .query-editor-label {
-        background-color: #1D417E !important;
+        background-color: #1d417e !important;
       }
       .editor-form-label {
         background-color: $monitor-label-bg-color !important;
-        color:$monitor-font-color !important;
+        color: $monitor-font-color !important;
       }
-      .mitric-input  {
+      .mitric-input {
         background-color: $monitor-bg-color !important;
         &-name {
           border-color: $monitor-border-color !important;
         }
         .metric-label {
-          color:$monitor-font-color !important;
+          color: $monitor-font-color !important;
         }
       }
       .promql-editor-instance {
@@ -1102,12 +1103,12 @@ body {
       }
       .copy-mode-input {
         background-color: $monitor-bg-color !important;
-        color: #EAEBF0;
+        color: #eaebf0;
         border: 1px solid $monitor-border-color !important;
       }
       .query-editor-tools {
-        background-color: #35383D !important;
-        color: #EAEBF0 !important; 
+        background-color: #35383d !important;
+        color: #eaebf0 !important;
         border: 1px solid $monitor-border-color !important;
       }
       .mitric-input .ant-cascader-picker-clear {
@@ -1121,7 +1122,7 @@ body {
     }
     .metric-dropdown-tag .tab-tag {
       background-color: $monitor-metric-bg-color !important;
-      color: #EAEBF0 !important; 
+      color: #eaebf0 !important;
       border: 1px solid $monitor-metric-bg-color !important;
     }
     .ant-popover-inner-content {
@@ -1140,14 +1141,14 @@ body {
     }
     .function-menu-panel {
       background-color: $monitor-bg-color !important;
-      color: #EAEBF0 !important; 
+      color: #eaebf0 !important;
       border: 1px solid $monitor-border-color !important;
       .list-item {
         &.item-active,
         &:hover {
           background-color: $monitor-metric-bg-color !important;
           color: #3a84ff !important;
-          cursor: pointer !important; 
+          cursor: pointer !important;
         }
       }
       .panel-item {
@@ -1166,7 +1167,7 @@ body {
     .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
       background-color: $monitor-bg-color !important;
       border: 1px solid $monitor-border-color !important;
-      color: #EAEBF0 !important;
+      color: #eaebf0 !important;
     }
     .metric-dropdown-content .content-list .metric-item:not(.is-arrow):hover,
     .metric-dropdown-content .content-list .metric-item.is-checked {
@@ -1179,4 +1180,19 @@ body {
   &.theme-light {
     background-color: #f4f5f5 !important;
   }
-}
\ No newline at end of file
+  a {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none;
+    transition: color 0.3s;
+    text-decoration-skip: objects;
+  }
+  a:hover {
+    color: inherit;
+  }
+  a:active {
+    color: #366fd9;
+  }
+}
diff --git a/src/event/src/sass/query.scss b/src/event/src/sass/query.scss
index a6417c8..ed7f532 100644
--- a/src/event/src/sass/query.scss
+++ b/src/event/src/sass/query.scss
@@ -288,7 +288,7 @@
   font-size: 12px;
   color: #63656e;
 
-  @include query-editor()
+  @include query-editor();
 }
 
 .key-del {
@@ -402,7 +402,7 @@ body {
 
       .query-editor-tools {
         color: #eaebf0 !important;
-        background-color: #35383d !important; 
+        background-color: #35383d !important;
         border: 1px solid $monitor-border-color !important;
       }
 
@@ -419,7 +419,7 @@ body {
 
     .metric-dropdown-tag .tab-tag {
       color: #eaebf0 !important;
-      background-color: $monitor-metric-bg-color !important; 
+      background-color: $monitor-metric-bg-color !important;
       border: 1px solid $monitor-metric-bg-color !important;
     }
 
@@ -443,7 +443,7 @@ body {
 
     .function-menu-panel {
       color: #eaebf0 !important;
-      background-color: $monitor-bg-color !important; 
+      background-color: $monitor-bg-color !important;
       border: 1px solid $monitor-border-color !important;
 
       .list-item {
@@ -451,7 +451,7 @@ body {
         &:hover {
           color: #3a84ff !important;
           cursor: pointer !important;
-          background-color: $monitor-metric-bg-color !important; 
+          background-color: $monitor-metric-bg-color !important;
         }
       }
 
@@ -491,4 +491,22 @@ body {
   &.theme-light {
     background-color: #f4f5f5 !important;
   }
-}
\ No newline at end of file
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none;
+    transition: color 0.3s;
+    text-decoration-skip: objects;
+  }
+
+  a:hover {
+    color: inherit;
+  }
+
+  a:active {
+    color: #366fd9;
+  }
+}
diff --git a/src/timeseries/src/sass/custom-antd-theme.less b/src/timeseries/src/sass/custom-antd-theme.less
index 87ccc83..f8128b9 100644
--- a/src/timeseries/src/sass/custom-antd-theme.less
+++ b/src/timeseries/src/sass/custom-antd-theme.less
@@ -1,5 +1,5 @@
 @font-size-base: 12px;
-@primary-color: #4C90FF;
+@primary-color: #4c90ff;
 @border-color-base: #dcdee5;
-@text-color: #63656E;
+@text-color: #63656e;
 @border-radius-base: 0px;
diff --git a/src/timeseries/src/sass/query.scss b/src/timeseries/src/sass/query.scss
index 4b85516..e185ced 100644
--- a/src/timeseries/src/sass/query.scss
+++ b/src/timeseries/src/sass/query.scss
@@ -1179,4 +1179,19 @@ body {
   &.theme-light {
     background-color: #f4f5f5 !important;
   }
+  a {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none;
+    transition: color 0.3s;
+    text-decoration-skip: objects;
+  }
+  a:hover {
+    color: inherit;
+  }
+  a:active {
+    color: #366fd9;
+  }
 }
diff --git a/src/timeseries/src/sass/variable.scss b/src/timeseries/src/sass/variable.scss
index eba73f6..f6fbca0 100644
--- a/src/timeseries/src/sass/variable.scss
+++ b/src/timeseries/src/sass/variable.scss
@@ -1,36 +1,41 @@
-@import "./query.scss";
+@import './query.scss';
 
 .variable-editor {
   display: flex;
   flex-direction: column;
 
   @include query-editor();
+
   .common-select {
     width: 224px;
   }
+
   .mitric-input {
     margin-bottom: 0px;
   }
 }
+
 .variable-line {
   display: flex;
   width: 100%;
-  color: #63656e;
-  font-size: 12px;
   margin-bottom: 4px;
+  font-size: 12px;
+  color: #63656e;
+
   &-label {
-    flex: 0 0 160px;
     display: flex;
+    flex: 0 0 160px;
     align-items: center;
     padding: 0 8px;
-    border-radius: 2px;
-    background-color: #f1f5f9;
     margin-right: 4px;
+    background-color: #f1f5f9;
+    border-radius: 2px;
   }
+
   &-content {
+    display: flex;
     flex: 1;
     min-height: 32px;
-    display: flex;
     margin-right: 4px;
   }
-}
\ No newline at end of file
+}