@liujitcn/kratos-admin-core 0.0.29 → 0.0.31

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>

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

@@ -0,0 +1,81 @@
+<template>
+  <div v-if="uri" class="mfa-setup-panel">
+    <img v-if="qrDataUrl" class="mfa-setup-panel__qr" :src="qrDataUrl" :alt="t('core.login.mfa_setup_qr_alt')" />
+    <el-collapse class="mfa-setup-panel__uri">
+      <el-collapse-item :title="t('core.login.mfa_show_uri')" name="uri">
+        <div class="mfa-setup-panel__value">
+          <span class="mfa-setup-panel__text">{{ uri }}</span>
+          <el-tooltip :content="t('core.login.mfa_copy_uri')" placement="top">
+            <el-button text circle :aria-label="t('core.login.mfa_copy_uri')" @click.stop="copySetupUri">
+              <el-icon class="mfa-setup-panel__copy"><CopyDocument /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup lang="ts" name="MfaSetupPanel">
+import { computed } from "vue";
+import qrcode from "qrcode-generator";
+import { useLocaleStore } from "../../locales";
+import { copyText } from "../../utils/clipboard";
+
+/** MFA TOTP 绑定面板属性。 */
+interface MfaSetupPanelProps {
+  /** TOTP 绑定地址。 */
+  uri: string;
+}
+
+const props = defineProps<MfaSetupPanelProps>();
+const { t } = useLocaleStore();
+
+const qrDataUrl = computed(() => {
+  if (!props.uri) return "";
+  const code = qrcode(0, "M");
+  code.addData(props.uri);
+  code.make();
+  return code.createDataURL(4, 8);
+});
+
+/** 复制 TOTP 绑定地址。 */
+async function copySetupUri() {
+  await copyText(props.uri);
+  ElMessage.success(t("core.login.mfa_uri_copied"));
+}
+</script>
+
+<style scoped lang="scss">
+.mfa-setup-panel__qr {
+  display: block;
+  width: 220px;
+  height: 220px;
+  margin: 12px auto;
+  image-rendering: pixelated;
+}
+
+.mfa-setup-panel__uri {
+  margin-top: 12px;
+}
+
+.mfa-setup-panel__value {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  color: var(--el-text-color-regular);
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+.mfa-setup-panel__text {
+  flex: 1;
+  min-width: 0;
+  white-space: pre-wrap;
+}
+
+.mfa-setup-panel__copy {
+  color: var(--el-color-primary);
+  font-size: 18px;
+}
+</style>

package/dist/package/src/components/ProForm/components/ProFormItem.vue

@@ -13,6 +13,8 @@
 
   <el-input-number v-else-if="field.component === 'input-number'" v-model="fieldValue" v-bind="fieldProps" />
 
+  <el-color-picker v-else-if="field.component === 'color-picker'" v-model="fieldValue" v-bind="fieldProps" />
+
   <el-segmented v-else-if="field.component === 'segmented'" v-model="fieldValue" :options="fieldOptions" v-bind="fieldProps" />
 
   <el-checkbox v-else-if="field.component === 'checkbox'" v-model="fieldValue" v-bind="fieldProps">
@@ -28,7 +30,12 @@
       :label="option.label"
       :value="option.value"
       :disabled="option.disabled"
-    />
+    >
+      <span class="pro-form-option">
+        <component :is="option.icon" v-if="option.icon" />
+        <span>{{ option.label }}</span>
+      </span>
+    </el-option>
   </el-select>
 
   <el-radio-group v-else-if="field.component === 'radio-group'" v-model="fieldValue" v-bind="fieldProps">
@@ -189,3 +196,11 @@ const multipleKvValue = computed({
   set: value => setFieldValue(value)
 });
 </script>
+
+<style scoped lang="scss">
+.pro-form-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+</style>

package/dist/package/src/components/ProForm/interface/index.ts

@@ -1,4 +1,5 @@
 import type { FormItemRule } from "element-plus";
+import type { Component } from "vue";
 
 /** ProForm 支持的字段组件类型。 */
 export type ProFormComponentType =
@@ -6,6 +7,7 @@ export type ProFormComponentType =
   | "password"
   | "textarea"
   | "input-number"
+  | "color-picker"
   | "segmented"
   | "switch"
   | "checkbox"
@@ -31,6 +33,8 @@ export interface ProFormOption {
   label: string;
   value: string | number | boolean;
   disabled?: boolean;
+  /** 下拉项前置图标。 */
+  icon?: Component;
   children?: ProFormOption[];
   /** Element Plus 懒加载树节点是否为叶子节点。 */
   isLeaf?: boolean;

package/dist/package/src/components/ProTable/components/ColSetting.vue

@@ -12,7 +12,7 @@
         </el-table-column>
         <template #empty>
           <div class="table-empty">
-            <img src="../../../assets/images/notData.png" alt="notData" />
+            <img src="../../../assets/images/notData.png" :alt="t('core.table.no_configurable_columns')" />
             <div>{{ t("core.table.no_configurable_columns") }}</div>
           </div>
         </template>

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

@@ -41,7 +41,11 @@
           <el-tooltip v-if="showToolButton('refresh')" :content="t('core.table.refresh')" placement="top">
             <el-button class="tool-button" :icon="Refresh" circle @click="handleToolRefresh" />
           </el-tooltip>
-          <el-tooltip v-if="showToolButton('setting') && columns.length" :content="t('core.table.column_setting')" placement="top">
+          <el-tooltip
+            v-if="showToolButton('setting') && columns.length"
+            :content="t('core.table.column_setting')"
+            placement="top"
+          >
             <el-button class="tool-button" :icon="Operation" circle @click="openColSetting" />
           </el-tooltip>
           <el-tooltip
@@ -107,7 +111,7 @@
       <template #empty>
         <div class="table-empty">
           <slot name="empty">
-            <img src="../../assets/images/notData.png" alt="notData" />
+            <img src="../../assets/images/notData.png" :alt="t('common.message.no_data')" />
             <div>{{ t("common.message.no_data") }}</div>
           </slot>
         </div>