@liujitcn/kratos-admin-core 0.0.39 → 0.0.41

package/build/codegen-hmr.ts

@@ -0,0 +1,37 @@
+import type { HotPayload, Plugin, WebSocketClient } from "vite";
+
+/** 暂缓生成期间的开发热更新，释放后统一刷新以加载完整产物。 */
+export function codegenHmrPlugin(): Plugin {
+  return {
+    name: "admin-codegen-hmr",
+    apply: "serve",
+    configureServer(server) {
+      const clients = new Set<WebSocketClient>();
+      const send = server.ws.send.bind(server.ws);
+      let pending = false;
+      const release = (client: WebSocketClient) => {
+        clients.delete(client);
+        if (!clients.size && pending) {
+          pending = false;
+          send({ type: "full-reload", path: "*" });
+        }
+      };
+      server.ws.send = (payload: HotPayload | string, data?: unknown) => {
+        if (clients.size && typeof payload !== "string" && (payload.type === "update" || payload.type === "full-reload")) {
+          pending = true;
+          return;
+        }
+        if (typeof payload === "string") send(payload, data);
+        else send(payload);
+      };
+      server.ws.on("admin:codegen-hold", (_data, client) => {
+        if (!clients.has(client)) {
+          clients.add(client);
+          client.socket.once("close", () => release(client));
+        }
+        client.send("admin:codegen-held", {});
+      });
+      server.ws.on("admin:codegen-release", (_data, client) => release(client));
+    }
+  };
+}

package/build/plugins.ts

@@ -1,3 +1,4 @@
+import { codegenHmrPlugin } from "./codegen-hmr";
 import { resolve } from "path";
 import { PluginOption } from "vite";
 import { VitePWA } from "vite-plugin-pwa";
@@ -37,6 +38,7 @@ export const createVitePlugins = (viteEnv: ViteEnv, options: VitePluginOptions =
   const { VITE_GLOB_APP_TITLE, VITE_REPORT, VITE_DEVTOOLS, VITE_PWA, VITE_CODEINSPECTOR } = viteEnv;
   const sourcePatterns = options.sourcePatterns;
   return [
+    codegenHmrPlugin(),
     vue(),
     // vue 可以使用 jsx/tsx 语法
     vueJsx(),

package/build/source-patterns.ts

@@ -0,0 +1,7 @@
+/** 为 API 和组件自动导入创建跨平台源码匹配规则，包含 npm 包内源码。 */
+export function createSourcePatterns(sourceRoots: string[]): RegExp[] {
+  return [...new Set(sourceRoots.map(sourceRoot => sourceRoot.replaceAll("\\", "/")))].map(sourceRoot => {
+    const escapedRoot = sourceRoot.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    return new RegExp(`^${escapedRoot.replaceAll("/", "[/\\\\]")}[/\\\\].*\\.(?:vue|[jt]sx?)(?:\\?.*)?$`);
+  });
+}

package/dist/package/declarations/build/codegen-hmr.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from "vite";
+/** 暂缓生成期间的开发热更新，释放后统一刷新以加载完整产物。 */
+export declare function codegenHmrPlugin(): Plugin;

package/dist/package/declarations/build/source-patterns.d.ts

@@ -0,0 +1,2 @@
+/** 为 API 和组件自动导入创建跨平台源码匹配规则，包含 npm 包内源码。 */
+export declare function createSourcePatterns(sourceRoots: string[]): RegExp[];

package/dist/package/declarations/src/components/ProForm/components/ProFormItem.vue.d.ts

@@ -4,18 +4,23 @@ interface ProFormItemProps {
     field: ProFormField;
     model: Record<string, any>;
 }
-declare var __VLS_127: string, __VLS_128: {
+declare var __VLS_10: string, __VLS_11: {
+    field: ProFormField;
+    model: Record<string, any>;
+}, __VLS_133: string, __VLS_134: {
     option: import("element-plus").TransferDataItem;
     field: ProFormField;
     model: Record<string, any>;
-}, __VLS_173: string, __VLS_174: {
+}, __VLS_179: string, __VLS_180: {
     field: ProFormField;
     model: Record<string, any>;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_127>]?: (props: typeof __VLS_128) => any;
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_133>]?: (props: typeof __VLS_134) => any;
 } & {
-    [K in NonNullable<typeof __VLS_173>]?: (props: typeof __VLS_174) => any;
+    [K in NonNullable<typeof __VLS_179>]?: (props: typeof __VLS_180) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ProFormItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProFormItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -33,6 +33,8 @@ export interface ProFormField {
     rowBreakBefore?: boolean;
     /** 自定义插槽名称。 */
     slotName?: string;
+    /** 输入控件旁的附加操作插槽。 */
+    suffixSlotName?: string;
     /** 标题提示文案。 */
     labelTooltip?: string;
     /** 字段校验规则。 */

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

@@ -1,3 +1,8 @@
+import "./vite-env.d.ts";
+import "./typings/global.d.ts";
+import "./typings/utils.d.ts";
+import "../types/generated/auto-imports.d.ts";
+import "../types/generated/components.d.ts";
 export * from "./modules";
 export * from "./locales";
 export { defLanguageService } from "./api/base/v1/language";

package/dist/package/declarations/src/views/login/components/LoginForm.vue.d.ts

@@ -1,4 +1,8 @@
 import "go-captcha-vue/dist/style.css";
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** 登录表单属性，验证弹窗以外层登录卡片的中心定位。 */
+interface LoginFormProps {
+    dialogAnchor?: HTMLElement;
+}
+declare const __VLS_export: import("vue").DefineComponent<LoginFormProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoginFormProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,5 +1,9 @@
 <template>
-  <el-input v-if="field.component === 'input'" v-model.trim="fieldValue" v-bind="fieldProps" />
+  <el-input v-if="field.component === 'input'" v-model.trim="fieldValue" v-bind="fieldProps">
+    <template v-if="field.suffixSlotName" #append>
+      <slot :name="field.suffixSlotName" :field="field" :model="model" />
+    </template>
+  </el-input>
 
   <el-input
     v-else-if="field.component === 'password'"

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

@@ -16,11 +16,21 @@
                 </el-tooltip>
               </div>
             </template>
-            <ProFormItem :field="field" :model="model">
-              <template v-for="slotName in slotNames" #[slotName]="slotScope">
-                <slot :name="slotName" v-bind="slotScope" />
-              </template>
-            </ProFormItem>
+            <div class="pro-form__control">
+              <div class="pro-form__input">
+                <ProFormItem :field="field" :model="model">
+                  <template v-for="slotName in slotNames" #[slotName]="slotScope">
+                    <slot :name="slotName" v-bind="slotScope" />
+                  </template>
+                </ProFormItem>
+              </div>
+              <slot
+                v-if="field.suffixSlotName && field.component !== 'input'"
+                :name="field.suffixSlotName"
+                :model="model"
+                :field="field"
+              />
+            </div>
           </el-form-item>
         </el-col>
       </template>
@@ -104,6 +114,18 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
+.pro-form__control {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+.pro-form__input {
+  flex: 1;
+  min-width: 0;
+}
+
 .pro-form__row-break {
   flex: 0 0 100%;
   height: 0;

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

@@ -60,6 +60,8 @@ export interface ProFormField {
   rowBreakBefore?: boolean;
   /** 自定义插槽名称。 */
   slotName?: string;
+  /** 输入控件旁的附加操作插槽。 */
+  suffixSlotName?: string;
   /** 标题提示文案。 */
   labelTooltip?: string;
   /** 字段校验规则。 */

package/dist/package/src/index.ts

@@ -1,8 +1,8 @@
-/// <reference path="./vite-env.d.ts" />
-/// <reference path="./typings/global.d.ts" />
-/// <reference path="./typings/utils.d.ts" />
-/// <reference path="../types/generated/auto-imports.d.ts" />
-/// <reference path="../types/generated/components.d.ts" />
+import "./vite-env.d.ts";
+import "./typings/global.d.ts";
+import "./typings/utils.d.ts";
+import "../types/generated/auto-imports.d.ts";
+import "../types/generated/components.d.ts";
 
 export * from "./modules";
 export * from "./locales";

package/dist/package/src/views/login/components/LoginForm.vue

@@ -96,11 +96,11 @@
   <ProDialog
     v-model="behaviorDialogVisible"
     width="364px"
-    top="16vh"
+    :style="loginDialogStyle"
     :show-close="false"
     :show-footer="false"
     append-to-body
-    class="behavior-captcha-dialog"
+    class="login-verification-dialog behavior-captcha-dialog"
   >
     <div v-loading="behaviorLoading" class="behavior-captcha-body">
       <GoCaptchaSlide
@@ -126,7 +126,15 @@
       />
     </div>
   </ProDialog>
-  <ProDialog v-model="mfaDialogVisible" :title="t('core.login.mfa_title')" width="360px" :close-on-click-modal="false">
+  <ProDialog
+    v-model="mfaDialogVisible"
+    :title="t('core.login.mfa_title')"
+    width="364px"
+    :style="loginDialogStyle"
+    class="login-verification-dialog"
+    append-to-body
+    :close-on-click-modal="false"
+  >
     <ProForm
       ref="mfaLoginFormRef"
       :model="mfaLoginForm"
@@ -146,7 +154,15 @@
       </el-button>
     </template>
   </ProDialog>
-  <ProDialog v-model="mfaSetupDialogVisible" :title="t('core.login.mfa_setup_title')" width="520px" :close-on-click-modal="false">
+  <ProDialog
+    v-model="mfaSetupDialogVisible"
+    :title="t('core.login.mfa_setup_title')"
+    width="520px"
+    :style="loginDialogStyle"
+    class="login-verification-dialog"
+    append-to-body
+    :close-on-click-modal="false"
+  >
     <template v-if="mfaSetupMethod !== 'webauthn'">
       <MfaSetupPanel :uri="mfaSetupUri" />
       <ProForm
@@ -166,12 +182,20 @@
       </el-button>
     </template>
   </ProDialog>
-  <MfaRecoveryCodesDialog v-model="recoveryCodesDialogVisible" :codes="recoveryCodes" @confirm="finishMfaEnrollment" />
+  <MfaRecoveryCodesDialog
+    v-model="recoveryCodesDialogVisible"
+    :codes="recoveryCodes"
+    :style="loginDialogStyle"
+    class="login-verification-dialog"
+    append-to-body
+    @confirm="finishMfaEnrollment"
+  />
 </template>
 
 <script setup lang="ts">
 import { computed, ref, reactive, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useElementBounding } from "@vueuse/core";
 import { HOME_URL } from "../../../config";
 import { getTimeState } from "../../../utils";
 import { defLoginService } from "../../../api/base/v1/login";
@@ -200,6 +224,19 @@ import "go-captcha-vue/dist/style.css";
 import { useLocaleStore } from "../../../locales";
 import { clearPasswordChangeRequired, handlePasswordChangeRequired } from "../../../utils/request";
 
+/** 登录表单属性，验证弹窗以外层登录卡片的中心定位。 */
+interface LoginFormProps {
+  dialogAnchor?: HTMLElement;
+}
+
+const props = defineProps<LoginFormProps>();
+const dialogAnchorBounds = useElementBounding(() => props.dialogAnchor);
+const loginDialogStyle = computed(() => ({
+  "--login-dialog-center-x": `${dialogAnchorBounds.left.value + dialogAnchorBounds.width.value / 2}px`,
+  "--login-dialog-center-y": `${dialogAnchorBounds.top.value + dialogAnchorBounds.height.value / 2}px`,
+  "--login-dialog-anchor-width": `${dialogAnchorBounds.width.value}px`
+}));
+
 const router = useRouter();
 const route = useRoute();
 const userStore = useUserStore();
@@ -958,6 +995,25 @@ watch(
   color: var(--el-color-primary);
 }
 
+/* 各验证步骤共用登录卡片中心；靠近视口边缘时限制尺寸，内容在弹窗内滚动。 */
+:global(.login-verification-dialog.el-dialog) {
+  --login-dialog-width: min(var(--el-dialog-width), var(--login-dialog-anchor-width), calc(100vw - 32px));
+  --login-dialog-y: clamp(25dvh, var(--login-dialog-center-y), 75dvh);
+
+  position: fixed;
+  top: var(--login-dialog-y);
+  left: clamp(
+    calc(var(--login-dialog-width) / 2 + 16px),
+    var(--login-dialog-center-x),
+    calc(100vw - var(--login-dialog-width) / 2 - 16px)
+  );
+  width: var(--login-dialog-width);
+  max-height: calc(min(var(--login-dialog-y), 100dvh - var(--login-dialog-y)) * 2 - 32px);
+  margin: 0;
+  overflow: auto;
+  translate: -50% -50%;
+}
+
 :global(.behavior-captcha-dialog) {
   --go-captcha-theme-text-color: var(--el-text-color-primary);
   --go-captcha-theme-bg-color: var(--el-bg-color);

package/dist/package/src/views/login/index.vue

@@ -6,12 +6,12 @@
       <div class="login-left">
         <img class="login-left-img" :src="backgroundUrl" :alt="t('core.login.background_alt')" />
       </div>
-      <div class="login-form">
+      <div ref="loginFormRef" class="login-form">
         <div ref="loginLogoRef" class="login-logo">
           <img v-show="showLogoIcon" ref="logoIconRef" class="login-icon" :src="logoUrl" alt="" />
           <h2 ref="logoTextRef" class="logo-text" :style="{ fontSize: `${logoFontSize}px` }">{{ projectName }}</h2>
         </div>
-        <LoginForm />
+        <LoginForm :dialog-anchor="loginFormRef" />
       </div>
     </div>
   </div>
@@ -36,6 +36,7 @@ const PREFERRED_MIN_LOGO_FONT_SIZE = 30;
 const MIN_LOGO_FONT_SIZE = 8;
 const LOGO_TEXT_GAP = 16;
 
+const loginFormRef = ref<HTMLElement>();
 const loginLogoRef = ref<HTMLElement>();
 const logoIconRef = ref<HTMLImageElement>();
 const logoTextRef = ref<HTMLElement>();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@liujitcn/kratos-admin-core",
   "private": false,
-  "version": "0.0.39",
+  "version": "0.0.41",
   "type": "module",
   "description": "kratos-admin frontend runtime and base modules",
   "author": {
@@ -224,7 +224,7 @@
   "scripts": {
     "build": "pnpm build:package",
     "build:package": "node ../../scripts/build-package.mjs .",
-    "test": "tsc -p tsconfig.test.json && node --test dist/test/tests/modules.test.js dist/test/tests/dict.test.js dist/test/tests/menu.test.js",
+    "test": "tsc -p tsconfig.test.json && node --test dist/test/tests/modules.test.js dist/test/tests/dict.test.js dist/test/tests/menu.test.js dist/test/tests/source-patterns.test.js",
     "type:check": "vue-tsc --noEmit --skipLibCheck"
   }
 }

package/vite.config.ts

@@ -8,6 +8,7 @@ import dayjs from "dayjs";
 import { wrapperEnv } from "./build/getEnv";
 import { createProxy } from "./build/proxy";
 import { createVitePlugins } from "./build/plugins";
+import { createSourcePatterns } from "./build/source-patterns";
 
 const coreRoot = dirname(fileURLToPath(import.meta.url));
 const viteLogger = createLogger();
@@ -52,9 +53,7 @@ export function defineAdminViteConfig(options: AdminViteConfigOptions = {}) {
       ...resolvePackageSource(root, packageName)
     }));
     const sourceRoots = [resolve(root, "src"), coreSourceRoot, ...modulePackages.map(item => item.sourceRoot)];
-    const sourcePatterns = [...new Set(sourceRoots)].map(
-      sourceRoot => new RegExp(`${escapeRegExp(sourceRoot)}[\\/\\\\].*\\.(?:vue|[jt]sx?)(?:\\?.*)?$`)
-    );
+    const sourcePatterns = createSourcePatterns(sourceRoots);
     const aliases = [
       { find: "@", replacement: coreSourceRoot },
       ...createPackageAliases(corePackage),