diff --git a/.env.example b/.env.example index d519ff8..f4aa8e7 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1,3 @@ MONGO_URL="mongodb://cat:meow@localhost:27017/" AUDIO_SEPARATOR_API="http://127.0.0.1:24801" +OPENROUTER_API_KEY="" diff --git a/README.md b/README.md index 01b5987..4a488d5 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,8 @@ Practice Japanese Karaoke lyrics reading and typing at the same time with KaraDa * [ ] 历史成绩和进步曲线 * [x] 唱歌模式 * [x] 自动分离人声和伴奏 + * [ ] 分段处理以加快初始加载速度 + * [ ] 自动预处理下一首歌 * [x] 调节人声伴奏比例 * [x] 跟随音乐滚动歌词 * [ ] 升降调 @@ -23,11 +25,13 @@ Practice Japanese Karaoke lyrics reading and typing at the same time with KaraDa * [ ] 音域分析（自动推荐升降调幅度） * [ ] 电视模式 * [ ] 和手机配对、用手机点歌 + * [ ] 从网易云搜索歌曲 ## Technical Tasks -* [ ] 多语言支持 +* [x] i18n * [ ] 404 page +* [ ] Previous song / next song buttons * [ ] Update an existing playlist * [ ] Allow users to correct lyric pronunciations through correction feedback * [ ] Correct lyrics timing inconsistencies (i.e. 网易云的歌词因为是业余用户上传的，时间戳不一定准确。但是 waveform 里面可以分析出每句歌词的具体开始结束时间，也许可以自动修正) diff --git a/src/app.d.ts b/src/app.d.ts index da08e6d..518120a 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,13 +1,15 @@ // See https://svelte.dev/docs/kit/types#app.d.ts // for information about these interfaces declare global { - namespace App { - // interface Error {} - // interface Locals {} - // interface PageData {} - // interface PageState {} - // interface Platform {} - } + namespace App { + // interface Error {} + interface Locals { + lang: 'en' | 'zh' | 'ja' + } + // interface PageData {} + // interface PageState {} + // interface Platform {} + } } export {}; diff --git a/src/app.html b/src/app.html index 0ea778b..ef0f393 100644 --- a/src/app.html +++ b/src/app.html @@ -1,5 +1,5 @@ - + diff --git a/src/hooks.server.ts b/src/hooks.server.ts index d795584..4eb73fe 100644 --- a/src/hooks.server.ts +++ b/src/hooks.server.ts @@ -1,3 +1,27 @@ import { checkAudioSeparator } from '$lib/server/separator'; +import type { Handle } from '@sveltejs/kit'; checkAudioSeparator().catch(e => console.error('Audio separator check failed:', e)); + +export const handle: Handle = async ({ event, resolve }) => { + const langCookie = event.cookies.get('lang'); + if (langCookie === 'zh' || langCookie === 'en' || langCookie === 'ja') { + event.locals.lang = langCookie; + } else { + const acceptLanguage = event.request.headers.get('accept-language'); + // Simple check: if zh is present, prefer it (unless en is weighted higher, but let's keep it simple for now) + // A better parser would parse q-values. + // For now, let's assume if 'zh' is in the header, the user likely understands Chinese. + if (acceptLanguage && acceptLanguage.includes('zh')) { + event.locals.lang = 'zh'; + } else if (acceptLanguage && acceptLanguage.includes('ja')) { + event.locals.lang = 'ja'; + } else { + event.locals.lang = 'en'; + } + } + + return resolve(event, { + transformPageChunk: ({ html }) => html.replace('%lang%', event.locals.lang) + }); +}; diff --git a/src/lib/i18n/en.ts b/src/lib/i18n/en.ts new file mode 100644 index 0000000..d8176dd --- /dev/null +++ b/src/lib/i18n/en.ts @@ -0,0 +1,131 @@ +export default { + home: { + titles: { + continue: 'Continue From Last Session', + history: 'History', + myPlaylists: 'My Playlists', + recPlaylists: 'Recommended Playlists' + }, + btn: { + importFromNetease: 'Import from NetEase' + }, + text: { + playlistCreatedBy: 'From {u}' + } + }, + admin: { + neteaseLogin: { + title: 'NetEase Login', + scanTitle: 'Scan to Login', + scanTip: 'Please use NetEase Music App to scan', + generating: 'Generating QR Code...', + scanned: 'Scanned', + confirm: 'Please confirm login on your phone', + success: 'Login Successful', + errorPrefix: 'Error: ' + } + }, + import: { + netease: { + title: 'Import from NetEase', + status: { + importing: 'Importing', + success: 'Import Complete', + error: 'Import Failed' + }, + songs: 'songs', + tip: 'Go to NetEase Music App, find a Japanese playlist you like, click share, copy link, and paste it here to start importing!', + inputLabel: 'NetEase Playlist Link / ID', + btnStart: 'Start Import', + btnView: 'View Playlist' + } + }, + playlist: { + detail: { + title: 'Playlist Details', + creator: 'Creator: ', + count: 'Songs: ', + startPractice: 'Start Practice', + songList: 'Song List', + songs: 'songs' + }, + list: { + mine: 'My Playlists', + rec: 'Recommended Playlists', + import: 'Import from NetEase', + created: 'Created by {u}', + count: '{n} songs' + } + }, + results: { + title: 'Practice Results', + fields: { + speed: 'Speed', + accuracy: 'Accuracy', + realtime: 'Realtime Rate', + count: 'Count', + time: 'Time', + duration: 'Duration' + }, + units: { + cpm: 'CPM', + percent: '%', + x: 'x', + char: 'chars' + }, + chart: { + speed: 'Speed (CPM)', + accuracy: 'Accuracy (%)' + }, + btn: { + next: 'Next Song', + back: 'Back to Playlist', + retry: 'Retry' + } + }, + song: { + mode: { + typing: 'Typing Mode', + music: 'Music Mode', + karaoke: 'Singing Mode' + }, + karaoke: { + noVocals: 'No vocal separation track detected, cannot adjust vocal volume. Please process in song details page first.' + }, + play: { + speed: 'Speed: ', + accuracy: 'Accuracy: ', + stats: { + right: 'Right: ', + fuzzy: 'Fuzzy: ', + wrong: 'Wrong: ', + remaining: 'Remaining: ' + } + } + }, + user: { + title: 'Account Management', + loginSuccess: { + title: 'Login Successful', + content: 'Login Successful!', + jump: 'Jump' + }, + generateCode: { + title: 'Generate Sync Code', + copy: 'Copy', + success: 'Sync Code Generated! Code is: {code}', + expiry: 'This code will expire after use or in 7 days if unused.' + }, + desc: { + intro: 'This App uses a sync code system like Japanese mobile games, no email/password registration needed.', + instruction: 'To login on another device, click "Generate Sync Code" then click "Login" on the target device.', + loginMode: 'You are in "Sync Login" page. Get a code from another device and enter it below to login.' + }, + input: 'Enter Sync Code', + btn: { + generate: 'Generate Sync Code', + loginWithCode: 'Login with Sync Code', + login: 'Login' + } + } +} \ No newline at end of file diff --git a/src/lib/i18n/index.ts b/src/lib/i18n/index.ts new file mode 100644 index 0000000..50024eb --- /dev/null +++ b/src/lib/i18n/index.ts @@ -0,0 +1,46 @@ +import { getContext, setContext } from 'svelte' +import EN from "./en" +import ZH from "./zh" +import JA from "./ja" + + +// i18n related files: +// src\hooks.server.ts +// src\routes\+layout.server.ts + +type Lang = 'en' | 'zh' | 'ja' + +const msgs: Record = { + en: EN, + zh: ZH, + ja: JA +} + +const I18N_KEY = Symbol('i18n') + +export const initI18n = (lang: Lang) => { + setContext(I18N_KEY, msgs[lang]) +} + +export const getI18n = () => { + return getContext(I18N_KEY) || msgs['en'] +} + +export const setLanguage = (lang: Lang) => { + document.cookie = `lang=${lang}; path=/; max-age=31536000` + location.reload() +} + +export {} + +declare global { + interface String { + sed(variables: { [index: string]: any }): string + } +} + +String.prototype.sed = function (variables: { [index: string]: any }) { + return this.replace(/{(.*?)}/g, (_: string, v: string | number) => variables[v] + "") +} + +Object.defineProperty(String.prototype, 'sed', { enumerable: false }) diff --git a/src/lib/i18n/ja.ts b/src/lib/i18n/ja.ts new file mode 100644 index 0000000..0cdff11 --- /dev/null +++ b/src/lib/i18n/ja.ts @@ -0,0 +1,131 @@ +export default { + home: { + titles: { + continue: '前回のセッションから続ける', + history: '履歴', + myPlaylists: 'マイプレイリスト', + recPlaylists: 'おすすめプレイリスト' + }, + btn: { + importFromNetease: 'NetEaseからインポート' + }, + text: { + playlistCreatedBy: '{u} 作成' + } + }, + admin: { + neteaseLogin: { + title: 'NetEaseログイン', + scanTitle: 'スキャンしてログイン', + scanTip: 'NetEase Musicアプリでスキャンしてください', + generating: 'QRコードを生成中...', + scanned: 'スキャン完了', + confirm: '携帯電話でログインを確認してください', + success: 'ログイン成功', + errorPrefix: 'エラー: ' + } + }, + import: { + netease: { + title: 'NetEaseからインポート', + status: { + importing: 'インポート中', + success: 'インポート完了', + error: 'インポート失敗' + }, + songs: '曲', + tip: 'NetEase Musicアプリでお気に入りの日本語プレイリストを見つけ、共有をクリックし、リンクをコピーしてここに貼り付けると、インポートを開始できます！', + inputLabel: 'NetEaseプレイリストリンク / ID', + btnStart: 'インポート開始', + btnView: 'プレイリストを表示' + } + }, + playlist: { + detail: { + title: 'プレイリスト詳細', + creator: '作成者: ', + count: '曲数: ', + startPractice: '練習開始', + songList: '曲リスト', + songs: '曲' + }, + list: { + mine: 'マイプレイリスト', + rec: 'おすすめプレイリスト', + import: 'NetEaseからインポート', + created: '{u} 作成', + count: '{n} 曲' + } + }, + results: { + title: '練習結果', + fields: { + speed: '速度', + accuracy: '正確率', + realtime: 'リアルタイム率', + count: '文字数', + time: '時間', + duration: '曲の長さ' + }, + units: { + cpm: 'CPM', + percent: '%', + x: 'x', + char: '文字' + }, + chart: { + speed: '速度 (CPM)', + accuracy: '正確率 (%)' + }, + btn: { + next: '次の曲', + back: 'プレイリストに戻る', + retry: 'もう一度' + } + }, + song: { + mode: { + typing: 'タイピングモード', + music: '音楽モード', + karaoke: '歌うモード' + }, + karaoke: { + noVocals: 'ボーカル分離トラックが検出されないため、ボーカル音量を調整できません。まず曲の詳細ページで処理してください。' + }, + play: { + speed: '速度: ', + accuracy: '正確率: ', + stats: { + right: '正解：', + fuzzy: '曖昧：', + wrong: '不正解：', + remaining: '残り：' + } + } + }, + user: { + title: 'アカウント管理', + loginSuccess: { + title: 'ログイン成功', + content: 'ログインに成功しました！', + jump: '移動' + }, + generateCode: { + title: '引き継ぎコード生成', + copy: 'コピー', + success: '引き継ぎコードが生成されました！コードは：{code}', + expiry: 'このコードは使用後、または未使用の場合は7日後に無効になります。' + }, + desc: { + intro: 'このアプリは日本のモバイルゲームのように引き継ぎコードシステムを使用しており、メールアドレスやパスワードの登録は不要です。', + instruction: '別のデバイスでログインするには、「引き継ぎコード生成」をクリックし、ログインしたいデバイスで「ログイン」をクリックしてください。', + loginMode: '現在は「引き継ぎログイン」ページです。別のデバイスで引き継ぎコードを取得し、下の入力欄に入力して「ログイン」をクリックしてください。' + }, + input: '引き継ぎコードを入力', + btn: { + generate: '引き継ぎコード生成', + loginWithCode: '引き継ぎコードでログイン', + login: 'ログイン' + } + } +} diff --git a/src/lib/i18n/zh.ts b/src/lib/i18n/zh.ts new file mode 100644 index 0000000..305c876 --- /dev/null +++ b/src/lib/i18n/zh.ts @@ -0,0 +1,131 @@ +export default { + home: { + titles: { + continue: '从暂停的位置继续', + history: '历史数据', + myPlaylists: '我的歌单', + recPlaylists: '推荐歌单' + }, + btn: { + importFromNetease: '从网易云导入' + }, + text: { + playlistCreatedBy: '{u} 创建' + } + }, + admin: { + neteaseLogin: { + title: '网易云登录', + scanTitle: '扫码登录', + scanTip: '请使用网易云音乐 APP 扫码', + generating: '正在生成二维码...', + scanned: '已扫描', + confirm: '请在手机上确认登录', + success: '登录成功', + errorPrefix: '错误: ' + } + }, + import: { + netease: { + title: '从网易云导入', + status: { + importing: '正在导入', + success: '导入完成', + error: '导入出错' + }, + songs: '首歌曲', + tip: '去网易云 APP 找一个你喜欢的日本语歌单，点击分享，再点击复制链接，然后把链接粘贴到这里就可以开始导入了！', + inputLabel: '网易云歌单链接 / ID', + btnStart: '开始导入', + btnView: '查看歌单' + } + }, + playlist: { + detail: { + title: '歌单详情', + creator: '创建者: ', + count: '歌曲数: ', + startPractice: '开始练习', + songList: '歌曲列表', + songs: '首歌曲' + }, + list: { + mine: '我的歌单', + rec: '推荐歌单', + import: '从网易云导入', + created: '{u} 创建', + count: '{n} 首歌' + } + }, + results: { + title: '练习结果', + fields: { + speed: '速度', + accuracy: '准确率', + realtime: '实时率', + count: '字数', + time: '用时', + duration: '歌曲时长' + }, + units: { + cpm: 'CPM', + percent: '%', + x: 'x', + char: '字' + }, + chart: { + speed: '速度 (CPM)', + accuracy: '准确率 (%)' + }, + btn: { + next: '下一首', + back: '返回歌单', + retry: '再来一次' + } + }, + song: { + mode: { + typing: '打字模式', + music: '音乐模式', + karaoke: '唱歌模式' + }, + karaoke: { + noVocals: '未检测到人声分离音轨，无法调节人声音量。请先在歌曲详情页进行处理。' + }, + play: { + speed: '速度: ', + accuracy: '正确率: ', + stats: { + right: '正确：', + fuzzy: '模糊：', + wrong: '错误：', + remaining: '剩余：' + } + } + }, + user: { + title: '账号管理', + loginSuccess: { + title: '登录成功', + content: '登录成功！', + jump: '跳转' + }, + generateCode: { + title: '生成引继码', + copy: '复制', + success: '引继码生成成功！生成的引继码是：{code}', + expiry: '这个引继码将会在使用之后、或者未使用的 7 天后会失效' + }, + desc: { + intro: '这个 App 像日本的手机游戏一样采用引继码系统管理账号，并不需要用邮箱密码注册帐号。', + instruction: '如果想要在另一个设备上登录账号，请点击「生成引继码」然后在想要登录的设备上点击「登录」', + loginMode: '您当前在「引继登录」页面，请在另一个设备上获取引继码之后输入到下面的输入框内点击「登录」' + }, + input: '输入引继码', + btn: { + generate: '生成引继码', + loginWithCode: '用引继码登录', + login: '登录' + } + } +} \ No newline at end of file diff --git a/src/lib/server/songs.ts b/src/lib/server/songs.ts index d41124c..fbc00de 100644 --- a/src/lib/server/songs.ts +++ b/src/lib/server/songs.ts @@ -140,7 +140,7 @@ export const getSongUrl = async (id: number | string) => { // ///////////////////////////////////////////////////////////////////////////// // API for Song Preparation -export interface ProgressItem { task: string, progress: number } +export interface ProgressItem { id: string, task: string, progress: number } export interface SongProcessState { items: ProgressItem[], status: 'running' | 'done' | 'error' } const songProcessingStatus = new Map() @@ -152,20 +152,20 @@ export const prepareSong = async (songId: number) => { const state: SongProcessState = { items: [], status: 'running' } songProcessingStatus.set(songId, state) - const addTask = (task: string) => ({ task, progress: 0 }).also(it => state.items.push(it)) + const addTask = (id: string, task: string) => ({ id, task, progress: 0 }).also(it => state.items.push(it)) try { // 1. Get Lyrics - const taskLyrics = addTask('从网易云获取歌词') + const taskLyrics = addTask('lyrics', '从网易云获取歌词') const raw = await getLyricsRaw(songId) taskLyrics.progress = 1 if (raw.lang !== 'jpn') { - addTask('错误: 不是日语歌曲').progress = -1 + addTask('error', '错误: 不是日语歌曲').progress = -1 return state.status = 'error' } // 2. AI Process - const taskAI = addTask('AI 标注歌词读音') + const taskAI = addTask('ai', 'AI 标注歌词读音') // Check cache if (await checkLyricsProcessed(songId)) taskAI.progress = 1 @@ -176,12 +176,12 @@ export const prepareSong = async (songId: number) => { } // 3. Audio - const taskAudio = addTask('从网易云获取音乐') + const taskAudio = addTask('music', '从网易云获取音乐') await getSongUrl(songId) taskAudio.progress = 1 // 4. Source Separation - const taskSeparation = addTask('AI 人声分离') + const taskSeparation = addTask('separation', 'AI 人声分离') const inputPath = path.join(CACHE_DIR, `${songId}/exhigh.mp3`) const outputDir = path.join(CACHE_DIR, `${songId}`) @@ -189,14 +189,14 @@ export const prepareSong = async (songId: number) => { await separateSong(inputPath, outputDir) taskSeparation.progress = 1 } catch (e: any) { - addTask(`错误: ${e.message}`).progress = -1 + addTask('error', `错误: ${e.message}`).progress = -1 // Don't fail the whole process, just this step } state.status = 'done' } catch (e) { - addTask(`错误: ${eToString(e)}`).progress = -1 + addTask('error', `错误: ${eToString(e)}`).progress = -1 state.status = 'error' } } diff --git a/src/lib/ui/appbar/AppBar.svelte b/src/lib/ui/appbar/AppBar.svelte index fe5f1d2..c9975b3 100644 --- a/src/lib/ui/appbar/AppBar.svelte +++ b/src/lib/ui/appbar/AppBar.svelte @@ -8,12 +8,13 @@ onclick: () => void } - let { title, sub, account, right, children }: { + let { title, sub, account, right, children, moreIcon }: { title?: string sub?: string account?: () => void right?: Icon[] children?: any + moreIcon?: string } = $props() let showMenu = $state(false) @@ -37,7 +38,7 @@ {/each} {#if children} - showMenu = !showMenu} /> + showMenu = !showMenu} /> {/if} diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts index 38dc587..331d9bf 100644 --- a/src/routes/+layout.server.ts +++ b/src/routes/+layout.server.ts @@ -1,7 +1,7 @@ import { createUser, login } from '$lib/server/user' import type { LayoutServerLoad } from './$types' -export const load: LayoutServerLoad = async ({ cookies, request }) => { +export const load: LayoutServerLoad = async ({ cookies, request, locals }) => { let session = cookies.get('session') const registUA = request.headers.get('user-agent') || '' @@ -20,7 +20,7 @@ export const load: LayoutServerLoad = async ({ cookies, request }) => { try { const user = structuredClone(await login(session)) - return { user } + return { user, lang: locals.lang } } catch (e) { // Invalid session, create new session = await createUser(registUA) @@ -32,6 +32,6 @@ export const load: LayoutServerLoad = async ({ cookies, request }) => { maxAge: 60 * 60 * 24 * 365 }) const user = structuredClone(await login(session)) - return { user } + return { user, lang: locals.lang } } } \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 39f0512..4224746 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -6,10 +6,12 @@ import "../style/material.scss" import '@unocss/reset/normalize.css' import '@unocss/reset/tailwind-v4.css' + import { initI18n } from "$lib/i18n" import type { LayoutProps } from "./$types" import { onNavigate } from '$app/navigation' let { data, children }: LayoutProps = $props() + initI18n(data.lang || 'en') // This function is called when the user navigates to a new page, it will start the view transition onNavigate((navigation) => { diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 482cbca..4ffc648 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,14 +1,18 @@ - goto('/user')} right={[ - {icon: "i-material-symbols:settings-rounded", onclick: () => alert('Settings clicked')} -]} /> + goto('/user')} moreIcon="i-material-symbols:translate-rounded"> + setLanguage('en')}>English + setLanguage('zh')}>中文 + setLanguage('ja')}>日本語 +
{#if data.last} - +
{/if} -
- +
- +
{#each data.recPlaylists as playlist} @@ -64,7 +70,7 @@
{playlist.name}
-
{playlist.creator.nickname} 创建
+
{t.text.playlistCreatedBy.sed({u: playlist.creator.nickname})}
 {/each} diff --git a/src/routes/admin/netease-login/+page.svelte b/src/routes/admin/netease-login/+page.svelte index 4931051..45f8750 100644 --- a/src/routes/admin/netease-login/+page.svelte +++ b/src/routes/admin/netease-login/+page.svelte @@ -12,7 +12,9 @@ This page is vibe-coded. It's not a part of the regular UI intended for users an import { API } from '$lib/client'; import { fade, scale } from 'svelte/transition'; import AppBar from "$lib/ui/appbar/AppBar.svelte"; - import { Layer } from "m3-svelte"; + import { getI18n } from "$lib/i18n"; + + const t = getI18n().admin.neteaseLogin; let status = $state<'loading' | 'waiting_scan' | 'waiting_confirm' | 'success' | 'error'>('loading'); let qrImg = $state(''); @@ -53,20 +55,20 @@ This page is vibe-coded. It's not a part of the regular UI intended for users an }); - +
-

扫码登录

-

请使用网易云音乐 APP 扫码

+

{t.scanTitle}

+

{t.scanTip}

{#if status === 'loading'}
-

正在生成二维码...

+

{t.generating}

{:else if status === 'waiting_scan'}
@@ -78,8 +80,8 @@ This page is vibe-coded. It's not a part of the regular UI intended for users an
-

已扫描

-

请在手机上确认登录

+

{t.scanned}

+

{t.confirm}

{:else if status === 'success'} @@ -88,7 +90,7 @@ This page is vibe-coded. It's not a part of the regular UI intended for users an
-

登录成功

+

{t.success}

{:else if status === 'error'} @@ -96,7 +98,7 @@ This page is vibe-coded. It's not a part of the regular UI intended for users an
-

错误: {errorMessage}

+

{t.errorPrefix}{errorMessage}

{/if}
diff --git a/src/routes/import/netease/+page.svelte b/src/routes/import/netease/+page.svelte index f6de6e6..95b96ce 100644 --- a/src/routes/import/netease/+page.svelte +++ b/src/routes/import/netease/+page.svelte @@ -6,6 +6,9 @@ import { API } from "$lib/client" import ErrorDialog from "$lib/ui/status/ErrorDialog.svelte" import ProgressList from "$lib/ui/ProgressList.svelte" + import { getI18n } from "$lib/i18n" + + const t = getI18n().import.netease let link = $state('') @@ -34,8 +37,8 @@ return '' } - let listTitle = $derived(status === 'idle' ? '' : (status === 'importing' ? '正在导入' : (status === 'success' ? '导入完成' : '导入出错'))) - let listSubtitle = $derived(`${progress.done} / ${progress.total} 首歌曲`) + let listTitle = $derived(status === 'idle' ? '' : (status === 'importing' ? t.status.importing : (status === 'success' ? t.status.success : t.status.error))) + let listSubtitle = $derived(`${progress.done} / ${progress.total} ${t.songs}`) let listPercent = $derived(progress.total ? progress.done / progress.total * 100 : 0) let listItems = $derived(songs.map(song => ({ title: song.song.name, @@ -72,26 +75,26 @@ } - +
- 去网易云 APP 找一个你喜欢的日本语歌单，点击分享，再点击复制链接，然后把链接粘贴到这里就可以开始导入了！ + {t.tip}
- +
{#if status === 'idle'} - + {:else if status === 'success'} - + {/if}
diff --git a/src/routes/playlist/[id]/+page.svelte b/src/routes/playlist/[id]/+page.svelte index 0de4172..a149b03 100644 --- a/src/routes/playlist/[id]/+page.svelte +++ b/src/routes/playlist/[id]/+page.svelte @@ -5,6 +5,9 @@ import Button from "$lib/ui/Button.svelte" import SongInfo from "$lib/ui/listitem/SongInfo.svelte" import { API } from "$lib/client" + import { getI18n } from "$lib/i18n" + + const t = getI18n().playlist.detail let { data }: PageProps = $props() @@ -42,7 +45,7 @@ } -
{meta.name}
-
创建者: {meta.creator.nickname}
-
歌曲数: {meta.trackCount}
+
{t.creator}{meta.creator.nickname}
+
{t.count}{meta.trackCount}
- +
-
歌曲列表
-
{songs.length} 首歌曲
+
{t.songList}
+
{songs.length} {t.songs}
{#each songs as song, index} diff --git a/src/routes/playlists/[category]/+page.svelte b/src/routes/playlists/[category]/+page.svelte index e236d57..aa25c12 100644 --- a/src/routes/playlists/[category]/+page.svelte +++ b/src/routes/playlists/[category]/+page.svelte @@ -4,18 +4,21 @@ import ImageListItem from "$lib/ui/listitem/ImageListItem.svelte" import MenuItem from "$lib/ui/material3/MenuItem.svelte" import type { PageProps } from "./$types" + import { getI18n } from "$lib/i18n" + + const t = getI18n().playlist.list let { data }: PageProps = $props() - - goto("/import/netease")}>从网易云导入 + + goto("/import/netease")}>{t.import}
{#each data.playlists as pl} - + {/each}
diff --git a/src/routes/results/[id]/+page.svelte b/src/routes/results/[id]/+page.svelte index be5e832..b19abbd 100644 --- a/src/routes/results/[id]/+page.svelte +++ b/src/routes/results/[id]/+page.svelte @@ -7,6 +7,9 @@ import Chart from "chart.js/auto" import { API } from "$lib/client" + import { getI18n } from "$lib/i18n" + + const t = getI18n().results import type { NeteaseSong, UserData } from "../../../lib/types" @@ -19,12 +22,12 @@ let duration = endTime - startTime let fields = [ - { label: "速度", value: Math.round(totalTyped / (Math.max(1, duration) / 60000)), unit: "CPM" }, - { label: "准确率", value: totalTyped === 0 ? 100 : Math.round((totalRight / totalTyped) * 10000) / 100, unit: "%" }, - { label: "实时率", value: data.result.realTimeFactor.toFixed(2), unit: "x" }, - { label: "字数", value: totalTyped, unit: "字" }, - { label: "用时", value: new Date(duration).toISOString().slice(14, 19), unit: "" }, - { label: "歌曲时长", value: new Date(data.song.dt).toISOString().slice(14, 19), unit: "" } + { label: t.fields.speed, value: Math.round(totalTyped / (Math.max(1, duration) / 60000)), unit: t.units.cpm }, + { label: t.fields.accuracy, value: totalTyped === 0 ? 100 : Math.round((totalRight / totalTyped) * 10000) / 100, unit: t.units.percent }, + { label: t.fields.realtime, value: data.result.realTimeFactor.toFixed(2), unit: t.units.x }, + { label: t.fields.count, value: totalTyped, unit: t.units.char }, + { label: t.fields.time, value: new Date(duration).toISOString().slice(14, 19), unit: "" }, + { label: t.fields.duration, value: new Date(data.song.dt).toISOString().slice(14, 19), unit: "" } ] let chartCanvas: HTMLCanvasElement @@ -38,7 +41,7 @@ labels: statsHistory.map((_: any, i: number) => i), datasets: [ { - label: "速度 (CPM)", + label: t.chart.speed, data: statsHistory.map((h: { cpm: number }) => h.cpm), tension: 0.4, pointRadius: 0, @@ -47,7 +50,7 @@ backgroundColor: "rgba(123, 120, 194, 0.1)", }, { - label: "准确率 (%)", + label: t.chart.accuracy, data: statsHistory.map((h: { acc: number }) => h.acc), tension: 0.4, yAxisID: "y1", @@ -146,9 +149,9 @@ } let buttonText = $derived( - nextSongId !== null ? "下一首" : - isPlaylistFinished ? "返回歌单" : - "再来一次" + nextSongId !== null ? t.btn.next : + isPlaylistFinished ? t.btn.back : + t.btn.retry ) @@ -156,7 +159,7 @@
-
练习结果
+
{t.title}
diff --git a/src/routes/song/[id]/+page.svelte b/src/routes/song/[id]/+page.svelte index dafeabb..be9b7ed 100644 --- a/src/routes/song/[id]/+page.svelte +++ b/src/routes/song/[id]/+page.svelte @@ -6,8 +6,24 @@ import ProgressList from "$lib/ui/ProgressList.svelte" import { goto } from "$app/navigation" import { artistAndAlbum } from "$lib/utils" + import { getI18n } from "$lib/i18n" + + const t = getI18n().song.mode let { data } = $props() + let taskStatus = $state({ + lyrics: false, + ai: false, + music: false, + separation: false + }) + + let modes = $derived([ + { icon: "i-material-symbols:keyboard-rounded", label: t.typing, url: `/song/${data.song.id}/play`, disabled: !taskStatus.lyrics || !taskStatus.ai }, + { icon: "i-material-symbols:music-note-rounded", label: t.music, url: `/song/${data.song.id}/play?music=true`, disabled: !taskStatus.music }, + { icon: "i-material-symbols:mic-rounded", label: t.karaoke, url: `/song/${data.song.id}/karaoke`, disabled: !taskStatus.separation }, + ]) + let loadStatus = $state<"idle" | "loading" | "done">("idle") let progressItems = $state([]) let progressPercentage = $state(0) @@ -24,6 +40,15 @@ const state = res.status if (state && state.items) { + // Update task status + for (const item of state.items) { + if (item.progress !== 1) continue + if (item.id === 'lyrics') taskStatus.lyrics = true + if (item.id === 'ai') taskStatus.ai = true + if (item.id === 'music') taskStatus.music = true + if (item.id === 'separation') taskStatus.separation = true + } + progressItems = state.items.map((item: any) => ({ title: item.task + (item.progress > 0 && item.progress < 1 ? ` (${Math.round(item.progress * 100)}%)` : ''), icon: item.progress === 1 ? 'i-material-symbols:check text-green-500' : @@ -50,9 +75,8 @@ -{#if loadStatus === "done"} -
- - -
-{/if} +
+ {#each modes as mode} + + {/each} +
diff --git a/src/routes/song/[id]/karaoke/+page.svelte b/src/routes/song/[id]/karaoke/+page.svelte index 99e8696..dbfad3e 100644 --- a/src/routes/song/[id]/karaoke/+page.svelte +++ b/src/routes/song/[id]/karaoke/+page.svelte @@ -1,6 +1,5 @@