From b21e9019b81b3a9a944ef445ca52efebcb8900d6 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 9 Nov 2023 11:26:04 +0800
Subject: [PATCH] feat: add popper theme

---
 src/layout/components/NavBar.vue                   |  3 +--
 src/styles/theme.scss                              | 14 +++++++++++++-
 .../dashboard/controls/ContinuousProfiling.vue     |  2 +-
 src/views/dashboard/controls/DemandLog.vue         |  2 +-
 src/views/dashboard/controls/Ebpf.vue              |  2 +-
 src/views/dashboard/controls/Event.vue             |  2 +-
 src/views/dashboard/controls/Log.vue               |  2 +-
 src/views/dashboard/controls/NetworkProfiling.vue  |  2 +-
 src/views/dashboard/controls/Profile.vue           |  2 +-
 src/views/dashboard/controls/TaskTimeline.vue      |  6 ++----
 src/views/dashboard/controls/Text.vue              | 12 ++----------
 src/views/dashboard/controls/ThirdPartyApp.vue     | 12 ++----------
 src/views/dashboard/controls/TimeRange.vue         | 10 ++--------
 src/views/dashboard/controls/Topology.vue          | 12 ++----------
 src/views/dashboard/controls/Trace.vue             |  6 ++----
 src/views/dashboard/controls/Widget.vue            |  4 ++--
 16 files changed, 35 insertions(+), 58 deletions(-)

diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 7d85a69d..3fe33470 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -87,7 +87,7 @@ limitations under the License. -->
   const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]);
   const timeRange = ref<number>(0);
   const pageTitle = ref<string>("");
-  const theme = ref<boolean>(false);
+  const theme = ref<boolean>(true);
 
   changeTheme();
   resetDuration();
@@ -106,7 +106,6 @@ limitations under the License. -->
       root.classList.remove("dark");
       appStore.setTheme("light");
     }
-    console.log(appStore.theme);
   }
 
   function getName(list: any[]) {
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index eb712960..3882d241 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -28,10 +28,13 @@ html {
   --layout-background: #f7f9fa;
   --box-shadow-color: #ccc;
   --el-border: 1px solid #000000;
+  --el-bg-color-overlay: #fff;
+  --el-border-color-light: #e4e7ed;
+  --popper-hover-bg: #eee;
 }
 
 html.dark {
-  --el-color-primary: #409eff;
+  --el-color-primary: rgb(64, 158, 255);
   --theme-background: #212224;
   --font-color: #fafbfc;
   --disabled-color: #ccc;
@@ -41,8 +44,17 @@ html.dark {
   --border-color-primary: #4b4b52;
   --layout-background: #000;
   --box-shadow-color: #666;
+  --el-bg-color-overlay: #1d1e1f;
+  --el-border-color-light: #414243;
+  --popper-hover-bg: rgb(64, 158, 255, 0.1);
 }
 
+.el-popper.is-light {
+  background: var(--el-bg-color-overlay);
+  border: 1px solid var(--el-border-color-light); 
+}
+
+$popper-hover-bg-color: var(--popper-hover-bg);
 $box-shadow-color: var(--box-shadow-color);
 $border-color-primary: var(--border-color-primary);
 $layout-background: var(--layout-background);
diff --git a/src/views/dashboard/controls/ContinuousProfiling.vue b/src/views/dashboard/controls/ContinuousProfiling.vue
index 72bb7991..10030f8b 100644
--- a/src/views/dashboard/controls/ContinuousProfiling.vue
+++ b/src/views/dashboard/controls/ContinuousProfiling.vue
@@ -87,7 +87,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/DemandLog.vue b/src/views/dashboard/controls/DemandLog.vue
index b3ad3cbb..d8c44b79 100644
--- a/src/views/dashboard/controls/DemandLog.vue
+++ b/src/views/dashboard/controls/DemandLog.vue
@@ -82,7 +82,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>
diff --git a/src/views/dashboard/controls/Ebpf.vue b/src/views/dashboard/controls/Ebpf.vue
index 2c49002f..9841e858 100644
--- a/src/views/dashboard/controls/Ebpf.vue
+++ b/src/views/dashboard/controls/Ebpf.vue
@@ -80,7 +80,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue
index ed03bba0..2aa219a8 100644
--- a/src/views/dashboard/controls/Event.vue
+++ b/src/views/dashboard/controls/Event.vue
@@ -93,7 +93,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index ed561cd4..2f7a8c1b 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -90,7 +90,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/NetworkProfiling.vue b/src/views/dashboard/controls/NetworkProfiling.vue
index 35ea9bcc..5afc1113 100644
--- a/src/views/dashboard/controls/NetworkProfiling.vue
+++ b/src/views/dashboard/controls/NetworkProfiling.vue
@@ -79,7 +79,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/Profile.vue b/src/views/dashboard/controls/Profile.vue
index 426e8ad3..81cdcadc 100644
--- a/src/views/dashboard/controls/Profile.vue
+++ b/src/views/dashboard/controls/Profile.vue
@@ -80,7 +80,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/TaskTimeline.vue b/src/views/dashboard/controls/TaskTimeline.vue
index 58938217..6adc28e4 100644
--- a/src/views/dashboard/controls/TaskTimeline.vue
+++ b/src/views/dashboard/controls/TaskTimeline.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="content-wrapper flex-v">
     <div class="title">Task Timeline</div>
-    <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode" :effect="appStore.theme">
+    <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
       <template #reference>
         <span class="operation cp">
           <Icon iconName="ellipsis_v" size="middle" />
@@ -32,7 +32,6 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import Content from "../related/task-timeline/Content.vue";
 
   /*global defineProps */
@@ -46,7 +45,6 @@ limitations under the License. -->
   });
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const appStore = useAppStoreWithOut();
 
   function removeWidget() {
     dashboardStore.removeControls(props.data);
@@ -81,7 +79,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/Text.vue b/src/views/dashboard/controls/Text.vue
index 7a8b6fff..e689b6ec 100644
--- a/src/views/dashboard/controls/Text.vue
+++ b/src/views/dashboard/controls/Text.vue
@@ -15,13 +15,7 @@ limitations under the License. -->
 <template>
   <div class="text">
     <div class="header">
-      <el-popover
-        placement="bottom"
-        trigger="click"
-        :width="100"
-        v-if="dashboardStore.editMode"
-        :effect="appStore.theme"
-      >
+      <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
         <template #reference>
           <span>
             <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -61,7 +55,6 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { TextColors } from "@/views/dashboard/data";
-  import { useAppStoreWithOut } from "@/store/modules/app";
 
   /*global defineProps */
   const props = defineProps({
@@ -74,7 +67,6 @@ limitations under the License. -->
   const { t } = useI18n();
   const graph = computed(() => props.data.graph || {});
   const dashboardStore = useDashboardStore();
-  const appStore = useAppStoreWithOut();
 
   function removeTopo() {
     dashboardStore.removeControls(props.data);
@@ -120,7 +112,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>
diff --git a/src/views/dashboard/controls/ThirdPartyApp.vue b/src/views/dashboard/controls/ThirdPartyApp.vue
index de763cd7..3103fc1f 100644
--- a/src/views/dashboard/controls/ThirdPartyApp.vue
+++ b/src/views/dashboard/controls/ThirdPartyApp.vue
@@ -15,13 +15,7 @@ limitations under the License. -->
 <template>
   <div class="text">
     <div class="header">
-      <el-popover
-        placement="bottom"
-        trigger="click"
-        :width="100"
-        v-if="dashboardStore.editMode"
-        :effect="appStore.theme"
-      >
+      <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
         <template #reference>
           <span>
             <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -53,7 +47,6 @@ limitations under the License. -->
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { useAppStoreWithOut } from "@/store/modules/app";
 
   /*global defineProps */
   const props = defineProps({
@@ -65,7 +58,6 @@ limitations under the License. -->
   });
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const appStore = useAppStoreWithOut();
   const widget = computed(() => props.data.widget || {});
 
   function removeTopo() {
@@ -111,7 +103,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue
index 49c6e2f7..fd828e3b 100644
--- a/src/views/dashboard/controls/TimeRange.vue
+++ b/src/views/dashboard/controls/TimeRange.vue
@@ -15,13 +15,7 @@ limitations under the License. -->
 <template>
   <div class="time-range">
     <div class="header">
-      <el-popover
-        placement="bottom"
-        trigger="click"
-        :width="100"
-        v-if="dashboardStore.editMode"
-        :effect="appStore.theme"
-      >
+      <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
         <template #reference>
           <span>
             <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -182,7 +176,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index c5bd15f6..f1945216 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -15,13 +15,7 @@ limitations under the License. -->
 <template>
   <div class="topology flex-v">
     <div class="operation">
-      <el-popover
-        placement="bottom"
-        trigger="click"
-        :width="100"
-        v-if="dashboardStore.editMode"
-        :effect="appStore.theme"
-      >
+      <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
         <template #reference>
           <span>
             <Icon iconName="ellipsis_v" size="middle" />
@@ -43,7 +37,6 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import Topology from "../related/topology/Index.vue";
-  import { useAppStoreWithOut } from "@/store/modules/app";
 
   /*global defineProps */
   const props = defineProps({
@@ -55,7 +48,6 @@ limitations under the License. -->
   });
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const appStore = useAppStoreWithOut();
 
   function removeTopo() {
     dashboardStore.removeControls(props.data);
@@ -89,7 +81,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index dabe34c0..0c1b0682 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="trace-wrapper flex-v">
-    <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode" :effect="appStore.theme">
+    <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
       <template #reference>
         <span class="delete cp">
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -41,7 +41,6 @@ limitations under the License. -->
   import TraceDetail from "../related/trace/Detail.vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
-  import { useAppStoreWithOut } from "@/store/modules/app";
 
   /*global defineProps */
   const props = defineProps({
@@ -55,7 +54,6 @@ limitations under the License. -->
   provide("options", props.data);
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
-  const appStore = useAppStoreWithOut();
   function removeWidget() {
     dashboardStore.removeControls(props.data);
   }
@@ -91,7 +89,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index a781577a..f7ac3812 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -26,7 +26,7 @@ limitations under the License. -->
             <Icon iconName="info_outline" size="sm" class="operation" v-show="widget.tips" />
           </span>
         </el-tooltip>
-        <el-popover placement="bottom" trigger="click" :width="100" :effect="appStore.theme">
+        <el-popover placement="bottom" trigger="click" :width="100">
           <template #reference>
             <span>
               <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -294,7 +294,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }