Compare commits
18 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
f3150f06fa | ||
|
|
7de7877c64 | ||
|
|
15626ba9e1 | ||
|
|
c719b50285 | ||
|
|
9d3b509657 | ||
|
|
baaa9af1c0 | ||
|
|
847527ec79 | ||
|
|
31dd4ee2b2 | ||
|
|
69a8047743 | ||
|
|
352047c123 | ||
|
|
e0dd17bfff | ||
|
|
c5890bd5f2 | ||
|
|
96be7c67f3 | ||
|
|
ae1028588b | ||
|
|
dd06a3159b | ||
|
|
f20a9bb851 | ||
|
|
8294c12d17 | ||
|
|
55de02f5e3 |
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "ai-translate-client",
|
||||
"private": true,
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.6",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
2
src-tauri/Cargo.lock
generated
2
src-tauri/Cargo.lock
generated
@@ -19,7 +19,7 @@ dependencies = [
|
||||
|
||||
[[package]]
|
||||
name = "ai-translate-client"
|
||||
version = "0.3.2"
|
||||
version = "0.3.6"
|
||||
dependencies = [
|
||||
"futures-util",
|
||||
"reqwest 0.12.28",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[package]
|
||||
name = "ai-translate-client"
|
||||
version = "0.3.2"
|
||||
version = "0.3.6"
|
||||
description = "A client using AI models to translate"
|
||||
authors = ["Julian"]
|
||||
edition = "2021"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"$schema": "https://schema.tauri.app/config/2",
|
||||
"productName": "ai-translate-client",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.6",
|
||||
"identifier": "top.volan.ai-translate-client",
|
||||
"build": {
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
|
||||
915
src/App.vue
915
src/App.vue
@@ -1,42 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import {
|
||||
Settings,
|
||||
Languages,
|
||||
Send,
|
||||
Copy,
|
||||
Trash2,
|
||||
ArrowRightLeft,
|
||||
Loader2,
|
||||
Check,
|
||||
FileText,
|
||||
ChevronDown,
|
||||
Sun,
|
||||
Moon,
|
||||
User,
|
||||
Type,
|
||||
Plus,
|
||||
Save,
|
||||
Play
|
||||
Clock
|
||||
} from 'lucide-vue-next';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { listen } from '@tauri-apps/api/event';
|
||||
import {
|
||||
useSettingsStore,
|
||||
LANGUAGES,
|
||||
DEFAULT_TEMPLATE,
|
||||
DEFAULT_EVALUATION_TEMPLATE,
|
||||
SPEAKER_IDENTITY_OPTIONS,
|
||||
TONE_REGISTER_OPTIONS,
|
||||
type ApiProfile
|
||||
} from './stores/settings';
|
||||
import { useSettingsStore } from './stores/settings';
|
||||
import pkg from '../package.json';
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import { cn } from './lib/utils';
|
||||
|
||||
function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
// Import newly separated views
|
||||
import TranslationView from './components/TranslationView.vue';
|
||||
import SettingsView from './components/SettingsView.vue';
|
||||
import LogsView from './components/LogsView.vue';
|
||||
import HistoryView from './components/HistoryView.vue';
|
||||
|
||||
const settings = useSettingsStore();
|
||||
|
||||
@@ -53,290 +33,9 @@ const toggleTheme = () => {
|
||||
settings.isDark = !settings.isDark;
|
||||
};
|
||||
|
||||
const view = ref<'translate' | 'settings' | 'logs'>('translate');
|
||||
// Global Routing State
|
||||
const view = ref<'translate' | 'settings' | 'logs' | 'history'>('translate');
|
||||
|
||||
// Profile Management
|
||||
const newProfileName = ref('');
|
||||
const isSavingProfile = ref(false);
|
||||
|
||||
const saveCurrentAsProfile = () => {
|
||||
if (!newProfileName.value.trim()) return;
|
||||
|
||||
const newProfile: ApiProfile = {
|
||||
id: crypto.randomUUID(),
|
||||
name: newProfileName.value.trim(),
|
||||
apiBaseUrl: settings.apiBaseUrl,
|
||||
apiKey: settings.apiKey,
|
||||
modelName: settings.modelName
|
||||
};
|
||||
|
||||
settings.profiles.push(newProfile);
|
||||
newProfileName.value = '';
|
||||
isSavingProfile.value = false;
|
||||
};
|
||||
|
||||
const applyProfile = (p: ApiProfile) => {
|
||||
settings.apiBaseUrl = p.apiBaseUrl;
|
||||
settings.apiKey = p.apiKey;
|
||||
settings.modelName = p.modelName;
|
||||
};
|
||||
|
||||
const deleteProfile = (id: string) => {
|
||||
settings.profiles = settings.profiles.filter(p => p.id !== id);
|
||||
};
|
||||
|
||||
// Dropdown State
|
||||
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' | 'evaluationProfile') => {
|
||||
const states = {
|
||||
source: sourceDropdownOpen,
|
||||
target: targetDropdownOpen,
|
||||
speaker: speakerDropdownOpen,
|
||||
tone: toneDropdownOpen,
|
||||
evaluationProfile: evaluationProfileDropdownOpen
|
||||
};
|
||||
|
||||
const targetState = states[type];
|
||||
const currentValue = targetState.value;
|
||||
|
||||
closeAllDropdowns();
|
||||
targetState.value = !currentValue;
|
||||
};
|
||||
|
||||
const handleGlobalClick = (e: MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.closest('.lang-dropdown')) {
|
||||
closeAllDropdowns();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('click', handleGlobalClick);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('click', handleGlobalClick);
|
||||
});
|
||||
|
||||
// Translation State
|
||||
const sourceText = ref('');
|
||||
const context = ref('');
|
||||
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 () => {
|
||||
unlisten = await listen<string>('translation-chunk', (event) => {
|
||||
if (isTranslating.value) {
|
||||
targetText.value += event.payload;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (unlisten) unlisten();
|
||||
});
|
||||
|
||||
// Language Selection
|
||||
const sourceLangCode = computed({
|
||||
get: () => settings.sourceLang.code,
|
||||
set: (code) => {
|
||||
const lang = LANGUAGES.find(l => l.code === code);
|
||||
if (lang) settings.sourceLang = lang;
|
||||
}
|
||||
});
|
||||
|
||||
const targetLangCode = computed({
|
||||
get: () => settings.targetLang.code,
|
||||
set: (code) => {
|
||||
const lang = LANGUAGES.find(l => l.code === code);
|
||||
if (lang) settings.targetLang = lang;
|
||||
}
|
||||
});
|
||||
|
||||
const sourceLang = computed(() => settings.sourceLang);
|
||||
const targetLang = computed(() => settings.targetLang);
|
||||
|
||||
const currentSpeakerLabel = computed(() => {
|
||||
return SPEAKER_IDENTITY_OPTIONS.find(opt => opt.value === settings.speakerIdentity)?.label || '男性';
|
||||
});
|
||||
|
||||
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 };
|
||||
settings.targetLang = temp;
|
||||
};
|
||||
|
||||
const clearSource = () => {
|
||||
sourceText.value = '';
|
||||
targetText.value = '';
|
||||
evaluationResult.value = null;
|
||||
};
|
||||
|
||||
const copyTarget = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(targetText.value);
|
||||
showCopyFeedback.value = true;
|
||||
setTimeout(() => {
|
||||
showCopyFeedback.value = false;
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy text: ', err);
|
||||
}
|
||||
};
|
||||
|
||||
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)
|
||||
.replace(/{SOURCE_CODE}/g, sourceLang.value.code)
|
||||
.replace(/{TARGET_LANG}/g, targetLang.value.englishName)
|
||||
.replace(/{TARGET_CODE}/g, targetLang.value.code)
|
||||
.replace(/{SPEAKER_IDENTITY}/g, settings.speakerIdentity)
|
||||
.replace(/{TONE_REGISTER}/g, settings.toneRegister);
|
||||
|
||||
const userMessage = context.value
|
||||
? `[Context]\n${context.value}\n\n[Text to Translate]\n${sourceText.value}`
|
||||
: `[Text to Translate]\n${sourceText.value}`;
|
||||
|
||||
const requestBody = {
|
||||
model: settings.modelName,
|
||||
messages: [
|
||||
{ role: "system", content: systemMessage },
|
||||
{ role: "user", content: userMessage }
|
||||
],
|
||||
stream: settings.enableStreaming
|
||||
};
|
||||
|
||||
settings.addLog('request', requestBody);
|
||||
|
||||
try {
|
||||
const response = await invoke<string>('translate', {
|
||||
apiAddress: settings.apiBaseUrl,
|
||||
apiKey: settings.apiKey,
|
||||
payload: requestBody
|
||||
});
|
||||
|
||||
// For non-streaming, response is returned as string
|
||||
if (!settings.enableStreaming) {
|
||||
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);
|
||||
targetText.value = `Error: ${errorMsg}`;
|
||||
} finally {
|
||||
isTranslating.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -370,588 +69,24 @@ const translate = async () => {
|
||||
>
|
||||
<FileText class="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
@click="view = 'history'"
|
||||
:class="cn('p-2 rounded-full transition-colors', view === 'history' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
|
||||
title="历史记录"
|
||||
>
|
||||
<Clock class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="flex-1 flex overflow-hidden min-h-0 relative">
|
||||
<!-- Translation View -->
|
||||
<div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white/50 dark:bg-slate-900 overflow-hidden h-full">
|
||||
<!-- Source Pane -->
|
||||
<div class="flex-1 flex flex-col min-h-0 relative h-full">
|
||||
<div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
|
||||
<!-- Custom Source Dropdown -->
|
||||
<div class="relative lang-dropdown min-w-30">
|
||||
<button
|
||||
@click.stop="toggleDropdown('source')"
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-semibold text-slate-700 dark:text-slate-200 w-full justify-between group"
|
||||
>
|
||||
<span class="truncate">{{ sourceLang.displayName }}</span>
|
||||
<ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', sourceDropdownOpen && 'rotate-180')" />
|
||||
</button>
|
||||
|
||||
<!-- Dropdown Menu -->
|
||||
<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="sourceDropdownOpen"
|
||||
class="absolute left-0 mt-2 w-56 max-h-80 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
|
||||
v-for="lang in LANGUAGES"
|
||||
:key="lang.code"
|
||||
@click="sourceLangCode = lang.code; sourceDropdownOpen = false"
|
||||
:class="cn(
|
||||
'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
|
||||
sourceLangCode === lang.code ? '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'
|
||||
)"
|
||||
>
|
||||
{{ lang.displayName }}
|
||||
<Check v-if="sourceLangCode === lang.code" class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<button @click="swapLanguages" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors" title="交换语言">
|
||||
<ArrowRightLeft class="w-4 h-4 text-slate-500 dark:text-slate-400" />
|
||||
</button>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<button @click="clearSource" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors" title="清空内容">
|
||||
<Trash2 class="w-4 h-4 text-slate-500 dark:text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="sourceText"
|
||||
placeholder="请输入待翻译内容..."
|
||||
class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent min-h-0"
|
||||
></textarea>
|
||||
|
||||
<!-- Context Input Area -->
|
||||
<div class="px-6 py-3 bg-slate-200/20 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
|
||||
<div class="flex items-center justify-between mb-1.5 h-5">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<FileText class="w-4 h-4 text-slate-400" />
|
||||
<span class="text-[12px] font-bold text-slate-400 uppercase tracking-widest">情景背景 (可选)</span>
|
||||
</div>
|
||||
<button
|
||||
v-if="context"
|
||||
@click="context = ''"
|
||||
class="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 rounded opacity-0 group-hover/context:opacity-100 transition-opacity"
|
||||
title="清空背景"
|
||||
>
|
||||
<Plus class="w-3 h-3 rotate-45 text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="context"
|
||||
placeholder="在此输入背景信息，有助于提升翻译准确度..."
|
||||
class="w-full bg-transparent border-none outline-none text-sm text-slate-500 dark:text-slate-400 resize-none h-14 leading-normal placeholder:italic placeholder:text-slate-300 dark:placeholder:text-slate-600"
|
||||
></textarea>
|
||||
</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="translate"
|
||||
:disabled="isTranslating || !sourceText.trim()"
|
||||
class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
|
||||
>
|
||||
<Loader2 v-if="isTranslating" class="w-4 h-4 animate-spin" />
|
||||
<Send v-else class="w-4 h-4" />
|
||||
{{ isTranslating ? '正在翻译...' : '翻译' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Target Pane -->
|
||||
<div class="flex-1 flex flex-col min-h-0 bg-slate-100/20 dark:bg-slate-900/50 relative h-full">
|
||||
<div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
|
||||
<!-- Custom Target Dropdown -->
|
||||
<div class="relative lang-dropdown min-w-30">
|
||||
<button
|
||||
@click.stop="toggleDropdown('target')"
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-semibold text-slate-700 dark:text-slate-200 w-full justify-between"
|
||||
>
|
||||
<span class="truncate">{{ targetLang.displayName }}</span>
|
||||
<ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', targetDropdownOpen && 'rotate-180')" />
|
||||
</button>
|
||||
|
||||
<!-- Dropdown Menu -->
|
||||
<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="targetDropdownOpen"
|
||||
class="absolute left-0 mt-2 w-56 max-h-80 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
|
||||
v-for="lang in LANGUAGES"
|
||||
:key="lang.code"
|
||||
@click="targetLangCode = lang.code; targetDropdownOpen = false"
|
||||
:class="cn(
|
||||
'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
|
||||
targetLangCode === lang.code ? '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'
|
||||
)"
|
||||
>
|
||||
{{ lang.displayName }}
|
||||
<Check v-if="targetLangCode === lang.code" class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- Speaker Identity Dropdown -->
|
||||
<div class="relative lang-dropdown min-w-24">
|
||||
<button
|
||||
@click.stop="toggleDropdown('speaker')"
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-medium text-slate-600 dark:text-slate-300 w-full justify-between group"
|
||||
title="说话人身份"
|
||||
>
|
||||
<div class="flex items-center gap-1.5 truncate">
|
||||
<User class="w-3.5 h-3.5 text-slate-400" />
|
||||
<span class="truncate">{{ currentSpeakerLabel }}</span>
|
||||
</div>
|
||||
<ChevronDown :class="cn('w-3.5 h-3.5 text-slate-400 transition-transform duration-200 shrink-0', speakerDropdownOpen && '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="speakerDropdownOpen"
|
||||
class="absolute left-0 mt-2 w-40 max-h-80 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
|
||||
v-for="opt in SPEAKER_IDENTITY_OPTIONS"
|
||||
:key="opt.value"
|
||||
@click="settings.speakerIdentity = opt.value; speakerDropdownOpen = false"
|
||||
:class="cn(
|
||||
'px-4 py-2 text-sm text-left transition-colors flex items-center justify-between',
|
||||
settings.speakerIdentity === opt.value ? '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'
|
||||
)"
|
||||
>
|
||||
{{ opt.label }}
|
||||
<Check v-if="settings.speakerIdentity === opt.value" class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- Tone & Register Dropdown -->
|
||||
<div class="relative lang-dropdown min-w-32">
|
||||
<button
|
||||
@click.stop="toggleDropdown('tone')"
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-medium text-slate-600 dark:text-slate-300 w-full justify-between group"
|
||||
title="语气风格"
|
||||
>
|
||||
<div class="flex items-center gap-1.5 truncate">
|
||||
<Type class="w-3.5 h-3.5 text-slate-400" />
|
||||
<span class="truncate">{{ currentToneLabel }}</span>
|
||||
</div>
|
||||
<ChevronDown :class="cn('w-3.5 h-3.5 text-slate-400 transition-transform duration-200 shrink-0', toneDropdownOpen && '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="toneDropdownOpen"
|
||||
class="absolute left-0 mt-2 w-56 max-h-80 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
|
||||
v-for="opt in TONE_REGISTER_OPTIONS"
|
||||
:key="opt.value"
|
||||
@click="settings.toneRegister = opt.value; toneDropdownOpen = false"
|
||||
:class="cn(
|
||||
'px-4 py-2.5 text-sm text-left transition-colors flex flex-col gap-0.5',
|
||||
settings.toneRegister === opt.value ? '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 items-center justify-between w-full">
|
||||
{{ opt.label }}
|
||||
<Check v-if="settings.toneRegister === opt.value" class="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span class="text-[10px] opacity-60 font-normal truncate">{{ opt.description }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<button @click="copyTarget" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors relative" title="复制结果">
|
||||
<Check v-if="showCopyFeedback" class="w-4 h-4 text-green-600" />
|
||||
<Copy v-else class="w-4 h-4 text-slate-500 dark:text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-6 overflow-y-auto text-lg leading-relaxed whitespace-pre-wrap min-h-0">
|
||||
<template v-if="targetText">
|
||||
{{ 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>
|
||||
|
||||
<!-- Settings View -->
|
||||
<div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-100/50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
|
||||
<div class="max-w-2xl mx-auto space-y-8">
|
||||
<section>
|
||||
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">API 配置预设</h2>
|
||||
<div class="bg-white/60 dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-1.5 space-y-1">
|
||||
<div v-if="settings.profiles.length === 0" class="p-8 text-center text-sm text-slate-400 dark:text-slate-600 italic">
|
||||
暂无预设配置
|
||||
</div>
|
||||
<div
|
||||
v-for="profile in settings.profiles"
|
||||
:key="profile.id"
|
||||
class="p-3 flex items-center justify-between group hover:bg-slate-100/50 dark:hover:bg-slate-800/50 transition-colors rounded-lg"
|
||||
>
|
||||
<div class="flex flex-col gap-0.5 min-w-0">
|
||||
<span class="text-sm font-semibold text-slate-700 dark:text-slate-200 truncate">{{ profile.name }}</span>
|
||||
<div class="flex items-center gap-2 text-[10px] text-slate-400 dark:text-slate-500 font-mono">
|
||||
<span class="truncate max-w-30">{{ profile.modelName }}</span>
|
||||
<span>•</span>
|
||||
<span class="truncate">{{ profile.apiBaseUrl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
@click="applyProfile(profile)"
|
||||
class="p-2 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded-lg transition-colors"
|
||||
title="应用此配置"
|
||||
>
|
||||
<Play class="w-4 h-4 fill-current" />
|
||||
</button>
|
||||
<button
|
||||
@click="deleteProfile(profile.id)"
|
||||
class="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">模型接口配置</h2>
|
||||
<div v-if="!isSavingProfile" class="flex items-center gap-2">
|
||||
<button
|
||||
@click="isSavingProfile = true"
|
||||
class="text-xs flex items-center gap-1.5 text-blue-600 dark:text-blue-400 hover:underline px-2 py-1 rounded"
|
||||
>
|
||||
<Save class="w-3.5 h-3.5" />
|
||||
保存为预设
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="flex items-center gap-2 bg-white dark:bg-slate-800 p-1 rounded-lg border dark:border-slate-700 shadow-sm animate-in fade-in zoom-in duration-200">
|
||||
<input
|
||||
v-model="newProfileName"
|
||||
type="text"
|
||||
placeholder="输入预设名称..."
|
||||
class="text-xs px-2 py-1 bg-transparent outline-none w-32 dark:text-slate-200"
|
||||
@keyup.enter="saveCurrentAsProfile"
|
||||
/>
|
||||
<button
|
||||
@click="saveCurrentAsProfile"
|
||||
:disabled="!newProfileName.trim()"
|
||||
class="p-1 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/30 rounded disabled:opacity-50"
|
||||
>
|
||||
<Check class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
@click="isSavingProfile = false; newProfileName = ''"
|
||||
class="p-1 text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 rounded"
|
||||
>
|
||||
<Plus class="w-3.5 h-3.5 rotate-45" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6 space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label>
|
||||
<input
|
||||
v-model="settings.apiBaseUrl"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 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-slate-900 dark:text-slate-100"
|
||||
placeholder="https://api.openai.com/v1"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Key</label>
|
||||
<input
|
||||
v-model="settings.apiKey"
|
||||
type="password"
|
||||
class="w-full px-4 py-2 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-sm text-slate-900 dark:text-slate-100"
|
||||
placeholder="sk-..."
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">Model</label>
|
||||
<input
|
||||
v-model="settings.modelName"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 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-sm text-slate-900 dark:text-slate-100"
|
||||
placeholder="gpt-3.5-turbo"
|
||||
/>
|
||||
</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.enableStreaming = !settings.enableStreaming"
|
||||
:class="cn(
|
||||
'w-12 h-6 rounded-full transition-colors relative',
|
||||
settings.enableStreaming ? '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.enableStreaming ? 'translate-x-6' : 'translate-x-0'
|
||||
)"></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 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>
|
||||
<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="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_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>
|
||||
</div>
|
||||
|
||||
<!-- Logs View -->
|
||||
<div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-100/50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">日志</h2>
|
||||
<button
|
||||
@click="settings.logs = []"
|
||||
class="text-xs text-red-600 dark:text-red-400 hover:underline flex items-center gap-1"
|
||||
>
|
||||
<Trash2 class="w-3 h-3" />
|
||||
清空
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-4 space-y-4">
|
||||
<div v-if="settings.logs.length === 0" class="text-sm text-slate-400 dark:text-slate-500 text-center py-10 italic">
|
||||
暂无日志记录。请尝试进行翻译。
|
||||
</div>
|
||||
<div
|
||||
v-for="(log, idx) in settings.logs"
|
||||
:key="idx"
|
||||
class="text-[11px] font-mono border-b dark:border-slate-800 last:border-0 pb-4 flex flex-col gap-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-slate-400 dark:text-slate-500">[{{ log.timestamp }}]</span>
|
||||
<span
|
||||
:class="cn(
|
||||
'px-2 py-0.5 rounded uppercase font-bold text-[11px]',
|
||||
log.type === 'request' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' :
|
||||
log.type === 'response' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' :
|
||||
'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
|
||||
)"
|
||||
>{{ log.type === 'request' ? '请求' : log.type === 'response' ? '响应' : '错误' }}</span>
|
||||
</div>
|
||||
<pre class="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg overflow-x-auto text-slate-600 dark:text-slate-300 max-h-48 leading-relaxed shadow-inner border border-slate-100 dark:border-slate-700">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Container for isolated views with keep-alive -->
|
||||
<keep-alive>
|
||||
<TranslationView v-if="view === 'translate'" />
|
||||
<SettingsView v-else-if="view === 'settings'" />
|
||||
<LogsView v-else-if="view === 'logs'" />
|
||||
<HistoryView v-else-if="view === 'history'" />
|
||||
</keep-alive>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
|
||||
197
src/components/HistoryView.vue
Normal file
197
src/components/HistoryView.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { Clock, Search, ArrowRightLeft, Trash2, User, Type, Copy, Check, FileText } from 'lucide-vue-next';
|
||||
import { useSettingsStore, SPEAKER_IDENTITY_OPTIONS, TONE_REGISTER_OPTIONS } from '../stores/settings';
|
||||
import { cn } from '../lib/utils';
|
||||
import { useClipboard } from '../composables/useClipboard';
|
||||
|
||||
const settings = useSettingsStore();
|
||||
const { activeCopyId, copyWithFeedback } = useClipboard();
|
||||
|
||||
const searchQuery = ref('');
|
||||
const selectedHistoryId = ref<string | null>(null);
|
||||
|
||||
const filteredHistory = computed(() => {
|
||||
if (!searchQuery.value.trim()) return settings.history;
|
||||
const q = searchQuery.value.toLowerCase();
|
||||
return settings.history.filter(h =>
|
||||
h.sourceText.toLowerCase().includes(q) ||
|
||||
h.targetText.toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
|
||||
const selectedHistoryItem = computed(() =>
|
||||
settings.history.find(h => h.id === selectedHistoryId.value) || null
|
||||
);
|
||||
|
||||
watch(filteredHistory, (newVal) => {
|
||||
if (newVal.length > 0 && !selectedHistoryId.value) {
|
||||
selectedHistoryId.value = newVal[0].id;
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
const deleteHistoryItem = (id: string) => {
|
||||
settings.history = settings.history.filter(h => h.id !== id);
|
||||
if (selectedHistoryId.value === id) {
|
||||
selectedHistoryId.value = filteredHistory.value[0]?.id || null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<!-- History View -->
|
||||
<div class="flex-1 flex overflow-hidden bg-slate-100/50 dark:bg-slate-950">
|
||||
<!-- History List (Master) -->
|
||||
<div class="w-80 md:w-96 border-r dark:border-slate-800 flex flex-col bg-white/60 dark:bg-slate-900/40">
|
||||
<div class="p-4 border-b dark:border-slate-800 space-y-3">
|
||||
<div class="relative group">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-blue-500 transition-colors" />
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="搜索历史记录..."
|
||||
class="w-full pl-9 pr-4 py-2 bg-slate-100 dark:bg-slate-800 border-none rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-500/20 transition-all dark:text-slate-200"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">共 {{ filteredHistory.length }} 条记录</span>
|
||||
<button
|
||||
@click="settings.history = []"
|
||||
class="text-[11px] text-red-500 hover:underline font-medium"
|
||||
>清空全部</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1">
|
||||
<div v-if="filteredHistory.length === 0" class="py-20 text-center space-y-2">
|
||||
<Clock class="w-10 h-10 text-slate-200 dark:text-slate-800 mx-auto" />
|
||||
<p class="text-sm text-slate-400 italic">暂无相关历史</p>
|
||||
</div>
|
||||
<div
|
||||
v-for="item in filteredHistory"
|
||||
:key="item.id"
|
||||
@click="selectedHistoryId = item.id"
|
||||
:class="cn(
|
||||
'w-full p-4 rounded-xl text-left transition-all border group relative cursor-pointer',
|
||||
selectedHistoryId === item.id
|
||||
? 'bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-900/50 shadow-sm'
|
||||
: 'hover:bg-slate-100 dark:hover:bg-slate-800/50 border-transparent'
|
||||
)"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-slate-200 dark:bg-slate-800 text-slate-500 dark:text-slate-400 uppercase">{{ item.sourceLang.code }}</span>
|
||||
<ArrowRightLeft class="w-3 h-3 text-slate-300" />
|
||||
<span class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400 uppercase">{{ item.targetLang.code }}</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-slate-400 font-mono">{{ item.timestamp.split(' ')[1].substring(0, 5) }}</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-700 dark:text-slate-200 font-medium line-clamp-2 leading-relaxed mb-1">{{ item.sourceText }}</p>
|
||||
<p class="text-[11px] text-slate-400 dark:text-slate-500 line-clamp-1 italic">{{ item.targetText }}</p>
|
||||
|
||||
<button
|
||||
@click.stop="deleteHistoryItem(item.id)"
|
||||
class="absolute right-2 bottom-2 p-1.5 rounded-md text-red-400 opacity-0 group-hover:opacity-100 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"
|
||||
title="删除此记录"
|
||||
>
|
||||
<Trash2 class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History Detail (Detail) -->
|
||||
<div class="flex-1 flex flex-col min-w-0 bg-white dark:bg-slate-900">
|
||||
<template v-if="selectedHistoryItem">
|
||||
<div class="p-6 border-b dark:border-slate-800 flex items-center justify-between shrink-0 bg-slate-50/50 dark:bg-slate-800/20">
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-lg font-bold text-slate-800 dark:text-slate-100">翻译详情</h2>
|
||||
<span class="text-[11px] font-mono text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded">{{ selectedHistoryItem.timestamp }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-xs text-slate-500">
|
||||
<div class="flex items-center gap-1">
|
||||
<User class="w-3 h-3" />
|
||||
{{ SPEAKER_IDENTITY_OPTIONS.find(o => o.value === (selectedHistoryItem?.speakerIdentity))?.label || selectedHistoryItem?.speakerIdentity }}
|
||||
</div>
|
||||
<span>•</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<Type class="w-3 h-3" />
|
||||
{{ TONE_REGISTER_OPTIONS.find(o => o.value === (selectedHistoryItem?.toneRegister))?.label || selectedHistoryItem?.toneRegister }}
|
||||
</div>
|
||||
<span>•</span>
|
||||
<div class="font-mono text-[10px]">{{ selectedHistoryItem.modelName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
@click="deleteHistoryItem(selectedHistoryItem.id)"
|
||||
class="flex items-center gap-2 px-3 py-2 text-xs font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
删除记录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-8 space-y-10 custom-scrollbar">
|
||||
<!-- Source -->
|
||||
<section class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-1.5 h-4 bg-slate-300 dark:bg-slate-700 rounded-full"></div>
|
||||
<h3 class="text-xs font-black text-slate-400 uppercase tracking-widest">{{ selectedHistoryItem.sourceLang.displayName }} (原文)</h3>
|
||||
</div>
|
||||
<button
|
||||
@click="copyWithFeedback(selectedHistoryItem.sourceText, `history-source-${selectedHistoryItem.id}`)"
|
||||
class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg text-slate-400 transition-colors"
|
||||
>
|
||||
<Check v-if="activeCopyId === `history-source-${selectedHistoryItem.id}`" class="w-4 h-4 text-green-600" />
|
||||
<Copy v-else class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-slate-50 dark:bg-slate-800/30 p-6 rounded-2xl border border-slate-100 dark:border-slate-800 text-lg leading-relaxed text-slate-700 dark:text-slate-200 whitespace-pre-wrap">
|
||||
{{ selectedHistoryItem.sourceText }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Context if exists -->
|
||||
<section v-if="selectedHistoryItem.context" class="space-y-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<FileText class="w-4 h-4 text-slate-300" />
|
||||
<h3 class="text-xs font-black text-slate-400 uppercase tracking-widest">情景背景</h3>
|
||||
</div>
|
||||
<div class="bg-amber-50/30 dark:bg-amber-900/10 p-4 rounded-xl border border-amber-100/50 dark:border-amber-900/20 text-sm italic text-slate-500 dark:text-slate-400 leading-relaxed">
|
||||
{{ selectedHistoryItem.context }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Target -->
|
||||
<section class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-1.5 h-4 bg-blue-500 rounded-full"></div>
|
||||
<h3 class="text-xs font-black text-blue-500/60 uppercase tracking-widest">{{ selectedHistoryItem.targetLang.displayName }} (译文)</h3>
|
||||
</div>
|
||||
<button
|
||||
@click="copyWithFeedback(selectedHistoryItem.targetText, `history-target-${selectedHistoryItem.id}`)"
|
||||
class="p-2 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/50 rounded-lg text-blue-600 dark:text-blue-400 transition-colors"
|
||||
>
|
||||
<Check v-if="activeCopyId === `history-target-${selectedHistoryItem.id}`" class="w-4 h-4 text-green-600" />
|
||||
<Copy v-else class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-blue-50/20 dark:bg-blue-900/10 p-6 rounded-2xl border border-blue-100/50 dark:border-blue-900/20 text-xl leading-relaxed font-medium text-slate-800 dark:text-slate-100 whitespace-pre-wrap shadow-sm">
|
||||
{{ selectedHistoryItem.targetText }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="flex-1 flex flex-col items-center justify-center text-slate-300 dark:text-slate-800 p-10 text-center space-y-4">
|
||||
<div class="w-20 h-20 rounded-full bg-slate-50 dark:bg-slate-800/50 flex items-center justify-center">
|
||||
<Clock class="w-10 h-10 opacity-20" />
|
||||
</div>
|
||||
<p class="text-sm font-medium">请从左侧选择一条历史记录查看详情</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
117
src/components/LogsView.vue
Normal file
117
src/components/LogsView.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { FileText, Check, Copy } from 'lucide-vue-next';
|
||||
import { useSettingsStore } from '../stores/settings';
|
||||
import { cn } from '../lib/utils';
|
||||
import { useClipboard } from '../composables/useClipboard';
|
||||
|
||||
const settings = useSettingsStore();
|
||||
const { activeCopyId, copyWithFeedback } = useClipboard();
|
||||
|
||||
const selectedLogId = ref<string | null>(null);
|
||||
const selectedLogItem = computed(() =>
|
||||
settings.logs.find(l => l.id === selectedLogId.value) || null
|
||||
);
|
||||
|
||||
watch(() => settings.logs, (newVal) => {
|
||||
if (newVal.length > 0 && !selectedLogId.value) {
|
||||
selectedLogId.value = newVal[0].id;
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
const getLogSummary = (log: any) => {
|
||||
if (log.type === 'error') return String(log.content);
|
||||
if (typeof log.content === 'string') return log.content;
|
||||
if (log.content && log.content.model) return `Model: ${log.content.model}`;
|
||||
if (log.content && log.content.score) return `Score: ${log.content.score}`;
|
||||
return 'JSON Data';
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<!-- Logs View -->
|
||||
<div class="flex-1 flex overflow-hidden bg-slate-100/50 dark:bg-slate-950">
|
||||
<!-- Logs List (Master) -->
|
||||
<div class="w-80 md:w-96 border-r dark:border-slate-800 flex flex-col bg-white/60 dark:bg-slate-900/40">
|
||||
<div class="p-4 border-b dark:border-slate-800 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">系统日志</h2>
|
||||
<button
|
||||
@click="settings.logs = []"
|
||||
class="text-[11px] text-red-500 hover:underline font-medium flex items-center gap-1"
|
||||
>
|
||||
清空全部
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1">
|
||||
<div v-if="settings.logs.length === 0" class="py-20 text-center space-y-2">
|
||||
<FileText class="w-10 h-10 text-slate-200 dark:text-slate-800 mx-auto" />
|
||||
<p class="text-sm text-slate-400 italic">暂无日志记录</p>
|
||||
</div>
|
||||
<div
|
||||
v-for="log in settings.logs"
|
||||
:key="log.id"
|
||||
@click="selectedLogId = log.id"
|
||||
:class="cn(
|
||||
'w-full p-4 rounded-xl text-left transition-all border group relative cursor-pointer',
|
||||
selectedLogId === log.id
|
||||
? 'bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-900/50 shadow-sm'
|
||||
: 'hover:bg-slate-100 dark:hover:bg-slate-800/50 border-transparent'
|
||||
)"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span
|
||||
:class="cn(
|
||||
'px-2 py-0.5 rounded uppercase font-bold text-[10px]',
|
||||
log.type === 'request' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' :
|
||||
log.type === 'response' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' :
|
||||
'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
|
||||
)"
|
||||
>{{ log.type === 'request' ? '请求' : log.type === 'response' ? '响应' : '错误' }}</span>
|
||||
<span class="text-[10px] text-slate-400 font-mono">{{ log.timestamp.split(' ')[1] }}</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-500 dark:text-slate-400 line-clamp-2 font-mono leading-relaxed">{{ getLogSummary(log) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Log Detail (Detail) -->
|
||||
<div class="flex-1 flex flex-col min-w-0 bg-white dark:bg-slate-900">
|
||||
<template v-if="selectedLogItem">
|
||||
<div class="p-6 border-b dark:border-slate-800 flex items-center justify-between shrink-0 bg-slate-50/50 dark:bg-slate-800/20">
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-lg font-bold text-slate-800 dark:text-slate-100">日志详情</h2>
|
||||
<span class="text-[11px] font-mono text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded">{{ selectedLogItem.timestamp }}</span>
|
||||
<span
|
||||
:class="cn(
|
||||
'px-2 py-0.5 rounded uppercase font-bold text-[10px]',
|
||||
selectedLogItem.type === 'request' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' :
|
||||
selectedLogItem.type === 'response' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' :
|
||||
'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
|
||||
)"
|
||||
>{{ selectedLogItem.type === 'request' ? 'Request' : selectedLogItem.type === 'response' ? 'Response' : 'Error' }}</span>
|
||||
</div>
|
||||
<button
|
||||
@click="copyWithFeedback(typeof selectedLogItem.content === 'object' ? JSON.stringify(selectedLogItem.content, null, 2) : String(selectedLogItem.content), `log-${selectedLogItem.id}`)"
|
||||
class="flex items-center gap-2 px-3 py-2 text-xs font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800 rounded-lg transition-colors border border-slate-200 dark:border-slate-700"
|
||||
>
|
||||
<Check v-if="activeCopyId === `log-${selectedLogItem.id}`" class="w-4 h-4 text-green-600" />
|
||||
<Copy v-else class="w-4 h-4" />
|
||||
复制内容
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-auto p-6 bg-slate-50/30 dark:bg-slate-900/50 custom-scrollbar">
|
||||
<pre class="font-mono text-xs leading-relaxed text-slate-700 dark:text-slate-300 whitespace-pre-wrap break-all">{{ typeof selectedLogItem.content === 'object' ? JSON.stringify(selectedLogItem.content, null, 2) : selectedLogItem.content }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="flex-1 flex flex-col items-center justify-center text-slate-300 dark:text-slate-800 p-10 text-center space-y-4">
|
||||
<div class="w-20 h-20 rounded-full bg-slate-50 dark:bg-slate-800/50 flex items-center justify-center">
|
||||
<FileText class="w-10 h-10 opacity-20" />
|
||||
</div>
|
||||
<p class="text-sm font-medium">请从左侧选择一条日志查看详情</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
496
src/components/SettingsView.vue
Normal file
496
src/components/SettingsView.vue
Normal file
@@ -0,0 +1,496 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff, Pencil } from 'lucide-vue-next';
|
||||
import { useSettingsStore, DEFAULT_TEMPLATE, DEFAULT_EVALUATION_TEMPLATE, DEFAULT_REFINEMENT_TEMPLATE, type ApiProfile } from '../stores/settings';
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
const settings = useSettingsStore();
|
||||
const settingsCategory = ref<'api' | 'general' | 'prompts'>('api');
|
||||
const showApiKey = ref(false);
|
||||
|
||||
const newProfileName = ref('');
|
||||
const isSavingProfile = ref(false);
|
||||
|
||||
const saveCurrentAsProfile = () => {
|
||||
if (!newProfileName.value.trim()) return;
|
||||
const newProfile: ApiProfile = {
|
||||
id: crypto.randomUUID(),
|
||||
name: newProfileName.value.trim(),
|
||||
apiBaseUrl: settings.apiBaseUrl,
|
||||
apiKey: settings.apiKey,
|
||||
modelName: settings.modelName
|
||||
};
|
||||
settings.profiles.push(newProfile);
|
||||
newProfileName.value = '';
|
||||
isSavingProfile.value = false;
|
||||
};
|
||||
|
||||
const applyProfile = (p: ApiProfile) => {
|
||||
settings.apiBaseUrl = p.apiBaseUrl;
|
||||
settings.apiKey = p.apiKey;
|
||||
settings.modelName = p.modelName;
|
||||
};
|
||||
|
||||
const deleteProfile = (id: string) => {
|
||||
settings.profiles = settings.profiles.filter(p => p.id !== id);
|
||||
};
|
||||
|
||||
const editingProfileId = ref<string | null>(null);
|
||||
const editProfileForm = ref<ApiProfile | null>(null);
|
||||
const showEditApiKey = ref(false);
|
||||
|
||||
const startEditProfile = (profile: ApiProfile) => {
|
||||
editingProfileId.value = profile.id;
|
||||
editProfileForm.value = { ...profile };
|
||||
showEditApiKey.value = false;
|
||||
};
|
||||
|
||||
const cancelEditProfile = () => {
|
||||
editingProfileId.value = null;
|
||||
editProfileForm.value = null;
|
||||
};
|
||||
|
||||
const saveEditProfile = () => {
|
||||
if (!editProfileForm.value || !editingProfileId.value) return;
|
||||
if (!editProfileForm.value.name.trim()) return;
|
||||
|
||||
const index = settings.profiles.findIndex(p => p.id === editingProfileId.value);
|
||||
if (index !== -1) {
|
||||
settings.profiles[index] = { ...editProfileForm.value };
|
||||
}
|
||||
|
||||
editingProfileId.value = null;
|
||||
editProfileForm.value = null;
|
||||
};
|
||||
|
||||
const evaluationProfileDropdownOpen = ref(false);
|
||||
const toggleDropdown = (type: string) => {
|
||||
if (type === 'evaluationProfile') evaluationProfileDropdownOpen.value = !evaluationProfileDropdownOpen.value;
|
||||
};
|
||||
|
||||
const currentEvaluationProfileLabel = computed(() => {
|
||||
if (!settings.evaluationProfileId) return '使用主翻译配置（默认）';
|
||||
const profile = settings.profiles.find(p => p.id === settings.evaluationProfileId);
|
||||
return profile ? `${profile.name} — ${profile.modelName}` : '使用主翻译配置（默认）';
|
||||
});
|
||||
|
||||
const handleGlobalClick = (e: MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.closest('.lang-dropdown')) {
|
||||
evaluationProfileDropdownOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => window.addEventListener('click', handleGlobalClick));
|
||||
onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
|
||||
</script>
|
||||
<template>
|
||||
<!-- Settings View -->
|
||||
<div class="flex-1 flex overflow-hidden bg-slate-100/50 dark:bg-slate-950">
|
||||
<!-- Settings Sidebar (Master) -->
|
||||
<div class="w-64 border-r dark:border-slate-800 flex flex-col bg-white/60 dark:bg-slate-900/40">
|
||||
<div class="p-4 border-b dark:border-slate-800 shrink-0">
|
||||
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">系统设置</h2>
|
||||
</div>
|
||||
<nav class="flex-1 overflow-y-auto p-3 space-y-1">
|
||||
<button
|
||||
@click="settingsCategory = 'api'"
|
||||
:class="cn(
|
||||
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
|
||||
settingsCategory === 'api' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800/50'
|
||||
)"
|
||||
>
|
||||
<div :class="cn('p-1.5 rounded-md', settingsCategory === 'api' ? 'bg-blue-100 dark:bg-blue-900/50' : 'bg-slate-100 dark:bg-slate-800')">
|
||||
<Play class="w-4 h-4" />
|
||||
</div>
|
||||
API 与模型
|
||||
</button>
|
||||
<button
|
||||
@click="settingsCategory = 'general'"
|
||||
:class="cn(
|
||||
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
|
||||
settingsCategory === 'general' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800/50'
|
||||
)"
|
||||
>
|
||||
<div :class="cn('p-1.5 rounded-md', settingsCategory === 'general' ? 'bg-blue-100 dark:bg-blue-900/50' : 'bg-slate-100 dark:bg-slate-800')">
|
||||
<Settings class="w-4 h-4" />
|
||||
</div>
|
||||
常规设置
|
||||
</button>
|
||||
<button
|
||||
@click="settingsCategory = 'prompts'"
|
||||
:class="cn(
|
||||
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
|
||||
settingsCategory === 'prompts' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800/50'
|
||||
)"
|
||||
>
|
||||
<div :class="cn('p-1.5 rounded-md', settingsCategory === 'prompts' ? 'bg-blue-100 dark:bg-blue-900/50' : 'bg-slate-100 dark:bg-slate-800')">
|
||||
<Type class="w-4 h-4" />
|
||||
</div>
|
||||
提示词工程
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Settings Content (Detail) -->
|
||||
<div class="flex-1 overflow-y-auto p-6 md:p-10 custom-scrollbar bg-slate-50/30 dark:bg-transparent">
|
||||
<div class="max-w-3xl mx-auto space-y-8 pb-20">
|
||||
|
||||
<!-- API & Models -->
|
||||
<template v-if="settingsCategory === 'api'">
|
||||
<div class="mb-6 border-b dark:border-slate-800 pb-4">
|
||||
<h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">API 与模型</h1>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">配置与大语言模型通信的接口地址和凭证。</p>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">当前接口配置</h2>
|
||||
<div v-if="!isSavingProfile" class="flex items-center gap-2">
|
||||
<button
|
||||
@click="isSavingProfile = true"
|
||||
class="text-xs flex items-center gap-1.5 text-blue-600 dark:text-blue-400 hover:underline px-2 py-1 rounded"
|
||||
>
|
||||
<Save class="w-3.5 h-3.5" />
|
||||
保存为预设
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="flex items-center gap-2 bg-white dark:bg-slate-800 p-1 rounded-lg border dark:border-slate-700 shadow-sm animate-in fade-in zoom-in duration-200">
|
||||
<input
|
||||
v-model="newProfileName"
|
||||
type="text"
|
||||
placeholder="输入预设名称..."
|
||||
class="text-xs px-2 py-1 bg-transparent outline-none w-32 dark:text-slate-200"
|
||||
@keyup.enter="saveCurrentAsProfile"
|
||||
/>
|
||||
<button
|
||||
@click="saveCurrentAsProfile"
|
||||
:disabled="!newProfileName.trim()"
|
||||
class="p-1 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/30 rounded disabled:opacity-50"
|
||||
>
|
||||
<Check class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
@click="isSavingProfile = false; newProfileName = ''"
|
||||
class="p-1 text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 rounded"
|
||||
>
|
||||
<Plus class="w-3.5 h-3.5 rotate-45" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 p-6 space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label>
|
||||
<input
|
||||
v-model="settings.apiBaseUrl"
|
||||
type="text"
|
||||
class="w-full px-4 py-2.5 border dark:border-slate-700 rounded-xl bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
|
||||
placeholder="https://api.openai.com/v1"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Key</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="settings.apiKey"
|
||||
:type="showApiKey ? 'text' : 'password'"
|
||||
class="w-full pl-4 pr-12 py-2.5 border dark:border-slate-700 rounded-xl bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
|
||||
placeholder="sk-..."
|
||||
/>
|
||||
<button
|
||||
@click="showApiKey = !showApiKey"
|
||||
type="button"
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors focus:outline-none"
|
||||
>
|
||||
<Eye v-if="showApiKey" class="w-5 h-5" />
|
||||
<EyeOff v-else class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">Model Name</label>
|
||||
<input
|
||||
v-model="settings.modelName"
|
||||
type="text"
|
||||
class="w-full px-4 py-2.5 border dark:border-slate-700 rounded-xl bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
|
||||
placeholder="gpt-3.5-turbo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">API 配置预设库</h2>
|
||||
<div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-2 space-y-1">
|
||||
<div v-if="settings.profiles.length === 0" class="p-8 text-center text-sm text-slate-400 dark:text-slate-600 italic">
|
||||
暂无预设配置。修改上方配置并点击“保存为预设”。
|
||||
</div>
|
||||
<div
|
||||
v-for="profile in settings.profiles"
|
||||
:key="profile.id"
|
||||
>
|
||||
<!-- 编辑模式 -->
|
||||
<div v-if="editingProfileId === profile.id && editProfileForm" class="p-4 bg-white dark:bg-slate-800/80 rounded-xl border border-blue-200 dark:border-blue-800/50 shadow-sm space-y-3 my-1">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">预设名称</label>
|
||||
<input v-model="editProfileForm.name" type="text" class="w-full px-3 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all text-sm text-slate-900 dark:text-slate-100" placeholder="预设名称" />
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">API Base URL</label>
|
||||
<input v-model="editProfileForm.apiBaseUrl" type="text" class="w-full px-3 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100" />
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">API Key</label>
|
||||
<div class="relative">
|
||||
<input v-model="editProfileForm.apiKey" :type="showEditApiKey ? 'text' : 'password'" class="w-full pl-3 pr-10 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100" />
|
||||
<button @click="showEditApiKey = !showEditApiKey" type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors focus:outline-none p-1">
|
||||
<Eye v-if="showEditApiKey" class="w-4 h-4" />
|
||||
<EyeOff v-else class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">Model Name</label>
|
||||
<input v-model="editProfileForm.modelName" type="text" class="w-full px-3 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100" />
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-2 pt-2">
|
||||
<button @click="cancelEditProfile" class="px-4 py-2 text-xs font-medium text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 rounded-lg transition-colors">取消</button>
|
||||
<button @click="saveEditProfile" :disabled="!editProfileForm.name.trim()" class="px-4 py-2 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors">保存修改</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 正常显示模式 -->
|
||||
<div v-else class="p-3 flex items-center justify-between group hover:bg-white dark:hover:bg-slate-800 transition-colors rounded-lg border border-transparent hover:border-slate-200 dark:hover:border-slate-700">
|
||||
<div class="flex flex-col gap-1 min-w-0">
|
||||
<span class="text-sm font-bold text-slate-700 dark:text-slate-200 truncate">{{ profile.name }}</span>
|
||||
<div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400 font-mono bg-slate-100 dark:bg-slate-950 px-2 py-0.5 rounded w-fit">
|
||||
<span class="truncate max-w-32">{{ profile.modelName }}</span>
|
||||
<span class="opacity-30">•</span>
|
||||
<span class="truncate max-w-48">{{ profile.apiBaseUrl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
@click="applyProfile(profile)"
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/50 rounded-lg transition-colors text-xs font-medium shadow-sm"
|
||||
>
|
||||
<Play class="w-3 h-3 fill-current" />
|
||||
应用
|
||||
</button>
|
||||
<button
|
||||
@click="startEditProfile(profile)"
|
||||
class="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded-lg transition-colors"
|
||||
title="编辑"
|
||||
>
|
||||
<Pencil class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
@click="deleteProfile(profile.id)"
|
||||
class="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> </div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- General Settings -->
|
||||
<template v-if="settingsCategory === 'general'">
|
||||
<div class="mb-6 border-b dark:border-slate-800 pb-4">
|
||||
<h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">常规设置</h1>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">调整软件的翻译行为和质量审计规则。</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 p-6 space-y-6">
|
||||
<!-- Streaming -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="space-y-0.5">
|
||||
<label class="text-sm font-semibold text-slate-800 dark:text-slate-200">流式输出</label>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">在模型生成文本时逐字渲染，提升响应速度体验。</p>
|
||||
</div>
|
||||
<button
|
||||
@click="settings.enableStreaming = !settings.enableStreaming"
|
||||
:class="cn(
|
||||
'w-12 h-6 rounded-full transition-colors relative focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shrink-0',
|
||||
settings.enableStreaming ? '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 shadow-sm',
|
||||
settings.enableStreaming ? 'translate-x-6' : 'translate-x-0'
|
||||
)"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="h-px bg-slate-100 dark:bg-slate-800"></div>
|
||||
|
||||
<!-- Auto Evaluation -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="space-y-0.5">
|
||||
<label class="text-sm font-semibold text-slate-800 dark:text-slate-200">自动质量审计</label>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">翻译完成后，自动启动一个次级请求来评估翻译的准确度和语气，并提供改进建议。</p>
|
||||
</div>
|
||||
<button
|
||||
@click="settings.enableEvaluation = !settings.enableEvaluation"
|
||||
:class="cn(
|
||||
'w-12 h-6 rounded-full transition-colors relative focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shrink-0',
|
||||
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 shadow-sm',
|
||||
settings.enableEvaluation ? 'translate-x-6' : 'translate-x-0'
|
||||
)"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="h-px bg-slate-100 dark:bg-slate-800"></div>
|
||||
|
||||
<!-- Audit Profile Selector -->
|
||||
<div class="space-y-3">
|
||||
<div class="space-y-0.5">
|
||||
<label class="text-sm font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-1.5">
|
||||
审计模型
|
||||
</label>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">强烈建议选择更强大的模型以获得精准反馈。</p>
|
||||
</div>
|
||||
|
||||
<!-- Custom Evaluation Profile Dropdown -->
|
||||
<div class="relative lang-dropdown w-full max-w-md">
|
||||
<button
|
||||
@click.stop="toggleDropdown('evaluationProfile')"
|
||||
class="flex items-center justify-between w-full px-4 py-2 border dark:border-slate-700 rounded-xl bg-slate-50 dark:bg-slate-950 hover:bg-slate-100 dark:hover:bg-slate-800 transition-all text-sm text-slate-700 dark:text-slate-200 group shadow-sm"
|
||||
>
|
||||
<span class="truncate font-medium">{{ 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-3 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-600 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-700/50'
|
||||
)"
|
||||
>
|
||||
<span class="font-semibold">使用当前主翻译配置（不推荐）</span>
|
||||
<Check v-if="settings.evaluationProfileId === null" class="w-4 h-4" />
|
||||
</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-3 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 gap-0.5 min-w-0">
|
||||
<span class="truncate font-semibold">{{ profile.name }}</span>
|
||||
<span class="text-[10px] opacity-60 font-mono">{{ profile.modelName }}</span>
|
||||
</div>
|
||||
<Check v-if="settings.evaluationProfileId === profile.id" class="w-4 h-4 shrink-0" />
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Prompt Engineering -->
|
||||
<template v-if="settingsCategory === 'prompts'">
|
||||
<div class="mb-6 border-b dark:border-slate-800 pb-4">
|
||||
<h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">提示词工程</h1>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">深度定制 AI 的系统指令，修改变量占位符将改变其核心逻辑。</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- Translation Prompt -->
|
||||
<div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 overflow-hidden flex flex-col">
|
||||
<div class="px-5 py-3 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<h3 class="text-sm font-bold text-slate-700 dark:text-slate-200">主翻译系统指令</h3>
|
||||
</div>
|
||||
<button @click="settings.systemPromptTemplate = DEFAULT_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline font-medium">恢复默认</button>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="settings.systemPromptTemplate"
|
||||
rows="8"
|
||||
class="w-full p-5 bg-transparent outline-none font-mono text-xs leading-relaxed text-slate-800 dark:text-slate-300 resize-y"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
<div class="px-5 py-3 bg-slate-50 dark:bg-slate-950 border-t dark:border-slate-800">
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span v-for="tag in ['{SOURCE_CODE}', '{TARGET_CODE}', '{SOURCE_LANG}', '{TARGET_LANG}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}']" :key="tag" class="px-2 py-0.5 bg-white dark:bg-slate-800 text-[10px] font-mono rounded-md border dark:border-slate-700 text-slate-500 shadow-sm">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Evaluation Prompt -->
|
||||
<div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 overflow-hidden flex flex-col">
|
||||
<div class="px-5 py-3 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-amber-500"></div>
|
||||
<h3 class="text-sm font-bold text-slate-700 dark:text-slate-200">质量审计指令</h3>
|
||||
</div>
|
||||
<button @click="settings.evaluationPromptTemplate = DEFAULT_EVALUATION_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline font-medium">恢复默认</button>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="settings.evaluationPromptTemplate"
|
||||
rows="12"
|
||||
class="w-full p-5 bg-transparent outline-none font-mono text-xs leading-relaxed text-slate-800 dark:text-slate-300 resize-y"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
<div class="px-5 py-3 bg-slate-50 dark:bg-slate-950 border-t dark:border-slate-800">
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span v-for="tag in ['{SOURCE_LANG}', '{TARGET_LANG}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}', '{CONTEXT}']" :key="tag" class="px-2 py-0.5 bg-white dark:bg-slate-800 text-[10px] font-mono rounded-md border dark:border-slate-700 text-slate-500 shadow-sm">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Refinement Prompt -->
|
||||
<div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 overflow-hidden flex flex-col">
|
||||
<div class="px-5 py-3 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
<h3 class="text-sm font-bold text-slate-700 dark:text-slate-200">定向润色指令</h3>
|
||||
</div>
|
||||
<button @click="settings.refinementPromptTemplate = DEFAULT_REFINEMENT_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline font-medium">恢复默认</button>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="settings.refinementPromptTemplate"
|
||||
rows="8"
|
||||
class="w-full p-5 bg-transparent outline-none font-mono text-xs leading-relaxed text-slate-800 dark:text-slate-300 resize-y"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
<div class="px-5 py-3 bg-slate-50 dark:bg-slate-950 border-t dark:border-slate-800">
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span v-for="tag in ['{SOURCE_LANG}', '{TARGET_LANG}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}', '{CONTEXT}']" :key="tag" class="px-2 py-0.5 bg-white dark:bg-slate-800 text-[10px] font-mono rounded-md border dark:border-slate-700 text-slate-500 shadow-sm">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
631
src/components/TranslationView.vue
Normal file
631
src/components/TranslationView.vue
Normal file
@@ -0,0 +1,631 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { ChevronDown, Check, ArrowRightLeft, Trash2, FileText, Plus, Loader2, Send, User, Type, Copy, Save } from 'lucide-vue-next';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { listen } from '@tauri-apps/api/event';
|
||||
import { useSettingsStore, LANGUAGES, SPEAKER_IDENTITY_OPTIONS, TONE_REGISTER_OPTIONS } from '../stores/settings';
|
||||
import { cn } from '../lib/utils';
|
||||
import { useClipboard } from '../composables/useClipboard';
|
||||
|
||||
const settings = useSettingsStore();
|
||||
const { activeCopyId, copyWithFeedback } = useClipboard();
|
||||
|
||||
const sourceDropdownOpen = ref(false);
|
||||
const targetDropdownOpen = ref(false);
|
||||
const speakerDropdownOpen = ref(false);
|
||||
const toneDropdownOpen = ref(false);
|
||||
|
||||
const closeAllDropdowns = () => {
|
||||
sourceDropdownOpen.value = false;
|
||||
targetDropdownOpen.value = false;
|
||||
speakerDropdownOpen.value = false;
|
||||
toneDropdownOpen.value = false;
|
||||
};
|
||||
|
||||
const toggleDropdown = (type: 'source' | 'target' | 'speaker' | 'tone') => {
|
||||
const states = {
|
||||
source: sourceDropdownOpen,
|
||||
target: targetDropdownOpen,
|
||||
speaker: speakerDropdownOpen,
|
||||
tone: toneDropdownOpen
|
||||
};
|
||||
const targetState = states[type];
|
||||
const currentValue = targetState.value;
|
||||
closeAllDropdowns();
|
||||
targetState.value = !currentValue;
|
||||
};
|
||||
|
||||
const handleGlobalClick = (e: MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.closest('.lang-dropdown')) {
|
||||
closeAllDropdowns();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => window.addEventListener('click', handleGlobalClick));
|
||||
onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
|
||||
|
||||
const sourceText = ref('');
|
||||
const context = ref('');
|
||||
const targetText = ref('');
|
||||
const isTranslating = ref(false);
|
||||
const currentHistoryId = ref<string | null>(null);
|
||||
|
||||
interface Suggestion { id: number; text: string; importance: number; }
|
||||
interface EvaluationResult { score: number; analysis: string; suggestions?: Suggestion[]; }
|
||||
|
||||
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 = [];
|
||||
const index = selectedSuggestionIds.value.indexOf(id);
|
||||
if (index > -1) selectedSuggestionIds.value.splice(index, 1);
|
||||
else selectedSuggestionIds.value.push(id);
|
||||
};
|
||||
|
||||
let unlisten: (() => void) | null = null;
|
||||
onMounted(async () => {
|
||||
unlisten = await listen<string>('translation-chunk', (event) => {
|
||||
if (isTranslating.value || isRefining.value) {
|
||||
targetText.value += event.payload;
|
||||
}
|
||||
});
|
||||
});
|
||||
onUnmounted(() => { if (unlisten) unlisten(); });
|
||||
|
||||
const sourceLangCode = computed({
|
||||
get: () => settings.sourceLang.code,
|
||||
set: (code) => { const lang = LANGUAGES.find(l => l.code === code); if (lang) settings.sourceLang = lang; }
|
||||
});
|
||||
|
||||
const targetLangCode = computed({
|
||||
get: () => settings.targetLang.code,
|
||||
set: (code) => { const lang = LANGUAGES.find(l => l.code === code); if (lang) settings.targetLang = lang; }
|
||||
});
|
||||
|
||||
const sourceLang = computed(() => settings.sourceLang);
|
||||
const targetLang = computed(() => settings.targetLang);
|
||||
|
||||
const currentSpeakerLabel = computed(() => SPEAKER_IDENTITY_OPTIONS.find(opt => opt.value === settings.speakerIdentity)?.label || '男性');
|
||||
const currentToneLabel = computed(() => TONE_REGISTER_OPTIONS.find(opt => opt.value === settings.toneRegister)?.label || '正式专业');
|
||||
|
||||
const swapLanguages = () => {
|
||||
const temp = { ...settings.sourceLang };
|
||||
settings.sourceLang = { ...settings.targetLang };
|
||||
settings.targetLang = temp;
|
||||
};
|
||||
|
||||
const clearSource = () => {
|
||||
sourceText.value = '';
|
||||
targetText.value = '';
|
||||
evaluationResult.value = null;
|
||||
};
|
||||
|
||||
const evaluateTranslation = async () => {
|
||||
if (!targetText.value) return;
|
||||
isEvaluating.value = true;
|
||||
evaluationResult.value = null;
|
||||
selectedSuggestionIds.value = [];
|
||||
appliedSuggestionIds.value = [];
|
||||
|
||||
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 evaluationSystemPrompt = 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');
|
||||
|
||||
const evaluationUserPrompt = `[Source Text]\n${sourceText.value}\n\n[Translated Text]\n${targetText.value}`;
|
||||
|
||||
const requestBody = {
|
||||
model: modelName,
|
||||
messages: [ { role: "system", content: evaluationSystemPrompt }, { role: "user", content: evaluationUserPrompt } ],
|
||||
stream: false
|
||||
};
|
||||
|
||||
settings.addLog('request', { type: 'evaluation', ...requestBody });
|
||||
|
||||
try {
|
||||
const response = await invoke<string>('translate', { apiAddress: apiBaseUrl, apiKey: apiKey, payload: requestBody });
|
||||
try {
|
||||
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 refineTranslation = async () => {
|
||||
if (!targetText.value || isRefining.value) return;
|
||||
const selectedTexts = evaluationResult.value?.suggestions?.filter(s => selectedSuggestionIds.value?.includes(s.id)).map(s => s.text);
|
||||
if (!selectedTexts || selectedTexts.length === 0) return;
|
||||
|
||||
isRefining.value = true;
|
||||
const originalTranslation = targetText.value;
|
||||
targetText.value = '';
|
||||
|
||||
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 refinementSystemPrompt = settings.refinementPromptTemplate
|
||||
.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');
|
||||
|
||||
const formattedSuggestions = selectedTexts.map((text, i) => `${i + 1}. ${text}`).join('\n');
|
||||
const refinementUserPrompt = `[Source Text]\n${sourceText.value}\n\n[Current Translation]\n${originalTranslation}\n\n[User Feedback]\n${formattedSuggestions}`;
|
||||
|
||||
const requestBody = {
|
||||
model: modelName,
|
||||
messages: [ { role: "system", content: refinementSystemPrompt }, { role: "user", content: refinementUserPrompt } ],
|
||||
stream: settings.enableStreaming
|
||||
};
|
||||
|
||||
settings.addLog('request', { type: 'refinement', ...requestBody });
|
||||
|
||||
try {
|
||||
const response = await invoke<string>('translate', { apiAddress: apiBaseUrl, apiKey: apiKey, payload: requestBody });
|
||||
if (!settings.enableStreaming) targetText.value = response;
|
||||
|
||||
if (evaluationResult.value?.suggestions) {
|
||||
appliedSuggestionIds.value.push(...selectedSuggestionIds.value);
|
||||
selectedSuggestionIds.value = [];
|
||||
}
|
||||
settings.addLog('response', 'Refinement completed');
|
||||
|
||||
if (currentHistoryId.value) {
|
||||
settings.updateHistoryItem(currentHistoryId.value, {
|
||||
targetText: targetText.value
|
||||
});
|
||||
}
|
||||
} catch (err: any) {
|
||||
const errorMsg = String(err);
|
||||
settings.addLog('error', errorMsg);
|
||||
targetText.value = `Error: ${errorMsg}`;
|
||||
} finally {
|
||||
isRefining.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const translate = async () => {
|
||||
if (!sourceText.value.trim() || isTranslating.value) return;
|
||||
|
||||
isTranslating.value = true;
|
||||
currentHistoryId.value = null;
|
||||
targetText.value = '';
|
||||
evaluationResult.value = null;
|
||||
|
||||
const systemMessage = settings.systemPromptTemplate
|
||||
.replace(/{SOURCE_LANG}/g, sourceLang.value.englishName)
|
||||
.replace(/{SOURCE_CODE}/g, sourceLang.value.code)
|
||||
.replace(/{TARGET_LANG}/g, targetLang.value.englishName)
|
||||
.replace(/{TARGET_CODE}/g, targetLang.value.code)
|
||||
.replace(/{SPEAKER_IDENTITY}/g, settings.speakerIdentity)
|
||||
.replace(/{TONE_REGISTER}/g, settings.toneRegister);
|
||||
|
||||
const userMessage = context.value
|
||||
? `[Context]\n${context.value}\n\n[Text to Translate]\n${sourceText.value}`
|
||||
: `[Text to Translate]\n${sourceText.value}`;
|
||||
|
||||
const requestBody = {
|
||||
model: settings.modelName,
|
||||
messages: [ { role: "system", content: systemMessage }, { role: "user", content: userMessage } ],
|
||||
stream: settings.enableStreaming
|
||||
};
|
||||
|
||||
settings.addLog('request', requestBody);
|
||||
|
||||
try {
|
||||
const response = await invoke<string>('translate', { apiAddress: settings.apiBaseUrl, apiKey: settings.apiKey, payload: requestBody });
|
||||
if (!settings.enableStreaming) targetText.value = response;
|
||||
settings.addLog('response', 'Translation completed');
|
||||
|
||||
currentHistoryId.value = settings.addHistory({
|
||||
sourceLang: { ...sourceLang.value },
|
||||
targetLang: { ...targetLang.value },
|
||||
sourceText: sourceText.value,
|
||||
targetText: settings.enableStreaming ? targetText.value : response,
|
||||
context: context.value,
|
||||
speakerIdentity: settings.speakerIdentity,
|
||||
toneRegister: settings.toneRegister,
|
||||
modelName: settings.modelName
|
||||
});
|
||||
} catch (err: any) {
|
||||
const errorMsg = String(err);
|
||||
settings.addLog('error', errorMsg);
|
||||
targetText.value = `Error: ${errorMsg}`;
|
||||
} finally {
|
||||
isTranslating.value = false;
|
||||
}
|
||||
|
||||
if (settings.enableEvaluation) await evaluateTranslation();
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<!-- Translation View -->
|
||||
<div class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white/50 dark:bg-slate-900 overflow-hidden h-full">
|
||||
<!-- Source Pane -->
|
||||
<div class="flex-1 flex flex-col min-h-0 relative h-full">
|
||||
<div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
|
||||
<!-- Custom Source Dropdown -->
|
||||
<div class="relative lang-dropdown min-w-30">
|
||||
<button
|
||||
@click.stop="toggleDropdown('source')"
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-semibold text-slate-700 dark:text-slate-200 w-full justify-between group"
|
||||
>
|
||||
<span class="truncate">{{ sourceLang.displayName }}</span>
|
||||
<ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', sourceDropdownOpen && 'rotate-180')" />
|
||||
</button>
|
||||
|
||||
<!-- Dropdown Menu -->
|
||||
<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="sourceDropdownOpen"
|
||||
class="absolute left-0 mt-2 w-56 max-h-80 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
|
||||
v-for="lang in LANGUAGES"
|
||||
:key="lang.code"
|
||||
@click="sourceLangCode = lang.code; sourceDropdownOpen = false"
|
||||
:class="cn(
|
||||
'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
|
||||
sourceLangCode === lang.code ? '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'
|
||||
)"
|
||||
>
|
||||
{{ lang.displayName }}
|
||||
<Check v-if="sourceLangCode === lang.code" class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<button @click="swapLanguages" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors" title="交换语言">
|
||||
<ArrowRightLeft class="w-4 h-4 text-slate-500 dark:text-slate-400" />
|
||||
</button>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<button @click="clearSource" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors" title="清空内容">
|
||||
<Trash2 class="w-4 h-4 text-slate-500 dark:text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="sourceText"
|
||||
placeholder="请输入待翻译内容..."
|
||||
class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent min-h-0"
|
||||
></textarea>
|
||||
|
||||
<!-- Context Input Area -->
|
||||
<div class="px-6 py-3 bg-slate-200/20 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
|
||||
<div class="flex items-center justify-between mb-1.5 h-5">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<FileText class="w-4 h-4 text-slate-400" />
|
||||
<span class="text-[12px] font-bold text-slate-400 uppercase tracking-widest">情景背景 (可选)</span>
|
||||
</div>
|
||||
<button
|
||||
v-if="context"
|
||||
@click="context = ''"
|
||||
class="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 rounded opacity-0 group-hover/context:opacity-100 transition-opacity"
|
||||
title="清空背景"
|
||||
>
|
||||
<Plus class="w-3 h-3 rotate-45 text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="context"
|
||||
placeholder="在此输入背景信息，有助于提升翻译准确度..."
|
||||
class="w-full bg-transparent border-none outline-none text-sm text-slate-500 dark:text-slate-400 resize-none h-14 leading-normal placeholder:italic placeholder:text-slate-300 dark:placeholder:text-slate-600"
|
||||
></textarea>
|
||||
</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="translate"
|
||||
:disabled="isTranslating || isEvaluating || isRefining || !sourceText.trim()"
|
||||
class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
|
||||
>
|
||||
<Loader2 v-if="isTranslating" class="w-4 h-4 animate-spin" />
|
||||
<Send v-else class="w-4 h-4" />
|
||||
{{ isTranslating ? '正在翻译...' : '翻译' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Target Pane -->
|
||||
<div class="flex-1 flex flex-col min-h-0 bg-slate-100/20 dark:bg-slate-900/50 relative h-full">
|
||||
<div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
|
||||
<!-- Custom Target Dropdown -->
|
||||
<div class="relative lang-dropdown min-w-30">
|
||||
<button
|
||||
@click.stop="toggleDropdown('target')"
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-semibold text-slate-700 dark:text-slate-200 w-full justify-between"
|
||||
>
|
||||
<span class="truncate">{{ targetLang.displayName }}</span>
|
||||
<ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', targetDropdownOpen && 'rotate-180')" />
|
||||
</button>
|
||||
|
||||
<!-- Dropdown Menu -->
|
||||
<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="targetDropdownOpen"
|
||||
class="absolute left-0 mt-2 w-56 max-h-80 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
|
||||
v-for="lang in LANGUAGES"
|
||||
:key="lang.code"
|
||||
@click="targetLangCode = lang.code; targetDropdownOpen = false"
|
||||
:class="cn(
|
||||
'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
|
||||
targetLangCode === lang.code ? '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'
|
||||
)"
|
||||
>
|
||||
{{ lang.displayName }}
|
||||
<Check v-if="targetLangCode === lang.code" class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- Speaker Identity Dropdown -->
|
||||
<div class="relative lang-dropdown min-w-24">
|
||||
<button
|
||||
@click.stop="toggleDropdown('speaker')"
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-medium text-slate-600 dark:text-slate-300 w-full justify-between group"
|
||||
title="说话人身份"
|
||||
>
|
||||
<div class="flex items-center gap-1.5 truncate">
|
||||
<User class="w-3.5 h-3.5 text-slate-400" />
|
||||
<span class="truncate">{{ currentSpeakerLabel }}</span>
|
||||
</div>
|
||||
<ChevronDown :class="cn('w-3.5 h-3.5 text-slate-400 transition-transform duration-200 shrink-0', speakerDropdownOpen && '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="speakerDropdownOpen"
|
||||
class="absolute left-0 mt-2 w-40 max-h-80 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
|
||||
v-for="opt in SPEAKER_IDENTITY_OPTIONS"
|
||||
:key="opt.value"
|
||||
@click="settings.speakerIdentity = opt.value; speakerDropdownOpen = false"
|
||||
:class="cn(
|
||||
'px-4 py-2 text-sm text-left transition-colors flex items-center justify-between',
|
||||
settings.speakerIdentity === opt.value ? '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'
|
||||
)"
|
||||
>
|
||||
{{ opt.label }}
|
||||
<Check v-if="settings.speakerIdentity === opt.value" class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- Tone & Register Dropdown -->
|
||||
<div class="relative lang-dropdown min-w-32">
|
||||
<button
|
||||
@click.stop="toggleDropdown('tone')"
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-medium text-slate-600 dark:text-slate-300 w-full justify-between group"
|
||||
title="语气风格"
|
||||
>
|
||||
<div class="flex items-center gap-1.5 truncate">
|
||||
<Type class="w-3.5 h-3.5 text-slate-400" />
|
||||
<span class="truncate">{{ currentToneLabel }}</span>
|
||||
</div>
|
||||
<ChevronDown :class="cn('w-3.5 h-3.5 text-slate-400 transition-transform duration-200 shrink-0', toneDropdownOpen && '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="toneDropdownOpen"
|
||||
class="absolute left-0 mt-2 w-56 max-h-80 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
|
||||
v-for="opt in TONE_REGISTER_OPTIONS"
|
||||
:key="opt.value"
|
||||
@click="settings.toneRegister = opt.value; toneDropdownOpen = false"
|
||||
:class="cn(
|
||||
'px-4 py-2.5 text-sm text-left transition-colors flex flex-col gap-0.5',
|
||||
settings.toneRegister === opt.value ? '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 items-center justify-between w-full">
|
||||
{{ opt.label }}
|
||||
<Check v-if="settings.toneRegister === opt.value" class="w-3.5 h-3.5" />
|
||||
</div>
|
||||
<span class="text-[10px] opacity-60 font-normal truncate">{{ opt.description }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<button @click="copyWithFeedback(targetText, 'main-target')" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors relative" title="复制结果">
|
||||
<Check v-if="activeCopyId === 'main-target'" class="w-4 h-4 text-green-600" />
|
||||
<Copy v-else class="w-4 h-4 text-slate-500 dark:text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-6 overflow-y-auto text-lg leading-relaxed whitespace-pre-wrap min-h-0">
|
||||
<template v-if="targetText">
|
||||
{{ targetText }}
|
||||
</template>
|
||||
<span v-else class="text-slate-300 dark:text-slate-600 italic">翻译结果将在此显示...</span>
|
||||
</div>
|
||||
|
||||
<!-- Evaluation Results -->
|
||||
<div v-if="isEvaluating || evaluationResult" class="px-6 py-4 bg-slate-200/20 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-500 overflow-y-auto max-h-80 shrink-0">
|
||||
<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.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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 border-t dark:border-slate-800 bg-slate-50/30 dark:bg-transparent flex justify-end gap-2 shrink-0">
|
||||
<button
|
||||
@click="refineTranslation"
|
||||
v-if="evaluationResult && evaluationResult.suggestions && evaluationResult.suggestions.length > 0"
|
||||
:disabled="isRefining || isEvaluating || isTranslating || selectedSuggestionIds.length === 0"
|
||||
class="bg-blue-600 enabled:hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
|
||||
>
|
||||
<Loader2 v-if="isRefining" class="w-4 h-4 animate-spin" />
|
||||
<Save v-else class="w-4 h-4" />
|
||||
{{ isRefining ? '正在润色...' : '润色' }}
|
||||
</button>
|
||||
<button
|
||||
@click="evaluateTranslation"
|
||||
:disabled="isEvaluating || isTranslating || isRefining || !targetText.trim()"
|
||||
class="bg-blue-600 enabled:hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
|
||||
>
|
||||
<Loader2 v-if="isEvaluating" class="w-4 h-4 animate-spin" />
|
||||
<Check v-else class="w-4 h-4" />
|
||||
{{ isEvaluating ? '正在审计...' : '审计' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
21
src/composables/useClipboard.ts
Normal file
21
src/composables/useClipboard.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
const activeCopyId = ref<string | null>(null);
|
||||
|
||||
export function useClipboard() {
|
||||
const copyWithFeedback = async (text: string, id: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
activeCopyId.value = id;
|
||||
setTimeout(() => {
|
||||
if (activeCopyId.value === id) {
|
||||
activeCopyId.value = null;
|
||||
}
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy text: ', err);
|
||||
}
|
||||
};
|
||||
|
||||
return { activeCopyId, copyWithFeedback };
|
||||
}
|
||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ref } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { useLocalStorage } from '@vueuse/core';
|
||||
|
||||
@@ -33,6 +33,7 @@ export const SPEAKER_IDENTITY_OPTIONS = [
|
||||
];
|
||||
|
||||
export const TONE_REGISTER_OPTIONS = [
|
||||
{ label: '自动识别', value: 'Auto-detect', description: '分析并保持原文的语气、情绪和礼貌程度' },
|
||||
{ label: '正式专业', value: 'Formal & Professional', description: '商务邮件、法律合同、官方报告' },
|
||||
{ label: '礼貌客气', value: 'Polite & Respectful', description: '与长辈、客户或初次见面的人交流' },
|
||||
{ label: '礼貌随和', value: 'Polite & Conversational', description: '得体但不刻板的日常对话' },
|
||||
@@ -47,12 +48,49 @@ export const DEFAULT_TEMPLATE = `You are a professional {SOURCE_LANG} ({SOURCE_C
|
||||
|
||||
[Constraints]
|
||||
1. Speaker Identity: {SPEAKER_IDENTITY}. Ensure all grammatical agreements and self-referential terms in {TARGET_LANG} reflect this.
|
||||
2. Tone & Register: {TONE_REGISTER}.
|
||||
2. Tone & Register: {TONE_REGISTER}. (If set to 'Auto-detect', analyze the tone, formality, and emotional nuance of the source text and faithfully replicate it. Do not neutralize strong emotions or unique styles.)
|
||||
3. Produce ONLY the {TARGET_LANG} translation, without any additional explanations, notes, or commentary.
|
||||
4. If [Context] is provided, use it strictly to disambiguate polysemous words. DO NOT add any factual information or descriptive details from the [Context] that are not present in the [Text to Translate].`;
|
||||
|
||||
export const DEFAULT_EVALUATION_TEMPLATE = `You are an expert translation auditor proficient in {SOURCE_LANG} and {TARGET_LANG}.
|
||||
Your task is to critically evaluate the accuracy and quality of a translation.
|
||||
export const DEFAULT_EVALUATION_TEMPLATE = `# Role
|
||||
You are an **Objective Translation Auditor**. Your task is to evaluate translation quality based on accuracy, grammar, and fundamental readability. Avoid pedantic nitpicking over synonyms, but do point out issues that hinder professional quality.
|
||||
|
||||
# Context Info
|
||||
- **Source Language**: {SOURCE_LANG}
|
||||
- **Target Language**: {TARGET_LANG}
|
||||
- **Speaker Identity**: {SPEAKER_IDENTITY}
|
||||
- **Intended Tone/Register**: {TONE_REGISTER}
|
||||
- **Context**: {CONTEXT}
|
||||
|
||||
# Audit Criteria
|
||||
Only penalize and provide improvements if the translation meets one of these criteria:
|
||||
1. **Semantic Error**: Objective misalignment with the source meaning or complete hallucinations.
|
||||
2. **Grammatical Error**: Clear violations of target language grammar or syntax rules.
|
||||
3. **Tone Failure**: A tone that is the opposite or significantly different from the [Intended Tone/Register].
|
||||
4. **Poor Readability**: The phrasing is so stiff, unnatural, or convoluted that it hinders smooth comprehension (e.g., obvious "translationese" or broken logic).
|
||||
|
||||
**Note**: Do NOT penalize if the translation is simply "not the most elegant" or if there's a subjective preference for a different synonym. If it's natural enough for a native speaker to understand without effort, it's acceptable.
|
||||
|
||||
# Instructions
|
||||
1. **Evaluation**: Compare the [Source Text] and [Translated Text] based on the [Audit Criteria].
|
||||
2. **Scoring Strategy**:
|
||||
- **90-100**: Accurate, grammatically sound, and flows naturally.
|
||||
- **75-89**: Accurate meaning, but suffers from "stiff" phrasing or minor flow issues that need adjustment.
|
||||
- **Below 75**: Contains semantic errors, severe grammar issues, or tone mismatches.
|
||||
3. **Analysis**: Provide a concise explanation in Simplified Chinese. Focus on *why* the error matters (e.g., "meaning is reversed" or "too awkward to read").
|
||||
4. **Suggestions**: Provide a list of specific, actionable suggestions. For each, assign an "importance" from 0 to 100 (0 = unnecessary/optional, 100 = critical error).
|
||||
|
||||
# Output Format
|
||||
Respond ONLY in JSON format. The "analysis" and "text" within "suggestions" MUST be in Simplified Chinese:
|
||||
{
|
||||
"score": number,
|
||||
"analysis": "string",
|
||||
"suggestions": [
|
||||
{ "id": 1, "text": "suggestion text", "importance": number }
|
||||
]
|
||||
}`;
|
||||
|
||||
export const DEFAULT_REFINEMENT_TEMPLATE = `You are a senior translation editor. Your task is to refine the [Current Translation] based on specific [User Feedback], while strictly maintaining the original meaning of the [Source Text] and adhering to the established context.
|
||||
|
||||
[Context Info]
|
||||
- Source Language: {SOURCE_LANG}
|
||||
@@ -61,26 +99,12 @@ Your task is to critically evaluate the accuracy and quality of a translation.
|
||||
- Intended Tone/Register: {TONE_REGISTER}
|
||||
- Context: {CONTEXT}
|
||||
|
||||
[Input]
|
||||
- Source Text: {SOURCE_TEXT}
|
||||
- Translated Text: {TRANSLATED_TEXT}
|
||||
|
||||
[Instructions]
|
||||
1. Compare the [Source Text] and [Translated Text] meticulously.
|
||||
2. Check if the translation respects the [Context Info].
|
||||
3. Assign an "Accuracy Score" from 0 to 100.
|
||||
- Give 0 if there are fatal semantic errors, complete hallucinations, or if the meaning is reversed.
|
||||
- Deduct points for minor inaccuracies, unnatural phrasing, or tone mismatches.
|
||||
4. Provide a concise "Analysis" of why you gave that score.
|
||||
5. (Optional) Provide "Improvements" for a more accurate/natural translation.
|
||||
|
||||
[Output Format]
|
||||
You MUST respond in JSON format with the following keys. The values for "analysis" and "improvements" MUST be written in Simplified Chinese (简体中文), except when quoting the source or target text:
|
||||
{
|
||||
"score": number,
|
||||
"analysis": "string",
|
||||
"improvements": "string"
|
||||
}`;
|
||||
1. Carefully review the [User Feedback] and apply the requested improvements to the [Current Translation].
|
||||
2. Ensure that the refined translation remains semantically identical to the [Source Text].
|
||||
3. Maintain the [Speaker Identity] and [Intended Tone/Register] as specified.
|
||||
4. If a piece of feedback contradicts the [Source Text], prioritize accuracy and provide a balanced refinement.
|
||||
5. Produce ONLY the refined {TARGET_LANG} translation, without any additional explanations, notes, or commentary.`;
|
||||
|
||||
export interface ApiProfile {
|
||||
id: string;
|
||||
@@ -90,6 +114,19 @@ export interface ApiProfile {
|
||||
modelName: string;
|
||||
}
|
||||
|
||||
export interface HistoryItem {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
sourceLang: Language;
|
||||
targetLang: Language;
|
||||
sourceText: string;
|
||||
targetText: string;
|
||||
context: string;
|
||||
speakerIdentity: string;
|
||||
toneRegister: string;
|
||||
modelName: string;
|
||||
}
|
||||
|
||||
export const useSettingsStore = defineStore('settings', () => {
|
||||
const isDark = useLocalStorage('is-dark', false);
|
||||
const apiBaseUrl = useLocalStorage('api-base-url', 'http://localhost:11434/v1');
|
||||
@@ -102,26 +139,66 @@ export const useSettingsStore = defineStore('settings', () => {
|
||||
const enableEvaluation = useLocalStorage('enable-evaluation', true);
|
||||
const evaluationPromptTemplate = useLocalStorage('evaluation-prompt-template', DEFAULT_EVALUATION_TEMPLATE);
|
||||
const evaluationProfileId = useLocalStorage<string | null>('evaluation-profile-id', null);
|
||||
const refinementPromptTemplate = useLocalStorage('refinement-prompt-template', DEFAULT_REFINEMENT_TEMPLATE);
|
||||
|
||||
// 存储整个对象以保持一致性
|
||||
const sourceLang = useLocalStorage<Language>('source-lang-v2', LANGUAGES[0]);
|
||||
const targetLang = useLocalStorage<Language>('target-lang-v2', LANGUAGES[4]);
|
||||
|
||||
const speakerIdentity = useLocalStorage('speaker-identity', SPEAKER_IDENTITY_OPTIONS[0].value);
|
||||
const toneRegister = useLocalStorage('tone-register', TONE_REGISTER_OPTIONS[2].value);
|
||||
// 按源语言分别存储身份和语气，实现基于语言自动切换
|
||||
const speakerIdentityMap = useLocalStorage<Record<string, string>>('speaker-identity-map', {});
|
||||
const toneRegisterMap = useLocalStorage<Record<string, string>>('tone-register-map', {});
|
||||
|
||||
const logs = ref<{ timestamp: string; type: 'request' | 'response' | 'error'; content: any }[]>([]);
|
||||
const speakerIdentity = computed({
|
||||
get: () => speakerIdentityMap.value[sourceLang.value.code] || SPEAKER_IDENTITY_OPTIONS[0].value,
|
||||
set: (val) => { speakerIdentityMap.value[sourceLang.value.code] = val; }
|
||||
});
|
||||
|
||||
const toneRegister = computed({
|
||||
get: () => toneRegisterMap.value[sourceLang.value.code] || TONE_REGISTER_OPTIONS[0].value,
|
||||
set: (val) => { toneRegisterMap.value[sourceLang.value.code] = val; }
|
||||
});
|
||||
|
||||
const logs = ref<{ id: string; timestamp: string; type: 'request' | 'response' | 'error'; content: any }[]>([]);
|
||||
const history = useLocalStorage<HistoryItem[]>('translation-history-v1', []);
|
||||
|
||||
const addLog = (type: 'request' | 'response' | 'error', content: any) => {
|
||||
const now = new Date();
|
||||
const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
|
||||
|
||||
logs.value.unshift({
|
||||
id: crypto.randomUUID(),
|
||||
timestamp,
|
||||
type,
|
||||
content
|
||||
});
|
||||
if (logs.value.length > 20) logs.value.pop();
|
||||
if (logs.value.length > 50) logs.value.pop(); // 稍微增加日志保留数量
|
||||
};
|
||||
|
||||
const addHistory = (item: Omit<HistoryItem, 'id' | 'timestamp'>) => {
|
||||
const now = new Date();
|
||||
const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
|
||||
const id = crypto.randomUUID();
|
||||
|
||||
history.value.unshift({
|
||||
...item,
|
||||
id,
|
||||
timestamp
|
||||
});
|
||||
|
||||
// 限制 100 条
|
||||
if (history.value.length > 100) {
|
||||
history.value = history.value.slice(0, 100);
|
||||
}
|
||||
|
||||
return id;
|
||||
};
|
||||
|
||||
const updateHistoryItem = (id: string, updates: Partial<HistoryItem>) => {
|
||||
const index = history.value.findIndex(h => h.id === id);
|
||||
if (index !== -1) {
|
||||
history.value[index] = { ...history.value[index], ...updates };
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
@@ -135,11 +212,15 @@ export const useSettingsStore = defineStore('settings', () => {
|
||||
enableEvaluation,
|
||||
evaluationPromptTemplate,
|
||||
evaluationProfileId,
|
||||
refinementPromptTemplate,
|
||||
sourceLang,
|
||||
targetLang,
|
||||
speakerIdentity,
|
||||
toneRegister,
|
||||
logs,
|
||||
addLog
|
||||
history,
|
||||
addLog,
|
||||
addHistory,
|
||||
updateHistoryItem
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user