diff --git a/src/assets/img/tools/EXIT.png b/src/assets/img/tools/EXIT.png index 88aca495..977493de 100644 Binary files a/src/assets/img/tools/EXIT.png and b/src/assets/img/tools/EXIT.png differ diff --git a/src/constants/data.ts b/src/constants/data.ts index 77238da5..9cbc1e17 100644 --- a/src/constants/data.ts +++ b/src/constants/data.ts @@ -26,3 +26,8 @@ export const Languages = [ { label: "Chinese", value: "zh" }, { label: "Spanish", value: "es" }, ]; + +export enum Themes { + Dark = "dark", + Light = "light", +} diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts index 41e5c8ac..2aacc49d 100644 --- a/src/hooks/useEcharts.ts +++ b/src/hooks/useEcharts.ts @@ -31,6 +31,7 @@ import { useEventListener } from "./useEventListener"; import { useBreakpoint } from "./useBreakpoint"; import echarts from "@/utils/echarts"; import { useAppStoreWithOut } from "@/store/modules/app"; +import { Themes } from "@/constants/data"; export type ECOption = echarts.ComposeOption< | BarSeriesOption @@ -47,7 +48,7 @@ export type ECOption = echarts.ComposeOption< export function useECharts(elRef: Ref, theme: "light" | "dark" | "default" = "default"): Indexable { const appStore = useAppStoreWithOut(); const getDarkMode = computed(() => { - return appStore.theme === "default" ? "light" : theme; + return appStore.theme === "default" ? Themes.Light : theme; }); let chartInstance: Nullable = null; let resizeFn: Fn = resize; @@ -57,7 +58,7 @@ export function useECharts(elRef: Ref, theme: "light" | "dark" | resizeFn = useDebounceFn(resize, 200); const getOptions = computed(() => { - if (getDarkMode.value !== "dark") { + if (getDarkMode.value !== Themes.Dark) { return cacheOptions.value as ECOption; } return { diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue index 92bb8a9e..d052b10e 100644 --- a/src/layout/components/NavBar.vue +++ b/src/layout/components/NavBar.vue @@ -78,6 +78,7 @@ limitations under the License. --> import type { DashboardItem } from "@/types/dashboard"; import router from "@/router"; import { ArrowRight, Moon, Sunny } from "@element-plus/icons-vue"; + import { Themes } from "@/constants/data"; /*global Indexable */ const { t, te } = useI18n(); @@ -98,13 +99,13 @@ limitations under the License. --> const root = document.documentElement; if (theme.value) { - root.classList.add("dark"); - root.classList.remove("light"); - appStore.setTheme("dark"); + root.classList.add(Themes.Dark); + root.classList.remove(Themes.Light); + appStore.setTheme(Themes.Dark); } else { - root.classList.add("light"); - root.classList.remove("dark"); - appStore.setTheme("light"); + root.classList.add(Themes.Light); + root.classList.remove(Themes.Dark); + appStore.setTheme(Themes.Light); } } diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index 95dcf99e..0cbf1a89 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -23,6 +23,7 @@ import type { AxiosResponse } from "axios"; import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat"; import { TimeType } from "@/constants/data"; import type { MenuOptions, SubItem } from "@/types/app"; +import { Themes } from "@/constants/data"; /*global Nullable*/ interface AppState { durationRow: Recordable; @@ -57,7 +58,7 @@ export const appStore = defineStore({ isMobile: false, reloadTimer: null, allMenus: [], - theme: "dark", + theme: Themes.Dark, }), getters: { duration(): Duration { diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue index 47f5c574..db646e48 100644 --- a/src/views/dashboard/graphs/Bar.vue +++ b/src/views/dashboard/graphs/Bar.vue @@ -25,6 +25,7 @@ limitations under the License. --> import useLegendProcess from "@/hooks/useLegendProcessor"; import Legend from "./components/Legend.vue"; import { useAppStoreWithOut } from "@/store/modules/app"; + import { Themes } from "@/constants/data"; /*global defineProps, defineEmits */ const emits = defineEmits(["click"]); @@ -93,11 +94,11 @@ limitations under the License. --> top: 0, left: 0, itemWidth: 12, - backgroundColor: appStore.theme === "dark" ? "#333" : "#fff", - borderColor: appStore.theme === "dark" ? "#333" : "#fff", + backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff", + borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff", textStyle: { fontSize: 12, - color: appStore.theme === "dark" ? "#eee" : "#333", + color: appStore.theme === Themes.Dark ? "#eee" : "#333", }, }, grid: { diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue index e984b1f0..d438df06 100644 --- a/src/views/dashboard/graphs/Line.vue +++ b/src/views/dashboard/graphs/Line.vue @@ -32,6 +32,7 @@ limitations under the License. --> import useLegendProcess from "@/hooks/useLegendProcessor"; import { isDef } from "@/utils/is"; import { useAppStoreWithOut } from "@/store/modules/app"; + import { Themes } from "@/constants/data"; /*global defineProps, defineEmits */ const emits = defineEmits(["click"]); @@ -94,11 +95,11 @@ limitations under the License. --> const color: string[] = chartColors(keys); const tooltip = { trigger: "axis", - backgroundColor: appStore.theme === "dark" ? "#333" : "#fff", - borderColor: appStore.theme === "dark" ? "#333" : "#fff", + backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff", + borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff", textStyle: { fontSize: 12, - color: appStore.theme === "dark" ? "#eee" : "#333", + color: appStore.theme === Themes.Dark ? "#eee" : "#333", }, enterable: true, confine: true, @@ -111,11 +112,11 @@ limitations under the License. --> confine: true, extraCssText: `height: 20px; padding:0 2px;`, trigger: "axis", - backgroundColor: appStore.theme === "dark" ? "#666" : "#eee", - borderColor: appStore.theme === "dark" ? "#666" : "#eee", + backgroundColor: appStore.theme === Themes.Dark ? "#666" : "#eee", + borderColor: appStore.theme === Themes.Dark ? "#666" : "#eee", textStyle: { fontSize: 12, - color: appStore.theme === "dark" ? "#eee" : "#333", + color: appStore.theme === Themes.Dark ? "#eee" : "#333", }, }; @@ -130,7 +131,7 @@ limitations under the License. --> left: 0, itemWidth: 12, textStyle: { - color: appStore.theme === "dark" ? "#fff" : "#333", + color: appStore.theme === Themes.Dark ? "#fff" : "#333", }, }, grid: { diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue index 0f9e8f21..f848f8c2 100644 --- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue +++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue @@ -28,6 +28,7 @@ limitations under the License. --> import TreeGraph from "../../utils/d3-trace-tree"; import type { Span, Ref } from "@/types/trace"; import SpanDetail from "./SpanDetail.vue"; + import { useAppStoreWithOut } from "@/store/modules/app"; /* global defineProps, Nullable, defineExpose,Recordable*/ const props = defineProps({ @@ -35,6 +36,7 @@ limitations under the License. --> traceId: { type: String, default: "" }, type: { type: String, default: "List" }, }); + const appStore = useAppStoreWithOut(); const loading = ref(false); const showDetail = ref(false); const fixSpansSize = ref(0); @@ -289,6 +291,17 @@ limitations under the License. --> }); }, ); + watch( + () => appStore.theme, + () => { + tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value); + tree.value.draw(() => { + setTimeout(() => { + loading.value = false; + }, 200); + }); + }, + );