optimize chat audit

src/components/ConversationView.vue

@@ -4,7 +4,7 @@ import {
   Plus, Search, Trash2, Send, User, Type, ChevronDown, Check, 
   MessageSquare, Loader2, Copy, 
   X, Sparkles, Languages, Venus, Mars, CircleSlash,
-  ShieldCheck, TriangleAlert, AlertCircle
+  ShieldCheck
 } from 'lucide-vue-next';
 import { 
   useSettingsStore, 
@@ -43,6 +43,16 @@ const newSessionPartner = ref<Participant>({
   tone: 'Auto-detect'
 });
 
+// Audit Modal States
+const isAuditModalOpen = ref(false);
+const currentAuditMessageId = ref<string | null>(null);
+const selectedSuggestionIds = ref<number[]>([]);
+
+const activeAuditMessage = computed(() => {
+  if (!activeSession.value || !currentAuditMessageId.value) return null;
+  return activeSession.value.messages.find(m => m.id === currentAuditMessageId.value) || null;
+});
+
 // Custom Dropdown States for Modal
 const meLangDropdownOpen = ref(false);
 const meGenderDropdownOpen = ref(false);
@@ -211,7 +221,15 @@ const translateMessage = async (sender: 'me' | 'partner') => {
 const evaluateMessage = async (messageId: string) => {
   if (!activeSession.value) return;
   const msg = activeSession.value.messages.find(m => m.id === messageId);
-  if (!msg || msg.isEvaluating) return;
+  if (!msg) return;
+
+  currentAuditMessageId.value = messageId;
+  selectedSuggestionIds.value = [];
+  
+  await nextTick();
+  isAuditModalOpen.value = true;
+
+  if (msg.evaluation || msg.isEvaluating) return;
 
   settings.updateChatMessage(activeSession.value.id, messageId, { isEvaluating: true });
 
@@ -264,10 +282,15 @@ const evaluateMessage = async (messageId: string) => {
     settings.addLog('error', String(err));
   } finally {
     settings.updateChatMessage(activeSession.value.id, messageId, { isEvaluating: false });
-    scrollToBottom();
   }
 };
 
+const toggleSuggestion = (id: number) => {
+  const index = selectedSuggestionIds.value.indexOf(id);
+  if (index > -1) selectedSuggestionIds.value.splice(index, 1);
+  else selectedSuggestionIds.value.push(id);
+};
+
 const refineMessage = async (messageId: string) => {
   if (!activeSession.value) return;
   const msg = activeSession.value.messages.find(m => m.id === messageId);
@@ -275,11 +298,16 @@ const refineMessage = async (messageId: string) => {
 
   let evalData;
   try {
-    evalData = JSON.parse(msg.evaluation);
+    evalData = parseEvaluation(msg.evaluation);
   } catch (e) { return; }
 
-  const suggestionsText = evalData.suggestions.map((s: any) => `- ${s.text} (Importance: ${s.importance})`).join('\n');
+  // 仅使用选中的建议
+  const selectedSuggestions = evalData.suggestions.filter((s: any) => selectedSuggestionIds.value.includes(s.id));
+  if (selectedSuggestions.length === 0) return;
 
+  const suggestionsText = selectedSuggestions.map((s: any) => `- ${s.text}`).join('\n');
+
+  isAuditModalOpen.value = false; // 关闭弹窗开始润色
   settings.updateChatMessage(activeSession.value.id, messageId, { isRefining: true, translated: '' });
   currentStreamingMessageId.value = messageId;
 
@@ -292,6 +320,9 @@ const refineMessage = async (messageId: string) => {
 
   const myToneLabel = TONE_REGISTER_OPTIONS.find(o => o.value === activeSession.value!.me.tone)?.label || '随和';
 
+  // 确定目标语气
+  const targetTone = msg.sender === 'me' ? myToneLabel : '自动识别 (保持原作者原始语气和情绪)';
+
   const systemPrompt = CONVERSATION_REFINEMENT_PROMPT_TEMPLATE
     .replace(/{ME_NAME}/g, activeSession.value.me.name)
     .replace(/{ME_GENDER}/g, activeSession.value.me.gender)
@@ -302,7 +333,7 @@ const refineMessage = async (messageId: string) => {
     .replace(/{HISTORY_BLOCK}/g, historyBlock || 'None')
     .replace(/{CURRENT_TRANSLATION}/g, msg.translated)
     .replace(/{SUGGESTIONS}/g, suggestionsText)
-    .replace(/{MY_TONE}/g, myToneLabel);
+    .replace(/{TARGET_TONE}/g, targetTone);
 
   const requestBody = {
     model: settings.modelName,
@@ -351,18 +382,6 @@ const parseEvaluation = (evalStr?: string) => {
   }
 };
 
-const getSeverityColor = (importance: number) => {
-  if (importance >= 80) return 'text-red-500 bg-red-50 dark:bg-red-900/20 border-red-100 dark:border-red-900/30';
-  if (importance >= 40) return 'text-amber-500 bg-amber-50 dark:bg-amber-900/20 border-amber-100 dark:border-amber-900/30';
-  return 'text-blue-500 bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-900/30';
-};
-
-const getSeverityIcon = (importance: number) => {
-  if (importance >= 80) return AlertCircle;
-  if (importance >= 40) return TriangleAlert;
-  return ShieldCheck;
-};
-
 const handleGlobalClick = () => {
   myToneDropdownOpen.value = false;
   closeAllModalDropdowns();
@@ -528,67 +547,8 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
                   <Loader2 v-if="msg.isEvaluating" class="w-3.5 h-3.5 animate-spin text-blue-500" />
                   <ShieldCheck v-else class="w-3.5 h-3.5 text-slate-400" />
                 </button>
-                <button 
-                  v-if="msg.evaluation"
-                  @click="refineMessage(msg.id)"
-                  :disabled="msg.isRefining"
-                  class="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-full transition-colors disabled:opacity-30"
-                  title="执行润色"
-                >
-                  <Loader2 v-if="msg.isRefining" class="w-3.5 h-3.5 animate-spin text-purple-500" />
-                  <Sparkles v-else class="w-3.5 h-3.5 text-purple-400" />
-                </button>
               </div>
             </div>
-
-            <!-- Evaluation Results -->
-            <transition
-              enter-active-class="transition duration-200 ease-out"
-              enter-from-class="transform -translate-y-2 opacity-0"
-              enter-to-class="transform translate-y-0 opacity-100"
-            >
-              <div v-if="msg.evaluation" class="mt-2 w-full max-w-sm">
-                <div class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border border-slate-200 dark:border-slate-800 rounded-xl p-3 shadow-sm space-y-3">
-                  <!-- Score & Analysis -->
-                  <div class="flex items-start gap-2.5">
-                    <div :class="cn(
-                      'shrink-0 w-8 h-8 rounded-lg flex items-center justify-center text-xs font-black',
-                      parseEvaluation(msg.evaluation).score >= 90 ? 'bg-green-100 text-green-600 dark:bg-green-900/30' : 
-                      parseEvaluation(msg.evaluation).score >= 75 ? 'bg-amber-100 text-amber-600 dark:bg-amber-900/30' : 
-                      'bg-red-100 text-red-600 dark:bg-red-900/30'
-                    )">
-                      {{ parseEvaluation(msg.evaluation).score }}
-                    </div>
-                    <p class="text-[11px] text-slate-600 dark:text-slate-400 leading-relaxed italic">
-                      {{ parseEvaluation(msg.evaluation).analysis }}
-                    </p>
-                  </div>
-
-                  <!-- Suggestions with Severity -->
-                  <div class="space-y-1.5">
-                    <div 
-                      v-for="sug in parseEvaluation(msg.evaluation).suggestions" 
-                      :key="sug.id"
-                      :class="cn('flex items-center gap-2 px-2 py-1.5 rounded-lg border text-[10px] font-medium transition-all', getSeverityColor(sug.importance))"
-                    >
-                      <component :is="getSeverityIcon(sug.importance)" class="w-3 h-3 shrink-0" />
-                      <span class="flex-1">{{ sug.text }}</span>
-                    </div>
-                  </div>
-
-                  <!-- Refine Action -->
-                  <button 
-                    @click="refineMessage(msg.id)"
-                    :disabled="msg.isRefining"
-                    class="w-full py-1.5 bg-purple-50 hover:bg-purple-100 dark:bg-purple-900/20 dark:hover:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-lg text-[10px] font-bold transition-all flex items-center justify-center gap-1.5"
-                  >
-                    <Loader2 v-if="msg.isRefining" class="w-3 h-3 animate-spin" />
-                    <Sparkles v-else class="w-3 h-3" />
-                    {{ msg.isRefining ? '正在润色...' : '根据建议执行润色' }}
-                  </button>
-                </div>
-              </div>
-            </transition>
           </div>
         </div>
 
@@ -869,7 +829,135 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
           </div>
         </div>
       </transition>
+
     </div>
+
+    <!-- Audit Modal -->
+    <transition
+      enter-active-class="transition duration-300 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition duration-200 ease-in"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div v-if="isAuditModalOpen && activeAuditMessage" class="fixed inset-0 z-[999] flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-md">
+        <div class="w-full max-w-xl bg-white dark:bg-slate-900 rounded-[2.5rem] shadow-2xl border dark:border-slate-800 flex flex-col max-h-[90vh] overflow-hidden">
+          <!-- Header -->
+          <div class="px-8 py-6 border-b dark:border-slate-800 flex items-center justify-between bg-slate-50/50 dark:bg-slate-950/50 shrink-0">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-2xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600">
+                <ShieldCheck class="w-6 h-6" />
+              </div>
+              <div>
+                <h3 class="text-lg font-bold dark:text-slate-100">翻译质量审计</h3>
+                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Quality Audit & Refinement</p>
+              </div>
+            </div>
+            <button @click="isAuditModalOpen = false" class="p-2.5 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-full transition-colors">
+              <X class="w-5 h-5 text-slate-400" />
+            </button>
+          </div>
+
+          <!-- Content -->
+          <div class="flex-1 overflow-y-auto p-8 space-y-8 custom-scrollbar">
+            <!-- Score & Analysis -->
+            <section class="space-y-4">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                  <div :class="cn(
+                    'w-2 h-2 rounded-full',
+                    activeAuditMessage.isEvaluating ? 'bg-blue-400 animate-pulse' : (parseEvaluation(activeAuditMessage.evaluation)?.score >= 80 ? 'bg-green-500' : 'bg-red-500')
+                  )"></div>
+                  <h4 class="text-xs font-black text-slate-400 uppercase tracking-widest">总体评价</h4>
+                </div>
+                <div v-if="activeAuditMessage.evaluation" :class="cn(
+                  'text-3xl font-black font-mono leading-none',
+                  parseEvaluation(activeAuditMessage.evaluation).score >= 80 ? 'text-green-600' : 'text-red-600'
+                )">
+                  {{ parseEvaluation(activeAuditMessage.evaluation).score }}<span class="text-sm font-normal opacity-30 ml-1">/ 100</span>
+                </div>
+              </div>
+
+              <div v-if="activeAuditMessage.isEvaluating" class="py-10 flex flex-col items-center justify-center space-y-4">
+                <Loader2 class="w-10 h-10 animate-spin text-blue-500" />
+                <p class="text-sm text-slate-400 font-medium animate-pulse">正在深度分析译文...</p>
+              </div>
+
+              <div v-else-if="activeAuditMessage.evaluation" class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/60">
+                <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed italic">
+                  "{{ parseEvaluation(activeAuditMessage.evaluation).analysis }}"
+                </p>
+              </div>
+            </section>
+
+            <!-- Suggestions -->
+            <section v-if="parseEvaluation(activeAuditMessage.evaluation)?.suggestions?.length" class="space-y-4">
+              <div class="flex items-center gap-2">
+                <div class="w-2 h-2 rounded-full bg-blue-500"></div>
+                <h4 class="text-xs font-black text-slate-400 uppercase tracking-widest">修改建议 (点击勾选)</h4>
+              </div>
+              
+              <div class="space-y-3">
+                <div 
+                  v-for="sug in parseEvaluation(activeAuditMessage.evaluation).suggestions" 
+                  :key="sug.id"
+                  @click="toggleSuggestion(sug.id)"
+                  :class="cn(
+                    'flex items-start gap-4 p-4 rounded-2xl 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 ring-2 ring-blue-500/10' 
+                      : '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-5 h-5 rounded-lg border mt-0.5 shrink-0 flex items-center justify-center transition-all',
+                    selectedSuggestionIds.includes(sug.id) ? 'bg-blue-600 border-blue-600 scale-110' : '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-2.5 min-w-0">
+                    <p class="text-[13px] font-medium text-slate-700 dark:text-slate-200 leading-normal">{{ sug.text }}</p>
+                    
+                    <!-- Importance Bar -->
+                    <div class="flex items-center gap-3">
+                      <div class="flex-1 h-1.5 bg-slate-100 dark:bg-slate-700/50 rounded-full overflow-hidden">
+                        <div 
+                          class="h-full rounded-full transition-all duration-1000 ease-out"
+                          :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-[10px] font-black opacity-30 font-mono w-8 shrink-0">{{ sug.importance }}%</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+
+          <!-- Footer Action -->
+          <div class="p-8 border-t dark:border-slate-800 bg-slate-50/50 dark:bg-slate-950/50 flex items-center gap-4 shrink-0">
+            <button 
+              @click="isAuditModalOpen = false"
+              class="flex-1 py-4 bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-2xl font-bold transition-all"
+            >
+              取消
+            </button>
+            <button 
+              @click="refineMessage(activeAuditMessage.id)"
+              :disabled="activeAuditMessage.isRefining || activeAuditMessage.isEvaluating || selectedSuggestionIds.length === 0"
+              class="flex-[2] py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-2xl font-bold shadow-xl shadow-blue-500/20 transition-all disabled:opacity-50 disabled:shadow-none flex items-center justify-center gap-2"
+            >
+              <Loader2 v-if="activeAuditMessage.isRefining" class="w-5 h-5 animate-spin" />
+              <Sparkles v-else class="w-5 h-5" />
+              {{ activeAuditMessage.isRefining ? '正在润色...' : '应用选中建议并润色' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>