julian/ai-translate-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

improve refine ui

Browse Source
This commit is contained in:
Julian Freeman
2026-02-25 13:57:49 -04:00
parent dd06a3159b
commit ae1028588b
1 changed files with 63 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/App.vue
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,41 +739,61 @@ const translate = async () => {
</p>
</div>
<div v-if="evaluationResult.suggestions && evaluationResult.suggestions.length > 0" class="space-y-2 pt-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"
: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 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>