From 6b38ff6b2f648fa7883c8c77841140aafe69dace Mon Sep 17 00:00:00 2001 From: Fine Date: Mon, 13 Nov 2023 11:25:36 +0800 Subject: [PATCH] feat: update trace list --- src/assets/img/tools/EXIT.png | Bin 269 -> 259 bytes src/constants/data.ts | 5 +++ src/hooks/useEcharts.ts | 5 +-- src/layout/components/NavBar.vue | 13 +++---- src/store/modules/app.ts | 3 +- src/views/dashboard/graphs/Bar.vue | 7 ++-- src/views/dashboard/graphs/Line.vue | 15 ++++---- .../trace/components/D3Graph/Index.vue | 17 +++++++-- .../related/trace/utils/d3-trace-list.ts | 33 +++++++++++------- 9 files changed, 64 insertions(+), 34 deletions(-) diff --git a/src/assets/img/tools/EXIT.png b/src/assets/img/tools/EXIT.png index 88aca4957b26997803afc985b0821b694dd25e2e..977493de3aa35fb88c7c90e0a64f5464ffd296a2 100644 GIT binary patch delta 218 zcmV<0044v80)qmOF@L>DL_t(IPpy+Z4gw(%g_${ywMWstfTfnehR&9sljs3#Of<1F zu{3)dz+hyfL>F+EmU-X2d6@w+^1-`aO1aJP5b?kmyT-a6ptZgbLXJ6r_kL-u-3TGh zp|%Gor99{S!_hZbblJA;(`_}t7&8k(N@-UOP)eN;aUI3gfK$-jIk!W^rpQ4MSZkX! z3jkO|$Y2Je0cq#g2scEW7mbhtCJ8Y@|8fw-LyL3=fPKj-1HdZY!*s`#>-_8g0n1E* U5pbBZ0ssI207*qoM6N<$g4JST2mk;8 delta 228 zcmV_P}dF9*>sfZ{z1 z08@dqX3zpyD5WOOxjHGt2-I4iNX`e1F@{KTE8^r3WrTyr7=>+%RFmBIS!J#DQtsh@ e$JF)nxB4Atx`Yvg)+`wS0000, 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); + }); + }, + );