support history

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ai-translate-client",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.3.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -19,7 +19,7 @@ dependencies = [
 
 [[package]]
 name = "ai-translate-client"
-version = "0.2.1"
+version = "0.3.4"
 dependencies = [
  "futures-util",
  "reqwest 0.12.28",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ai-translate-client"
-version = "0.2.1"
+version = "0.3.4"
 description = "A client using AI models to translate"
 authors = ["Julian"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "ai-translate-client",
-  "version": "0.2.1",
+  "version": "0.3.4",
   "identifier": "top.volan.ai-translate-client",
   "build": {
     "beforeDevCommand": "pnpm dev",

src/App.vue

@@ -17,7 +17,9 @@ import {
   Type,
   Plus,
   Save,
-  Play
+  Play,
+  Clock,
+  Search
 } from 'lucide-vue-next';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
@@ -25,6 +27,8 @@ import {
   useSettingsStore, 
   LANGUAGES, 
   DEFAULT_TEMPLATE,
+  DEFAULT_EVALUATION_TEMPLATE,
+  DEFAULT_REFINEMENT_TEMPLATE,
   SPEAKER_IDENTITY_OPTIONS,
   TONE_REGISTER_OPTIONS,
   type ApiProfile
@@ -52,7 +56,45 @@ const toggleTheme = () => {
   settings.isDark = !settings.isDark;
 };
 
-const view = ref<'translate' | 'settings' | 'logs'>('translate');
+const view = ref<'translate' | 'settings' | 'logs' | 'history'>('translate');
+
+// History Management
+const searchQuery = ref('');
+const selectedHistoryId = ref<string | null>(null);
+
+const filteredHistory = computed(() => {
+  if (!searchQuery.value.trim()) return settings.history;
+  const q = searchQuery.value.toLowerCase();
+  return settings.history.filter(h => 
+    h.sourceText.toLowerCase().includes(q) || 
+    h.targetText.toLowerCase().includes(q)
+  );
+});
+
+const selectedHistoryItem = computed(() => 
+  settings.history.find(h => h.id === selectedHistoryId.value) || null
+);
+
+watch(filteredHistory, (newVal) => {
+  if (newVal.length > 0 && !selectedHistoryId.value) {
+    selectedHistoryId.value = newVal[0].id;
+  }
+}, { immediate: true });
+
+const deleteHistoryItem = (id: string) => {
+  settings.history = settings.history.filter(h => h.id !== id);
+  if (selectedHistoryId.value === id) {
+    selectedHistoryId.value = filteredHistory.value[0]?.id || null;
+  }
+};
+
+const copyHistoryText = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (err) {
+    console.error('Failed to copy history text: ', err);
+  }
+};
 
 // Profile Management
 const newProfileName = ref('');
@@ -89,20 +131,23 @@ const sourceDropdownOpen = ref(false);
 const targetDropdownOpen = ref(false);
 const speakerDropdownOpen = ref(false);
 const toneDropdownOpen = ref(false);
+const evaluationProfileDropdownOpen = ref(false);
 
 const closeAllDropdowns = () => {
   sourceDropdownOpen.value = false;
   targetDropdownOpen.value = false;
   speakerDropdownOpen.value = false;
   toneDropdownOpen.value = false;
+  evaluationProfileDropdownOpen.value = false;
 };
 
-const toggleDropdown = (type: 'source' | 'target' | 'speaker' | 'tone') => {
+const toggleDropdown = (type: 'source' | 'target' | 'speaker' | 'tone' | 'evaluationProfile') => {
   const states = {
     source: sourceDropdownOpen,
     target: targetDropdownOpen,
     speaker: speakerDropdownOpen,
-    tone: toneDropdownOpen
+    tone: toneDropdownOpen,
+    evaluationProfile: evaluationProfileDropdownOpen
   };
   
   const targetState = states[type];
@@ -129,15 +174,44 @@ onUnmounted(() => {
 
 // Translation State
 const sourceText = ref('');
+const context = ref('');
 const targetText = ref('');
 const isTranslating = ref(false);
 const showCopyFeedback = ref(false);
 
+interface Suggestion {
+  id: number;
+  text: string;
+  importance: number;
+}
+
+interface EvaluationResult {
+  score: number;
+  analysis: string;
+  suggestions?: Suggestion[];
+}
+
+const evaluationResult = ref<EvaluationResult | null>(null);
+const isEvaluating = ref(false);
+const isRefining = ref(false);
+const selectedSuggestionIds = ref<number[]>([]);
+const appliedSuggestionIds = ref<number[]>([]);
+
+const toggleSuggestion = (id: number) => {
+  if (!selectedSuggestionIds.value) selectedSuggestionIds.value = [];
+  const index = selectedSuggestionIds.value.indexOf(id);
+  if (index > -1) {
+    selectedSuggestionIds.value.splice(index, 1);
+  } else {
+    selectedSuggestionIds.value.push(id);
+  }
+};
+
 let unlisten: (() => void) | null = null;
 
 onMounted(async () => {
   unlisten = await listen<string>('translation-chunk', (event) => {
-    if (isTranslating.value) {
+    if (isTranslating.value || isRefining.value) {
       targetText.value += event.payload;
     }
   });
@@ -175,6 +249,12 @@ const currentToneLabel = computed(() => {
   return TONE_REGISTER_OPTIONS.find(opt => opt.value === settings.toneRegister)?.label || '正式专业';
 });
 
+const currentEvaluationProfileLabel = computed(() => {
+  if (!settings.evaluationProfileId) return '使用主翻译配置（默认）';
+  const profile = settings.profiles.find(p => p.id === settings.evaluationProfileId);
+  return profile ? `${profile.name} — ${profile.modelName}` : '使用主翻译配置（默认）';
+});
+
 const swapLanguages = () => {
   const temp = { ...settings.sourceLang };
   settings.sourceLang = { ...settings.targetLang };
@@ -184,6 +264,7 @@ const swapLanguages = () => {
 const clearSource = () => {
   sourceText.value = '';
   targetText.value = '';
+  evaluationResult.value = null;
 };
 
 const copyTarget = async () => {
@@ -198,25 +279,172 @@ const copyTarget = async () => {
   }
 };
 
+const evaluateTranslation = async () => {
+  if (!targetText.value) return;
+
+  isEvaluating.value = true;
+  evaluationResult.value = null;
+  selectedSuggestionIds.value = [];
+  appliedSuggestionIds.value = [];
+
+  // Determine which API config to use for evaluation
+  let apiBaseUrl = settings.apiBaseUrl;
+  let apiKey = settings.apiKey;
+  let modelName = settings.modelName;
+
+  if (settings.evaluationProfileId) {
+    const profile = settings.profiles.find(p => p.id === settings.evaluationProfileId);
+    if (profile) {
+      apiBaseUrl = profile.apiBaseUrl;
+      apiKey = profile.apiKey;
+      modelName = profile.modelName;
+    }
+  }
+
+  const evaluationSystemPrompt = settings.evaluationPromptTemplate
+    .replace(/{SOURCE_LANG}/g, sourceLang.value.englishName)
+    .replace(/{TARGET_LANG}/g, targetLang.value.englishName)
+    .replace(/{SPEAKER_IDENTITY}/g, settings.speakerIdentity)
+    .replace(/{TONE_REGISTER}/g, settings.toneRegister)
+    .replace(/{CONTEXT}/g, context.value || 'None');
+
+  const evaluationUserPrompt = `[Source Text]\n${sourceText.value}\n\n[Translated Text]\n${targetText.value}`;
+
+  const requestBody = {
+    model: modelName,
+    messages: [
+      { role: "system", content: evaluationSystemPrompt },
+      { role: "user", content: evaluationUserPrompt }
+    ],
+    stream: false // Non-streaming for evaluation to parse JSON
+  };
+
+  settings.addLog('request', { type: 'evaluation', ...requestBody });
+
+  try {
+    const response = await invoke<string>('translate', {
+      apiAddress: apiBaseUrl,
+      apiKey: apiKey,
+      payload: requestBody
+    });
+    
+    try {
+      // Try to extract JSON if the model wrapped it in code blocks
+      const jsonStr = response.replace(/```json\s?|\s?```/g, '').trim();
+      evaluationResult.value = JSON.parse(jsonStr);
+      settings.addLog('response', { type: 'evaluation', content: evaluationResult.value });
+    } catch (parseErr) {
+      console.error('Failed to parse evaluation result:', response);
+      settings.addLog('error', `Evaluation parsing error: ${response}`);
+    }
+  } catch (err: any) {
+    settings.addLog('error', `Evaluation error: ${String(err)}`);
+  } finally {
+    isEvaluating.value = false;
+  }
+};
+
+const refineTranslation = async () => {
+  if (!targetText.value || isRefining.value) return;
+  
+  const selectedTexts = evaluationResult.value?.suggestions
+    ?.filter(s => selectedSuggestionIds.value?.includes(s.id))
+    .map(s => s.text);
+    
+  if (!selectedTexts || selectedTexts.length === 0) return;
+
+  isRefining.value = true;
+  const originalTranslation = targetText.value;
+  targetText.value = ''; 
+  // Keep evaluationResult and selectedSuggestionIds to allow the user to see what was changed
+
+  // Determine which API config to use (same as audit)
+  let apiBaseUrl = settings.apiBaseUrl;
+  let apiKey = settings.apiKey;
+  let modelName = settings.modelName;
+
+  if (settings.evaluationProfileId) {
+    const profile = settings.profiles.find(p => p.id === settings.evaluationProfileId);
+    if (profile) {
+      apiBaseUrl = profile.apiBaseUrl;
+      apiKey = profile.apiKey;
+      modelName = profile.modelName;
+    }
+  }
+
+  const refinementSystemPrompt = settings.refinementPromptTemplate
+    .replace(/{SOURCE_LANG}/g, sourceLang.value.englishName)
+    .replace(/{TARGET_LANG}/g, targetLang.value.englishName)
+    .replace(/{SPEAKER_IDENTITY}/g, settings.speakerIdentity)
+    .replace(/{TONE_REGISTER}/g, settings.toneRegister)
+    .replace(/{CONTEXT}/g, context.value || 'None');
+
+  const formattedSuggestions = selectedTexts.map((text, i) => `${i + 1}. ${text}`).join('\n');
+  
+  const refinementUserPrompt = `[Source Text]\n${sourceText.value}\n\n[Current Translation]\n${originalTranslation}\n\n[User Feedback]\n${formattedSuggestions}`;
+
+  const requestBody = {
+    model: modelName,
+    messages: [
+      { role: "system", content: refinementSystemPrompt },
+      { role: "user", content: refinementUserPrompt }
+    ],
+    stream: settings.enableStreaming
+  };
+
+  settings.addLog('request', { type: 'refinement', ...requestBody });
+
+  try {
+    const response = await invoke<string>('translate', {
+      apiAddress: apiBaseUrl,
+      apiKey: apiKey,
+      payload: requestBody
+    });
+    
+    if (!settings.enableStreaming) {
+      targetText.value = response;
+    }
+    
+    // Track applied suggestions and clear selection
+    if (evaluationResult.value?.suggestions) {
+      appliedSuggestionIds.value.push(...selectedSuggestionIds.value);
+      selectedSuggestionIds.value = [];
+    }
+    
+    settings.addLog('response', 'Refinement completed');
+  } catch (err: any) {
+    const errorMsg = String(err);
+    settings.addLog('error', errorMsg);
+    targetText.value = `Error: ${errorMsg}`;
+  } finally {
+    isRefining.value = false;
+  }
+};
+
 const translate = async () => {
   if (!sourceText.value.trim() || isTranslating.value) return;
 
   isTranslating.value = true;
   targetText.value = '';
+  evaluationResult.value = null;
 
-  const prompt = settings.systemPromptTemplate
+  const systemMessage = settings.systemPromptTemplate
     .replace(/{SOURCE_LANG}/g, sourceLang.value.englishName)
     .replace(/{SOURCE_CODE}/g, sourceLang.value.code)
     .replace(/{TARGET_LANG}/g, targetLang.value.englishName)
     .replace(/{TARGET_CODE}/g, targetLang.value.code)
     .replace(/{SPEAKER_IDENTITY}/g, settings.speakerIdentity)
-    .replace(/{TONE_REGISTER}/g, settings.toneRegister)
-    .replace(/{TEXT}/g, sourceText.value);
+    .replace(/{TONE_REGISTER}/g, settings.toneRegister);
+
+  const userMessage = context.value 
+    ? `[Context]\n${context.value}\n\n[Text to Translate]\n${sourceText.value}`
+    : `[Text to Translate]\n${sourceText.value}`;
 
   const requestBody = {
     model: settings.modelName,
     messages: [
-      { role: "user", content: prompt }
+      { role: "system", content: systemMessage },
+      { role: "user", content: userMessage }
     ],
     stream: settings.enableStreaming
   };
@@ -235,6 +463,18 @@ const translate = async () => {
       targetText.value = response;
     }
     settings.addLog('response', 'Translation completed');
+
+    // Save to history
+    settings.addHistory({
+      sourceLang: { ...sourceLang.value },
+      targetLang: { ...targetLang.value },
+      sourceText: sourceText.value,
+      targetText: settings.enableStreaming ? targetText.value : response,
+      context: context.value,
+      speakerIdentity: settings.speakerIdentity,
+      toneRegister: settings.toneRegister,
+      modelName: settings.modelName
+    });
   } catch (err: any) {
     const errorMsg = String(err);
     settings.addLog('error', errorMsg);
@@ -242,13 +482,18 @@ const translate = async () => {
   } finally {
     isTranslating.value = false;
   }
+
+  // Trigger evaluation if enabled
+  if (settings.enableEvaluation) {
+    await evaluateTranslation();
+  }
 };
 </script>
 
 <template>
-  <div class="h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col overflow-hidden">
+  <div class="h-screen bg-slate-100/50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col overflow-hidden">
     <!-- Header -->
-    <header class="h-14 border-b dark:border-slate-800 bg-white dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm">
+    <header class="h-14 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm/5">
       <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">AI 翻译</h1>
@@ -256,7 +501,7 @@ const translate = async () => {
       <div class="flex items-center gap-2">
         <button 
           @click="toggleTheme"
-          class="p-2 rounded-full transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300"
+          class="p-2 rounded-full transition-colors hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300"
           :title="settings.isDark ? '切换亮色主题' : '切换暗色主题'"
         >
           <Sun v-if="settings.isDark" class="w-5 h-5" />
@@ -264,27 +509,34 @@ const translate = async () => {
         </button>
         <button 
           @click="view = 'settings'"
-          :class="cn('p-2 rounded-full transition-colors', view === 'settings' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
+          :class="cn('p-2 rounded-full transition-colors', view === 'settings' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
           title="设置"
         >
           <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 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
-          title="调试日志"
+          :class="cn('p-2 rounded-full transition-colors', view === 'logs' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
+          title="日志"
         >
           <FileText class="w-5 h-5" />
         </button>
+        <button 
+          @click="view = 'history'"
+          :class="cn('p-2 rounded-full transition-colors', view === 'history' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
+          title="历史记录"
+        >
+          <Clock class="w-5 h-5" />
+        </button>
       </div>
     </header>
 
     <main class="flex-1 flex overflow-hidden min-h-0 relative">
       <!-- Translation View -->
-      <div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white dark:bg-slate-900 overflow-hidden h-full">
+      <div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white/50 dark:bg-slate-900 overflow-hidden h-full">
         <!-- Source Pane -->
         <div class="flex-1 flex flex-col min-h-0 relative h-full">
-          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40 shrink-0">
+          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
             <!-- Custom Source Dropdown -->
             <div class="relative lang-dropdown min-w-30">
               <button 
@@ -333,15 +585,38 @@ const translate = async () => {
               </button>
             </div>
           </div>
-          <textarea
-            v-model="sourceText"
-            placeholder="请输入待翻译内容..."
-            class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent min-h-0"
-          ></textarea>
-          <div class="p-4 border-t dark:border-slate-800 flex justify-end shrink-0">
-            <button 
+                      <textarea
+                      v-model="sourceText"
+                      placeholder="请输入待翻译内容..."
+                      class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent min-h-0"
+                    ></textarea>
+          
+                    <!-- Context Input Area -->
+                    <div class="px-6 py-3 bg-slate-200/20 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
+                       <div class="flex items-center justify-between mb-1.5 h-5">
+                          <div class="flex items-center gap-1.5">
+                            <FileText class="w-4 h-4 text-slate-400" />
+                            <span class="text-[12px] font-bold text-slate-400 uppercase tracking-widest">情景背景 (可选)</span>
+                          </div>
+                          <button 
+                            v-if="context"
+                            @click="context = ''"
+                            class="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 rounded opacity-0 group-hover/context:opacity-100 transition-opacity"
+                            title="清空背景"
+                          >
+                            <Plus class="w-3 h-3 rotate-45 text-slate-400" />
+                          </button>
+                       </div>
+                       <textarea
+                          v-model="context"
+                          placeholder="在此输入背景信息，有助于提升翻译准确度..."
+                          class="w-full bg-transparent border-none outline-none text-sm text-slate-500 dark:text-slate-400 resize-none h-14 leading-normal placeholder:italic placeholder:text-slate-300 dark:placeholder:text-slate-600"
+                       ></textarea>
+                    </div>
+          
+                    <div class="p-4 border-t dark:border-slate-800 bg-slate-50/30 dark:bg-transparent flex justify-end shrink-0">            <button 
               @click="translate"
-              :disabled="isTranslating || !sourceText.trim()"
+              :disabled="isTranslating || isEvaluating || isRefining || !sourceText.trim()"
               class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
             >
               <Loader2 v-if="isTranslating" class="w-4 h-4 animate-spin" />
@@ -352,8 +627,8 @@ const translate = async () => {
         </div>
 
         <!-- Target Pane -->
-        <div class="flex-1 flex flex-col min-h-0 bg-slate-50/30 dark:bg-slate-900/50 relative h-full">
-          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40 shrink-0">
+        <div class="flex-1 flex flex-col min-h-0 bg-slate-100/20 dark:bg-slate-900/50 relative h-full">
+          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
             <!-- Custom Target Dropdown -->
             <div class="relative lang-dropdown min-w-30">
               <button 
@@ -493,22 +768,290 @@ const translate = async () => {
             </template>
             <span v-else class="text-slate-300 dark:text-slate-600 italic">翻译结果将在此显示...</span>
           </div>
+
+          <!-- Evaluation Results -->
+          <div v-if="isEvaluating || evaluationResult" class="px-6 py-4 bg-slate-200/20 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-500 overflow-y-auto max-h-80 shrink-0">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <div :class="cn(
+                  'w-2 h-2 rounded-full',
+                  isEvaluating ? 'bg-blue-400 animate-pulse' : (evaluationResult?.score && evaluationResult.score >= 80 ? 'bg-green-500' : evaluationResult?.score && evaluationResult.score >= 60 ? 'bg-amber-500' : 'bg-red-500')
+                )"></div>
+                <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">质量审计</h3>
+              </div>
+              <div v-if="evaluationResult" :class="cn(
+                'text-lg font-black font-mono',
+                evaluationResult.score >= 80 ? 'text-green-600' : evaluationResult.score >= 60 ? 'text-amber-600' : 'text-red-600'
+              )">
+                {{ evaluationResult.score }} <span class="text-[10px] font-normal opacity-50">/ 100</span>
+              </div>
+              <div v-else-if="isEvaluating" class="flex items-center gap-1.5 text-xs text-blue-500 font-medium">
+                <Loader2 class="w-3 h-3 animate-spin" />
+                正在审计...
+              </div>
+            </div>
+
+            <div v-if="evaluationResult" class="space-y-3">
+              <div class="bg-slate-50 dark:bg-slate-800/40 p-3 rounded-lg border border-slate-100 dark:border-slate-800/60">
+                <p class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">
+                  {{ evaluationResult.analysis }}
+                </p>
+              </div>
+              
+              <div v-if="evaluationResult.suggestions && evaluationResult.suggestions.length > 0" class="space-y-4 pt-2">
+                <!-- Pending Suggestions -->
+                <div v-if="evaluationResult.suggestions.some(s => !appliedSuggestionIds.includes(s.id))" class="space-y-2">
+                  <div class="flex items-center gap-2">
+                    <div class="w-2 h-2 rounded-full bg-blue-500"></div>
+                    <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">修改建议</h3>
+                  </div>
+                  <div class="space-y-2">
+                    <div 
+                      v-for="sug in evaluationResult.suggestions.filter(s => !appliedSuggestionIds.includes(s.id))" 
+                      :key="sug.id"
+                      @click="toggleSuggestion(sug.id)"
+                      :class="cn(
+                        'flex items-start gap-3 p-3 rounded-xl border transition-all cursor-pointer group',
+                        selectedSuggestionIds?.includes(sug.id) 
+                          ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800' 
+                          : 'bg-white dark:bg-slate-800/40 border-slate-100 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700'
+                      )"
+                    >
+                      <div :class="cn(
+                        'w-4 h-4 rounded border mt-0.5 shrink-0 flex items-center justify-center transition-colors',
+                        selectedSuggestionIds?.includes(sug.id) ? 'bg-blue-600 border-blue-600' : 'border-slate-300 dark:border-slate-600'
+                      )">
+                        <Check v-if="selectedSuggestionIds?.includes(sug.id)" class="w-3.5 h-3.5 text-white" stroke-width="4" />
+                      </div>
+                      <div class="flex-1 space-y-1.5 min-w-0">
+                        <p class="text-xs text-slate-700 dark:text-slate-200 leading-normal">{{ sug.text }}</p>
+                        <div class="flex items-center gap-2">
+                          <div class="flex-1 h-1 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
+                            <div 
+                              class="h-full rounded-full transition-all duration-1000"
+                              :class="sug.importance >= 80 ? 'bg-red-500' : sug.importance >= 40 ? 'bg-amber-500' : 'bg-blue-500'"
+                              :style="{ width: `${sug.importance}%` }"
+                            ></div>
+                          </div>
+                          <span class="text-[9px] font-bold opacity-40 uppercase tracking-tighter w-8 shrink-0">{{ sug.importance }}%</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Applied Suggestions -->
+                <div v-if="appliedSuggestionIds.length > 0" class="space-y-2 border-t dark:border-slate-800 pt-4">
+                  <div class="flex items-center gap-2">
+                    <div class="w-2 h-2 rounded-full bg-slate-400"></div>
+                    <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">已润色</h3>
+                  </div>
+                  <div class="space-y-2">
+                    <div 
+                      v-for="sug in evaluationResult.suggestions.filter(s => appliedSuggestionIds.includes(s.id))" 
+                      :key="'applied-' + sug.id"
+                      class="p-3 rounded-xl border border-slate-100 dark:border-slate-800/60 bg-white/30 dark:bg-slate-800/20 opacity-70"
+                    >
+                      <p class="text-xs text-slate-500 dark:text-slate-400 leading-normal">{{ sug.text }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 border-t dark:border-slate-800 bg-slate-50/30 dark:bg-transparent flex justify-end gap-2 shrink-0">
+            <button 
+              @click="refineTranslation"
+              v-if="evaluationResult && evaluationResult.suggestions && evaluationResult.suggestions.length > 0"
+              :disabled="isRefining || isEvaluating || isTranslating || selectedSuggestionIds.length === 0"
+              class="bg-blue-600 enabled:hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
+            >
+              <Loader2 v-if="isRefining" class="w-4 h-4 animate-spin" />
+              <Save v-else class="w-4 h-4" />
+              {{ isRefining ? '正在润色...' : '润色' }}
+            </button>
+            <button 
+              @click="evaluateTranslation"
+              :disabled="isEvaluating || isTranslating || isRefining || !targetText.trim()"
+              class="bg-blue-600 enabled:hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
+            >
+              <Loader2 v-if="isEvaluating" class="w-4 h-4 animate-spin" />
+              <Check v-else class="w-4 h-4" />
+              {{ isEvaluating ? '正在审计...' : '审计' }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- History View -->
+      <div v-else-if="view === 'history'" class="flex-1 flex overflow-hidden bg-slate-100/50 dark:bg-slate-950">
+        <!-- History 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="relative group">
+              <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-blue-500 transition-colors" />
+              <input 
+                v-model="searchQuery"
+                type="text"
+                placeholder="搜索历史记录..."
+                class="w-full pl-9 pr-4 py-2 bg-slate-100 dark:bg-slate-800 border-none rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-500/20 transition-all dark:text-slate-200"
+              />
+            </div>
+            <div class="flex items-center justify-between px-1">
+              <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">共 {{ filteredHistory.length }} 条记录</span>
+              <button 
+                @click="settings.history = []"
+                class="text-[11px] text-red-500 hover:underline font-medium"
+              >清空全部</button>
+            </div>
+          </div>
+          
+          <div class="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1">
+            <div v-if="filteredHistory.length === 0" class="py-20 text-center space-y-2">
+              <Clock 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="item in filteredHistory"
+              :key="item.id"
+              @click="selectedHistoryId = item.id"
+              :class="cn(
+                'w-full p-4 rounded-xl text-left transition-all border group relative cursor-pointer',
+                selectedHistoryId === item.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 justify-between mb-2">
+                <div class="flex items-center gap-1.5">
+                  <span class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-slate-200 dark:bg-slate-800 text-slate-500 dark:text-slate-400 uppercase">{{ item.sourceLang.code }}</span>
+                  <ArrowRightLeft class="w-3 h-3 text-slate-300" />
+                  <span class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400 uppercase">{{ item.targetLang.code }}</span>
+                </div>
+                <span class="text-[10px] text-slate-400 font-mono">{{ item.timestamp.split(' ')[1].substring(0, 5) }}</span>
+              </div>
+              <p class="text-xs text-slate-700 dark:text-slate-200 font-medium line-clamp-2 leading-relaxed mb-1">{{ item.sourceText }}</p>
+              <p class="text-[11px] text-slate-400 dark:text-slate-500 line-clamp-1 italic">{{ item.targetText }}</p>
+              
+              <button 
+                @click.stop="deleteHistoryItem(item.id)"
+                class="absolute right-2 bottom-2 p-1.5 rounded-md text-red-400 opacity-0 group-hover:opacity-100 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"
+                title="删除此记录"
+              >
+                <Trash2 class="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- History Detail (Detail) -->
+        <div class="flex-1 flex flex-col min-w-0 bg-white dark:bg-slate-900">
+          <template v-if="selectedHistoryItem">
+            <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 flex-col gap-1">
+                <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">{{ selectedHistoryItem.timestamp }}</span>
+                </div>
+                <div class="flex items-center gap-3 text-xs text-slate-500">
+                  <div class="flex items-center gap-1">
+                    <User class="w-3 h-3" />
+                    {{ SPEAKER_IDENTITY_OPTIONS.find(o => o.value === (selectedHistoryItem?.speakerIdentity))?.label || selectedHistoryItem?.speakerIdentity }}
+                  </div>
+                  <span>•</span>
+                  <div class="flex items-center gap-1">
+                    <Type class="w-3 h-3" />
+                    {{ TONE_REGISTER_OPTIONS.find(o => o.value === (selectedHistoryItem?.toneRegister))?.label || selectedHistoryItem?.toneRegister }}
+                  </div>
+                  <span>•</span>
+                  <div class="font-mono text-[10px]">{{ selectedHistoryItem.modelName }}</div>
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                 <button 
+                    @click="deleteHistoryItem(selectedHistoryItem.id)"
+                    class="flex items-center gap-2 px-3 py-2 text-xs font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
+                  >
+                    <Trash2 class="w-4 h-4" />
+                    删除记录
+                  </button>
+              </div>
+            </div>
+
+            <div class="flex-1 overflow-y-auto p-8 space-y-10 custom-scrollbar">
+              <!-- Source -->
+              <section class="space-y-4">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-2">
+                    <div class="w-1.5 h-4 bg-slate-300 dark:bg-slate-700 rounded-full"></div>
+                    <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest">{{ selectedHistoryItem.sourceLang.displayName }} (原文)</h3>
+                  </div>
+                  <button 
+                    @click="copyHistoryText(selectedHistoryItem.sourceText)"
+                    class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg text-slate-400 transition-colors"
+                  >
+                    <Copy class="w-4 h-4" />
+                  </button>
+                </div>
+                <div class="bg-slate-50 dark:bg-slate-800/30 p-6 rounded-2xl border border-slate-100 dark:border-slate-800 text-lg leading-relaxed text-slate-700 dark:text-slate-200 whitespace-pre-wrap">
+                  {{ selectedHistoryItem.sourceText }}
+                </div>
+              </section>
+
+              <!-- Context if exists -->
+              <section v-if="selectedHistoryItem.context" class="space-y-4">
+                 <div class="flex items-center gap-2">
+                    <FileText class="w-4 h-4 text-slate-300" />
+                    <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest">情景背景</h3>
+                  </div>
+                  <div class="bg-amber-50/30 dark:bg-amber-900/10 p-4 rounded-xl border border-amber-100/50 dark:border-amber-900/20 text-sm italic text-slate-500 dark:text-slate-400 leading-relaxed">
+                    {{ selectedHistoryItem.context }}
+                  </div>
+              </section>
+
+              <!-- Target -->
+              <section class="space-y-4">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-2">
+                    <div class="w-1.5 h-4 bg-blue-500 rounded-full"></div>
+                    <h3 class="text-xs font-black text-blue-500/60 uppercase tracking-widest">{{ selectedHistoryItem.targetLang.displayName }} (译文)</h3>
+                  </div>
+                  <button 
+                    @click="copyHistoryText(selectedHistoryItem.targetText)"
+                    class="p-2 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/50 rounded-lg text-blue-600 dark:text-blue-400 transition-colors"
+                  >
+                    <Copy class="w-4 h-4" />
+                  </button>
+                </div>
+                <div class="bg-blue-50/20 dark:bg-blue-900/10 p-6 rounded-2xl border border-blue-100/50 dark:border-blue-900/20 text-xl leading-relaxed font-medium text-slate-800 dark:text-slate-100 whitespace-pre-wrap shadow-sm">
+                  {{ selectedHistoryItem.targetText }}
+                </div>
+              </section>
+            </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">
+                <Clock class="w-10 h-10 opacity-20" />
+             </div>
+             <p class="text-sm font-medium">请从左侧选择一条历史记录查看详情</p>
+          </div>
         </div>
       </div>
 
       <!-- Settings View -->
-      <div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
+      <div v-else-if="view === 'settings'" 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-2xl mx-auto space-y-8">
           <section>
             <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">API 配置预设</h2>
-            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-1.5 space-y-1">
+            <div class="bg-white/60 dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-1.5 space-y-1">
               <div v-if="settings.profiles.length === 0" class="p-8 text-center text-sm text-slate-400 dark:text-slate-600 italic">
                 暂无预设配置
               </div>
               <div 
                 v-for="profile in settings.profiles" 
                 :key="profile.id"
-                class="p-3 flex items-center justify-between group hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors rounded-lg"
+                class="p-3 flex items-center justify-between group hover:bg-slate-100/50 dark:hover:bg-slate-800/50 transition-colors rounded-lg"
               >
                 <div class="flex flex-col gap-0.5 min-w-0">
                   <span class="text-sm font-semibold text-slate-700 dark:text-slate-200 truncate">{{ profile.name }}</span>
@@ -573,7 +1116,7 @@ const translate = async () => {
                 </button>
               </div>
             </div>
-            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6 space-y-4">
+            <div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6 space-y-4">
               <div class="space-y-2">
                 <label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label>
                 <input 
@@ -619,36 +1162,149 @@ const translate = async () => {
                   )"></div>
                 </button>
               </div>
+
+              <div class="flex items-center justify-between">
+                <div>
+                  <label class="text-sm font-medium text-slate-700 dark:text-slate-300">自动质量审计</label>
+                  <p class="text-xs text-slate-500 dark:text-slate-500">翻译完成后自动评估准确度</p>
+                </div>
+                <button 
+                  @click="settings.enableEvaluation = !settings.enableEvaluation"
+                  :class="cn(
+                    'w-12 h-6 rounded-full transition-colors relative',
+                    settings.enableEvaluation ? 'bg-blue-600' : 'bg-slate-300 dark:bg-slate-700'
+                  )"
+                >
+                  <div :class="cn(
+                    'absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform',
+                    settings.enableEvaluation ? 'translate-x-6' : 'translate-x-0'
+                  )"></div>
+                </button>
+              </div>
+
+              <div class="space-y-3 pt-4 border-t border-dashed dark:border-slate-800 animate-in fade-in slide-in-from-top-2 duration-300">
+                <div class="flex items-center gap-2 mb-1">
+                  <Settings class="w-3.5 h-3.5 text-blue-500" />
+                  <label class="text-sm font-semibold text-slate-700 dark:text-slate-300">审计模型</label>
+                </div>
+                
+                <!-- Custom Evaluation Profile Dropdown -->
+                <div class="relative lang-dropdown">
+                  <button 
+                    @click.stop="toggleDropdown('evaluationProfile')"
+                    class="flex items-center justify-between w-full px-4 py-2.5 border dark:border-slate-700 rounded-xl bg-slate-50/50 dark:bg-slate-800/30 hover:bg-slate-100/50 dark:hover:bg-slate-800/50 transition-all text-sm text-slate-700 dark:text-slate-200 group"
+                  >
+                    <span class="truncate">{{ currentEvaluationProfileLabel }}</span>
+                    <ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200 group-hover:text-blue-500', evaluationProfileDropdownOpen && 'rotate-180')" />
+                  </button>
+                  
+                  <transition
+                    enter-active-class="transition duration-100 ease-out"
+                    enter-from-class="transform scale-95 opacity-0"
+                    enter-to-class="transform scale-100 opacity-100"
+                    leave-active-class="transition duration-75 ease-in"
+                    leave-from-class="transform scale-100 opacity-100"
+                    leave-to-class="transform scale-95 opacity-0"
+                  >
+                    <div 
+                      v-if="evaluationProfileDropdownOpen"
+                      class="absolute left-0 mt-2 w-full max-h-60 overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 py-2 flex flex-col custom-scrollbar"
+                    >
+                      <button
+                        @click="settings.evaluationProfileId = null; evaluationProfileDropdownOpen = false"
+                        :class="cn(
+                          'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
+                          settings.evaluationProfileId === null ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-700/50'
+                        )"
+                      >
+                        使用主翻译配置（默认）
+                        <Check v-if="settings.evaluationProfileId === null" class="w-3.5 h-3.5" />
+                      </button>
+                      <div class="h-px bg-slate-100 dark:bg-slate-700 my-1 mx-2"></div>
+                      <button
+                        v-for="profile in settings.profiles"
+                        :key="profile.id"
+                        @click="settings.evaluationProfileId = profile.id; evaluationProfileDropdownOpen = false"
+                        :class="cn(
+                          'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
+                          settings.evaluationProfileId === profile.id ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'
+                        )"
+                      >
+                        <div class="flex flex-col min-w-0">
+                          <span class="truncate">{{ profile.name }}</span>
+                          <span class="text-[10px] opacity-60 font-mono">{{ profile.modelName }}</span>
+                        </div>
+                        <Check v-if="settings.evaluationProfileId === profile.id" class="w-3.5 h-3.5 shrink-0" />
+                      </button>
+                    </div>
+                  </transition>
+                </div>
+
+                <p class="text-[11px] text-slate-500 dark:text-slate-500 pl-1">
+                  提示：建议为审计选择更强大的模型以获得更精准的反馈
+                </p>
+              </div>
             </div>
           </section>
 
           <section>
             <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">提示词工程</h2>
-            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6">
+            <div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6 space-y-6">
               <div class="space-y-2">
                 <div class="flex items-center justify-between">
-                  <label class="text-sm font-medium text-slate-700 dark:text-slate-300">系统提示词模板</label>
+                  <label class="text-sm font-medium text-slate-700 dark:text-slate-300">翻译系统提示词模板</label>
                   <button @click="settings.systemPromptTemplate = DEFAULT_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline">恢复默认值</button>
                 </div>
                 <textarea 
                   v-model="settings.systemPromptTemplate"
-                  rows="9"
+                  rows="6"
                   class="w-full px-4 py-3 border dark:border-slate-700 rounded-lg bg-transparent focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-xs leading-relaxed text-slate-900 dark:text-slate-100"
                 ></textarea>
                 <div class="flex flex-wrap gap-2 mt-2">
-                   <span v-for="tag in ['{SOURCE_LANG}', '{SOURCE_CODE}', '{TARGET_LANG}', '{TARGET_CODE}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}', '{TEXT}']" :key="tag" class="px-2 py-1 bg-slate-100 dark:bg-slate-800 text-[10px] font-mono rounded border dark:border-slate-700 text-slate-600 dark:text-slate-400">{{ tag }}</span>
+                 <span v-for="tag in ['{SOURCE_CODE}', '{TARGET_CODE}', '{SOURCE_LANG}', '{TARGET_LANG}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}']" :key="tag" class="px-2 py-1 bg-slate-100 dark:bg-slate-800 text-[10px] font-mono rounded border dark:border-slate-700 text-slate-600 dark:text-slate-400">{{ tag }}</span>
+              </div>
+              </div>
+
+              <div class="space-y-2 border-t dark:border-slate-800 pt-6">
+                <div class="flex items-center justify-between">
+                  <label class="text-sm font-medium text-slate-700 dark:text-slate-300">审计系统提示词模板</label>
+                  <button @click="settings.evaluationPromptTemplate = DEFAULT_EVALUATION_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline">恢复默认值</button>
+                </div>
+                <textarea 
+                  v-model="settings.evaluationPromptTemplate"
+                  rows="8"
+                  class="w-full px-4 py-3 border dark:border-slate-700 rounded-lg bg-transparent focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-xs leading-relaxed text-slate-900 dark:text-slate-100"
+                ></textarea>
+                <div class="flex flex-wrap gap-2 mt-2">
+                   <span v-for="tag in ['{SOURCE_LANG}', '{TARGET_LANG}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}', '{CONTEXT}']" :key="tag" class="px-2 py-1 bg-slate-100 dark:bg-slate-800 text-[10px] font-mono rounded border dark:border-slate-700 text-slate-600 dark:text-slate-400">{{ tag }}</span>
                 </div>
               </div>
+
+              <div class="space-y-2 border-t dark:border-slate-800 pt-6">
+                <div class="flex items-center justify-between">
+                  <label class="text-sm font-medium text-slate-700 dark:text-slate-300">润色系统提示词模板</label>
+                  <button @click="settings.refinementPromptTemplate = DEFAULT_REFINEMENT_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline">恢复默认值</button>
+                </div>
+                <textarea 
+                  v-model="settings.refinementPromptTemplate"
+                  rows="8"
+                  class="w-full px-4 py-3 border dark:border-slate-700 rounded-lg bg-transparent focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-xs leading-relaxed text-slate-900 dark:text-slate-100"
+                ></textarea>
+                <div class="flex flex-wrap gap-2 mt-2">
+                   <span v-for="tag in ['{SOURCE_LANG}', '{TARGET_LANG}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}', '{CONTEXT}']" :key="tag" class="px-2 py-1 bg-slate-100 dark:bg-slate-800 text-[10px] font-mono rounded border dark:border-slate-700 text-slate-600 dark:text-slate-400">{{ tag }}</span>
+                </div>
+              </div>
+
             </div>
           </section>
         </div>
       </div>
 
       <!-- Logs View -->
-      <div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
+      <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 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"
@@ -657,7 +1313,7 @@ const translate = async () => {
               清空
             </button>
           </div>
-          <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-4 space-y-4">
+          <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>
@@ -677,7 +1333,7 @@ const translate = async () => {
                   )"
                 >{{ log.type === 'request' ? '请求' : log.type === 'response' ? '响应' : '错误' }}</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-56 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>
+              <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>
             </div>
           </div>
         </div>
@@ -685,9 +1341,9 @@ const translate = async () => {
     </main>
 
     <!-- Footer -->
-    <footer class="h-8 bg-slate-100 dark:bg-slate-900 border-t dark:border-slate-800 flex items-center px-4 justify-between shrink-0">
+    <footer class="h-8 bg-slate-200/40 dark:bg-slate-900 border-t dark:border-slate-800 flex items-center px-4 justify-between shrink-0">
       <div class="text-[10px] text-slate-400 dark:text-slate-500">
-        {{ settings.apiBaseUrl }}
+        {{ settings.modelName }}
       </div>
       <div class="text-[10px] text-slate-400 dark:text-slate-500">
         Client v{{ pkg.version }}

src/stores/settings.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
 import { useLocalStorage } from '@vueuse/core';
 
@@ -33,6 +33,7 @@ export const SPEAKER_IDENTITY_OPTIONS = [
 ];
 
 export const TONE_REGISTER_OPTIONS = [
+  { label: '自动识别', value: 'Auto-detect', description: '分析并保持原文的语气、情绪和礼貌程度' },
   { label: '正式专业', value: 'Formal & Professional', description: '商务邮件、法律合同、官方报告' },
   { label: '礼貌客气', value: 'Polite & Respectful', description: '与长辈、客户或初次见面的人交流' },
   { label: '礼貌随和', value: 'Polite & Conversational', description: '得体但不刻板的日常对话' },
@@ -45,14 +46,65 @@ export const TONE_REGISTER_OPTIONS = [
 
 export const DEFAULT_TEMPLATE = `You are a professional {SOURCE_LANG} ({SOURCE_CODE}) to {TARGET_LANG} ({TARGET_CODE}) translator. Your goal is to accurately convey the meaning and nuances of the original {SOURCE_LANG} text while adhering to {TARGET_LANG} grammar, vocabulary, and cultural sensitivities.
 
-Translation Context & Style Constraints:
-Speaker Identity: {SPEAKER_IDENTITY}. Ensure all grammatical agreements and self-referential terms in {TARGET_LANG} reflect this.
-Tone & Register: {TONE_REGISTER}.
+[Constraints]
+1. Speaker Identity: {SPEAKER_IDENTITY}. Ensure all grammatical agreements and self-referential terms in {TARGET_LANG} reflect this.
+2. Tone & Register: {TONE_REGISTER}. (If set to 'Auto-detect', analyze the tone, formality, and emotional nuance of the source text and faithfully replicate it. Do not neutralize strong emotions or unique styles.)
+3. Produce ONLY the {TARGET_LANG} translation, without any additional explanations, notes, or commentary.
+4. If [Context] is provided, use it strictly to disambiguate polysemous words. DO NOT add any factual information or descriptive details from the [Context] that are not present in the [Text to Translate].`;
 
-Produce only the {TARGET_LANG} translation, without any additional explanations or commentary. Please translate the following {SOURCE_LANG} text into {TARGET_LANG}:
+export const DEFAULT_EVALUATION_TEMPLATE = `# Role
+You are an **Objective Translation Auditor**. Your task is to evaluate translation quality based on accuracy, grammar, and fundamental readability. Avoid pedantic nitpicking over synonyms, but do point out issues that hinder professional quality.
 
+# Context Info
+- **Source Language**: {SOURCE_LANG}
+- **Target Language**: {TARGET_LANG}
+- **Speaker Identity**: {SPEAKER_IDENTITY}
+- **Intended Tone/Register**: {TONE_REGISTER}
+- **Context**: {CONTEXT}
 
-{TEXT}`;
+# Audit Criteria
+Only penalize and provide improvements if the translation meets one of these criteria:
+1. **Semantic Error**: Objective misalignment with the source meaning or complete hallucinations.
+2. **Grammatical Error**: Clear violations of target language grammar or syntax rules.
+3. **Tone Failure**: A tone that is the opposite or significantly different from the [Intended Tone/Register].
+4. **Poor Readability**: The phrasing is so stiff, unnatural, or convoluted that it hinders smooth comprehension (e.g., obvious "translationese" or broken logic).
+
+**Note**: Do NOT penalize if the translation is simply "not the most elegant" or if there's a subjective preference for a different synonym. If it's natural enough for a native speaker to understand without effort, it's acceptable.
+
+# Instructions
+1. **Evaluation**: Compare the [Source Text] and [Translated Text] based on the [Audit Criteria].
+2. **Scoring Strategy**: 
+   - **90-100**: Accurate, grammatically sound, and flows naturally.
+   - **75-89**: Accurate meaning, but suffers from "stiff" phrasing or minor flow issues that need adjustment.
+   - **Below 75**: Contains semantic errors, severe grammar issues, or tone mismatches.
+3. **Analysis**: Provide a concise explanation in Simplified Chinese. Focus on *why* the error matters (e.g., "meaning is reversed" or "too awkward to read").
+4. **Suggestions**: Provide a list of specific, actionable suggestions. For each, assign an "importance" from 0 to 100 (0 = unnecessary/optional, 100 = critical error).
+
+# Output Format
+Respond ONLY in JSON format. The "analysis" and "text" within "suggestions" MUST be in Simplified Chinese:
+{
+  "score": number,
+  "analysis": "string",
+  "suggestions": [
+    { "id": 1, "text": "suggestion text", "importance": number }
+  ]
+}`;
+
+export const DEFAULT_REFINEMENT_TEMPLATE = `You are a senior translation editor. Your task is to refine the [Current Translation] based on specific [User Feedback], while strictly maintaining the original meaning of the [Source Text] and adhering to the established context.
+
+[Context Info]
+- Source Language: {SOURCE_LANG}
+- Target Language: {TARGET_LANG}
+- Speaker Identity: {SPEAKER_IDENTITY}
+- Intended Tone/Register: {TONE_REGISTER}
+- Context: {CONTEXT}
+
+[Instructions]
+1. Carefully review the [User Feedback] and apply the requested improvements to the [Current Translation].
+2. Ensure that the refined translation remains semantically identical to the [Source Text].
+3. Maintain the [Speaker Identity] and [Intended Tone/Register] as specified.
+4. If a piece of feedback contradicts the [Source Text], prioritize accuracy and provide a balanced refinement.
+5. Produce ONLY the refined {TARGET_LANG} translation, without any additional explanations, notes, or commentary.`;
 
 export interface ApiProfile {
   id: string;
@@ -62,6 +114,19 @@ export interface ApiProfile {
   modelName: string;
 }
 
+export interface HistoryItem {
+  id: string;
+  timestamp: string;
+  sourceLang: Language;
+  targetLang: Language;
+  sourceText: string;
+  targetText: string;
+  context: string;
+  speakerIdentity: string;
+  toneRegister: string;
+  modelName: string;
+}
+
 export const useSettingsStore = defineStore('settings', () => {
   const isDark = useLocalStorage('is-dark', false);
   const apiBaseUrl = useLocalStorage('api-base-url', 'http://localhost:11434/v1');
@@ -71,14 +136,31 @@ export const useSettingsStore = defineStore('settings', () => {
   const enableStreaming = useLocalStorage('enable-streaming', true);
   const systemPromptTemplate = useLocalStorage('system-prompt-template', DEFAULT_TEMPLATE);
   
+  const enableEvaluation = useLocalStorage('enable-evaluation', true);
+  const evaluationPromptTemplate = useLocalStorage('evaluation-prompt-template', DEFAULT_EVALUATION_TEMPLATE);
+  const evaluationProfileId = useLocalStorage<string | null>('evaluation-profile-id', null);
+  const refinementPromptTemplate = useLocalStorage('refinement-prompt-template', DEFAULT_REFINEMENT_TEMPLATE);
+  
   // 存储整个对象以保持一致性
   const sourceLang = useLocalStorage<Language>('source-lang-v2', LANGUAGES[0]);
   const targetLang = useLocalStorage<Language>('target-lang-v2', LANGUAGES[4]);
 
-  const speakerIdentity = useLocalStorage('speaker-identity', SPEAKER_IDENTITY_OPTIONS[0].value);
-  const toneRegister = useLocalStorage('tone-register', TONE_REGISTER_OPTIONS[2].value);
+  // 按源语言分别存储身份和语气，实现基于语言自动切换
+  const speakerIdentityMap = useLocalStorage<Record<string, string>>('speaker-identity-map', {});
+  const toneRegisterMap = useLocalStorage<Record<string, string>>('tone-register-map', {});
+
+  const speakerIdentity = computed({
+    get: () => speakerIdentityMap.value[sourceLang.value.code] || SPEAKER_IDENTITY_OPTIONS[0].value,
+    set: (val) => { speakerIdentityMap.value[sourceLang.value.code] = val; }
+  });
+
+  const toneRegister = computed({
+    get: () => toneRegisterMap.value[sourceLang.value.code] || TONE_REGISTER_OPTIONS[0].value,
+    set: (val) => { toneRegisterMap.value[sourceLang.value.code] = val; }
+  });
 
   const logs = ref<{ timestamp: string; type: 'request' | 'response' | 'error'; content: any }[]>([]);
+  const history = useLocalStorage<HistoryItem[]>('translation-history-v1', []);
   
   const addLog = (type: 'request' | 'response' | 'error', content: any) => {
     const now = new Date();
@@ -92,6 +174,22 @@ export const useSettingsStore = defineStore('settings', () => {
     if (logs.value.length > 20) logs.value.pop();
   };
 
+  const addHistory = (item: Omit<HistoryItem, 'id' | 'timestamp'>) => {
+    const now = new Date();
+    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')}`;
+    
+    history.value.unshift({
+      ...item,
+      id: crypto.randomUUID(),
+      timestamp
+    });
+    
+    // 限制 100 条
+    if (history.value.length > 100) {
+      history.value = history.value.slice(0, 100);
+    }
+  };
+
   return {
     isDark,
     apiBaseUrl,
@@ -100,11 +198,17 @@ export const useSettingsStore = defineStore('settings', () => {
     profiles,
     enableStreaming,
     systemPromptTemplate,
+    enableEvaluation,
+    evaluationPromptTemplate,
+    evaluationProfileId,
+    refinementPromptTemplate,
     sourceLang,
     targetLang,
     speakerIdentity,
     toneRegister,
     logs,
-    addLog
+    history,
+    addLog,
+    addHistory
   };
 });