improve refine ui

This commit is contained in:
Julian Freeman
2026-02-25 13:57:49 -04:00
parent dd06a3159b
commit ae1028588b

View File

@@ -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>