From 9f4bdf3286057537615bea7ca3dd925026e1bd2b Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 9 Nov 2023 10:20:33 +0800
Subject: [PATCH] feat: set theme variable

---
 src/layout/components/NavBar.vue               |  3 +++
 src/store/modules/app.ts                       |  5 +++++
 src/styles/theme.scss                          |  2 --
 src/views/dashboard/controls/TaskTimeline.vue  |  4 +++-
 src/views/dashboard/controls/Text.vue          | 10 +++++++++-
 src/views/dashboard/controls/ThirdPartyApp.vue | 10 +++++++++-
 src/views/dashboard/controls/TimeRange.vue     |  8 +++++++-
 src/views/dashboard/controls/Topology.vue      | 10 +++++++++-
 src/views/dashboard/controls/Trace.vue         |  4 +++-
 src/views/dashboard/controls/Widget.vue        |  2 +-
 10 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index d49f4e7f..7d85a69d 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -100,10 +100,13 @@ limitations under the License. -->
     if (theme.value) {
       root.classList.add("dark");
       root.classList.remove("light");
+      appStore.setTheme("dark");
     } else {
       root.classList.add("light");
       root.classList.remove("dark");
+      appStore.setTheme("light");
     }
+    console.log(appStore.theme);
   }
 
   function getName(list: any[]) {
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 994e83a5..95dcf99e 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -36,6 +36,7 @@ interface AppState {
   isMobile: boolean;
   reloadTimer: Nullable<IntervalHandle>;
   allMenus: MenuOptions[];
+  theme: string;
 }
 
 export const appStore = defineStore({
@@ -56,6 +57,7 @@ export const appStore = defineStore({
     isMobile: false,
     reloadTimer: null,
     allMenus: [],
+    theme: "dark",
   }),
   getters: {
     duration(): Duration {
@@ -126,6 +128,9 @@ export const appStore = defineStore({
     updateDurationRow(data: Duration) {
       this.durationRow = data;
     },
+    setTheme(data: string) {
+      this.theme = data;
+    },
     setUTC(utcHour: number, utcMin: number): void {
       this.runEventStack();
       this.utcMin = utcMin;
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 94474346..eb712960 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -27,7 +27,6 @@ html {
   --border-color-primary: #eee;
   --layout-background: #f7f9fa;
   --box-shadow-color: #ccc;
-  --el-border-color: #f7f9fa;
   --el-border: 1px solid #000000;
 }
 
@@ -41,7 +40,6 @@ html.dark {
   --border-color: #262629;
   --border-color-primary: #4b4b52;
   --layout-background: #000;
-  --el-border-color: #4c4d4f;
   --box-shadow-color: #666;
 }
 
diff --git a/src/views/dashboard/controls/TaskTimeline.vue b/src/views/dashboard/controls/TaskTimeline.vue
index 327e9bc5..58938217 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">
+    <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode" :effect="appStore.theme">
       <template #reference>
         <span class="operation cp">
           <Icon iconName="ellipsis_v" size="middle" />
@@ -32,6 +32,7 @@ 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 */
@@ -45,6 +46,7 @@ limitations under the License. -->
   });
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
+  const appStore = useAppStoreWithOut();
 
   function removeWidget() {
     dashboardStore.removeControls(props.data);
diff --git a/src/views/dashboard/controls/Text.vue b/src/views/dashboard/controls/Text.vue
index c66e68bf..7a8b6fff 100644
--- a/src/views/dashboard/controls/Text.vue
+++ b/src/views/dashboard/controls/Text.vue
@@ -15,7 +15,13 @@ limitations under the License. -->
 <template>
   <div class="text">
     <div class="header">
-      <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
+      <el-popover
+        placement="bottom"
+        trigger="click"
+        :width="100"
+        v-if="dashboardStore.editMode"
+        :effect="appStore.theme"
+      >
         <template #reference>
           <span>
             <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -55,6 +61,7 @@ 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({
@@ -67,6 +74,7 @@ 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);
diff --git a/src/views/dashboard/controls/ThirdPartyApp.vue b/src/views/dashboard/controls/ThirdPartyApp.vue
index 5eac036c..de763cd7 100644
--- a/src/views/dashboard/controls/ThirdPartyApp.vue
+++ b/src/views/dashboard/controls/ThirdPartyApp.vue
@@ -15,7 +15,13 @@ limitations under the License. -->
 <template>
   <div class="text">
     <div class="header">
-      <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
+      <el-popover
+        placement="bottom"
+        trigger="click"
+        :width="100"
+        v-if="dashboardStore.editMode"
+        :effect="appStore.theme"
+      >
         <template #reference>
           <span>
             <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -47,6 +53,7 @@ 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({
@@ -58,6 +65,7 @@ limitations under the License. -->
   });
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
+  const appStore = useAppStoreWithOut();
   const widget = computed(() => props.data.widget || {});
 
   function removeTopo() {
diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue
index ccdea213..49c6e2f7 100644
--- a/src/views/dashboard/controls/TimeRange.vue
+++ b/src/views/dashboard/controls/TimeRange.vue
@@ -15,7 +15,13 @@ limitations under the License. -->
 <template>
   <div class="time-range">
     <div class="header">
-      <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
+      <el-popover
+        placement="bottom"
+        trigger="click"
+        :width="100"
+        v-if="dashboardStore.editMode"
+        :effect="appStore.theme"
+      >
         <template #reference>
           <span>
             <Icon iconName="ellipsis_v" size="middle" class="operation" />
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index b7de1798..c5bd15f6 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -15,7 +15,13 @@ 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">
+      <el-popover
+        placement="bottom"
+        trigger="click"
+        :width="100"
+        v-if="dashboardStore.editMode"
+        :effect="appStore.theme"
+      >
         <template #reference>
           <span>
             <Icon iconName="ellipsis_v" size="middle" />
@@ -37,6 +43,7 @@ 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({
@@ -48,6 +55,7 @@ limitations under the License. -->
   });
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
+  const appStore = useAppStoreWithOut();
 
   function removeTopo() {
     dashboardStore.removeControls(props.data);
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 8852861c..dabe34c0 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">
+    <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode" :effect="appStore.theme">
       <template #reference>
         <span class="delete cp">
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -41,6 +41,7 @@ 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({
@@ -54,6 +55,7 @@ limitations under the License. -->
   provide("options", props.data);
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
+  const appStore = useAppStoreWithOut();
   function removeWidget() {
     dashboardStore.removeControls(props.data);
   }
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index ca93f433..a781577a 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">
+        <el-popover placement="bottom" trigger="click" :width="100" :effect="appStore.theme">
           <template #reference>
             <span>
               <Icon iconName="ellipsis_v" size="middle" class="operation" />