From b01f324a0611cf0f628d7527a00ccaea02635421 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 13 Nov 2023 20:16:55 +0800
Subject: [PATCH] feat: alert and settings

---
 src/components/SelectSingle.vue                       |  4 ++--
 src/styles/theme.scss                                 |  6 ++++++
 src/views/Settings.vue                                |  2 +-
 src/views/alarm/Content.vue                           |  2 +-
 src/views/alarm/Header.vue                            | 11 ++++++++---
 .../continuous-profiling/components/Policy.vue        |  2 +-
 6 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/SelectSingle.vue b/src/components/SelectSingle.vue
index 1ff98576..02089e21 100644
--- a/src/components/SelectSingle.vue
+++ b/src/components/SelectSingle.vue
@@ -112,7 +112,7 @@ limitations under the License. -->
     width: 100%;
     padding: 2px 10px;
     overflow: auto;
-    color: #606266;
+    color: var(--sw-setting-color);
     position: relative;
 
     &:hover {
@@ -133,7 +133,7 @@ limitations under the License. -->
   }
 
   .opt-wrapper {
-    color: #606266;
+    color: var(--sw-setting-color);
     position: absolute;
     top: 26px;
     left: 0;
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 54545035..410b08c3 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -46,6 +46,9 @@ html {
   --sw-list-selected: #ededed;
   --sw-table-header: #f3f4f9;
   --sw-list-hover: rgb(0 0 0 / 4%);
+  --sw-setting-color: #606266;
+  --sw-alarm-tool: #f0f2f5;
+  --sw-alarm-tool-border: #c1c5ca41;
 }
 
 html.dark {
@@ -78,6 +81,9 @@ html.dark {
   --sw-list-hover: #262629;
   --sw-table-header: #303133;
   --sw-list-selected: #3d444f;
+  --sw-setting-color: #eee;
+  --sw-alarm-tool: #303133;
+  --sw-alarm-tool-border: #444;
 }
 
 .el-table tr {
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 86d71a5f..b4bc9237 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -156,7 +156,7 @@ limitations under the License. -->
   }
 
   .settings {
-    color: #606266;
+    color: var(--sw-setting-color);
     font-size: 13px;
     padding: 20px;
 
diff --git a/src/views/alarm/Content.vue b/src/views/alarm/Content.vue
index 56001b31..11cc8871 100644
--- a/src/views/alarm/Content.vue
+++ b/src/views/alarm/Content.vue
@@ -157,7 +157,7 @@ limitations under the License. -->
 
   .timeline-table-i {
     padding: 10px 15px;
-    border-left: 4px solid #eee;
+    border-left: 4px solid var(--border-color-primary);
     position: relative;
 
     &::after {
diff --git a/src/views/alarm/Header.vue b/src/views/alarm/Header.vue
index 0ac0f3dd..544c91f1 100644
--- a/src/views/alarm/Header.vue
+++ b/src/views/alarm/Header.vue
@@ -39,7 +39,11 @@ limitations under the License. -->
           @current-change="changePage"
           :pager-count="5"
           small
-          :style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
+          :style="
+            appStore.theme === Themes.Light
+              ? `--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`
+              : ''
+          "
         />
       </div>
     </div>
@@ -54,6 +58,7 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { useAlarmStore } from "@/store/modules/alarm";
   import { ElMessage } from "element-plus";
+  import { Themes } from "@/constants/data";
 
   const appStore = useAppStoreWithOut();
   const alarmStore = useAlarmStore();
@@ -99,8 +104,8 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .alarm-tool {
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #c1c5ca41;
-    background-color: #f0f2f5;
+    border-bottom: 1px solid var(--sw-alarm-tool-border);
+    background-color: var(--sw-alarm-tool);
     padding: 10px;
     position: relative;
   }
diff --git a/src/views/dashboard/related/continuous-profiling/components/Policy.vue b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
index 9437b458..4bc5e6f9 100644
--- a/src/views/dashboard/related/continuous-profiling/components/Policy.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
@@ -216,7 +216,7 @@ limitations under the License. -->
     cursor: text;
     padding: 0 5px;
     border-radius: 4px;
-    color: #606266;
+    color: var(--sw-setting-color);
     outline: none;
     height: 100px;