67 lines
2.2 KiB
Vue
67 lines
2.2 KiB
Vue
<template>
|
|
<div class="mt-2">
|
|
<div class="flex items-center gap-2">
|
|
<select
|
|
v-model="targetLang"
|
|
class="bg-gray-700 text-white text-xs px-2 py-1 rounded border border-gray-600 focus:outline-none focus:border-blue-500"
|
|
>
|
|
<option value="zh-TW">繁體中文</option>
|
|
<option value="zh-CN">简体中文</option>
|
|
<option value="ja">日本語</option>
|
|
<option value="ko">한국어</option>
|
|
<option value="fr">Français</option>
|
|
<option value="en">English</option>
|
|
</select>
|
|
|
|
<button
|
|
@click="translate"
|
|
:disabled="loading || !props.text"
|
|
class="text-xs bg-blue-900 text-blue-300 hover:bg-blue-800 px-2 py-1 rounded transition flex items-center gap-1 disabled:opacity-50"
|
|
>
|
|
<span v-if="loading" class="animate-pulse">翻譯中...</span>
|
|
<span v-else>🌐 翻譯</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="showTranslation" class="mt-3 p-3 bg-gray-900 border border-green-600 rounded text-green-300 text-sm leading-relaxed">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs font-bold text-green-500 uppercase">Translation ({{ targetLang }})</span>
|
|
<button @click="showTranslation = false" class="text-gray-500 hover:text-white text-xs">✕</button>
|
|
</div>
|
|
{{ translatedText }}
|
|
</div>
|
|
<div v-if="errorMsg" class="mt-2 text-xs text-red-400">{{ errorMsg }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { translateText } from '@/api/client'
|
|
|
|
const props = defineProps<{
|
|
text: string
|
|
}>()
|
|
|
|
const targetLang = ref('zh-TW')
|
|
const translatedText = ref('')
|
|
const loading = ref(false)
|
|
const showTranslation = ref(false)
|
|
const errorMsg = ref('')
|
|
|
|
const translate = async () => {
|
|
if (!props.text.trim()) return
|
|
|
|
loading.value = true
|
|
errorMsg.value = ''
|
|
try {
|
|
translatedText.value = await translateText(props.text, targetLang.value)
|
|
showTranslation.value = true
|
|
} catch (error) {
|
|
errorMsg.value = '翻譯失敗: ' + (error as any)?.message || String(error)
|
|
showTranslation.value = false
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|