can toggle trace detials when click on trace list and added a back button to go back to trace list

src/locales/lang/en.ts

@@ -269,6 +269,7 @@ const msg = {
   contentType: "Content Type",
   content: "Content",
   viewLogs: "View Logs",
+  back: "Back",
   logsTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable.
   Check more details on the Configuration Vocabulary page`,
   keywordsOfContentLogTips:

src/views/dashboard/controls/Trace.vue

@@ -34,8 +34,11 @@ limitations under the License. -->
     </div> -->
     <div class="trace flex-h">
       <TraceList @show:trace="showTraceDetails" v-if="traceListActive" />
-      
-      <TraceDetail v-if="!traceListActive" />
+
+      <TraceDetail
+        @show:list="traceListActive = true"
+        v-if="!traceListActive"
+      />
     </div>
   </div>
 </template>
@@ -61,8 +64,8 @@ const traceListActive = ref<boolean>(true);
 function removeWidget() {
   dashboardStore.removeControls(props.data);
 }
-function showTraceDetails(){
-  traceListActive.value = false
+function showTraceDetails() {
+  traceListActive.value = false;
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/related/trace/Detail.vue

@@ -24,6 +24,14 @@ limitations under the License. -->
         />
         <span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
         <div class="trace-log-btn">
+          <el-button
+            size="small"
+            class="mr-10"
+            type="primary"
+            @click="showTraceList"
+          >
+            {{ t("back") }}
+          </el-button>
           <el-button
             size="small"
             class="mr-10"
@@ -163,7 +171,7 @@ export default defineComponent({
     List,
     LogTable,
   },
-  setup() {
+  setup(props, ctx) {
     const { t } = useI18n();
     const traceStore = useTraceStore();
     const loading = ref<boolean>(false);
@@ -175,6 +183,11 @@ export default defineComponent({
       dayjs(date).format(pattern);
     const showTraceLogs = ref<boolean>(false);
 
+    // const emit = defineEmits(["show:list"])
+
+    function showTraceList() {
+      ctx.emit("show:list");
+    }
     function handleClick(ids: string[] | any) {
       let copyValue = null;
       if (ids.length === 1) {
@@ -215,6 +228,7 @@ export default defineComponent({
       searchTraceLogs();
     }
     return {
+      showTraceList,
       traceStore,
       displayMode,
       dateFormat,