improve refine ui

src/App.vue

@@ -155,6 +155,7 @@ 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 = [];
@@ -244,6 +245,7 @@ const evaluateTranslation = async () => {
   isEvaluating.value = true;
   evaluationResult.value = null;
   selectedSuggestionIds.value = [];
+  appliedSuggestionIds.value = [];
 
   // Determine which API config to use for evaluation
   let apiBaseUrl = settings.apiBaseUrl;
@@ -362,6 +364,13 @@ const refineTranslation = async () => {
     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);
@@ -730,14 +739,16 @@ const translate = async () => {
                 </p>
               </div>
               
-              <div v-if="evaluationResult.suggestions && evaluationResult.suggestions.length > 0" class="space-y-2 pt-2">
+              <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" 
+                      v-for="sug in evaluationResult.suggestions.filter(s => !appliedSuggestionIds.includes(s.id))" 
                       :key="sug.id"
                       @click="toggleSuggestion(sug.id)"
                       :class="cn(
@@ -769,6 +780,24 @@ const translate = async () => {
                     </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>