@kine-design/crud 0.0.1-beta.25 → 0.0.1-beta.26

package/components/crudPage/KCrudPage.tsx

@@ -109,7 +109,7 @@ export default defineComponent({
     const renderFilters = () => {
       if (!props.config.filters?.length) return null;
       return props.config.filters.map(f => (
-        <div class="k-crud-page-filter-item" key={f.param}>
+        <div class="k-crud-page-filter-item" data-k={`filter:${f.param}`} key={f.param}>
           <label class="k-crud-page-filter-label">{f.label}</label>
           {f.type === 'select' ? (
             <KSelect
@@ -138,7 +138,7 @@ export default defineComponent({
     };
 
     return () => (
-      <div class="k-crud-page" ref={rootRef}>
+      <div class="k-crud-page" data-k="page:crudList" ref={rootRef}>
         <KPageHeader title={props.config.title}>
           {{ extra: slots.headerExtra }}
         </KPageHeader>

package/components/searchTable/KSearchTable.tsx

@@ -97,9 +97,9 @@ export default defineComponent({
               {ctx.slots.search?.()}
             </div>
             {/* 搜索 / 重置按钮区 */}
-            <div class="k-search-table-search-actions">
-              <KButton type="primary" text={t.value.searchTable.search} onClick={onSearch} />
-              <KButton text={t.value.searchTable.reset} onClick={onReset} />
+            <div class="k-search-table-search-actions" data-k="action:searchActions">
+              <KButton type="primary" text={t.value.searchTable.search} data-k="action:search" onClick={onSearch} />
+              <KButton text={t.value.searchTable.reset} data-k="action:reset" onClick={onReset} />
             </div>
           </div>
         )}

package/composables/page/types.ts

@@ -66,4 +66,6 @@ export interface CrudPageConfig {
   detailPath?: string;
   /** 图片列 src 转换函数，将原始值转为可访问 URL */
   imageResolver?: (raw: string) => string;
+  /** 默认查询参数，始终附带在请求中（用户选择的 filter 值会覆盖同名参数） */
+  defaultParams?: Record<string, unknown>;
 }

package/composables/page/useCrudPage.ts

@@ -43,6 +43,7 @@ export function useCrudPage(config: CrudPageConfig, tableBodyRef?: Ref<HTMLEleme
     loading.value = true;
     try {
       const params: Record<string, unknown> = {
+        ...config.defaultParams,
         page: page.value,
         pageSize: pageSize.value,
       };

package/dist/composables/page/types.d.ts

@@ -68,4 +68,6 @@ export interface CrudPageConfig {
     detailPath?: string;
     /** 图片列 src 转换函数，将原始值转为可访问 URL */
     imageResolver?: (raw: string) => string;
+    /** 默认查询参数，始终附带在请求中（用户选择的 filter 值会覆盖同名参数） */
+    defaultParams?: Record<string, unknown>;
 }

package/dist/crud.css

@@ -315,11 +315,11 @@
 
 /* 行 hover 效果 */
 .k-tbody .k-tr {
-  transition: background var(--kine-motion-duration-fast);
+  transition: background var(--kine-interaction-transition-duration);
 }
 
 .k-tbody .k-tr:hover {
-  background: var(--kine-color-bg-hover);
+  background: var(--kine-color-neutral-3);
 }
 
 /* 空数据占位 */
@@ -397,23 +397,23 @@
   border: 1px solid transparent;
   color: var(--kine-color-text-secondary);
   cursor: pointer;
-  transition: background var(--kine-motion-duration-fast), color var(--kine-motion-duration-fast);
+  transition: background var(--kine-interaction-transition-duration), color var(--kine-interaction-transition-duration);
 }
 
 .k-pager:hover {
-  background: var(--kine-color-bg-hover);
+  background: var(--kine-color-neutral-3);
   color: var(--kine-color-text-primary);
 }
 
 /* 当前页高亮 */
 .k-pager-current {
   color: var(--kine-color-accent-default);
-  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, transparent);
-  border-color: color-mix(in srgb, var(--kine-color-accent-default) 30%, transparent);
+  background: var(--kine-color-accent-light);
+  border-color: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-focus-glow), transparent);
 }
 
 .k-pager-current:hover {
-  background: color-mix(in srgb, var(--kine-color-accent-default) 15%, transparent);
+  background: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-hover-intensity), transparent);
   color: var(--kine-color-accent-hover);
 }
 
@@ -440,12 +440,12 @@
   color: var(--kine-color-text-secondary);
   font-size: var(--kine-font-size-2xl);
   cursor: pointer;
-  transition: background var(--kine-motion-duration-fast), color var(--kine-motion-duration-fast);
+  transition: background var(--kine-interaction-transition-duration), color var(--kine-interaction-transition-duration);
 }
 
 .k-page-prev:hover,
 .k-page-next:hover {
-  background: var(--kine-color-bg-hover);
+  background: var(--kine-color-neutral-3);
   color: var(--kine-color-text-primary);
 }
 
@@ -485,7 +485,7 @@
   color: var(--kine-color-text-primary);
   cursor: pointer;
   outline: none;
-  transition: all var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+  transition: all var(--kine-interaction-transition-duration) var(--kine-motion-easing-default);
   user-select: none;
   display: inline-flex;
   align-items: center;
@@ -494,31 +494,31 @@
 
 /* === default hover/active === */
 .k-button:hover {
-  background: var(--kine-color-bg-hover);
-  border-color: var(--kine-color-text-secondary);
-  color: #ffffff;
+  background: var(--kine-color-neutral-3);
+  border-color: var(--kine-color-neutral-5);
+  color: var(--kine-color-text-inverse);
 }
 
 .k-button:active {
-  background: var(--kine-color-border-subtle);
+  background: var(--kine-color-neutral-4);
 }
 
 /* === primary === */
 .k-button-primary {
-  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-accent-light);
   border-color: var(--kine-color-accent-default);
   color: var(--kine-color-accent-default);
 }
 
 .k-button-primary:hover {
-  background: color-mix(in srgb, var(--kine-color-accent-default) 18%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-hover-intensity), var(--kine-color-bg-primary));
   border-color: var(--kine-color-accent-hover);
   color: var(--kine-color-accent-hover);
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-accent-default) 50%, transparent);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-text-glow), transparent);
 }
 
 .k-button-primary:active {
-  background: color-mix(in srgb, var(--kine-color-accent-default) 25%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-active-intensity), var(--kine-color-bg-primary));
 }
 
 /* === success === */
@@ -528,14 +528,14 @@
 }
 
 .k-button-success:hover {
-  background: color-mix(in srgb, var(--kine-color-semantic-success) 12%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-success) var(--kine-interaction-hover-intensity), var(--kine-color-bg-primary));
   border-color: var(--kine-color-semantic-success-hover);
   color: var(--kine-color-semantic-success-hover);
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-success) 50%, transparent);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-success) var(--kine-interaction-text-glow), transparent);
 }
 
 .k-button-success:active {
-  background: color-mix(in srgb, var(--kine-color-semantic-success) 20%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-success) var(--kine-interaction-active-intensity), var(--kine-color-bg-primary));
 }
 
 /* === warning === */
@@ -545,14 +545,14 @@
 }
 
 .k-button-warning:hover {
-  background: color-mix(in srgb, var(--kine-color-semantic-warning) 12%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-warning) var(--kine-interaction-hover-intensity), var(--kine-color-bg-primary));
   border-color: var(--kine-color-semantic-warning-hover);
   color: var(--kine-color-semantic-warning-hover);
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-warning) 50%, transparent);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-warning) var(--kine-interaction-text-glow), transparent);
 }
 
 .k-button-warning:active {
-  background: color-mix(in srgb, var(--kine-color-semantic-warning) 20%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-warning) var(--kine-interaction-active-intensity), var(--kine-color-bg-primary));
 }
 
 /* === danger === */
@@ -562,31 +562,31 @@
 }
 
 .k-button-danger:hover {
-  background: color-mix(in srgb, var(--kine-color-semantic-error) 12%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-error) var(--kine-interaction-hover-intensity), var(--kine-color-bg-primary));
   border-color: var(--kine-color-semantic-error-hover);
   color: var(--kine-color-semantic-error-hover);
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-error) 50%, transparent);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-error) var(--kine-interaction-text-glow), transparent);
 }
 
 .k-button-danger:active {
-  background: color-mix(in srgb, var(--kine-color-semantic-error) 20%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-error) var(--kine-interaction-active-intensity), var(--kine-color-bg-primary));
 }
 
 /* === info === */
 .k-button-info {
-  border-color: var(--kine-color-semantic-info, #64748b);
-  color: var(--kine-color-semantic-info, #64748b);
+  border-color: var(--kine-color-semantic-info);
+  color: var(--kine-color-semantic-info);
 }
 
 .k-button-info:hover {
-  background: color-mix(in srgb, var(--kine-color-semantic-info, #64748b) 12%, var(--kine-color-bg-primary));
-  border-color: var(--kine-color-semantic-info-hover, #94a3b8);
-  color: var(--kine-color-semantic-info-hover, #94a3b8);
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-info, #64748b) 50%, transparent);
+  background: color-mix(in srgb, var(--kine-color-semantic-info) var(--kine-interaction-hover-intensity), var(--kine-color-bg-primary));
+  border-color: var(--kine-color-semantic-info-hover);
+  color: var(--kine-color-semantic-info-hover);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-semantic-info) var(--kine-interaction-text-glow), transparent);
 }
 
 .k-button-info:active {
-  background: color-mix(in srgb, var(--kine-color-semantic-info, #64748b) 20%, var(--kine-color-bg-primary));
+  background: color-mix(in srgb, var(--kine-color-semantic-info) var(--kine-interaction-active-intensity), var(--kine-color-bg-primary));
 }
 
 /* === disabled === */
@@ -626,13 +626,13 @@
 }
 
 .k-button-plain:hover {
-  background: var(--kine-color-bg-hover);
+  background: var(--kine-color-neutral-3);
   border-color: transparent;
-  color: #ffffff;
+  color: var(--kine-color-text-inverse);
 }
 
 .k-button-plain:active {
-  background: var(--kine-color-border-subtle);
+  background: var(--kine-color-neutral-4);
 }
 
 /* === link === */
@@ -648,7 +648,7 @@
   color: var(--kine-color-accent-hover);
   border-color: transparent;
   background: transparent;
-  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-accent-default) 50%, transparent);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-text-glow), transparent);
 }
 
 /* === size variants === */
@@ -819,31 +819,31 @@
 .k-tag-primary {
   border-color: var(--kine-color-accent-default);
   color: var(--kine-color-accent-default);
-  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-accent-light);
 }
 
 .k-tag-success {
   border-color: var(--kine-color-semantic-success);
   color: var(--kine-color-semantic-success);
-  background: color-mix(in srgb, var(--kine-color-semantic-success) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-semantic-success-light);
 }
 
 .k-tag-warning {
   border-color: var(--kine-color-semantic-warning);
   color: var(--kine-color-semantic-warning);
-  background: color-mix(in srgb, var(--kine-color-semantic-warning) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-semantic-warning-light);
 }
 
 .k-tag-danger {
   border-color: var(--kine-color-semantic-error);
   color: var(--kine-color-semantic-error);
-  background: color-mix(in srgb, var(--kine-color-semantic-error) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-semantic-error-light);
 }
 
 .k-tag-info {
   border-color: var(--kine-color-semantic-info);
   color: var(--kine-color-semantic-info);
-  background: color-mix(in srgb, var(--kine-color-semantic-info) 10%, var(--kine-color-bg-tertiary));
+  background: var(--kine-color-semantic-info-light);
 }
 
 /* === 尺寸变体 === */
@@ -874,12 +874,12 @@
   cursor: pointer;
   opacity: 0.6;
   border-radius: 50%;
-  transition: opacity var(--kine-motion-duration-fast), background var(--kine-motion-duration-fast);
+  transition: opacity var(--kine-interaction-transition-duration), background var(--kine-interaction-transition-duration);
 }
 
 .k-tag-close:hover {
   opacity: 1;
-  background: color-mix(in srgb, currentColor 20%, transparent);
+  background: color-mix(in srgb, currentColor var(--kine-interaction-active-intensity), transparent);
 }
 
 /* === 禁用状态 === */
@@ -989,7 +989,7 @@
   max-height: 85vh;
   object-fit: contain;
   border-radius: var(--kine-radius-xs);
-  box-shadow: 0 0 40px color-mix(in srgb, var(--kine-color-accent-default) 20%, transparent);
+  box-shadow: 0 0 40px color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-active-intensity), transparent);
   transition: transform var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
   user-select: none;
 }
@@ -1024,18 +1024,18 @@
   font-size: 16px;
   cursor: pointer;
   transition:
-    color var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
-    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+    color var(--kine-interaction-transition-duration) var(--kine-motion-easing-default),
+    background var(--kine-interaction-transition-duration) var(--kine-motion-easing-default);
 }
 
 .k-image-preview-btn:hover {
   color: var(--kine-color-text-primary);
-  background: color-mix(in srgb, var(--kine-color-accent-default) 15%, transparent);
+  background: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-hover-intensity), transparent);
 }
 
 .k-image-preview-close:hover {
   color: var(--kine-color-semantic-error);
-  background: color-mix(in srgb, var(--kine-color-semantic-error) 15%, transparent);
+  background: color-mix(in srgb, var(--kine-color-semantic-error) var(--kine-interaction-hover-intensity), transparent);
 }
 
 /* 当前缩放比例显示 */
@@ -1063,8 +1063,8 @@
   font-size: 26px;
   cursor: pointer;
   transition:
-    background var(--kine-motion-duration-fast) var(--kine-motion-easing-default),
-    border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+    background var(--kine-interaction-transition-duration) var(--kine-motion-easing-default),
+    border-color var(--kine-interaction-transition-duration) var(--kine-motion-easing-default);
 }
 
 .k-image-preview-arrow:hover {
@@ -1126,7 +1126,7 @@
 
 .k-input:focus {
   border-color: var(--kine-color-accent-default);
-  box-shadow: 0 0 var(--kine-shadow-glow-radius) color-mix(in srgb, var(--kine-color-accent-default) 30%, transparent);
+  box-shadow: 0 0 var(--kine-shadow-glow-radius) color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-focus-glow), transparent);
 }
 
 .k-input-disabled {
@@ -1222,7 +1222,7 @@ textarea.k-input {
 
 .k-select-trigger:focus-within {
   border-color: var(--kine-color-accent-default);
-  box-shadow: 0 0 var(--kine-shadow-glow-radius) color-mix(in srgb, var(--kine-color-accent-default) 30%, transparent);
+  box-shadow: 0 0 var(--kine-shadow-glow-radius) color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-focus-glow), transparent);
 }
 
 .k-select-trigger-multiple {
@@ -1340,16 +1340,16 @@ textarea.k-input {
 }
 
 .k-select-dropdown .m-option:hover {
-  background-color: var(--kine-color-bg-hover);
+  background-color: var(--kine-color-neutral-3);
 }
 
 .k-select-dropdown .m-option-selected {
   color: var(--kine-color-accent-default);
-  background-color: color-mix(in srgb, var(--kine-color-accent-default) 10%, transparent);
+  background-color: var(--kine-color-accent-light);
 }
 
 .k-select-dropdown .m-option-selected:hover {
-  background-color: color-mix(in srgb, var(--kine-color-accent-default) 16%, transparent);
+  background-color: color-mix(in srgb, var(--kine-color-accent-default) var(--kine-interaction-hover-intensity), transparent);
 }
 
 .k-select-dropdown .m-option-disabled {

package/dist/crud.js

@@ -1,6 +1,6 @@
 import { Comment, Fragment, Teleport, cloneVNode, computed, createApp, createTextVNode, createVNode, defineComponent, h, inject, isRef, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, reactive, ref, resolveComponent, shallowRef, toRef, triggerRef, watch } from "vue";
-import { QueryClient, VueQueryPlugin, useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import { createPinia, defineStore } from "pinia";
+import { QueryClient, VueQueryPlugin, useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import { useRoute, useRouter } from "vue-router";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
@@ -6814,6 +6814,74 @@ var ImageCore = {
 	useImage
 };
 //#endregion
+//#region ../core/compositions/overlay/useOverlayStack.ts
+/**
+* @description overlay stack manager — unified z-index and ESC handling for all popups
+* @author kine-design
+* @date 2026/5/22 00:00
+* @version v1.0.0
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+var Z_INDEX_BASE = 100;
+defineStore("overlayStack", () => {
+	const overlayStack = ref([]);
+	const isEmpty = computed(() => overlayStack.value.length === 0);
+	const topItem = computed(() => overlayStack.value.length > 0 ? overlayStack.value[overlayStack.value.length - 1] : void 0);
+	const push = (item) => {
+		const zIndex = overlayStack.value.length + Z_INDEX_BASE;
+		const entry = {
+			...item,
+			zIndex
+		};
+		overlayStack.value.push(entry);
+		return entry;
+	};
+	const pop = () => {
+		const item = overlayStack.value.pop();
+		if (item) item.close();
+		return item;
+	};
+	const remove = (id) => {
+		const index = overlayStack.value.findIndex((item) => item.id === id);
+		if (index !== -1) {
+			overlayStack.value.splice(index, 1);
+			recalculateZIndices();
+		}
+	};
+	const recalculateZIndices = () => {
+		overlayStack.value.forEach((item, index) => {
+			item.zIndex = index + Z_INDEX_BASE;
+		});
+	};
+	const handleEsc = (e) => {
+		if (e.key === "Escape" && !isEmpty.value) pop();
+	};
+	let listenerAttached = false;
+	const attachEscListener = () => {
+		if (!listenerAttached) {
+			document.addEventListener("keydown", handleEsc);
+			listenerAttached = true;
+		}
+	};
+	const detachEscListener = () => {
+		if (listenerAttached) {
+			document.removeEventListener("keydown", handleEsc);
+			listenerAttached = false;
+		}
+	};
+	return {
+		overlayStack,
+		isEmpty,
+		topItem,
+		push,
+		pop,
+		remove,
+		attachEscListener,
+		detachEscListener
+	};
+});
+//#endregion
 //#region ../core/locale/index.ts
 /**
 * @description kine-design locale entry — built-in language packs + types.
@@ -7467,7 +7535,10 @@ var KTable_default = kDefineComponent((_props, { slots }) => {
 		});
 		const style = p.height ? { height: p.height } : void 0;
 		const { thead, tbody } = initTable({
-			empty: createVNode("tbody", { "class": "m-table-empty k-table-empty" }, [createVNode("tr", null, [createVNode("th", { "colspan": columns.length }, [slots.empty?.() ?? t.value.common.noData])])]),
+			empty: createVNode("tbody", {
+				"class": "m-table-empty k-table-empty",
+				"data-k": "state:tableEmpty"
+			}, [createVNode("tr", null, [createVNode("th", { "colspan": columns.length }, [slots.empty?.() ?? t.value.common.noData])])]),
 			tbodyTr: ({ data, param, slot, style: cellStyle, slotInfo }) => createVNode("td", {
 				"style": cellStyle,
 				"data-k": testAnchor?.value && param ? `col:${param}` : void 0,
@@ -7491,8 +7562,14 @@ var KTable_default = kDefineComponent((_props, { slots }) => {
 				],
 				"style": cellStyle
 			}, [slot ? slot() : label]),
-			thead: (ths) => createVNode("thead", { "class": "m-thead k-thead" }, [createVNode("tr", { "class": "m-tr k-tr" }, [ths])]),
-			tbody: (trs) => createVNode("tbody", { "class": "m-tbody k-tbody" }, [trs]),
+			thead: (ths) => createVNode("thead", {
+				"class": "m-thead k-thead",
+				"data-k": "region:tableHead"
+			}, [createVNode("tr", { "class": "m-tr k-tr" }, [ths])]),
+			tbody: (trs) => createVNode("tbody", {
+				"class": "m-tbody k-tbody",
+				"data-k": "region:tableBody"
+			}, [trs]),
 			tbodyTrs: (tds, i) => createVNode("tr", {
 				"class": "m-tr k-tr",
 				"key": i
@@ -7727,12 +7804,17 @@ var KSearchTable_default = /* @__PURE__ */ defineComponent({
 			ctx.emit("update:page", page);
 		};
 		return () => createVNode("div", { "class": ["k-search-table", props.loading ? "k-search-table--loading" : ""] }, [
-			props.searchable && createVNode("div", { "class": "k-search-table-search" }, [createVNode("div", { "class": "k-search-table-search-form" }, [ctx.slots.search?.()]), createVNode("div", { "class": "k-search-table-search-actions" }, [createVNode(KButton_default, {
+			props.searchable && createVNode("div", { "class": "k-search-table-search" }, [createVNode("div", { "class": "k-search-table-search-form" }, [ctx.slots.search?.()]), createVNode("div", {
+				"class": "k-search-table-search-actions",
+				"data-k": "action:searchActions"
+			}, [createVNode(KButton_default, {
 				"type": "primary",
 				"text": t.value.searchTable.search,
+				"data-k": "action:search",
 				"onClick": onSearch
 			}, null), createVNode(KButton_default, {
 				"text": t.value.searchTable.reset,
+				"data-k": "action:reset",
 				"onClick": onReset
 			}, null)])]),
 			ctx.slots.toolbar && createVNode("div", { "class": "k-search-table-toolbar" }, [ctx.slots.toolbar()]),
@@ -9335,7 +9417,6 @@ function createCrudAppWithOptions(rootComponent, options) {
 			options.router.beforeEach(guard);
 		}
 	}
-	if (options.router) app.use(options.router);
 	setupCrud(app, options.query);
 	if (options.request) {
 		const requestOptions = { ...options.request };
@@ -9347,7 +9428,10 @@ function createCrudAppWithOptions(rootComponent, options) {
 	if (options.error) createErrorHandler(app, options.error);
 	const enhancedApp = Object.create(app);
 	enhancedApp.mount = (rootContainer) => {
-		const doMount = () => app.mount(rootContainer);
+		const doMount = () => {
+			if (options.router) app.use(options.router);
+			app.mount(rootContainer);
+		};
 		if (auth) auth.restore().finally(doMount);
 		else doMount();
 		return app;
@@ -9420,6 +9504,7 @@ function useCrudPage(config, tableBodyRef) {
 		loading.value = true;
 		try {
 			const params = {
+				...config.defaultParams,
 				page: page.value,
 				pageSize: pageSize.value
 			};
@@ -9571,6 +9656,7 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
 			if (!props.config.filters?.length) return null;
 			return props.config.filters.map((f) => createVNode("div", {
 				"class": "k-crud-page-filter-item",
+				"data-k": `filter:${f.param}`,
 				"key": f.param
 			}, [createVNode("label", { "class": "k-crud-page-filter-label" }, [f.label]), f.type === "select" ? createVNode(KSelect_default, {
 				"class": "k-crud-page-filter-control",
@@ -9593,6 +9679,7 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
 		};
 		return () => createVNode("div", {
 			"class": "k-crud-page",
+			"data-k": "page:crudList",
 			"ref": rootRef
 		}, [createVNode(KPageHeader_default, { "title": props.config.title }, { extra: slots.headerExtra }), createVNode(KSearchTable_default, {
 			"data": list.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kine-design/crud",
-  "version": "0.0.1-beta.25",
+  "version": "0.0.1-beta.26",
   "type": "module",
   "main": "./dist/crud.js",
   "types": "./dist/index.d.ts",
@@ -12,8 +12,8 @@
     "pinia": "^3.0.3",
     "vue": "^3.5.30",
     "vue-router": "^5.0.3",
-    "@kine-design/core": "0.0.1-beta.11",
-    "kine-ui": "0.0.1-beta.21"
+    "@kine-design/core": "0.0.1-beta.12",
+    "kine-ui": "0.0.1-beta.22"
   },
   "publishConfig": {
     "access": "public",

package/setup.ts

@@ -244,22 +244,15 @@ function createCrudAppWithOptions(
     }
   }
 
-  // 2. Router（install 时触发初始导航，此时守卫已注册）
-  if (options.router) {
-    app.use(options.router as { install: (app: App) => void });
-  }
-
-  // 3. TanStack Query
+  // 2. TanStack Query
   setupCrud(app, options.query);
 
-  // 4. Request
+  // 3. Request
   if (options.request) {
     const requestOptions: RequestOptions = { ...options.request };
-    // 如果有 auth，自动注入 getToken
     if (auth && !requestOptions.getToken) {
       requestOptions.getToken = () => auth!.token.value;
     }
-    // 如果有 auth，自动注入 onUnauthorized
     if (auth && !requestOptions.onUnauthorized) {
       requestOptions.onUnauthorized = options.auth?.onUnauthorized;
     }
@@ -267,15 +260,23 @@ function createCrudAppWithOptions(
     app.provide(REQUEST_CLIENT_KEY, client);
   }
 
-  // 5. Error Handler
+  // 4. Error Handler
   if (options.error) {
     createErrorHandler(app, options.error);
   }
 
   // 返回增强的 app，mount 前先恢复 auth
+  // Router 安装延迟到 doMount：app.use(router) 会触发初始导航，
+  // 必须在 auth.restore() 完成（permissions 已加载）之后执行，否则
+  // authGuard 会在 permissions 为空时将受保护路由重定向到 /403。
   const enhancedApp: EnhancedApp = Object.create(app);
   enhancedApp.mount = (rootContainer: string | Element): App => {
-    const doMount = () => app.mount(rootContainer);
+    const doMount = () => {
+      if (options.router) {
+        app.use(options.router as { install: (app: App) => void });
+      }
+      app.mount(rootContainer);
+    };
     if (auth) {
       auth.restore().finally(doMount);
     } else {