feat: 音乐播放 i18n

Rinai-R · Rinai-R · commit 8744e041059c · 2026-03-29T22:59:58.000+08:00
diff --git a/src/components/widget/music/atoms/CoverImage.svelte b/src/components/widget/music/atoms/CoverImage.svelte
@@ -1,24 +1,21 @@
 <script lang="ts">
+import I18nKey from "../../../../i18n/i18nKey";
+import { i18n } from "../../../../i18n/translation";
+import { getAssetPath } from "../../../../utils/asset-path";
+
 interface Props {
 	cover: string;
 	isPlaying: boolean;
 	isLoading: boolean;
 }
 
 const { cover, isPlaying, isLoading }: Props = $props();
-
-function getAssetPath(path: string): string {
-	if (!path) return "/favicon/favicon.png";
-	if (path.startsWith("http://") || path.startsWith("https://")) return path;
-	if (path.startsWith("/")) return path;
-	return `/${path}`;
-}
 </script>
 
 <div class="cover-container">
 	<img
-		src={getAssetPath(cover)}
-		alt="封面"
+		src={getAssetPath(cover, "/favicon/favicon.png")}
+		alt={i18n(I18nKey.musicPlayer)}
 		loading="eager"
 		class="cover-img"
 		class:spinning={isPlaying && !isLoading}
diff --git a/src/components/widget/music/atoms/NextButton.svelte b/src/components/widget/music/atoms/NextButton.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 import Icon from "@iconify/svelte";
+import I18nKey from "../../../../i18n/i18nKey";
+import { i18n } from "../../../../i18n/translation";
 
 interface Props {
 	onclick: () => void;
@@ -9,6 +11,6 @@ interface Props {
 const { onclick, disabled = false }: Props = $props();
 </script>
 
-<button class="btn-plain w-9 h-9 rounded-lg" aria-label="下一首" {onclick} {disabled}>
+<button class="btn-plain w-9 h-9 rounded-lg" aria-label={i18n(I18nKey.musicBoxNext)} {onclick} {disabled}>
 	<Icon icon="material-symbols:skip-next" class="text-xl" />
 </button>
diff --git a/src/components/widget/music/atoms/PlayButton.svelte b/src/components/widget/music/atoms/PlayButton.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 import Icon from "@iconify/svelte";
+import I18nKey from "../../../../i18n/i18nKey";
+import { i18n } from "../../../../i18n/translation";
 
 interface Props {
 	isPlaying: boolean;
@@ -14,7 +16,7 @@ const { isPlaying, isLoading, onclick }: Props = $props();
 	class="btn-regular w-11 h-11 rounded-full"
 	class:opacity-50={isLoading}
 	disabled={isLoading}
-	aria-label={isPlaying ? "暂停" : "播放"}
+	aria-label={isPlaying ? i18n(I18nKey.musicBoxPause) : i18n(I18nKey.musicBoxPlay)}
 	{onclick}
 >
 	{#if isLoading}
diff --git a/src/components/widget/music/atoms/PrevButton.svelte b/src/components/widget/music/atoms/PrevButton.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 import Icon from "@iconify/svelte";
+import I18nKey from "../../../../i18n/i18nKey";
+import { i18n } from "../../../../i18n/translation";
 
 interface Props {
 	onclick: () => void;
@@ -9,6 +11,6 @@ interface Props {
 const { onclick, disabled = false }: Props = $props();
 </script>
 
-<button class="btn-plain w-9 h-9 rounded-lg" aria-label="上一首" {onclick} {disabled}>
+<button class="btn-plain w-9 h-9 rounded-lg" aria-label={i18n(I18nKey.musicBoxPrev)} {onclick} {disabled}>
 	<Icon icon="material-symbols:skip-previous" class="text-xl" />
 </button>
diff --git a/src/components/widget/music/components/Controls.svelte b/src/components/widget/music/components/Controls.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 import Icon from "@iconify/svelte";
+import I18nKey from "../../../../i18n/i18nKey";
+import { i18n } from "../../../../i18n/translation";
 import type { RepeatMode } from "../../../../types/music";
 import NextButton from "../atoms/NextButton.svelte";
 import PlayButton from "../atoms/PlayButton.svelte";
@@ -45,14 +47,14 @@ const modeActive = $derived(isShuffled || repeatMode > 0);
 		class="icon-btn"
 		class:active-mode={modeActive}
 		onclick={onToggleMode}
-		aria-label="播放模式"
+		aria-label={i18n(I18nKey.musicBoxMode)}
 	>
 		<Icon icon={repeatIcon} class="text-xl" />
 	</button>
 	<PrevButton onclick={onPrev} />
 	<PlayButton {isPlaying} {isLoading} onclick={onTogglePlay} />
 	<NextButton onclick={onNext} />
-	<button class="icon-btn list-btn" onclick={onTogglePlaylist} aria-label="播放列表">
+	<button class="icon-btn list-btn" onclick={onTogglePlaylist} aria-label={i18n(I18nKey.musicBoxPlaylist)}>
 		<Icon icon="material-symbols:queue-music-rounded" class="text-xl" />
 	</button>
 </div>
diff --git a/src/components/widget/music/components/Playlist.svelte b/src/components/widget/music/components/Playlist.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 import Icon from "@iconify/svelte";
+import I18nKey from "../../../../i18n/i18nKey";
+import { i18n } from "../../../../i18n/translation";
 import type { Song } from "../../../../types/music";
 import { getAssetPath } from "../../../../utils/asset-path";
 
@@ -19,7 +21,7 @@ const { playlist, currentIndex, isPlaying, show, onClose, onPlaySong }: Props =
 <div class="playlist-drawer" class:open={show}>
 	<div class="playlist-inner">
 		<div class="playlist-shell">
-			<div class="playlist-list" role="listbox" aria-label="播放列表">
+			<div class="playlist-list" role="listbox" aria-label={i18n(I18nKey.musicBoxPlaylist)}>
 				{#each playlist as song, index}
 					<div
 						class="track-item"
@@ -34,7 +36,7 @@ const { playlist, currentIndex, isPlaying, show, onClose, onPlaySong }: Props =
 						role="option"
 						tabindex="0"
 						aria-selected={index === currentIndex}
-						aria-label={`播放 ${song.title}`}
+						aria-label={`${i18n(I18nKey.musicBoxPlay)} ${song.title}`}
 					>
 						<div class="track-cover">
 							<img src={getAssetPath(song.cover, "/favicon/favicon.png")} alt={song.title} loading="lazy" />
diff --git a/src/components/widget/music/components/Progress.svelte b/src/components/widget/music/components/Progress.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+import I18nKey from "../../../../i18n/i18nKey";
+import { i18n } from "../../../../i18n/translation";
+
 interface Props {
 	currentTime: number;
 	duration: number;
@@ -38,7 +41,7 @@ function handleClick(event: MouseEvent) {
 		}}
 		role="slider"
 		tabindex="0"
-		aria-label="播放进度"
+		aria-label={i18n(I18nKey.musicBoxProgress)}
 		aria-valuemin="0"
 		aria-valuemax="100"
 		aria-valuenow={progressPct}
diff --git a/src/components/widget/music/components/TrackInfo.svelte b/src/components/widget/music/components/TrackInfo.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 import Icon from "@iconify/svelte";
+import I18nKey from "../../../../i18n/i18nKey";
+import { i18n } from "../../../../i18n/translation";
 import type { Song } from "../../../types/music";
 
 interface Props {
@@ -76,7 +78,7 @@ function handleVolumeKey(event: KeyboardEvent) {
 				type="button"
 				class="vol-btn"
 				onclick={onToggleMute}
-				aria-label="切换静音"
+				aria-label={isMuted ? i18n(I18nKey.musicBoxUnmute) : i18n(I18nKey.musicBoxMute)}
 			>
 				<Icon
 					icon={isMuted || volume === 0
@@ -94,7 +96,7 @@ function handleVolumeKey(event: KeyboardEvent) {
 				onkeydown={handleVolumeKey}
 				role="slider"
 				tabindex="0"
-				aria-label="音量"
+				aria-label={i18n(I18nKey.musicBoxVolume)}
 				aria-valuemin="0"
 				aria-valuemax="100"
 				aria-valuenow={volumePercent}
diff --git a/src/i18n/i18nKey.ts b/src/i18n/i18nKey.ts
@@ -37,6 +37,21 @@ enum I18nKey {
 	friends = "friends",
 
 	musicPlayer = "musicPlayer",
+	musicBox = "musicBox",
+	musicBoxPlay = "musicBoxPlay",
+	musicBoxPause = "musicBoxPause",
+	musicBoxPrev = "musicBoxPrev",
+	musicBoxNext = "musicBoxNext",
+	musicBoxPlaylist = "musicBoxPlaylist",
+	musicBoxMode = "musicBoxMode",
+	musicBoxVolume = "musicBoxVolume",
+	musicBoxMute = "musicBoxMute",
+	musicBoxUnmute = "musicBoxUnmute",
+	musicBoxShuffle = "musicBoxShuffle",
+	musicBoxRepeat = "musicBoxRepeat",
+	musicBoxRepeatOne = "musicBoxRepeatOne",
+	musicBoxProgress = "musicBoxProgress",
+	musicBoxCover = "musicBoxCover",
 }
 
 export default I18nKey;
diff --git a/src/i18n/languages/en.ts b/src/i18n/languages/en.ts
@@ -37,5 +37,19 @@ export const en: Translation = {
 	[Key.author]: "Author",
 	[Key.publishedAt]: "Published at",
 	[Key.license]: "License",
-	[Key.musicPlayer]: "Music Player",
+	[Key.musicPlayer]: "Music Box",
+	[Key.musicBoxPlay]: "Play",
+	[Key.musicBoxPause]: "Pause",
+	[Key.musicBoxPrev]: "Previous",
+	[Key.musicBoxNext]: "Next",
+	[Key.musicBoxPlaylist]: "Playlist",
+	[Key.musicBoxMode]: "Playback mode",
+	[Key.musicBoxVolume]: "Volume",
+	[Key.musicBoxMute]: "Mute",
+	[Key.musicBoxUnmute]: "Unmute",
+	[Key.musicBoxShuffle]: "Shuffle",
+	[Key.musicBoxRepeat]: "Repeat",
+	[Key.musicBoxRepeatOne]: "Repeat one",
+	[Key.musicBoxProgress]: "Progress",
+	[Key.musicBoxCover]: "Cover",
 };
diff --git a/src/i18n/languages/es.ts b/src/i18n/languages/es.ts
@@ -37,5 +37,19 @@ export const es: Translation = {
 	[Key.author]: "Autor",
 	[Key.publishedAt]: "Publicado el",
 	[Key.license]: "Licencia",
-	[Key.musicPlayer]: "Reproductor de música",
+	[Key.musicPlayer]: "Music Box",
+	[Key.musicBoxPlay]: "Reproducir",
+	[Key.musicBoxPause]: "Pausar",
+	[Key.musicBoxPrev]: "Anterior",
+	[Key.musicBoxNext]: "Siguiente",
+	[Key.musicBoxPlaylist]: "Lista de reproducción",
+	[Key.musicBoxMode]: "Modo de reproducción",
+	[Key.musicBoxVolume]: "Volumen",
+	[Key.musicBoxMute]: "Silenciar",
+	[Key.musicBoxUnmute]: "Activar sonido",
+	[Key.musicBoxShuffle]: "Aleatorio",
+	[Key.musicBoxRepeat]: "Repetir",
+	[Key.musicBoxRepeatOne]: "Repetir uno",
+	[Key.musicBoxProgress]: "Progreso",
+	[Key.musicBoxCover]: "Portada",
 };
diff --git a/src/i18n/languages/id.ts b/src/i18n/languages/id.ts
@@ -37,5 +37,19 @@ export const id: Translation = {
 	[Key.author]: "Penulis",
 	[Key.publishedAt]: "Diterbitkan pada",
 	[Key.license]: "Lisensi",
-	[Key.musicPlayer]: "Pemutar Musik",
+	[Key.musicPlayer]: "Music Box",
+	[Key.musicBoxPlay]: "Putar",
+	[Key.musicBoxPause]: "Jeda",
+	[Key.musicBoxPrev]: "Sebelumnya",
+	[Key.musicBoxNext]: "Berikutnya",
+	[Key.musicBoxPlaylist]: "Daftar Putar",
+	[Key.musicBoxMode]: "Mode Pemutaran",
+	[Key.musicBoxVolume]: "Volume",
+	[Key.musicBoxMute]: "Bungkam",
+	[Key.musicBoxUnmute]: "Buka Suara",
+	[Key.musicBoxShuffle]: "Acak",
+	[Key.musicBoxRepeat]: "Ulangi",
+	[Key.musicBoxRepeatOne]: "Ulangi Satu",
+	[Key.musicBoxProgress]: "Kemajuan",
+	[Key.musicBoxCover]: "Sampul",
 };
diff --git a/src/i18n/languages/ja.ts b/src/i18n/languages/ja.ts
@@ -37,5 +37,19 @@ export const ja: Translation = {
 	[Key.author]: "作者",
 	[Key.publishedAt]: "公開日",
 	[Key.license]: "ライセンス",
-	[Key.musicPlayer]: "音楽プレーヤー",
+	[Key.musicPlayer]: "オルゴール",
+	[Key.musicBoxPlay]: "再生",
+	[Key.musicBoxPause]: "一時停止",
+	[Key.musicBoxPrev]: "前へ",
+	[Key.musicBoxNext]: "次へ",
+	[Key.musicBoxPlaylist]: "プレイリスト",
+	[Key.musicBoxMode]: "再生モード",
+	[Key.musicBoxVolume]: "音量",
+	[Key.musicBoxMute]: "ミュート",
+	[Key.musicBoxUnmute]: "ミュート解除",
+	[Key.musicBoxShuffle]: "シャッフル",
+	[Key.musicBoxRepeat]: "リピート",
+	[Key.musicBoxRepeatOne]: "1曲リピート",
+	[Key.musicBoxProgress]: "進捗",
+	[Key.musicBoxCover]: "カバー",
 };
diff --git a/src/i18n/languages/ko.ts b/src/i18n/languages/ko.ts
@@ -37,5 +37,19 @@ export const ko: Translation = {
 	[Key.author]: "저자",
 	[Key.publishedAt]: "게시일",
 	[Key.license]: "라이선스",
-	[Key.musicPlayer]: "뮤직 플레이어",
+	[Key.musicPlayer]: "오르골",
+	[Key.musicBoxPlay]: "재생",
+	[Key.musicBoxPause]: "일시 정지",
+	[Key.musicBoxPrev]: "이전",
+	[Key.musicBoxNext]: "다음",
+	[Key.musicBoxPlaylist]: "재생 목록",
+	[Key.musicBoxMode]: "재생 모드",
+	[Key.musicBoxVolume]: "음량",
+	[Key.musicBoxMute]: "음소거",
+	[Key.musicBoxUnmute]: "음소거 해제",
+	[Key.musicBoxShuffle]: "셔플",
+	[Key.musicBoxRepeat]: "반복",
+	[Key.musicBoxRepeatOne]: "1곡 반복",
+	[Key.musicBoxProgress]: "진행",
+	[Key.musicBoxCover]: "커버",
 };
diff --git a/src/i18n/languages/th.ts b/src/i18n/languages/th.ts
@@ -37,5 +37,19 @@ export const th: Translation = {
 	[Key.author]: "ผู้เขียน",
 	[Key.publishedAt]: "เผยแพร่เมื่อ",
 	[Key.license]: "สัญญาอนุญาต",
-	[Key.musicPlayer]: "เครื่องเล่นเพลง",
+	[Key.musicPlayer]: "Music Box",
+	[Key.musicBoxPlay]: "เล่น",
+	[Key.musicBoxPause]: "หยุดชั่วคราว",
+	[Key.musicBoxPrev]: "ก่อนหน้า",
+	[Key.musicBoxNext]: "ถัดไป",
+	[Key.musicBoxPlaylist]: "รายการเล่น",
+	[Key.musicBoxMode]: "โหมดการเล่น",
+	[Key.musicBoxVolume]: "ระดับเสียง",
+	[Key.musicBoxMute]: "ปิดเสียง",
+	[Key.musicBoxUnmute]: "เปิดเสียง",
+	[Key.musicBoxShuffle]: "สุ่ม",
+	[Key.musicBoxRepeat]: "ทำซ้ำ",
+	[Key.musicBoxRepeatOne]: "ทำซ้ำเพลงเดียว",
+	[Key.musicBoxProgress]: "ความคืบหน้า",
+	[Key.musicBoxCover]: "ปก",
 };
diff --git a/src/i18n/languages/tr.ts b/src/i18n/languages/tr.ts
@@ -37,5 +37,19 @@ export const tr: Translation = {
 	[Key.author]: "Yazar",
 	[Key.publishedAt]: "Yayınlanma:",
 	[Key.license]: "Lisans",
-	[Key.musicPlayer]: "Müzik Çalar",
+	[Key.musicPlayer]: "Music Box",
+	[Key.musicBoxPlay]: "Oynat",
+	[Key.musicBoxPause]: "Duraklat",
+	[Key.musicBoxPrev]: "Önceki",
+	[Key.musicBoxNext]: "Sonraki",
+	[Key.musicBoxPlaylist]: "Çalma Listesi",
+	[Key.musicBoxMode]: "Oynatma Modu",
+	[Key.musicBoxVolume]: "Ses Düzeyi",
+	[Key.musicBoxMute]: "Sessize Al",
+	[Key.musicBoxUnmute]: "Sesi Aç",
+	[Key.musicBoxShuffle]: "Karıştır",
+	[Key.musicBoxRepeat]: "Tekrarla",
+	[Key.musicBoxRepeatOne]: "Birini Tekrarla",
+	[Key.musicBoxProgress]: "İlerleme",
+	[Key.musicBoxCover]: "Kapak",
 };
diff --git a/src/i18n/languages/vi.ts b/src/i18n/languages/vi.ts
@@ -37,5 +37,19 @@ export const vi: Translation = {
 	[Key.author]: "Tác giả",
 	[Key.publishedAt]: "Đăng vào lúc",
 	[Key.license]: "Giấy phép bản quyền",
-	[Key.musicPlayer]: "Trình phát nhạc",
+	[Key.musicPlayer]: "Music Box",
+	[Key.musicBoxPlay]: "Phát",
+	[Key.musicBoxPause]: "Tạm dừng",
+	[Key.musicBoxPrev]: "Trước",
+	[Key.musicBoxNext]: "Tiếp theo",
+	[Key.musicBoxPlaylist]: "Danh sách phát",
+	[Key.musicBoxMode]: "Chế độ phát",
+	[Key.musicBoxVolume]: "Âm lượng",
+	[Key.musicBoxMute]: "Tắt tiếng",
+	[Key.musicBoxUnmute]: "Bật tiếng",
+	[Key.musicBoxShuffle]: "Trộn",
+	[Key.musicBoxRepeat]: "Lặp lại",
+	[Key.musicBoxRepeatOne]: "Lặp lại một bài",
+	[Key.musicBoxProgress]: "Tiến độ",
+	[Key.musicBoxCover]: "Bìa",
 };
diff --git a/src/i18n/languages/zh_CN.ts b/src/i18n/languages/zh_CN.ts
@@ -37,5 +37,19 @@ export const zh_CN: Translation = {
 	[Key.author]: "作者",
 	[Key.publishedAt]: "发布于",
 	[Key.license]: "许可协议",
-	[Key.musicPlayer]: "音乐播放器",
+	[Key.musicPlayer]: "音乐盒",
+	[Key.musicBoxPlay]: "播放",
+	[Key.musicBoxPause]: "暂停",
+	[Key.musicBoxPrev]: "上一曲",
+	[Key.musicBoxNext]: "下一曲",
+	[Key.musicBoxPlaylist]: "曲目列表",
+	[Key.musicBoxMode]: "模式",
+	[Key.musicBoxVolume]: "音量",
+	[Key.musicBoxMute]: "静音",
+	[Key.musicBoxUnmute]: "取消静音",
+	[Key.musicBoxShuffle]: "随机",
+	[Key.musicBoxRepeat]: "循环",
+	[Key.musicBoxRepeatOne]: "单曲",
+	[Key.musicBoxProgress]: "进度",
+	[Key.musicBoxCover]: "封面",
 };
diff --git a/src/i18n/languages/zh_TW.ts b/src/i18n/languages/zh_TW.ts
