julian/ai-translate-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

rebuild logs ui

Browse Source
This commit is contained in:
Julian Freeman
2026-03-25 18:21:07 -04:00
parent 352047c123
commit 69a8047743
2 changed files with 93 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/App.vue
View File

@@ -96,6 +96,26 @@ const copyHistoryText = async (text: string) => {
}
};
// Logs Management
const selectedLogId = ref<string | null>(null);
const selectedLogItem = computed(() =>
settings.logs.find(l => l.id === selectedLogId.value) || null
);
watch(() => settings.logs, (newVal) => {
if (newVal.length > 0 && !selectedLogId.value) {
selectedLogId.value = newVal[0].id;
}
}, { immediate: true });
const getLogSummary = (log: any) => {
if (log.type === 'error') return String(log.content);
if (typeof log.content === 'string') return log.content;
if (log.content && log.content.model) return `Model: ${log.content.model}`;
if (log.content && log.content.score) return `Score: ${log.content.score}`;
return 'JSON Data';
};
// Profile Management
const newProfileName = ref('');
const isSavingProfile = ref(false);
@@ -1301,42 +1321,89 @@ const translate = async () => {
</div>
<!-- Logs View -->
<div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-100/50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
<div class="max-w-3xl mx-auto space-y-6">
<div v-else-if="view === 'logs'" class="flex-1 flex overflow-hidden bg-slate-100/50 dark:bg-slate-950">
<!-- Logs List (Master) -->
<div class="w-80 md:w-96 border-r dark:border-slate-800 flex flex-col bg-white/60 dark:bg-slate-900/40">
<div class="p-4 border-b dark:border-slate-800 space-y-3">
<div class="flex items-center justify-between">
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">日志</h2>
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">系统日志</h2>
<button
@click="settings.logs = []"
class="text-xs text-red-600 dark:text-red-400 hover:underline flex items-center gap-1"
class="text-[11px] text-red-500 hover:underline font-medium flex items-center gap-1"
>
<Trash2 class="w-3 h-3" />
清空
清空全部
</button>
</div>
<div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-4 space-y-4">
<div v-if="settings.logs.length === 0" class="text-sm text-slate-400 dark:text-slate-500 text-center py-10 italic">
暂无日志记录。请尝试进行翻译。
</div>
<div class="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1">
<div v-if="settings.logs.length === 0" class="py-20 text-center space-y-2">
<FileText class="w-10 h-10 text-slate-200 dark:text-slate-800 mx-auto" />
<p class="text-sm text-slate-400 italic">暂无日志记录</p>
</div>
<div
v-for="(log, idx) in settings.logs"
:key="idx"
class="text-[11px] font-mono border-b dark:border-slate-800 last:border-0 pb-4 flex flex-col gap-2"
v-for="log in settings.logs"
:key="log.id"
@click="selectedLogId = log.id"
:class="cn(
'w-full p-4 rounded-xl text-left transition-all border group relative cursor-pointer',
selectedLogId === log.id
? 'bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-900/50 shadow-sm'
: 'hover:bg-slate-100 dark:hover:bg-slate-800/50 border-transparent'
)"
>
<div class="flex items-center gap-2">
<span class="text-slate-400 dark:text-slate-500">[{{ log.timestamp }}]</span>
<div class="flex items-center justify-between mb-2">
<span
:class="cn(
'px-2 py-0.5 rounded uppercase font-bold text-[11px]',
'px-2 py-0.5 rounded uppercase font-bold text-[10px]',
log.type === 'request' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' :
log.type === 'response' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' :
'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
)"
>{{ log.type === 'request' ? '请求' : log.type === 'response' ? '响应' : '错误' }}</span>
<span class="text-[10px] text-slate-400 font-mono">{{ log.timestamp.split(' ')[1] }}</span>
</div>
<pre class="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg overflow-x-auto text-slate-600 dark:text-slate-300 max-h-48 leading-relaxed shadow-inner border border-slate-100 dark:border-slate-700">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre>
<p class="text-[11px] text-slate-500 dark:text-slate-400 line-clamp-2 font-mono leading-relaxed">{{ getLogSummary(log) }}</p>
</div>
</div>
</div>
<!-- Log Detail (Detail) -->
<div class="flex-1 flex flex-col min-w-0 bg-white dark:bg-slate-900">
<template v-if="selectedLogItem">
<div class="p-6 border-b dark:border-slate-800 flex items-center justify-between shrink-0 bg-slate-50/50 dark:bg-slate-800/20">
<div class="flex items-center gap-3">
<h2 class="text-lg font-bold text-slate-800 dark:text-slate-100">日志详情</h2>
<span class="text-[11px] font-mono text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded">{{ selectedLogItem.timestamp }}</span>
<span
:class="cn(
'px-2 py-0.5 rounded uppercase font-bold text-[10px]',
selectedLogItem.type === 'request' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' :
selectedLogItem.type === 'response' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' :
'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
)"
>{{ selectedLogItem.type === 'request' ? 'Request' : selectedLogItem.type === 'response' ? 'Response' : 'Error' }}</span>
</div>
<button
@click="copyHistoryText(typeof selectedLogItem.content === 'object' ? JSON.stringify(selectedLogItem.content, null, 2) : String(selectedLogItem.content))"
class="flex items-center gap-2 px-3 py-2 text-xs font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800 rounded-lg transition-colors border border-slate-200 dark:border-slate-700"
>
<Copy class="w-4 h-4" />
复制内容
</button>
</div>
<div class="flex-1 overflow-auto p-6 bg-slate-50/30 dark:bg-slate-900/50 custom-scrollbar">
<pre class="font-mono text-xs leading-relaxed text-slate-700 dark:text-slate-300 whitespace-pre-wrap break-all">{{ typeof selectedLogItem.content === 'object' ? JSON.stringify(selectedLogItem.content, null, 2) : selectedLogItem.content }}</pre>
</div>
</template>
<div v-else class="flex-1 flex flex-col items-center justify-center text-slate-300 dark:text-slate-800 p-10 text-center space-y-4">
<div class="w-20 h-20 rounded-full bg-slate-50 dark:bg-slate-800/50 flex items-center justify-center">
<FileText class="w-10 h-10 opacity-20" />
</div>
<p class="text-sm font-medium">请从左侧选择一条日志查看详情</p>
</div>
</div>
</div>
</main>

5
src/stores/settings.ts
View File

@@ -159,7 +159,7 @@ export const useSettingsStore = defineStore('settings', () => {
set: (val) => { toneRegisterMap.value[sourceLang.value.code] = val; }
});
const logs = ref<{ timestamp: string; type: 'request' | 'response' | 'error'; content: any }[]>([]);
const logs = ref<{ id: string; timestamp: string; type: 'request' | 'response' | 'error'; content: any }[]>([]);
const history = useLocalStorage<HistoryItem[]>('translation-history-v1', []);
const addLog = (type: 'request' | 'response' | 'error', content: any) => {
@@ -167,11 +167,12 @@ export const useSettingsStore = defineStore('settings', () => {
const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
logs.value.unshift({
id: crypto.randomUUID(),
timestamp,
type,
content
});
if (logs.value.length > 20) logs.value.pop();
if (logs.value.length > 50) logs.value.pop(); // 稍微增加日志保留数量
};
const addHistory = (item: Omit<HistoryItem, 'id' | 'timestamp'>) => {