feat(i18n): for minimap loading and view location messages (#64)

apps/web/src/components/ui/photo-viewer/MiniMap.tsx

@@ -1,12 +1,12 @@
 import 'maplibre-gl/dist/maplibre-gl.css'
 
 import { useCallback, useState } from 'react'
-import { Link } from 'react-router'
+import { useTranslation } from 'react-i18next'
 import Map from 'react-map-gl/maplibre'
+import { Link } from 'react-router'
 
 import { getMapStyle } from '~/lib/map/style'
 
-
 interface MiniMapProps {
   latitude: number
   longitude: number
@@ -15,6 +15,7 @@ interface MiniMapProps {
 
 export const MiniMap = ({ latitude, longitude, photoId }: MiniMapProps) => {
   const [isLoaded, setIsLoaded] = useState(false)
+  const { t } = useTranslation()
 
   const handleMapLoad = useCallback(() => {
     setIsLoaded(true)
@@ -45,7 +46,7 @@ export const MiniMap = ({ latitude, longitude, photoId }: MiniMapProps) => {
       {/* 中心标记 */}
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
         <div className="relative">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-3 w-3 animate-ping rounded-full bg-blue-400 opacity-75" />
+          <div className="absolute top-1/2 left-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 animate-ping rounded-full bg-blue-400 opacity-75" />
           <div className="relative h-2 w-2 rounded-full bg-blue-500 ring-2 ring-white/80" />
         </div>
       </div>
@@ -53,16 +54,16 @@ export const MiniMap = ({ latitude, longitude, photoId }: MiniMapProps) => {
       {/* 加载状态 */}
       {!isLoaded && (
         <div className="bg-material-ultra-thin absolute inset-0 flex items-center justify-center backdrop-blur-sm">
-          <div className="text-xs text-white/60">加载地图中...</div>
+          <div className="text-xs text-white/60">{t('minimap.loading')}</div>
         </div>
       )}
 
       {/* 点击跳转到explore页面的遮罩 */}
       <Link
         to={`/explory?photoId=${photoId}`}
-        target='_blank'
+        target="_blank"
         className="absolute inset-0 cursor-pointer transition-opacity duration-200 hover:bg-black/10"
-        aria-label="在地图中查看位置"
+        aria-label={t('minimap.view.in.map')}
       />
     </div>
   )

locales/app/en.json

@@ -231,6 +231,8 @@
   "loading.heic.main": "HEIC",
   "loading.webgl.building": "Building high-quality textures...",
   "loading.webgl.main": "WebGL Texture Loading",
+  "minimap.loading": "Loading map...",
+  "minimap.view.in.map": "View location in map",
   "photo.conversion.webcodecs": "WebCodecs",
   "photo.copy.error": "Failed to copy image, please try again later",
   "photo.copy.image": "Copy Image",
@@ -282,4 +284,4 @@
   "video.conversion.webcodecs.not.supported": "WebCodecs is not supported in this browser",
   "video.format.mov.not.supported": "Browser does not support MOV format, conversion required",
   "video.format.mov.supported": "Browser natively supports MOV format, skipping conversion"
-}
+}

locales/app/jp.json

@@ -230,6 +230,8 @@
   "loading.heic.main": "HEIC",
   "loading.webgl.building": "高品質テクスチャを構築中...",
   "loading.webgl.main": "WebGL テクスチャの読み込み",
+  "minimap.loading": "地図を読み込み中...",
+  "minimap.view.in.map": "地図で位置を表示",
   "photo.conversion.webcodecs": "WebCodecs",
   "photo.copy.error": "画像のコピーに失敗しました。後でもう一度お試しください。",
   "photo.copy.image": "画像をコピー",
@@ -278,4 +280,4 @@
   "video.conversion.webcodecs.not.supported": "このブラウザは WebCodecs をサポートしていません",
   "video.format.mov.not.supported": "ブラウザが MOV 形式をサポートしていないため、変換が必要です",
   "video.format.mov.supported": "ブラウザが MOV 形式をネイティブでサポートしているため、変換をスキップします"
-}
+}

locales/app/ko.json

@@ -230,6 +230,8 @@
   "loading.heic.main": "HEIC",
   "loading.webgl.building": "고품질 텍스처 구축 중...",
   "loading.webgl.main": "WebGL 텍스처 로딩",
+  "minimap.loading": "지도 로딩 중...",
+  "minimap.view.in.map": "지도에서 위치 보기",
   "photo.conversion.webcodecs": "WebCodecs",
   "photo.copy.error": "이미지 복사에 실패했습니다. 나중에 다시 시도해 주세요.",
   "photo.copy.image": "이미지 복사",
@@ -278,4 +280,4 @@
   "video.conversion.webcodecs.not.supported": "이 브라우저는 WebCodecs 를 지원하지 않습니다",
   "video.format.mov.not.supported": "브라우저가 MOV 형식을 지원하지 않아 변환이 필요합니다.",
   "video.format.mov.supported": "브라우저가 MOV 형식을 기본적으로 지원하므로 변환을 건너뜁니다."
-}
+}

locales/app/zh-CN.json

@@ -231,6 +231,8 @@
   "loading.heic.main": "HEIC",
   "loading.webgl.building": "正在构建高质量纹理...",
   "loading.webgl.main": "WebGL 纹理加载",
+  "minimap.loading": "加载地图中...",
+  "minimap.view.in.map": "在地图中查看位置",
   "photo.conversion.webcodecs": "WebCodecs",
   "photo.copy.error": "复制图像失败，请稍后重试",
   "photo.copy.image": "复制图像",
@@ -282,4 +284,4 @@
   "video.conversion.webcodecs.not.supported": "此浏览器不支持 WebCodecs",
   "video.format.mov.not.supported": "浏览器不支持 MOV 格式，需要转换",
   "video.format.mov.supported": "浏览器原生支持 MOV 格式，跳过转换"
-}
+}

locales/app/zh-HK.json

@@ -230,6 +230,8 @@
   "loading.heic.main": "HEIC",
   "loading.webgl.building": "正在建置高品質紋理...",
   "loading.webgl.main": "WebGL 紋理載入",
+  "minimap.loading": "載入地圖中...",
+  "minimap.view.in.map": "在地圖中查看位置",
   "photo.conversion.webcodecs": "WebCodecs",
   "photo.copy.error": "複製圖像失敗，請稍後重試",
   "photo.copy.image": "複製圖像",
@@ -278,4 +280,4 @@
   "video.conversion.webcodecs.not.supported": "此瀏覽器不支援 WebCodecs",
   "video.format.mov.not.supported": "瀏覽器不支援 MOV 格式，需要轉換",
   "video.format.mov.supported": "瀏覽器原生支援 MOV 格式，跳過轉換"
-}
+}

locales/app/zh-TW.json

@@ -230,6 +230,8 @@
   "loading.heic.main": "HEIC",
   "loading.webgl.building": "正在建置高品質紋理...",
   "loading.webgl.main": "WebGL 紋理載入",
+  "minimap.loading": "載入地圖中...",
+  "minimap.view.in.map": "在地圖中查看位置",
   "photo.conversion.webcodecs": "WebCodecs",
   "photo.copy.error": "複製圖像失敗，請稍後重試",
   "photo.copy.image": "複製圖像",
@@ -278,4 +280,4 @@
   "video.conversion.webcodecs.not.supported": "此瀏覽器不支援 WebCodecs",
   "video.format.mov.not.supported": "瀏覽器不支援 MOV 格式，需要轉換",
   "video.format.mov.supported": "瀏覽器原生支援 MOV 格式，跳過轉換"
-}
+}