refactor i18n

apps/cli/src/i18n/constants.ts

@@ -1,3 +1,3 @@
-import enUS from './en_us';
+import en from './en';
 
-export type Key = keyof typeof enUS;
+export type Key = keyof typeof en;

apps/cli/src/i18n/index.ts

@@ -1,11 +1,11 @@
 import { Language } from '#/constants';
 import { Key } from './constants';
-import enUS from './en_us';
-import zhCN from './zh_cn';
+import en from './en';
+import zhHans from './zh_hans';
 
-const LANGUAGE_MAP: Record<Language, typeof enUS> = {
-  [Language.EN_US]: enUS,
-  [Language.ZH_CN]: zhCN,
+const LANGUAGE_MAP: Record<Language, typeof en> = {
+  [Language.EN]: en,
+  [Language.ZH_HANS]: zhHans,
 };
 
 export function t(key: Key, language: Language, ...args: string[]) {

apps/cli/src/i18n/zh_cn.ts → apps/cli/src/i18n/zh_hans.ts

@@ -1,6 +1,6 @@
 import { Key } from './constants';
 
-const zhCN: {
+const zhHans: {
   [key in Key]: string;
 } = {
   cicada: '知了',
@@ -42,4 +42,4 @@ const zhCN: {
   shared_musicbill_invitation_not_existed: '共享乐单邀请不存在',
 };
 
-export default zhCN;
+export default zhHans;

apps/pwa/src/global_states/setting.ts

@@ -5,13 +5,16 @@ import logger from '@/utils/logger';
 import { DEFAULT_LANGUAGE, Language } from '#/constants';
 
 function getInitialLanguage() {
-  if (
-    // @ts-expect-error
-    Object.values(Language).includes(window.navigator.language.toLowerCase())
-  ) {
-    return window.navigator.language.toLowerCase() as Language;
+  switch (window.navigator.language.toLowerCase()) {
+    case 'zh':
+    case 'zh-cn': {
+      return Language.ZH_HANS;
+    }
+
+    default: {
+      return DEFAULT_LANGUAGE;
+    }
   }
-  return DEFAULT_LANGUAGE;
 }
 
 const DEFAULT_SETTING: Setting = {

apps/pwa/src/i18n/constants.ts

@@ -1,3 +1,3 @@
-import enUS from './en_us';
+import en from './en';
 
-export type Key = keyof typeof enUS;
+export type Key = keyof typeof en;

apps/pwa/src/i18n/en_us.ts → apps/pwa/src/i18n/en.ts

@@ -28,4 +28,8 @@ export default {
   search: 'search',
   shared_musicbill_invitation: 'shared musicbill invitation',
   public_musicbill_collection: 'public musicbill collection',
+  previous_step: 'previous step',
+  login_code: 'login code',
+  please_enter_login_code: 'please enter login code',
+  welcome_back: 'welcome back',
 };

apps/pwa/src/i18n/index.ts

@@ -4,12 +4,12 @@ import type { Key } from './constants';
 
 let translation: { [key in Key]: string };
 switch (setting.get().language) {
-  case Language.ZH_CN: {
-    ({ default: translation } = await import('./zh_cn'));
+  case Language.ZH_HANS: {
+    ({ default: translation } = await import('./zh_hans'));
     break;
   }
   default: {
-    ({ default: translation } = await import('./en_us'));
+    ({ default: translation } = await import('./en'));
   }
 }
 
@@ -31,8 +31,8 @@ export const LANGUAGE_MAP: Record<
     label: string;
   }
 > = {
-  [Language.EN_US]: { label: 'english(US)' },
-  [Language.ZH_CN]: { label: '中文(中国)' },
+  [Language.EN]: { label: 'english' },
+  [Language.ZH_HANS]: { label: '简体中文' },
 };
 
 export { Key };

apps/pwa/src/i18n/zh_cn.ts → apps/pwa/src/i18n/zh_hans.ts

@@ -30,6 +30,10 @@ const zhCN: {
   search: '搜索',
   shared_musicbill_invitation: '共享乐单邀请',
   public_musicbill_collection: '收藏的公开乐单',
+  previous_step: '上一步',
+  login_code: '登录验证码',
+  please_enter_login_code: '请输入登录验证码',
+  welcome_back: '欢迎回来',
 };
 
 export default zhCN;

apps/pwa/src/pages/login/login_code_panel.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { ChangeEventHandler, KeyboardEventHandler, useState } from 'react';
 import notice from '@/utils/notice';
 import loginRequest from '@/server/base/login';
-import t from '@/global_states/token';
+import tk from '@/global_states/token';
 import p from '@/global_states/profile';
 import getProfile from '@/server/api/get_profile';
 import sleep from '#/utils/sleep';
@@ -12,6 +12,7 @@ import Input from '@/components/input';
 import Button, { Variant } from '@/components/button';
 import DefaultCover from '@/asset/default_cover.jpeg';
 import excludeProperty from '#/utils/exclude_property';
+import { t } from '@/i18n';
 import Paper from './paper';
 import Logo from './logo';
 
@@ -35,13 +36,13 @@ function LoginCodePanel({
   const [logining, setLogining] = useState(false);
   const login = async () => {
     if (!loginCode.length) {
-      return notice.error('请输入登录验证码');
+      return notice.error(t('please_enter_login_code'));
     }
 
     setLogining(true);
     try {
       const token = await loginRequest({ email, loginCode });
-      t.set(token);
+      tk.set(token);
 
       await sleep(0);
 
@@ -62,9 +63,9 @@ function LoginCodePanel({
 
       storage
         .setItem(Key.LAST_LOGIN_EMAIL, email)
-        .catch((error) => logger.error(error, '保存登录邮箱失败'));
+        .catch((error) => logger.error(error, 'Failed to save login email'));
     } catch (error) {
-      logger.error(error, '登录失败');
+      logger.error(error, 'Failed to login');
       notice.error(error.message);
     }
     setLogining(false);
@@ -79,9 +80,9 @@ function LoginCodePanel({
   return (
     <StyledPaper>
       <Logo />
-      <Input label="邮箱" inputProps={{ value: email }} disabled />
+      <Input label={t('email')} inputProps={{ value: email }} disabled />
       <Input
-        label="登录验证码"
+        label={t('login_code')}
         inputProps={{
           value: loginCode,
           onChange: onLoginCodeChange,
@@ -96,10 +97,10 @@ function LoginCodePanel({
         loading={logining}
         onClick={login}
       >
-        继续
+        {t('continue')}
       </Button>
       <Button onClick={toPrevious} disabled={logining}>
-        上一步
+        {t('previous_step')}
       </Button>
     </StyledPaper>
   );

apps/pwa/src/pages/login/user_panel.tsx

@@ -8,6 +8,7 @@ import parseSearch from '@/utils/parse_search';
 import { Query } from '@/constants';
 import Cover, { Shape } from '@/components/cover';
 import Slider from '@/components/slider';
+import { t } from '@/i18n';
 import Paper from './paper';
 import Logo from './logo';
 
@@ -71,7 +72,7 @@ function Profile({ profile }: { profile: ProfileType }) {
         shape={Shape.CIRCLE}
       />
       <div className="text">
-        🎉 欢迎回来,{' '}
+        🎉 {t('welcome_back')},{' '}
         {profile.nickname.length > NICKNAME_MAX_LENGTH
           ? `${profile.nickname.slice(0, NICKNAME_MAX_LENGTH)}...`
           : profile.nickname}

apps/pwa/src/pages/player/controller/cover.tsx

@@ -1,13 +1,12 @@
 import loadImage from '@/utils/load_image';
 import logger from '@/utils/logger';
-import DefaultCover from '@/asset/default_cover.jpeg';
 import { useEffect, useState } from 'react';
 import { animated, useTransition } from 'react-spring';
 import styled from 'styled-components';
 import { MdUnfoldMore } from 'react-icons/md';
 import absoluteFullSize from '@/style/absolute_full_size';
 import { flexCenter } from '@/style/flexbox';
-import PngDefaultCover from './default_cover.jpeg';
+import PngDefaultCover from '@/asset/default_cover.jpeg';
 import playerEventemitter, {
   EventType as PlayerEventType,
 } from '../eventemitter';
@@ -66,7 +65,7 @@ function Wrapper({ cover }: { cover?: string }) {
           }
         })
         .catch((error) => {
-          logger.error(error, '加载音乐封面失败');
+          logger.error(error, 'Failed to load music cover');
           if (!canceled) {
             setSrc(PngDefaultCover);
           }
@@ -75,7 +74,7 @@ function Wrapper({ cover }: { cover?: string }) {
         canceled = true;
       };
     }
-    setSrc(DefaultCover);
+    setSrc(PngDefaultCover);
   }, [cover]);
 
   const transitions = useTransition(src, {

apps/pwa/src/pages/player/header/search.tsx

@@ -14,6 +14,7 @@ import mm from '@/global_states/mini_mode';
 import { Query } from '@/constants';
 import { useLocation } from 'react-router-dom';
 import parseSearch from '@/utils/parse_search';
+import { t } from '@/i18n';
 import eventemitter, { EventType } from '../eventemitter';
 
 const style: CSSProperties = {
@@ -75,7 +76,7 @@ function Wrapper() {
         value: keyword,
         onChange: onKeywordChange,
         onKeyDown,
-        placeholder: '搜索',
+        placeholder: t('search'),
       }}
     />
   );

apps/pwa/src/storage.ts

@@ -6,7 +6,7 @@ export enum Key {
   LAST_LOGIN_EMAIL = 'last_login_email',
   TOKEN = 'token',
   PROFILE = 'profile',
-  SETTING = 'setting_v2',
+  SETTING = 'setting_v3',
   PLAYER_VOLUME = 'player_volume',
 }
 

shared/constants/index.ts

@@ -92,10 +92,10 @@ export const SHARED_MUSICBILL_INVITATION_MINIMAL_TTL = 1000 * 60 * 60 * 24 * 3;
 export const SINGER_MODIFY_RECORD_TTL = 1000 * 60 * 60 * 24 * 180;
 
 export enum Language {
-  EN_US = 'en-us',
-  ZH_CN = 'zh-cn',
+  EN = 'en',
+  ZH_HANS = 'zh-hans',
 }
-export const DEFAULT_LANGUAGE = Language.EN_US;
+export const DEFAULT_LANGUAGE = Language.EN;
 
 export enum CommonQuery {
   VERSION = '__v',