feat: i18n achievement UI labels and data layer title/description

src/components/AchievementToast.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, watch, ref } from 'vue'
 import type { AchievementDef } from '@engine/types'
+import { useI18n } from '@/composables/useI18n'
+
+const { t } = useI18n()
 
 const props = defineProps<{
   achievementId: string
@@ -32,9 +35,9 @@ watch(() => props.achievementId, (id) => {
       <span v-else class="toast-star">⭐</span>
     </div>
     <div class="toast-body">
-      <div class="toast-label">成就解锁</div>
-      <div class="toast-title">{{ def.title }}</div>
-      <div class="toast-desc">{{ def.description }}</div>
+      <div class="toast-label">{{ t('ui.achievementUnlocked') }}</div>
+      <div class="toast-title">{{ def ? t(def.titleKey || def.title) : '' }}</div>
+      <div class="toast-desc">{{ def ? t(def.descKey || def.description) : '' }}</div>
     </div>
   </div>
 </template>