@liujitcn/kratos-admin-core 0.0.28 → 0.0.31

package/dist/package/declarations/src/rpc/system/admin/v1/base_i18n.d.ts

@@ -1,44 +1,48 @@
 import type { Empty } from "../../../google/protobuf/empty";
 /** 统一翻译表目标类型，和 base_i18n.target_type 的值一一对应。 */
-export declare enum TranslationTargetType {
-    /** TRANSLATION_TARGET_TYPE_UNSPECIFIED - 未指定统一翻译表目标类型。 */
-    TRANSLATION_TARGET_TYPE_UNSPECIFIED = 0,
-    /** TRANSLATION_TARGET_TYPE_BASE_CONFIG_VALUE - 系统配置值。 */
-    TRANSLATION_TARGET_TYPE_BASE_CONFIG_VALUE = 1,
-    /** TRANSLATION_TARGET_TYPE_BASE_CONFIG_NAME - 系统配置名称。 */
-    TRANSLATION_TARGET_TYPE_BASE_CONFIG_NAME = 2,
-    /** TRANSLATION_TARGET_TYPE_BASE_DICT - 字典名称。 */
-    TRANSLATION_TARGET_TYPE_BASE_DICT = 3,
-    /** TRANSLATION_TARGET_TYPE_BASE_DICT_ITEM - 字典项标签。 */
-    TRANSLATION_TARGET_TYPE_BASE_DICT_ITEM = 4,
-    /** TRANSLATION_TARGET_TYPE_BASE_MENU - 菜单标题。 */
-    TRANSLATION_TARGET_TYPE_BASE_MENU = 5
+export declare enum I18nTargetType {
+    /** I18N_TARGET_TYPE_UNSPECIFIED - 未指定统一翻译表目标类型。 */
+    I18N_TARGET_TYPE_UNSPECIFIED = 0,
+    /** I18N_TARGET_TYPE_BASE_CONFIG_VALUE - 系统配置值。 */
+    I18N_TARGET_TYPE_BASE_CONFIG_VALUE = 1,
+    /** I18N_TARGET_TYPE_BASE_CONFIG_NAME - 系统配置名称。 */
+    I18N_TARGET_TYPE_BASE_CONFIG_NAME = 2,
+    /** I18N_TARGET_TYPE_BASE_DICT_NAME - 字典名称。 */
+    I18N_TARGET_TYPE_BASE_DICT_NAME = 3,
+    /** I18N_TARGET_TYPE_BASE_DICT_ITEM_LABEL - 字典项标签。 */
+    I18N_TARGET_TYPE_BASE_DICT_ITEM_LABEL = 4,
+    /** I18N_TARGET_TYPE_BASE_MENU_META_TITLE - 菜单标题。 */
+    I18N_TARGET_TYPE_BASE_MENU_META_TITLE = 5,
+    /** I18N_TARGET_TYPE_BASE_JOB_NAME - 定时任务名称。 */
+    I18N_TARGET_TYPE_BASE_JOB_NAME = 6,
+    /** I18N_TARGET_TYPE_BASE_MIGRATION_DESCRIPTION - 数据库迁移说明。 */
+    I18N_TARGET_TYPE_BASE_MIGRATION_DESCRIPTION = 7
 }
 /** 翻译单个文本请求。 */
-export interface DraftBaseTranslationRequest {
+export interface DraftBaseI18nRequest {
     /** 待翻译文本 */
     source: string;
     /** 目标语言区域，不传时翻译所有启用的非主语言 */
     locale?: string | undefined;
 }
 /** 翻译单个文本响应。 */
-export interface DraftBaseTranslationResponse {
+export interface DraftBaseI18nResponse {
     /** 翻译结果 */
-    translations: DraftBaseTranslationItem[];
+    i18ns: DraftBaseI18nItem[];
 }
 /** 翻译单个文本响应。 */
-export interface DraftBaseTranslationItem {
+export interface DraftBaseI18nItem {
     /** 目标语言区域 */
     locale: string;
     /** 翻译文本 */
-    translation: string;
+    i18n: string;
 }
 /** 修改单个翻译信息请求。 */
-export interface UpdateBaseTranslationRequest {
+export interface UpdateBaseI18nRequest {
     /** 翻译记录ID，大于零时优先按ID更新；ID不存在时根据目标信息更新或新增 */
     id: number;
     /** 翻译目标类型，ID为零时用于查询或新增 */
-    target_type: TranslationTargetType;
+    target_type: I18nTargetType;
     /** 目标资源ID，ID为零时用于查询或新增 */
     target_id: number;
     /** 目标语言区域，ID为零时用于查询或新增 */
@@ -51,7 +55,7 @@ export interface BaseI18n {
     /** 翻译记录ID */
     id: number;
     /** 翻译目标类型 */
-    target_type: TranslationTargetType;
+    target_type: I18nTargetType;
     /** 目标资源ID */
     target_id: number;
     /** 语言区域 */
@@ -69,7 +73,7 @@ export interface CodeGenLocaleConfig {
 /** 国际化翻译信息服务。 */
 export interface BaseI18nService {
     /** 翻译单个文本。 */
-    DraftBaseTranslation(request: DraftBaseTranslationRequest): Promise<DraftBaseTranslationResponse>;
+    DraftBaseI18n(request: DraftBaseI18nRequest): Promise<DraftBaseI18nResponse>;
     /** 修改国际化翻译信息 */
-    UpdateBaseTranslation(request: UpdateBaseTranslationRequest): Promise<Empty>;
+    UpdateBaseI18n(request: UpdateBaseI18nRequest): Promise<Empty>;
 }

package/dist/package/declarations/src/security.d.ts

@@ -1,3 +1,5 @@
 export * from "./utils/oauthProvider";
 export * from "./utils/passwordCrypto";
 export * from "./utils/passwordStrength";
+export * from "./utils/webauthn";
+export * from "./utils/clipboard";

package/dist/package/declarations/src/stores/interface/index.d.ts

@@ -52,6 +52,19 @@ export interface UserState {
     tokenExpiresAt: number;
     userInfo: UserInfoForm;
 }
+/** 当前管理端锁屏状态。 */
+export interface LockScreenState {
+    /** 是否处于锁屏状态。 */
+    isLocked: boolean;
+    /** 当前锁屏密码的摘要，仅在锁屏期间持久化。 */
+    passwordHash: string;
+    /** 是否显示设置锁屏密码界面。 */
+    setupVisible: boolean;
+    /** 是否显示解锁输入界面。 */
+    unlockVisible: boolean;
+    /** 最近一次解锁是否失败。 */
+    unlockError: boolean;
+}
 /** 标签页菜单项状态。 */
 export interface TabsMenuProps {
     icon: string;
@@ -88,5 +101,5 @@ export interface SiteConfigState {
     /** 当前登录验证码配置 */
     captcha: LoginCaptchaConfig;
     /** 是否允许显式生成机器翻译草稿。 */
-    translationDraftEnabled: boolean;
+    i18nDraftEnabled: boolean;
 }

package/dist/package/declarations/src/stores/modules/lockScreen.d.ts

@@ -0,0 +1,20 @@
+/** 管理端锁屏状态仓库。 */
+export declare const useLockScreenStore: import("pinia").StoreDefinition<"admin-lock-screen", import("pinia").StateTree, {
+    /** 当前是否已配置可用于解锁的密码。 */
+    isConfigured: (state: import("pinia").StateTree & import("pinia").PiniaCustomStateProperties<import("pinia").StateTree>) => boolean;
+}, {
+    /** 打开锁屏密码设置界面。 */
+    openSetup(): void;
+    /** 关闭锁屏密码设置界面。 */
+    closeSetup(): void;
+    /** 设置锁屏密码并立即进入锁屏状态。 */
+    lock(password: string): Promise<void>;
+    /** 打开锁屏解锁输入界面。 */
+    openUnlock(): void;
+    /** 返回锁屏首页。 */
+    closeUnlock(): void;
+    /** 校验锁屏密码，成功后解除当前锁定。 */
+    unlock(password: string): Promise<boolean>;
+    /** 清理锁屏状态，供退出登录时使用。 */
+    clearLock(): void;
+}>;

package/dist/package/declarations/src/stores/modules/user.d.ts

@@ -1,4 +1,5 @@
-import type { LoginRequest } from "../../rpc/base/v1/login";
+import type { LoginRequest, LoginResponse } from "../../rpc/base/v1/login";
+import type { VerifyMfaRequest } from "../../rpc/base/v1/mfa";
 import type { UserInfoForm } from "../../rpc/system/admin/v1/auth";
 import { UserState } from "../../stores/interface";
 export declare const useUserStore: import("pinia").StoreDefinition<"admin-user", import("pinia").StateTree, {}, {
@@ -17,7 +18,9 @@ export declare const useUserStore: import("pinia").StoreDefinition<"admin-user",
     /** 判断当前访问令牌是否仍然可用 */
     isAuthenticated(): boolean;
     /** 登录 */
-    login(loginRequest: LoginRequest): Promise<void>;
+    login(loginRequest: LoginRequest): Promise<LoginResponse>;
+    /** 校验登录阶段的多因素认证并保存正式令牌。 */
+    verifyMfa(request: VerifyMfaRequest): Promise<LoginResponse>;
     /** 刷新认证令牌 */
     refreshAccessToken(): Promise<import("../../rpc/base/v1/login").RefreshTokenResponse>;
     /** 获取用户信息 */

package/dist/package/declarations/src/stores/runtime.d.ts

@@ -1,5 +1,6 @@
 export { useAuthStore } from "./modules/auth";
 export { useConfigStore } from "./modules/config";
 export { useGlobalStore } from "./modules/global";
+export { useLockScreenStore } from "./modules/lockScreen";
 export { useTabsStore } from "./modules/tabs";
 export { useUserStore } from "./modules/user";

package/dist/package/declarations/src/utils/clipboard.d.ts

@@ -0,0 +1,2 @@
+/** 将文本复制到系统剪贴板，并兼容非安全上下文的管理端开发地址。 */
+export declare function copyText(content: string): Promise<void>;

package/dist/package/declarations/src/utils/webauthn.d.ts

@@ -0,0 +1,4 @@
+/** 执行 WebAuthn 注册 ceremony。 */
+export declare function createWebAuthnCredential(optionsJson: string): Promise<string>;
+/** 执行 WebAuthn 登录 ceremony。 */
+export declare function getWebAuthnAssertion(optionsJson: string): Promise<string>;

package/dist/package/declarations/vite.config.d.ts

@@ -6,6 +6,8 @@ export interface AdminViteConfigOptions {
     optimizeDependencies?: string[];
     /** 静态资源构建输出目录。 */
     outputDirectory?: string;
+    /** 自动组件声明输出位置，外部宿主默认不写入依赖包。 */
+    componentDts?: string | false;
 }
 /** 创建管理端宿主 Vite 配置。 */
 export declare function defineAdminViteConfig(options?: AdminViteConfigOptions): import("vite").UserConfigFnObject;

package/dist/package/src/api/base/mfa.ts

@@ -0,0 +1,114 @@
+import service from "../../utils/request";
+import type { LoginResponse } from "../../rpc/base/v1/login";
+import type {
+  BeginMfaDisableRequest,
+  BeginMfaDisableResponse,
+  BeginMfaEnrollmentRequest,
+  BeginMfaEnrollmentResponse,
+  BeginMfaSetupRequest,
+  BeginMfaSetupResponse,
+  ConfirmMfaEnrollmentRequest,
+  ConfirmMfaEnrollmentResponse,
+  ConfirmMfaSetupRequest,
+  ConfirmMfaSetupResponse,
+  DisableMfaRequest,
+  GetMfaStatusRequest,
+  MfaService,
+  MfaStatusResponse,
+  RecoveryCodesResponse,
+  RegenerateMfaRecoveryCodesRequest,
+  VerifyMfaRequest
+} from "../../rpc/base/v1/mfa";
+import type { Empty } from "../../rpc/google/protobuf/empty";
+
+const MFA_URL = "/v1/base/mfa";
+
+/** 多因素认证公共服务。 */
+export class MfaServiceImpl implements MfaService {
+  /** 校验登录阶段多因素认证。 */
+  VerifyMfa(request: VerifyMfaRequest): Promise<LoginResponse> {
+    return service<VerifyMfaRequest, LoginResponse>({
+      url: `${MFA_URL}/verify`,
+      method: "post",
+      data: request,
+      headers: { Authorization: "no-auth" }
+    });
+  }
+
+  /** 开始登录阶段的强制多因素认证绑定。 */
+  BeginMfaEnrollment(request: BeginMfaEnrollmentRequest): Promise<BeginMfaEnrollmentResponse> {
+    return service<BeginMfaEnrollmentRequest, BeginMfaEnrollmentResponse>({
+      url: `${MFA_URL}/enrollment`,
+      method: "post",
+      data: request,
+      headers: { Authorization: "no-auth" }
+    });
+  }
+
+  /** 确认登录阶段的强制多因素认证绑定。 */
+  ConfirmMfaEnrollment(request: ConfirmMfaEnrollmentRequest): Promise<ConfirmMfaEnrollmentResponse> {
+    return service<ConfirmMfaEnrollmentRequest, ConfirmMfaEnrollmentResponse>({
+      url: `${MFA_URL}/enrollment/confirm`,
+      method: "post",
+      data: request,
+      headers: { Authorization: "no-auth" }
+    });
+  }
+
+  /** 查询当前用户多因素认证状态。 */
+  GetMfaStatus(request: GetMfaStatusRequest): Promise<MfaStatusResponse> {
+    return service<GetMfaStatusRequest, MfaStatusResponse>({
+      url: MFA_URL,
+      method: "get",
+      params: request
+    });
+  }
+
+  /** 开始绑定当前用户的多因素认证方式。 */
+  BeginMfaSetup(request: BeginMfaSetupRequest): Promise<BeginMfaSetupResponse> {
+    return service<BeginMfaSetupRequest, BeginMfaSetupResponse>({
+      url: `${MFA_URL}/setup`,
+      method: "post",
+      data: request
+    });
+  }
+
+  /** 确认绑定当前用户的多因素认证方式。 */
+  ConfirmMfaSetup(request: ConfirmMfaSetupRequest): Promise<ConfirmMfaSetupResponse> {
+    return service<ConfirmMfaSetupRequest, ConfirmMfaSetupResponse>({
+      url: `${MFA_URL}/setup/confirm`,
+      method: "post",
+      data: request
+    });
+  }
+
+  /** 开始禁用 WebAuthn 多因素认证的 Passkey 验证。 */
+  BeginMfaDisable(request: BeginMfaDisableRequest): Promise<BeginMfaDisableResponse> {
+    return service<BeginMfaDisableRequest, BeginMfaDisableResponse>({
+      url: `${MFA_URL}/disable/challenge`,
+      method: "post",
+      data: request
+    });
+  }
+
+  /** 禁用当前用户的多因素认证。 */
+  DisableMfa(request: DisableMfaRequest): Promise<Empty> {
+    return service<DisableMfaRequest, Empty>({
+      url: `${MFA_URL}/disable`,
+      method: "post",
+      data: request
+    });
+  }
+
+  /** 重新生成当前用户的多因素认证恢复码。 */
+  RegenerateMfaRecoveryCodes(request: RegenerateMfaRecoveryCodesRequest): Promise<RecoveryCodesResponse> {
+    return service<RegenerateMfaRecoveryCodesRequest, RecoveryCodesResponse>({
+      url: `${MFA_URL}/recovery-codes`,
+      method: "post",
+      data: request
+    });
+  }
+}
+
+/** defMfaService 多因素认证公共服务实例。 */
+export const defMfaService = new MfaServiceImpl();

package/dist/package/src/components/Dialog/PasswordVerifyDialog.vue

@@ -0,0 +1,176 @@
+<template>
+  <ProDialog
+    :model-value="modelValue"
+    :title="dialogTitle"
+    :width="width"
+    :top="top"
+    :confirm-text="confirmText"
+    :cancel-text="cancelText"
+    :confirm-loading="submitting"
+    :destroy-on-close="destroyOnClose"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnPressEscape"
+    @update:model-value="handleVisibleChange"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+    @close="handleClose"
+    @closed="handleClosed"
+  >
+    <p v-if="description" class="password-verify-dialog__description">{{ description }}</p>
+    <ProForm
+      ref="formRef"
+      :model="form"
+      :fields="fields"
+      :rules="rules"
+      :label-width="labelWidth"
+      @keyup.enter.prevent="handleConfirm"
+    />
+  </ProDialog>
+</template>
+
+<script setup lang="ts" name="PasswordVerifyDialog">
+import { computed, reactive, ref } from "vue";
+import type { FormRules } from "element-plus";
+import ProDialog from "../../components/Dialog/ProDialog.vue";
+import ProForm from "../../components/ProForm/index.vue";
+import type { ProFormField, ProFormInstance } from "../../components/ProForm/interface";
+import { useLocaleStore } from "../../locales";
+import { PASSWORD_CRYPTO_SCENE, encryptPassword } from "../../utils/passwordCrypto";
+import type { PasswordCryptoScene } from "../../utils/passwordCrypto";
+import type { PasswordCrypto } from "../../rpc/common/v1/types";
+
+const { t } = useLocaleStore();
+
+/** 通用密码验证弹窗属性。 */
+interface PasswordVerifyDialogProps {
+  /** 弹窗显示状态。 */
+  modelValue: boolean;
+  /** 弹窗标题。 */
+  title?: string;
+  /** 密码输入前的可选补充说明。 */
+  description?: string;
+  /** 弹窗宽度。 */
+  width?: string | number;
+  /** 弹窗顶部距离。 */
+  top?: string;
+  /** 密码字段标题。 */
+  passwordLabel?: string;
+  /** 密码输入提示。 */
+  passwordPlaceholder?: string;
+  /** 确认按钮文案。 */
+  confirmText?: string;
+  /** 取消按钮文案。 */
+  cancelText?: string;
+  /** 外部业务提交状态。 */
+  confirmLoading?: boolean;
+  /** 密码加密场景。 */
+  scene?: PasswordCryptoScene;
+  /** 是否关闭时销毁内容。 */
+  destroyOnClose?: boolean;
+  /** 是否允许点击遮罩关闭。 */
+  closeOnClickModal?: boolean;
+  /** 是否允许按 Esc 关闭。 */
+  closeOnPressEscape?: boolean;
+  /** 表单标签宽度。 */
+  labelWidth?: string;
+}
+
+const props = withDefaults(defineProps<PasswordVerifyDialogProps>(), {
+  title: "",
+  description: "",
+  width: "500px",
+  top: "8vh",
+  passwordLabel: "",
+  passwordPlaceholder: "",
+  confirmText: "",
+  cancelText: "",
+  confirmLoading: false,
+  scene: PASSWORD_CRYPTO_SCENE.PASSWORD_CRYPTO_SCENE_MFA,
+  destroyOnClose: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: true,
+  labelWidth: "auto"
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  confirm: [password: PasswordCrypto];
+  cancel: [];
+  close: [];
+  closed: [];
+}>();
+
+const formRef = ref<ProFormInstance>();
+const form = reactive({ password: "" });
+const encrypting = ref(false);
+const submitting = computed(() => props.confirmLoading || encrypting.value);
+const dialogTitle = computed(() => props.title || t("core.password.verify_title"));
+const passwordLabel = computed(() => props.passwordLabel || t("core.password.verify_label"));
+const passwordPlaceholder = computed(() => props.passwordPlaceholder || t("core.password.required"));
+const confirmText = computed(() => props.confirmText || t("common.action.confirm"));
+const cancelText = computed(() => props.cancelText || t("common.action.cancel"));
+
+const fields = computed<ProFormField[]>(() => [
+  {
+    prop: "password",
+    label: passwordLabel.value,
+    component: "password",
+    props: {
+      autocomplete: "current-password",
+      placeholder: passwordPlaceholder.value,
+      showPassword: true
+    }
+  }
+]);
+
+const rules = computed<FormRules>(() => ({
+  password: [{ required: true, message: t("core.password.required"), trigger: "blur" }]
+}));
+
+/** 同步弹窗显示状态到外部。 */
+function handleVisibleChange(value: boolean) {
+  emit("update:modelValue", value);
+}
+
+/** 校验密码并向业务方返回加密结果。 */
+async function handleConfirm() {
+  if (submitting.value) return;
+  if (!(await formRef.value?.validate())) return;
+  encrypting.value = true;
+  try {
+    const password = await encryptPassword(form.password, props.scene);
+    emit("confirm", password);
+  } finally {
+    encrypting.value = false;
+  }
+}
+
+/** 对外透传取消事件。 */
+function handleCancel() {
+  emit("cancel");
+}
+
+/** 对外透传关闭事件。 */
+function handleClose() {
+  emit("close");
+}
+
+/** 关闭弹窗后清理密码和校验状态。 */
+function handleClosed() {
+  form.password = "";
+  formRef.value?.clearValidate();
+  emit("closed");
+}
+</script>
+
+<style scoped lang="scss">
+.password-verify-dialog__description {
+  margin: 0 0 16px;
+  color: var(--el-text-color-regular);
+  line-height: 1.6;
+}
+
+.password-verify-dialog__description + :deep(.pro-form) {
+  margin-top: 0;
+}
+</style>

package/dist/package/src/components/Loading/fullScreen.ts

@@ -1,4 +1,5 @@
 import { ElLoading } from "element-plus";
+import { t } from "../../locales";
 
 /* 全局请求 loading */
 let loadingInstance: ReturnType<typeof ElLoading.service>;
@@ -10,7 +11,7 @@ const startLoading = () => {
   loadingInstance = ElLoading.service({
     fullscreen: true,
     lock: true,
-    text: "Loading",
+    text: t("core.loading.text"),
     background: "rgba(0, 0, 0, 0.7)"
   });
 };

package/dist/package/src/components/MarkdownPreview/index.vue

@@ -7,7 +7,7 @@
     :theme="props.isDark ? 'dark' : 'light'"
     preview-theme="github"
     code-theme="github"
-    language="zh-CN"
+    :language="locale"
     :show-code-row-number="false"
     :code-foldable="false"
     :no-mermaid="true"
@@ -26,6 +26,7 @@ import DOMPurify from "dompurify";
 import hljs from "highlight.js";
 import { config as configureMarkdownPreview, MdPreview } from "md-editor-v3";
 import type { MdHeadingId } from "md-editor-v3";
+import { getLocaleText, useLocaleStore } from "../../locales";
 import "md-editor-v3/lib/preview.css";
 
 defineOptions({
@@ -53,12 +54,31 @@ const props = withDefaults(defineProps<MarkdownPreviewProps>(), {
 const generatedId = useId();
 const resolvedId = computed(() => props.id || `core-markdown-preview-${generatedId.replaceAll(":", "")}`);
 const markdownHeadingIdCounts = new Map<string, number>();
+const { locale } = useLocaleStore();
 
 configureMarkdownPreview({
   editorExtensions: {
     highlight: {
       instance: hljs
     }
+  },
+  editorConfig: {
+    languageUserDefined: {
+      "zh-TW": {
+        copyCode: {
+          text: getLocaleText("zh-TW", "core.markdown.action.copy_code"),
+          successTips: getLocaleText("zh-TW", "core.markdown.message.copy_success"),
+          failTips: getLocaleText("zh-TW", "core.markdown.message.copy_failed")
+        }
+      },
+      "ja-JP": {
+        copyCode: {
+          text: getLocaleText("ja-JP", "core.markdown.action.copy_code"),
+          successTips: getLocaleText("ja-JP", "core.markdown.message.copy_success"),
+          failTips: getLocaleText("ja-JP", "core.markdown.message.copy_failed")
+        }
+      }
+    }
   }
 });
 

package/dist/package/src/components/Mfa/MfaRecoveryCodesDialog.vue

@@ -0,0 +1,91 @@
+<template>
+  <ProDialog
+    :model-value="modelValue"
+    :title="t('core.login.mfa_recovery_codes_title')"
+    width="420px"
+    :close-on-click-modal="false"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div class="mfa-recovery-dialog__codes">
+      <span>{{ codesText }}</span>
+      <el-tooltip :content="t('core.login.mfa_copy_recovery_codes')" placement="top">
+        <el-button text circle :aria-label="t('core.login.mfa_copy_recovery_codes')" @click="copyRecoveryCodes">
+          <el-icon class="mfa-recovery-dialog__copy"><CopyDocument /></el-icon>
+        </el-button>
+      </el-tooltip>
+    </div>
+    <p class="mfa-recovery-dialog__warning">{{ t("core.login.mfa_recovery_codes_warning") }}</p>
+    <template #footer>
+      <el-button type="primary" @click="handleConfirm">{{ t("core.login.mfa_recovery_codes_confirm") }}</el-button>
+    </template>
+  </ProDialog>
+</template>
+
+<script setup lang="ts" name="MfaRecoveryCodesDialog">
+import { computed } from "vue";
+import ProDialog from "../../components/Dialog/ProDialog.vue";
+import { useLocaleStore } from "../../locales";
+import { copyText } from "../../utils/clipboard";
+
+/** MFA 恢复码弹窗属性。 */
+interface MfaRecoveryCodesDialogProps {
+  /** 弹窗显示状态。 */
+  modelValue: boolean;
+  /** 本次生成的一次性恢复码。 */
+  codes: string[];
+}
+
+const props = withDefaults(defineProps<MfaRecoveryCodesDialogProps>(), {
+  modelValue: false,
+  codes: () => []
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  confirm: [];
+}>();
+
+const { t } = useLocaleStore();
+const codesText = computed(() => props.codes.join("\n"));
+
+/** 复制当前显示的恢复码。 */
+async function copyRecoveryCodes() {
+  await copyText(codesText.value);
+  ElMessage.success(t("core.login.mfa_recovery_codes_copied"));
+}
+
+/** 关闭弹窗并通知调用方完成绑定流程。 */
+function handleConfirm() {
+  emit("update:modelValue", false);
+  emit("confirm");
+}
+</script>
+
+<style scoped lang="scss">
+.mfa-recovery-dialog__codes {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  color: var(--el-text-color-regular);
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+.mfa-recovery-dialog__codes span {
+  flex: 1;
+  min-width: 0;
+  white-space: pre-wrap;
+}
+
+.mfa-recovery-dialog__copy {
+  color: var(--el-color-primary);
+  font-size: 18px;
+}
+
+.mfa-recovery-dialog__warning {
+  margin: 8px 0 0;
+  color: var(--el-color-warning);
+  font-size: 13px;
+  line-height: 1.6;
+}
+</style>