rebuild logs ui

src/App.vue

@@ -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 v-else-if="view === 'logs'" class="flex-1 flex overflow-hidden bg-slate-100/50 dark:bg-slate-950">
-        <div class="max-w-3xl mx-auto space-y-6">
+        <!-- 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>
-            <div v-if="settings.logs.length === 0" class="text-sm text-slate-400 dark:text-slate-500 text-center py-10 italic">
+          
-              暂无日志记录。请尝试进行翻译。
+          <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" 
+              v-for="log in settings.logs"
-              :key="idx" 
+              :key="log.id"
-              class="text-[11px] font-mono border-b dark:border-slate-800 last:border-0 pb-4 flex flex-col gap-2"
+              @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">
+              <div class="flex items-center justify-between mb-2">
-                <span class="text-slate-400 dark:text-slate-500">[{{ log.timestamp }}]</span>
                 <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>
 

src/stores/settings.ts

@@ -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'>) => {