Initial commit: Momentry Portal v0.1.0

2026-05-20 08:29:37 +08:00
commit 0da7dd17af
62 changed files with 16788 additions and 0 deletions
@@ -0,0 +1,66 @@
+<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>