@@ -25,6 +25,7 @@ import {
useSettingsStore ,
LANGUAGES ,
DEFAULT _TEMPLATE ,
DEFAULT _EVALUATION _TEMPLATE ,
SPEAKER _IDENTITY _OPTIONS ,
TONE _REGISTER _OPTIONS ,
type ApiProfile
@@ -89,20 +90,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 ] ;
@@ -134,6 +138,15 @@ const targetText = ref('');
const isTranslating = ref ( false ) ;
const showCopyFeedback = ref ( false ) ;
interface EvaluationResult {
score : number ;
analysis : string ;
improvements ? : string ;
}
const evaluationResult = ref < EvaluationResult | null > ( null ) ;
const isEvaluating = ref ( false ) ;
let unlisten : ( ( ) => void ) | null = null ;
onMounted ( async ( ) => {
@@ -176,6 +189,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 } ;
@@ -185,6 +204,7 @@ const swapLanguages = () => {
const clearSource = ( ) => {
sourceText . value = '' ;
targetText . value = '' ;
evaluationResult . value = null ;
} ;
const copyTarget = async ( ) => {
@@ -199,11 +219,75 @@ const copyTarget = async () => {
}
} ;
const evaluateTranslation = async ( ) => {
if ( ! targetText . value ) return ;
isEvaluating . value = true ;
evaluationResult . value = null ;
// 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 evaluationPrompt = 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' )
. replace ( /{SOURCE_TEXT}/g , sourceText . value )
. replace ( /{TRANSLATED_TEXT}/g , targetText . value ) ;
const requestBody = {
model : modelName ,
messages : [
{ role : "system" , content : "You are a professional translation auditor. You must respond in valid JSON format." } ,
{ role : "user" , content : evaluationPrompt }
] ,
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 translate = async ( ) => {
if ( ! sourceText . value . trim ( ) || isTranslating . value ) return ;
isTranslating . value = true ;
targetText . value = '' ;
evaluationResult . value = null ;
const systemMessage = settings . systemPromptTemplate
. replace ( /{SOURCE_LANG}/g , sourceLang . value . englishName )
@@ -240,6 +324,11 @@ const translate = async () => {
targetText . value = response ;
}
settings . addLog ( 'response' , 'Translation completed' ) ;
// Trigger evaluation if enabled
if ( settings . enableEvaluation ) {
await evaluateTranslation ( ) ;
}
} catch ( err : any ) {
const errorMsg = String ( err ) ;
settings . addLog ( 'error' , errorMsg ) ;
@@ -520,6 +609,61 @@ const translate = async () => {
{{ targetText }}
< / template >
< span v-else class = "text-slate-300 dark:text-slate-600 italic" > 翻译结果将在此显示 ... < / span >
<!-- Evaluation Results -- >
< div v-if = "isEvaluating || evaluationResult" class="mt-8 pt-6 border-t dark:border-slate-800 space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-500" >
< 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.improvements" 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 = "bg-blue-50/50 dark:bg-blue-900/10 p-3 rounded-lg border border-blue-100/50 dark:border-blue-900/20" >
< p class = "text-xs text-slate-600 dark:text-slate-300 leading-relaxed" >
{ { evaluationResult . improvements } }
< / p >
< / 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 shrink-0" >
< button
@click ="evaluateTranslation"
: disabled = "isEvaluating || isTranslating || !targetText.trim()"
class = "bg-slate-200 hover:bg-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 disabled:opacity-50 text-slate-700 dark:text-slate-200 px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm border border-slate-300/50 dark:border-slate-700/50"
>
< Loader2 v-if = "isEvaluating" class="w-4 h-4 animate-spin" / >
< Check v-else class = "w-4 h-4" / >
{ { isEvaluating ? '正在审计...' : '审计' } }
< / button >
< / div >
< / div >
< / div >
@@ -647,26 +791,124 @@ 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-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 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}']" :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}', '{SOURCE_TEXT}', '{TRANSLATED_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 >
< / div >
< / div >
< / div >
< / section >
< / div >
