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

add more lang

Browse Source
This commit is contained in:
Julian Freeman
2026-02-22 17:08:33 -04:00
parent c6c1627686
commit fa278a6a8b
2 changed files with 145 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/App.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { ref, computed, onMounted, onUnmounted } from 'vue';
import {
Settings,
Languages,
@@ -9,7 +9,8 @@ import {
ArrowRightLeft,
Loader2,
Check,
FileText
FileText,
ChevronDown
} from 'lucide-vue-next';
import { fetch } from '@tauri-apps/plugin-http';
import { useSettingsStore, LANGUAGES, DEFAULT_TEMPLATE } from './stores/settings';
@@ -23,6 +24,40 @@ function cn(...inputs: ClassValue[]) {
const settings = useSettingsStore();
const view = ref<'translate' | 'settings' | 'logs'>('translate');
// Dropdown State
const sourceDropdownOpen = ref(false);
const targetDropdownOpen = ref(false);
const closeAllDropdowns = () => {
sourceDropdownOpen.value = false;
targetDropdownOpen.value = false;
};
const toggleDropdown = (type: 'source' | 'target') => {
if (type === 'source') {
sourceDropdownOpen.value = !sourceDropdownOpen.value;
targetDropdownOpen.value = false;
} else {
targetDropdownOpen.value = !targetDropdownOpen.value;
sourceDropdownOpen.value = false;
}
};
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 targetText = ref('');
@@ -50,9 +85,9 @@ const sourceLang = computed(() => settings.sourceLang);
const targetLang = computed(() => settings.targetLang);
const swapLanguages = () => {
const temp = sourceLangCode.value;
sourceLangCode.value = targetLangCode.value;
targetLangCode.value = temp;
const temp = { ...settings.sourceLang };
settings.sourceLang = { ...settings.targetLang };
settings.targetLang = temp;
};
const clearSource = () => {
@@ -79,9 +114,9 @@ const translate = async () => {
targetText.value = '';
const prompt = settings.systemPromptTemplate
.replace(/{SOURCE_LANG}/g, sourceLang.value.name)
.replace(/{SOURCE_LANG}/g, sourceLang.value.englishName)
.replace(/{SOURCE_CODE}/g, sourceLang.value.code)
.replace(/{TARGET_LANG}/g, targetLang.value.name)
.replace(/{TARGET_LANG}/g, targetLang.value.englishName)
.replace(/{TARGET_CODE}/g, targetLang.value.code)
.replace(/{TEXT}/g, sourceText.value);
@@ -176,14 +211,47 @@ const translate = async () => {
<!-- 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 bg-white overflow-hidden">
<!-- Source Pane -->
<div class="flex-1 flex flex-col min-h-0">
<div class="flex items-center gap-4 px-6 py-3 border-b bg-slate-50/50">
<select
v-model="sourceLangCode"
class="bg-transparent border-none focus:ring-0 font-medium text-slate-700 cursor-pointer text-sm outline-none appearance-none"
>
<option v-for="lang in LANGUAGES" :key="lang.code" :value="lang.code">{{ lang.name }}</option>
</select>
<div class="flex-1 flex flex-col min-h-0 relative">
<div class="flex items-center gap-3 px-6 py-3 border-b bg-slate-50/50 relative z-40">
<!-- Custom Source Dropdown -->
<div class="relative lang-dropdown min-w-[120px]">
<button
@click.stop="toggleDropdown('source')"
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 transition-colors text-sm font-semibold text-slate-700 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 rounded-xl shadow-xl border border-slate-200 z-50 py-2 py-1 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 font-bold' : 'text-slate-600 hover:bg-slate-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 rounded-md transition-colors" title="交换语言">
<ArrowRightLeft class="w-4 h-4 text-slate-500" />
</button>
@@ -212,14 +280,46 @@ const translate = async () => {
</div>
<!-- Target Pane -->
<div class="flex-1 flex flex-col min-h-0 bg-slate-50/30">
<div class="flex items-center gap-4 px-6 py-3 border-b bg-slate-50/50">
<select
v-model="targetLangCode"
class="bg-transparent border-none focus:ring-0 font-medium text-slate-700 cursor-pointer text-sm outline-none appearance-none"
>
<option v-for="lang in LANGUAGES" :key="lang.code" :value="lang.code">{{ lang.name }}</option>
</select>
<div class="flex-1 flex flex-col min-h-0 bg-slate-50/30 relative">
<div class="flex items-center gap-3 px-6 py-3 border-b bg-slate-50/50 relative z-40">
<!-- Custom Target Dropdown -->
<div class="relative lang-dropdown min-w-[120px]">
<button
@click.stop="toggleDropdown('target')"
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 transition-colors text-sm font-semibold text-slate-700 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 rounded-xl shadow-xl border border-slate-200 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 font-bold' : 'text-slate-600 hover:bg-slate-50'
)"
>
{{ lang.displayName }}
<Check v-if="targetLangCode === lang.code" class="w-3.5 h-3.5" />
</button>
</div>
</transition>
</div>
<div class="ml-auto flex items-center gap-2">
<button @click="copyTarget" class="p-1.5 hover:bg-slate-200 rounded-md transition-colors relative" title="复制结果">
<Check v-if="showCopyFeedback" class="w-4 h-4 text-green-600" />

33
src/stores/settings.ts
View File

@@ -3,17 +3,26 @@ import { defineStore } from 'pinia';
import { useLocalStorage } from '@vueuse/core';
export interface Language {
name: string;
code: string;
displayName: string; // UI 显示的中文名，如 "英语(英国)"
englishName: string; // 文件中的第二列，用于 {SOURCE_LANG}
code: string; // 文件中的第一列，用于 {SOURCE_CODE}
}
export const LANGUAGES: Language[] = [
{ name: '英语', code: 'en' },
{ name: '中文', code: 'zh-Hans' },
{ name: '日语', code: 'ja' },
{ name: '西班牙语', code: 'es' },
{ name: '法语', code: 'fr' },
{ name: '德语', code: 'de' },
{ displayName: '中文(简体)', englishName: 'Simplified Chinese', code: 'zh-Hans' },
{ displayName: '中文(繁体)', englishName: 'Traditional Chinese', code: 'zh-Hant' },
{ displayName: '英语', englishName: 'English', code: 'en' },
{ displayName: '日语', englishName: 'Japanese', code: 'ja' },
{ displayName: '韩语', englishName: 'Korean', code: 'ko' },
{ displayName: '法语', englishName: 'French', code: 'fr' },
{ displayName: '德语', englishName: 'German', code: 'de' },
{ displayName: '西班牙语', englishName: 'Spanish', code: 'es' },
{ displayName: '意大利语', englishName: 'Italian', code: 'it' },
{ displayName: '俄语', englishName: 'Russian', code: 'ru' },
{ displayName: '葡萄牙语', englishName: 'Portuguese', code: 'pt' },
{ displayName: '越南语', englishName: 'Vietnamese', code: 'vi' },
{ displayName: '泰语', englishName: 'Thai', code: 'th' },
{ displayName: '阿拉伯语', englishName: 'Arabic', code: 'ar' },
];
export const DEFAULT_TEMPLATE = `You are a professional {SOURCE_LANG} ({SOURCE_CODE}) to {TARGET_LANG} ({TARGET_CODE}) translator. Your goal is to accurately convey the meaning and nuances of the original {SOURCE_LANG} text while adhering to {TARGET_LANG} grammar, vocabulary, and cultural sensitivities.
@@ -26,8 +35,10 @@ export const useSettingsStore = defineStore('settings', () => {
const modelName = useLocalStorage('model-name', 'translategemma:12b');
const enableStreaming = useLocalStorage('enable-streaming', true);
const systemPromptTemplate = useLocalStorage('system-prompt-template', DEFAULT_TEMPLATE);
const sourceLang = useLocalStorage('source-lang', LANGUAGES[1]); // Default Chinese
const targetLang = useLocalStorage('target-lang', LANGUAGES[0]); // Default English
// 存储整个对象以保持一致性
const sourceLang = useLocalStorage<Language>('source-lang-v2', LANGUAGES[0]);
const targetLang = useLocalStorage<Language>('target-lang-v2', LANGUAGES[4]);
const logs = ref<{ timestamp: string; type: 'request' | 'response' | 'error'; content: any }[]>([]);
@@ -37,7 +48,7 @@ export const useSettingsStore = defineStore('settings', () => {
type,
content
});
if (logs.value.length > 20) logs.value.pop(); // Keep last 20 logs
if (logs.value.length > 20) logs.value.pop();
};
return {