seperate debug log
This commit is contained in:
Julian Freeman
96
src/App.vue
96
src/App.vue
@@ -8,7 +8,8 @@ import {
|
||||
Trash2,
|
||||
ArrowRightLeft,
|
||||
Loader2,
|
||||
Check
|
||||
Check,
|
||||
FileText
|
||||
} from 'lucide-vue-next';
|
||||
import { fetch } from '@tauri-apps/plugin-http';
|
||||
import { useSettingsStore, LANGUAGES, DEFAULT_TEMPLATE } from './stores/settings';
|
||||
@@ -20,7 +21,7 @@ function cn(...inputs: ClassValue[]) {
|
||||
}
|
||||
|
||||
const settings = useSettingsStore();
|
||||
const view = ref<'translate' | 'settings'>('translate');
|
||||
const view = ref<'translate' | 'settings' | 'logs'>('translate');
|
||||
|
||||
// Translation State
|
||||
const sourceText = ref('');
|
||||
@@ -149,17 +150,26 @@ const translate = async () => {
|
||||
<div class="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-100 flex flex-col">
|
||||
<!-- Header -->
|
||||
<header class="h-14 border-b bg-white flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<Languages class="w-6 h-6 text-blue-600" />
|
||||
<div class="flex items-center gap-2 cursor-pointer group" @click="view = 'translate'">
|
||||
<Languages class="w-6 h-6 text-blue-600 group-hover:scale-110 transition-transform" />
|
||||
<h1 class="font-semibold text-lg tracking-tight">GemmaTrans</h1>
|
||||
</div>
|
||||
<button
|
||||
@click="view = view === 'translate' ? 'settings' : 'translate'"
|
||||
class="p-2 hover:bg-slate-100 rounded-full transition-colors"
|
||||
>
|
||||
<Settings v-if="view === 'translate'" class="w-5 h-5 text-slate-600" />
|
||||
<Languages v-else class="w-5 h-5 text-slate-600" />
|
||||
</button>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
@click="view = 'settings'"
|
||||
:class="cn('p-2 rounded-full transition-colors', view === 'settings' ? 'bg-blue-50 text-blue-600' : 'hover:bg-slate-100 text-slate-600')"
|
||||
title="Settings"
|
||||
>
|
||||
<Settings class="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
@click="view = 'logs'"
|
||||
:class="cn('p-2 rounded-full transition-colors', view === 'logs' ? 'bg-blue-50 text-blue-600' : 'hover:bg-slate-100 text-slate-600')"
|
||||
title="Debug Logs"
|
||||
>
|
||||
<FileText class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="flex-1 flex overflow-hidden">
|
||||
@@ -227,7 +237,7 @@ const translate = async () => {
|
||||
</div>
|
||||
|
||||
<!-- Settings View -->
|
||||
<div v-else class="flex-1 overflow-y-auto bg-slate-50 p-6 md:p-10">
|
||||
<div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-50 p-6 md:p-10">
|
||||
<div class="max-w-2xl mx-auto space-y-8">
|
||||
<section>
|
||||
<h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-4">API Configuration</h2>
|
||||
@@ -290,33 +300,45 @@ const translate = async () => {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-4">Debug Logs</h2>
|
||||
<div class="bg-white rounded-xl shadow-sm border p-4 space-y-2 overflow-hidden">
|
||||
<div v-if="settings.logs.length === 0" class="text-xs text-slate-400 text-center py-4 italic">
|
||||
No logs recorded yet. Try translating something.
|
||||
</div>
|
||||
<div
|
||||
v-for="(log, idx) in settings.logs"
|
||||
:key="idx"
|
||||
class="text-[10px] font-mono border-b last:border-0 pb-2 flex flex-col gap-1"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-slate-400">[{{ log.timestamp }}]</span>
|
||||
<span
|
||||
:class="cn(
|
||||
'px-1 rounded uppercase font-bold',
|
||||
log.type === 'request' ? 'bg-blue-100 text-blue-700' :
|
||||
log.type === 'response' ? 'bg-green-100 text-green-700' :
|
||||
'bg-red-100 text-red-700'
|
||||
)"
|
||||
>{{ log.type }}</span>
|
||||
</div>
|
||||
<pre class="bg-slate-50 p-2 rounded overflow-x-auto text-slate-600 max-h-32">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre>
|
||||
</div>
|
||||
<!-- Logs View -->
|
||||
<div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-50 p-6 md:p-10">
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-sm font-semibold text-slate-500 uppercase tracking-wider">Debug Logs</h2>
|
||||
<button
|
||||
@click="settings.logs = []"
|
||||
class="text-xs text-red-600 hover:underline flex items-center gap-1"
|
||||
>
|
||||
<Trash2 class="w-3 h-3" />
|
||||
Clear All Logs
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border p-4 space-y-4">
|
||||
<div v-if="settings.logs.length === 0" class="text-sm text-slate-400 text-center py-10 italic">
|
||||
No logs recorded yet. Try translating something.
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
v-for="(log, idx) in settings.logs"
|
||||
:key="idx"
|
||||
class="text-[11px] font-mono border-b last:border-0 pb-4 flex flex-col gap-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-slate-400">[{{ log.timestamp }}]</span>
|
||||
<span
|
||||
:class="cn(
|
||||
'px-2 py-0.5 rounded uppercase font-bold text-[9px]',
|
||||
log.type === 'request' ? 'bg-blue-100 text-blue-700' :
|
||||
log.type === 'response' ? 'bg-green-100 text-green-700' :
|
||||
'bg-red-100 text-red-700'
|
||||
)"
|
||||
>{{ log.type }}</span>
|
||||
</div>
|
||||
<pre class="bg-slate-50 p-3 rounded-lg overflow-x-auto text-slate-600 max-h-48 leading-relaxed shadow-inner border border-slate-100">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user