julian/LiteRequest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve response panel

Browse Source
This commit is contained in:
Julian Freeman
2025-12-01 11:03:12 -04:00
parent 8fc4dbbf93
commit 4d20f2075f
3 changed files with 141 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/ResponsePanel.vue
View File

@@ -1,14 +1,16 @@
<script setup lang="ts">
import { computed } from 'vue';
import { computed, ref } from 'vue';
import { useRequestStore } from '../stores/requestStore';
import { useSettingsStore } from '../stores/settingsStore';
import { Codemirror } from 'vue-codemirror';
import { json } from '@codemirror/lang-json';
import { oneDark } from '@codemirror/theme-one-dark';
import { EditorView } from '@codemirror/view'; // Import EditorView
import { EditorView } from '@codemirror/view';
import { Clipboard, Check } from 'lucide-vue-next';
const store = useRequestStore();
const settings = useSettingsStore();
const isCopied = ref(false);
const extensions = computed(() => {
const theme = EditorView.theme({
@@ -43,22 +45,46 @@ const statusColor = computed(() => {
if (s >= 400) return 'text-rose-400';
return 'text-amber-400';
});
const copyToClipboard = async () => {
if (!formattedBody.value) return;
try {
await navigator.clipboard.writeText(formattedBody.value);
isCopied.value = true;
setTimeout(() => {
isCopied.value = false;
}, 2000);
} catch (err) {
console.error('Failed to copy:', err);
}
};
</script>
<template>
<div class="flex flex-col h-full border-t border-slate-800 bg-slate-900">
<div v-if="store.activeRequest.response" class="flex flex-col h-full">
<!-- Meta Bar -->
<div class="px-4 py-2 border-b border-slate-800 flex gap-4 text-xs items-center bg-slate-950/50">
<div class="font-mono">
Status: <span :class="['font-bold', statusColor]">{{ store.activeRequest.response.status }}</span>
</div>
<div class="text-slate-500">
Time: <span class="text-slate-300">{{ store.activeRequest.response.time }}ms</span>
</div>
<div class="text-slate-500">
Size: <span class="text-slate-300">{{ (store.activeRequest.response.size / 1024).toFixed(2) }} KB</span>
<div class="px-4 py-2 border-b border-slate-800 flex justify-between text-xs items-center bg-slate-950/50">
<div class="flex gap-4 items-center">
<div class="font-mono">
Status: <span :class="['font-bold', statusColor]">{{ store.activeRequest.response.status }}</span>
</div>
<div class="text-slate-500">
Time: <span class="text-slate-300">{{ store.activeRequest.response.time }}ms</span>
</div>
<div class="text-slate-500">
Size: <span class="text-slate-300">{{ (store.activeRequest.response.size / 1024).toFixed(2) }} KB</span>
</div>
</div>
<button
@click="copyToClipboard"
class="p-1.5 text-slate-400 hover:text-indigo-400 hover:bg-indigo-500/10 rounded transition-colors"
title="Copy Body"
>
<Check v-if="isCopied" class="w-3.5 h-3.5" />
<Clipboard v-else class="w-3.5 h-3.5" />
</button>
</div>
<!-- Output -->