@liujitcn/kratos-admin-core 0.0.28 → 0.0.31

package/dist/package/src/layouts/components/LockScreen.vue

@@ -0,0 +1,450 @@
+<template>
+  <div v-if="lockScreenStore.setupVisible" class="lock-setup-mask" role="presentation">
+    <section class="lock-setup-dialog" role="dialog" aria-modal="true" :aria-label="t('core.layout.lock_screen')">
+      <header class="lock-dialog-header">
+        <h2>{{ t("core.layout.lock_screen") }}</h2>
+        <button class="lock-icon-button" type="button" :aria-label="t('common.action.close')" @click="closeSetup">
+          <el-icon><Close /></el-icon>
+        </button>
+      </header>
+      <div class="lock-dialog-body">
+        <div class="lock-avatar lock-avatar--setup">
+          <img :src="avatarSrc" :alt="t('core.layout.avatar')" @error="handleAvatarError" />
+        </div>
+        <div class="lock-user-name">{{ displayName }}</div>
+        <form class="lock-form" @submit.prevent="handleLock">
+          <el-input
+            v-model="setupPassword"
+            class="lock-input"
+            type="password"
+            size="large"
+            show-password
+            autocomplete="new-password"
+            :placeholder="t('core.layout.lock_screen_password_placeholder')"
+            :aria-label="t('core.layout.lock_screen_password_placeholder')"
+          />
+          <p v-if="setupError" class="lock-form-error">{{ setupError }}</p>
+          <el-button class="lock-submit" type="primary" size="large" native-type="submit" :loading="settingLock">
+            {{ t("core.layout.lock_screen_action") }}
+          </el-button>
+        </form>
+      </div>
+    </section>
+  </div>
+
+  <div v-if="lockScreenStore.isLocked" class="lock-screen" role="dialog" aria-modal="true">
+    <div class="lock-screen__trigger-wrap">
+      <button
+        v-if="!lockScreenStore.unlockVisible"
+        class="lock-screen__trigger"
+        type="button"
+        @click="openUnlock"
+      >
+        <el-icon :size="26"><Lock /></el-icon>
+        <span>{{ t("core.layout.lock_screen_unlock_hint") }}</span>
+      </button>
+      <section v-else class="unlock-panel" :aria-label="t('core.layout.lock_screen')">
+        <div class="lock-avatar lock-avatar--unlock">
+          <img :src="avatarSrc" :alt="t('core.layout.avatar')" @error="handleAvatarError" />
+        </div>
+        <div class="lock-user-name">{{ displayName }}</div>
+        <form class="lock-form" @submit.prevent="handleUnlock">
+          <el-input
+            ref="unlockInputRef"
+            v-model="unlockPassword"
+            class="lock-input"
+            type="password"
+            size="large"
+            show-password
+            autofocus
+            autocomplete="current-password"
+            :placeholder="t('core.layout.lock_screen_password_placeholder')"
+            :aria-label="t('core.layout.lock_screen_password_placeholder')"
+          />
+          <p v-if="lockScreenStore.unlockError" class="lock-form-error">{{ t("core.layout.lock_screen_password_invalid") }}</p>
+          <el-button class="lock-submit" type="primary" size="large" native-type="submit" :loading="unlocking">
+            {{ t("core.layout.lock_screen_enter") }}
+          </el-button>
+        </form>
+        <button class="lock-text-button" type="button" :disabled="loggingOut" @click="returnToLogin">
+          <el-icon><SwitchButton /></el-icon>
+          <span>{{ t("core.layout.lock_screen_return_login") }}</span>
+        </button>
+        <button class="lock-text-button" type="button" @click="closeUnlock">
+          <el-icon><ArrowLeft /></el-icon>
+          <span>{{ t("common.action.back") }}</span>
+        </button>
+      </section>
+    </div>
+    <div class="lock-screen__clock" aria-live="polite">
+      <time class="lock-screen__time">{{ timeText }}</time>
+      <time class="lock-screen__date">{{ dateText }}</time>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="LockScreen">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { LOGIN_URL } from "../../config";
+import defaultAvatar from "../../assets/images/avatar.png";
+import { useLocaleStore } from "../../locales";
+import { useLockScreenStore } from "../../stores/modules/lockScreen";
+import { useUserStore } from "../../stores/modules/user";
+
+const router = useRouter();
+const userStore = useUserStore();
+const lockScreenStore = useLockScreenStore();
+const { locale, t } = useLocaleStore();
+const avatarSrc = ref(defaultAvatar);
+const setupPassword = ref("");
+const unlockPassword = ref("");
+const setupError = ref("");
+const settingLock = ref(false);
+const unlocking = ref(false);
+const loggingOut = ref(false);
+const now = ref(new Date());
+const unlockInputRef = ref<{ focus?: () => void }>();
+let clockTimer: number | undefined;
+
+const displayName = computed(() => userStore.userInfo.nick_name || userStore.userInfo.user_name || t("core.layout.not_set"));
+const timeText = computed(() => {
+  return new Intl.DateTimeFormat(locale.value, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  }).format(now.value);
+});
+const dateText = computed(() => {
+  return new Intl.DateTimeFormat(locale.value, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    weekday: "long"
+  }).format(now.value);
+});
+
+watch(
+  () => userStore.userInfo.avatar,
+  avatar => {
+    avatarSrc.value = avatar || defaultAvatar;
+  },
+  { immediate: true }
+);
+
+watch(
+  () => lockScreenStore.setupVisible,
+  visible => {
+    if (!visible) return;
+    setupPassword.value = "";
+    setupError.value = "";
+  }
+);
+
+watch(
+  () => lockScreenStore.isLocked,
+  locked => {
+    if (locked) {
+      unlockPassword.value = "";
+      nextTick(() => unlockInputRef.value?.focus?.());
+    }
+  }
+);
+
+onMounted(() => {
+  clockTimer = window.setInterval(() => {
+    now.value = new Date();
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (clockTimer) window.clearInterval(clockTimer);
+});
+
+/** 关闭设置锁屏密码界面。 */
+const closeSetup = () => {
+  lockScreenStore.closeSetup();
+};
+
+/** 设置锁屏密码并进入锁屏界面。 */
+const handleLock = async () => {
+  if (!setupPassword.value) {
+    setupError.value = t("core.layout.lock_screen_password_required");
+    return;
+  }
+
+  settingLock.value = true;
+  setupError.value = "";
+  try {
+    await lockScreenStore.lock(setupPassword.value);
+  } finally {
+    settingLock.value = false;
+  }
+};
+
+/** 显示锁屏密码输入界面。 */
+const openUnlock = () => {
+  lockScreenStore.openUnlock();
+  nextTick(() => unlockInputRef.value?.focus?.());
+};
+
+/** 校验锁屏密码并返回当前管理页面。 */
+const handleUnlock = async () => {
+  if (!unlockPassword.value) {
+    lockScreenStore.unlockError = true;
+    return;
+  }
+
+  unlocking.value = true;
+  try {
+    await lockScreenStore.unlock(unlockPassword.value);
+    if (!lockScreenStore.isLocked) unlockPassword.value = "";
+  } finally {
+    unlocking.value = false;
+  }
+};
+
+/** 返回登录页并清理当前登录态。 */
+const returnToLogin = async () => {
+  if (loggingOut.value) return;
+
+  loggingOut.value = true;
+  try {
+    await userStore.logout();
+    await router.replace(LOGIN_URL);
+  } finally {
+    loggingOut.value = false;
+  }
+};
+
+/** 锁屏首页不再显示密码输入。 */
+const closeUnlock = () => {
+  lockScreenStore.closeUnlock();
+  unlockPassword.value = "";
+};
+
+/** 头像加载失败时回退到本地默认头像。 */
+const handleAvatarError = () => {
+  avatarSrc.value = defaultAvatar;
+};
+</script>
+
+<style scoped lang="scss">
+.lock-setup-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 4100;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  background: rgb(0 0 0 / 60%);
+}
+.lock-setup-dialog {
+  width: min(720px, 100%);
+  overflow: hidden;
+  color: var(--el-text-color-primary);
+  background: var(--el-bg-color-overlay);
+  border: 1px solid var(--el-border-color);
+  border-radius: 16px;
+  box-shadow: 0 24px 80px rgb(0 0 0 / 28%);
+}
+.lock-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 26px 32px;
+  border-bottom: 1px solid var(--el-border-color-light);
+  h2 {
+    margin: 0;
+    font-size: 28px;
+    line-height: 1.25;
+  }
+}
+.lock-icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  color: var(--el-text-color-secondary);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  &:hover {
+    color: var(--el-text-color-primary);
+    background: var(--el-fill-color-light);
+  }
+}
+.lock-dialog-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 36px 32px 44px;
+}
+.lock-avatar {
+  overflow: hidden;
+  background: var(--el-fill-color-light);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 50%;
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  &--setup {
+    width: 168px;
+    height: 168px;
+  }
+  &--unlock {
+    width: 132px;
+    height: 132px;
+  }
+}
+.lock-user-name {
+  margin-top: 20px;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--el-text-color-primary);
+}
+.lock-form {
+  width: min(100%, 560px);
+  margin-top: 34px;
+}
+.lock-input {
+  :deep(.el-input__wrapper) {
+    min-height: 58px;
+    padding: 0 18px;
+    background: transparent;
+    border: 1px solid var(--el-border-color);
+    border-radius: 12px;
+    box-shadow: none;
+  }
+  :deep(.el-input__inner) {
+    font-size: 18px;
+  }
+}
+.lock-form-error {
+  margin: 10px 2px 0;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--el-color-danger);
+}
+.lock-submit {
+  width: 100%;
+  min-height: 56px;
+  margin-top: 28px;
+  border-radius: 10px;
+}
+.lock-screen {
+  position: fixed;
+  inset: 0;
+  z-index: 4000;
+  display: flex;
+  justify-content: center;
+  color: var(--el-text-color-primary);
+  background: var(--el-bg-color-page);
+}
+.lock-screen__trigger-wrap {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  padding-top: clamp(28px, 7vh, 72px);
+}
+.lock-screen__trigger {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 10px 18px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-secondary);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+  &:hover,
+  &:focus-visible {
+    color: var(--el-text-color-primary);
+    outline: none;
+    background: var(--el-fill-color-light);
+  }
+}
+.unlock-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: min(520px, calc(100vw - 32px));
+  padding: 24px;
+}
+.unlock-panel .lock-form {
+  margin-top: 28px;
+}
+.lock-text-button {
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  padding: 4px 8px;
+  margin-top: 24px;
+  font-size: 15px;
+  color: var(--el-text-color-secondary);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  &:hover,
+  &:focus-visible {
+    color: var(--el-text-color-primary);
+    outline: none;
+    background: var(--el-fill-color-light);
+  }
+  &:disabled {
+    cursor: wait;
+    opacity: 0.6;
+  }
+}
+.lock-screen__clock {
+  position: absolute;
+  right: 24px;
+  bottom: clamp(22px, 6vh, 64px);
+  left: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+}
+.lock-screen__time {
+  font-size: clamp(44px, 8vw, 88px);
+  font-weight: 300;
+  line-height: 1;
+}
+.lock-screen__date {
+  margin-top: 14px;
+  font-size: clamp(17px, 2.4vw, 26px);
+  line-height: 1.35;
+  color: var(--el-text-color-secondary);
+}
+
+@media (width <= 600px) {
+  .lock-dialog-header {
+    padding: 20px 22px;
+    h2 {
+      font-size: 24px;
+    }
+  }
+  .lock-dialog-body {
+    padding: 28px 20px 32px;
+  }
+  .lock-avatar--setup {
+    width: 132px;
+    height: 132px;
+  }
+  .lock-screen__clock {
+    bottom: 28px;
+  }
+}
+</style>

package/dist/package/src/layouts/index.vue

@@ -3,6 +3,7 @@
   <el-watermark id="watermark" :font="font" :content="watermarkContent">
     <component :is="LayoutComponents[layout]" />
     <ThemeDrawer />
+    <LockScreen />
   </el-watermark>
 </template>
 
@@ -12,6 +13,7 @@ import { LayoutType } from "../stores/interface";
 import { useGlobalStore } from "../stores/modules/global";
 import { useConfigStore } from "../stores/modules/config";
 import ThemeDrawer from "./components/ThemeDrawer/index.vue";
+import LockScreen from "./components/LockScreen.vue";
 import LayoutVertical from "./LayoutVertical/index.vue";
 import LayoutClassic from "./LayoutClassic/index.vue";
 import LayoutTransverse from "./LayoutTransverse/index.vue";

package/dist/package/src/layouts/indexAsync.vue

@@ -10,6 +10,7 @@
       </template>
     </suspense>
     <ThemeDrawer />
+    <LockScreen />
   </el-watermark>
 </template>
 
@@ -20,6 +21,7 @@ import { useGlobalStore } from "../stores/modules/global";
 import { useConfigStore } from "../stores/modules/config";
 import Loading from "../components/Loading/index.vue";
 import ThemeDrawer from "./components/ThemeDrawer/index.vue";
+import LockScreen from "./components/LockScreen.vue";
 
 const LayoutComponents: Record<LayoutType, Component> = {
   vertical: defineAsyncComponent(() => import("./LayoutVertical/index.vue")),

package/dist/package/src/locales/README.md

@@ -1,11 +1,12 @@
 # 管理端 Core 语言包
 
-本目录提供管理端底座和公共组件使用的稳定文案，包括通用操作、字段、状态、登录认证、上传、校验和错误提示。语言包由 `../modules/kratosAdmin.ts` 导入，作为 `kratos-admin` 模块注册到 `packages/core/src/locales/index.ts`，最终由 `bootstrap.ts` 合并到 Vue I18n；core 内组件、hooks、请求错误处理和登录页通过 `t()` 或 `useLocaleStore()` 使用。
+本目录提供管理端底座和公共组件使用的稳定文案，包括通用操作、字段、状态、登录认证、MFA/WebAuthn、上传、校验和错误提示。语言包由 `../modules/kratosAdmin.ts` 导入，作为 `kratos-admin` 模块注册到 `packages/core/src/locales/index.ts`，最终由 `bootstrap.ts` 合并到 Vue I18n；core 内组件、hooks、请求错误处理和登录页通过 `t()` 或 `useLocaleStore()` 使用。
 
 | 文件 | 用途 | 使用位置 |
 | --- | --- | --- |
 | `zh-CN.json` | 简体中文固定 UI 默认语言包，也是所有语言键集合和占位符校验基准。 | 管理端固定文案默认语言及缺失翻译回退。 |
 | `zh-TW.json` | 繁体中文公共语言包。 | 管理端切换为繁体中文时由 Vue I18n 使用。 |
 | `en-US.json` | 英文公共语言包。 | 管理端切换为英文时由 Vue I18n 使用。 |
+| `ja-JP.json` | 日文公共语言包。 | 管理端切换为日文时由 Vue I18n 使用。 |
 
 语言包是标准 JSON，不能在文件内直接写注释；新增语言或修改键后执行仓库根目录的 `make i18n-sync`，脚本会校验所有语言并生成注册产物。语言切换选项固定显示后端 `base_language.native_name`，接口不可用时使用代码内置的原生名称；`common.language.*` 仅用于普通文案和语言迁移初始数据。新增语言的完整文件清单见[国际化语言扩展指南](../../../../../../docs/国际化语言扩展指南.md)。

package/dist/package/src/locales/en-US.json

@@ -47,6 +47,15 @@
   "core.auth.no_menu_permission": "This account has no menu permissions. Contact an administrator.",
   "core.auth.no_permission": "Access denied",
   "core.clipboard.success": "Copied",
+  "core.markdown.action.copy_code": "Copy code",
+  "core.markdown.message.copy_success": "Copied!",
+  "core.markdown.message.copy_failed": "Copy failed!",
+  "core.loading.text": "Loading",
+  "core.layout.avatar": "User avatar",
+  "core.layout.logo_alt": "System logo",
+  "core.login.background_alt": "Login background",
+  "core.layout.info_content": "View the current user's information",
+  "core.layout.password_content": "Change the current user's password",
   "core.cron.cycle_unit.day": "days",
   "core.cron.cycle_unit.hour": "hours",
   "core.cron.cycle_unit.minute": "minutes",
@@ -135,6 +144,14 @@
   "core.layout.info": "Personal information",
   "core.layout.password_change": "Change password",
   "core.layout.unnamed_menu": "Unnamed menu",
+  "core.layout.lock_screen": "Lock screen",
+  "core.layout.lock_screen_action": "Lock",
+  "core.layout.lock_screen_password_placeholder": "Enter a lock screen password",
+  "core.layout.lock_screen_password_required": "Enter a lock screen password",
+  "core.layout.lock_screen_password_invalid": "Incorrect lock screen password",
+  "core.layout.lock_screen_unlock_hint": "Click to unlock",
+  "core.layout.lock_screen_enter": "Enter system",
+  "core.layout.lock_screen_return_login": "Return to login",
   "core.layout.logout_confirm": "Are you sure you want to log out?",
   "core.layout.logout_success": "Logged out",
   "core.layout.not_set": "Not set",
@@ -155,6 +172,25 @@
   "core.login.tenant_code": "Enter tenant code",
   "core.login.user_name": "Enter username",
   "core.login.welcome": "Welcome to the admin console",
+  "core.login.mfa_title": "Multi-factor authentication",
+  "core.login.mfa_code": "Enter the authenticator code",
+  "core.login.mfa_recovery_code": "Recovery code (optional)",
+  "core.login.mfa_setup_title": "Bind multi-factor authentication",
+  "core.login.mfa_setup_qr_alt": "Multi-factor authentication binding QR code",
+  "core.login.mfa_uri_copied": "Binding address copied",
+  "core.login.mfa_show_uri": "Show backup binding address",
+  "core.login.mfa_copy_uri": "Copy binding address",
+  "core.login.mfa_recovery_codes_title": "Save MFA recovery codes",
+  "core.login.mfa_recovery_codes_warning": "Each code works once and will not be shown again after this dialog closes.",
+  "core.login.mfa_recovery_codes_copied": "Recovery codes copied",
+  "core.login.mfa_copy_recovery_codes": "Copy recovery codes",
+  "core.login.mfa_recovery_codes_confirm": "I saved them",
+  "core.login.mfa_setup_success": "Multi-factor authentication enabled. Please sign in again.",
+  "core.login.mfa_webauthn_action": "Use Passkey",
+  "core.login.mfa_webauthn_setup_unsupported": "WebAuthn is not supported on this platform. Use TOTP or a recovery code.",
+  "core.login.mfa_webauthn_setup_invalid": "WebAuthn registration did not return a valid credential.",
+  "core.login.mfa_webauthn_login_unsupported": "WebAuthn is not supported on this platform. Use a recovery code.",
+  "core.login.mfa_webauthn_login_invalid": "WebAuthn authentication did not return a valid credential.",
   "core.oauth.dingtalk": "DingTalk",
   "core.oauth.feishu": "Feishu",
   "core.oauth.wechat": "WeChat",
@@ -164,6 +200,8 @@
   "core.password.error": "Password must contain uppercase and lowercase letters, a number, and a special character, and be at least 8 characters long",
   "core.password.crypto_unsupported": "Password encryption is not supported in this environment",
   "core.password.required": "Password is required",
+  "core.password.verify_title": "Verify password",
+  "core.password.verify_label": "Current password",
   "core.password.strength": "Password strength",
   "core.password.strength.empty": "Not entered",
   "core.password.strength.high": "High",
@@ -276,5 +314,9 @@
   "common.value.yes": "Yes",
   "common.value.no": "No",
   "common.value.unknown": "Unknown",
-  "common.value.none": "None"
+  "common.value.none": "None",
+  "common.value.top_level": "Top level",
+  "common.resource.default": "{resource}",
+  "common.action.delete_resource": "Delete {resource}",
+  "common.action.set_field_status": "Set {field}"
 }

package/dist/package/src/locales/index.ts

@@ -11,7 +11,7 @@ import {
   DAYJS_LOCALE_MAP,
   DEFAULT_LOCALE as GENERATED_DEFAULT_LOCALE,
   SUPPORTED_LOCALES as GENERATED_SUPPORTED_LOCALES,
-  type GeneratedLocale,
+  type GeneratedLocale
 } from "./generated";
 
 /** 管理端已打包的语言区域；运行时可切换列表由 base_language 接口决定。 */
@@ -55,7 +55,9 @@ export function normalizeLocale(value?: string): SupportedLocale {
 
 /** 将接口或系统语言代码解析为已打包的语言区域。 */
 function parseSupportedLocale(value?: string): SupportedLocale | undefined {
-  const normalized = String(value ?? "").replace("_", "-").toLowerCase();
+  const normalized = String(value ?? "")
+    .replace("_", "-")
+    .toLowerCase();
   if (!normalized) return undefined;
   const alias = normalized.startsWith("zh-hk") || normalized.startsWith("zh-mo") ? "zh-tw" : normalized;
   const exact = SUPPORTED_LOCALES.find(locale => locale.toLowerCase() === alias);
@@ -106,10 +108,10 @@ export function initializeLocale(): SupportedLocale {
 export function applyLanguageConfig(response: OptionLanguageResponse): void {
   const options = response.languages.reduce<LocaleOption[]>((items, item) => {
     const languageCode = parseSupportedLocale(item.language_code);
-    if (!languageCode || items.some((option) => option.language_code === languageCode)) return items;
+    if (!languageCode || items.some(option => option.language_code === languageCode)) return items;
     items.push({
       language_code: languageCode,
-      native_name: item.native_name || languageCode,
+      native_name: item.native_name || languageCode
     });
     return items;
   }, []);
@@ -127,7 +129,7 @@ export function getLanguageOptions(): LocaleOption[] {
 
 /** 获取当前可切换的语言区域。 */
 export function getSupportedLocales(): SupportedLocale[] {
-  return getLanguageOptions().map((item) => item.language_code);
+  return getLanguageOptions().map(item => item.language_code);
 }
 
 /** 获取当前规范语言区域。 */
@@ -161,6 +163,13 @@ export function t(key: string, params: LocaleParams = {}): string {
   return String(adminI18n.global.t(key, params));
 }
 
+/** 从指定语言包读取固定文案，供第三方组件配置和跨语言兼容判断使用。 */
+export function getLocaleText(locale: SupportedLocale, key: string): string {
+  const messages = adminI18n.global.getLocaleMessage(locale) as LocaleMessages;
+  const fallbackMessages = adminI18n.global.getLocaleMessage(DEFAULT_LOCALE) as LocaleMessages;
+  return messages[key] ?? fallbackMessages[key] ?? "";
+}
+
 /** 管理端响应式语言状态。 */
 export function useLocaleStore() {
   return {
@@ -177,18 +186,13 @@ function getFallbackLanguageOptions(): LocaleOption[] {
   return SUPPORTED_LOCALES.map(languageCode => {
     return {
       language_code: languageCode,
-      native_name: fallbackNativeLanguageName(languageCode),
+      native_name: fallbackNativeLanguageName(languageCode)
     };
   });
 }
 
 function fallbackNativeLanguageName(languageCode: SupportedLocale): string {
-  return {
-    "zh-CN": "简体中文",
-    "zh-TW": "繁體中文",
-    "en-US": "English",
-    "ja-JP": "日本語",
-  }[languageCode];
+  return getLocaleText(languageCode, `common.language.${languageCode}`) || languageCode;
 }
 
 function applyLocale(locale: SupportedLocale): void {