+
-
- {{ formatTime(event.first_time) }}
-
+
{{ formatTime(event.first_time) }}
{{ shortSpan(event.span_id) }}
-
- {{ event.umo }}
-
+
{{ event.umo }}
@@ -42,82 +33,49 @@ import { resolveApiUrl } from "@/utils/request";
{{ formatTime(event.last_time) }}
-->
-
- {{ event.sender_name || "-" }}
-
+
{{
+ event.sender_name || '-' }}
-
- {{ event.message_outline || "-" }}
-
+
{{ event.message_outline || '-' }}
-
- {{ event.collapsed ? "Expand" : "Collapse" }}
+
+ {{ event.collapsed ? 'Expand' : 'Collapse' }}
-
-
-
- {{ record.timeLabel }}
-
-
- {{ record.action }}
-
+
+
+
{{ record.timeLabel }}
+
{{ record.action }}
{{ record.fieldsText }}
-
-
- No trace data yet.
-
+
No trace data yet.
-
@@ -390,8 +347,8 @@ export default {
padding: 0;
height: 100%;
overflow-y: auto;
- color: var(--v-theme-on-surface);
- font-family: "Fira Code", monospace;
+ color: #2b3340;
+ font-family: 'Fira Code', monospace;
}
.trace-row {
@@ -401,13 +358,13 @@ export default {
}
.trace-group {
- border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+ border-bottom: 1px solid rgba(15, 23, 42, 0.08);
background: transparent;
padding: 8px 0;
}
.trace-group.highlight {
- background: rgba(var(--v-theme-primary), 0.08);
+ background: rgba(59, 130, 246, 0.08);
transition: background 0.6s ease;
}
@@ -417,8 +374,8 @@ export default {
.trace-header {
font-weight: 600;
- color: var(--v-theme-on-surface);
- border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+ color: #6b7280;
+ border-bottom: 1px solid rgba(15, 23, 42, 0.12);
padding-bottom: 10px;
}
@@ -426,27 +383,30 @@ export default {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
- color: var(--v-theme-on-surface);
}
.event-title {
font-weight: 600;
- color: var(--v-theme-on-surface);
+ color: #1f2937;
}
.event-meta {
font-size: 12px;
- color: var(--v-theme-on-surface);
+ color: #6b7280;
margin-top: 4px;
}
.event-sub {
font-size: 12px;
- color: var(--v-theme-on-surface);
+ color: #4b5563;
margin-top: 2px;
word-break: break-word;
}
+.event-sub.outline {
+ color: #6b7280;
+}
+
.event-controls {
display: flex;
justify-content: flex-end;
@@ -457,7 +417,7 @@ export default {
width: 8px;
height: 8px;
border-radius: 50%;
- background: var(--v-theme-success);
+ background: #22c55e;
margin-left: 6px;
vertical-align: middle;
}
@@ -466,13 +426,13 @@ export default {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
- color: var(--v-theme-on-surface);
+ color: #4b5563;
}
.trace-empty {
padding: 24px;
text-align: center;
- color: var(--v-theme-on-surface);
+ color: #6b7280;
}
@media (max-width: 1200px) {
@@ -497,12 +457,12 @@ export default {
}
.trace-record-time {
- color: var(--v-theme-on-surface);
+ color: #6b7280;
font-size: 11px;
}
.trace-record-action {
- color: var(--v-theme-on-surface);
+ color: #1f2937;
font-weight: 600;
font-size: 11px;
}
@@ -511,7 +471,7 @@ export default {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
- color: var(--v-theme-on-surface);
+ color: #4b5563;
font-size: 10px;
}
diff --git a/dashboard/src/views/TracePage.vue b/dashboard/src/views/TracePage.vue
index 61ecf1ead..9bc048575 100644
--- a/dashboard/src/views/TracePage.vue
+++ b/dashboard/src/views/TracePage.vue
@@ -1,10 +1,10 @@
-
-
+
-
-
@@ -89,8 +85,8 @@ export default {
justify-content: space-between;
align-items: center;
padding: 12px 16px;
- background: rgba(var(--v-theme-primary), 0.05);
- border-bottom: 1px solid rgba(var(--v-theme-primary), 0.1);
+ background: rgba(59, 130, 246, 0.05);
+ border-bottom: 1px solid rgba(59, 130, 246, 0.1);
border-radius: 8px 8px 0 0;
margin-bottom: 8px;
}
@@ -102,7 +98,7 @@ export default {
.trace-hint {
font-size: 13px;
- color: var(--v-theme-on-surface-variant);
+ color: #6b7280;
}
.trace-controls {
@@ -113,7 +109,7 @@ export default {
.switch-label {
font-size: 13px;
- color: var(--v-theme-on-surface);
+ color: #4b5563;
white-space: nowrap;
}