fix: hotspot, demo, i18n and type updates

src/components/HotspotLayer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import type { Hotspot } from '@engine/types'
+import { useI18n } from '@/composables/useI18n'
 
 const props = defineProps<{
   hotspots: Hotspot[]
@@ -9,6 +10,8 @@ const props = defineProps<{
   contentSize?: { w: number; h: number } | null
 }>()
 
+const { t } = useI18n()
+
 const emit = defineEmits<{
   clickHotspot: [hotspotId: string]
 }>()
@@ -87,9 +90,9 @@ const hotspotRects = computed<Rect[]>(() => {
       class="hotspot-rect"
       :style="hotspotRects[i] as any"
       @click.stop="emit('clickHotspot', hs.id)"
-      :title="hs.label"
-    >
-      <span class="hotspot-label">{{ hs.label }}</span>
+      :title="t(hs.labelKey || hs.label)"
+      >
+      <span class="hotspot-label">{{ t(hs.labelKey || hs.label) }}</span>
     </div>
   </div>
 </template>