Updated logs page

This commit is contained in:
marzban-dev
2025-03-23 23:23:33 +03:30
parent a4482fddf7
commit a1bc5dca98
+19 -16
View File
@@ -3,7 +3,8 @@
// import // import
import hljs from "highlight.js"; import hljs from "highlight.js";
import javascript from "highlight.js/lib/languages/javascript"; import json from "highlight.js/lib/languages/json";
import xml from "highlight.js/lib/languages/xml";
import "highlight.js/styles/atom-one-dark.css"; import "highlight.js/styles/atom-one-dark.css";
import LogDate from "~/components/server-logs/LogDate.vue"; import LogDate from "~/components/server-logs/LogDate.vue";
import { useQuery } from "@tanstack/vue-query"; import { useQuery } from "@tanstack/vue-query";
@@ -11,7 +12,7 @@ import { useQuery } from "@tanstack/vue-query";
// meta // meta
definePageMeta({ definePageMeta({
middleware : "check-is-debug", middleware: "check-is-debug",
layout: "none" layout: "none"
}); });
@@ -41,7 +42,9 @@ const logIcon = (status: number) => {
// lifecycle // lifecycle
onMounted(() => { onMounted(() => {
hljs.registerLanguage("json", javascript); hljs.registerLanguage("json", json);
hljs.registerLanguage("xml", xml);
hljs.highlightAll(); hljs.highlightAll();
}); });
@@ -103,40 +106,40 @@ onMounted(() => {
<summary class="cursor-pointer select-none">Details :</summary> <summary class="cursor-pointer select-none">Details :</summary>
<div class="flex flex-col gap-2 mt-2 ml-4"> <div class="flex flex-col gap-2 mt-2 ml-4">
<details <details
v-if="log.response && typeof log.response === 'string' && log.response.includes('<!DOCTYPE html>')" v-if="log.response && typeof log.response === 'string' && (log.response.startsWith('<!DOCTYPE html>') || log.response.startsWith('<html>'))"
class="text-white" class="text-white"
> >
<summary class="cursor-pointer select-none">Preview :</summary> <summary class="cursor-pointer select-none">Preview :</summary>
<iframe class="w-full h-[500px]" :srcdoc="log.response"></iframe> <iframe class="w-full h-[500px] bg-white" :srcdoc="log.response"></iframe>
</details> </details>
<details v-if="log.response" class="text-white"> <details v-if="log.response" class="text-white">
<summary class="cursor-pointer select-none">Response :</summary> <summary class="cursor-pointer select-none">Response :</summary>
<pre> <pre style="tab-size: 2">
<code class="language-json"> <code class="whitespace-pre-wrap">
{{ log.response }} {{ String(log.response) }}
</code> </code>
</pre> </pre>
</details> </details>
<details class="text-white"> <details class="text-white">
<summary class="cursor-pointer select-none">Req Headers :</summary> <summary class="cursor-pointer select-none">Req Headers :</summary>
<pre class="whitespace-pre-line"> <pre style="tab-size: 2">
<code class="language-json"> <code class="whitespace-pre-line">
{{ log.requestHeaders }} {{ log.requestHeaders }}
</code> </code>
</pre> </pre>
</details> </details>
<details class="text-white"> <details class="text-white">
<summary class="cursor-pointer select-none">Res Headers :</summary> <summary class="cursor-pointer select-none">Res Headers :</summary>
<pre> <pre style="tab-size: 2">
<code class="language-json"> <code class="whitespace-pre-line">
{{ log.responseHeaders }} {{ log.responseHeaders }}
</code> </code>
</pre> </pre>
</details> </details>
<details v-if="log.payload" class="text-white"> <details v-if="log.payload" class="text-white">
<summary class="cursor-pointer select-none">Payload :</summary> <summary class="cursor-pointer select-none">Payload :</summary>
<pre> <pre style="tab-size: 2">
<code class="language-json"> <code class="whitespace-pre-line">
{{ log.payload }} {{ log.payload }}
</code> </code>
</pre> </pre>
@@ -158,11 +161,11 @@ onMounted(() => {
@keyframes log-fade-in { @keyframes log-fade-in {
from { from {
opacity : 0; opacity: 0;
scale: 0.8; scale: 0.8;
} }
to { to {
opacity : 1; opacity: 1;
scale: 1; scale: 1;
} }
} }