@kine-design/crud 0.0.1-beta.21 → 0.0.1-beta.24

package/components/crudPage/KCrudPage.tsx

@@ -8,7 +8,7 @@
  *
  * 一个配置出一整个页面：标题 + 筛选 + 表格 + 分页 + 状态标签。
  */
-import { defineComponent, type PropType } from 'vue';
+import { defineComponent, ref, computed, type PropType } from 'vue';
 import KTableColumn from 'kine-ui/components/tableColumn/KTableColumn.tsx';
 import KTag from 'kine-ui/components/tag/KTag.tsx';
 import KImage from 'kine-ui/components/image/KImage.tsx';
@@ -31,10 +31,15 @@ export default defineComponent({
   },
 
   setup(props, { slots }) {
+    const rootRef = ref<HTMLElement>();
+    const tableBodyRef = computed(
+      () => rootRef.value?.querySelector('.k-search-table-body') as HTMLElement | undefined,
+    );
+
     const {
       page, pageSize, total, list, loading,
       filters, onPageChange, onSearch, onReset,
-    } = useCrudPage(props.config);
+    } = useCrudPage(props.config, tableBodyRef);
 
     /** 格式化日期 */
     const formatDate = (val: unknown) => {
@@ -131,7 +136,7 @@ export default defineComponent({
     };
 
     return () => (
-      <div class="k-crud-page">
+      <div class="k-crud-page" ref={rootRef}>
         <KPageHeader title={props.config.title}>
           {{ extra: slots.headerExtra }}
         </KPageHeader>

package/composables/page/__tests__/useAutoPageSize.test.ts

@@ -0,0 +1,194 @@
+/**
+ * @description useAutoPageSize 单元测试
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { ref } from 'vue';
+import { useAutoPageSize } from '../useAutoPageSize';
+
+function mockContainer(clientHeight: number) {
+  return ref({ clientHeight } as HTMLElement);
+}
+
+// Fix #5: use queueMicrotask to preserve one async tick, return incrementing ID
+let rafId = 0;
+beforeEach(() => {
+  rafId = 0;
+  vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+    const id = ++rafId;
+    queueMicrotask(() => cb(0));
+    return id;
+  });
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('useAutoPageSize', () => {
+  describe('初始状态', () => {
+    it('pageSize 初始为 0，resolved 初始为 false', () => {
+      const container = mockContainer(500);
+      const { pageSize, resolved } = useAutoPageSize(container);
+      expect(pageSize.value).toBe(0);
+      expect(resolved.value).toBe(false);
+    });
+  });
+
+  describe('calculate 默认参数', () => {
+    it('标准高度：(500 - 40) / 48 = 9', async () => {
+      const container = mockContainer(500);
+      const { waitForLayout } = useAutoPageSize(container);
+      const size = await waitForLayout();
+      expect(size).toBe(9);
+    });
+
+    it('大屏高度：(900 - 40) / 48 = 17', async () => {
+      const container = mockContainer(900);
+      const { waitForLayout } = useAutoPageSize(container);
+      const size = await waitForLayout();
+      expect(size).toBe(17);
+    });
+
+    it('刚好整除：(520 - 40) / 48 = 10', async () => {
+      const container = mockContainer(520);
+      const { waitForLayout } = useAutoPageSize(container);
+      expect(await waitForLayout()).toBe(10);
+    });
+  });
+
+  describe('自定义 rowHeight / headerHeight', () => {
+    it('自定义行高：(500 - 40) / 60 = 7', async () => {
+      const container = mockContainer(500);
+      const { waitForLayout } = useAutoPageSize(container, { rowHeight: 60 });
+      expect(await waitForLayout()).toBe(7);
+    });
+
+    it('自定义表头高度：(500 - 56) / 48 = 9', async () => {
+      const container = mockContainer(500);
+      const { waitForLayout } = useAutoPageSize(container, { headerHeight: 56 });
+      expect(await waitForLayout()).toBe(9);
+    });
+
+    it('同时自定义：(600 - 50) / 55 = 10', async () => {
+      const container = mockContainer(600);
+      const { waitForLayout } = useAutoPageSize(container, { rowHeight: 55, headerHeight: 50 });
+      expect(await waitForLayout()).toBe(10);
+    });
+  });
+
+  // Fix #2: nullish-coalescing fallback paths
+  describe('nullish 参数回退到默认值', () => {
+    it('rowHeight 为 undefined 时回退默认 48', async () => {
+      const container = mockContainer(500);
+      const { waitForLayout } = useAutoPageSize(container, { rowHeight: undefined });
+      // (500 - 40) / 48 = 9.58 → floor = 9, same as no options
+      expect(await waitForLayout()).toBe(9);
+    });
+
+    it('headerHeight 为 undefined 时回退默认 40', async () => {
+      const container = mockContainer(500);
+      const { waitForLayout } = useAutoPageSize(container, { headerHeight: undefined });
+      // (500 - 40) / 48 = 9.58 → floor = 9, same as no options
+      expect(await waitForLayout()).toBe(9);
+    });
+  });
+
+  describe('边界：MIN_PAGE_SIZE 兜底', () => {
+    it('容器 ref 为 undefined → 返回 5', async () => {
+      const container = ref<HTMLElement | undefined>(undefined);
+      const { waitForLayout } = useAutoPageSize(container);
+      expect(await waitForLayout()).toBe(5);
+    });
+
+    it('容器高度为 0 → 返回 5', async () => {
+      const container = mockContainer(0);
+      const { waitForLayout } = useAutoPageSize(container);
+      expect(await waitForLayout()).toBe(5);
+    });
+
+    it('可用高度为负（容器比表头还矮）→ 返回 5', async () => {
+      const container = mockContainer(20);
+      const { waitForLayout } = useAutoPageSize(container);
+      expect(await waitForLayout()).toBe(5);
+    });
+
+    it('可用高度不够一行但大于 0 → 返回 5', async () => {
+      const container = mockContainer(60);
+      const { waitForLayout } = useAutoPageSize(container);
+      // (60 - 40) / 48 = 0.41 → floor = 0 → max(0, 5) = 5
+      expect(await waitForLayout()).toBe(5);
+    });
+
+    // Fix #3: near-integer floor truncation
+    it('接近整数但不到：(519 - 40) / 48 = 9.979 → floor 为 9', async () => {
+      const container = mockContainer(519);
+      const { waitForLayout } = useAutoPageSize(container);
+      // (519 - 40) / 48 = 479 / 48 = 9.979… → floor = 9, not rounded to 10
+      expect(await waitForLayout()).toBe(9);
+    });
+  });
+
+  describe('waitForLayout 状态更新', () => {
+    // Fix #1: concrete assertion instead of self-referential check
+    it('resolve 后 pageSize 和 resolved 同步更新', async () => {
+      const container = mockContainer(500);
+      const { pageSize, resolved, waitForLayout } = useAutoPageSize(container);
+
+      const size = await waitForLayout();
+      // (500 - 40) / 48 = 9.58 → floor = 9
+      expect(size).toBe(9);
+      expect(pageSize.value).toBe(9);
+      expect(resolved.value).toBe(true);
+    });
+
+    // Fix #1: test a different container height with concrete value
+    it('不同容器高度 resolve 值正确：(700 - 40) / 48 = 13', async () => {
+      const container = mockContainer(700);
+      const { pageSize, waitForLayout } = useAutoPageSize(container);
+
+      const size = await waitForLayout();
+      // (700 - 40) / 48 = 13.75 → floor = 13
+      expect(size).toBe(13);
+      expect(pageSize.value).toBe(13);
+    });
+  });
+
+  // Fix #4: multiple waitForLayout calls
+  describe('多次调用 waitForLayout', () => {
+    it('同一实例多次调用 waitForLayout 会重新计算', async () => {
+      const container = mockContainer(500);
+      const { pageSize, waitForLayout } = useAutoPageSize(container);
+
+      const first = await waitForLayout();
+      expect(first).toBe(9);
+      expect(pageSize.value).toBe(9);
+
+      // second call on same instance, same container → same result
+      const second = await waitForLayout();
+      expect(second).toBe(9);
+      expect(pageSize.value).toBe(9);
+    });
+
+    it('容器高度变化后再次调用 waitForLayout 得到新值', async () => {
+      const container = ref({ clientHeight: 500 } as HTMLElement);
+      const { pageSize, waitForLayout } = useAutoPageSize(container);
+
+      const first = await waitForLayout();
+      expect(first).toBe(9);
+      expect(pageSize.value).toBe(9);
+
+      // mutate container height
+      container.value = { clientHeight: 900 } as HTMLElement;
+
+      const second = await waitForLayout();
+      // (900 - 40) / 48 = 17.91 → floor = 17
+      expect(second).toBe(17);
+      expect(pageSize.value).toBe(17);
+    });
+  });
+});

package/composables/page/index.ts

@@ -8,4 +8,6 @@
  */
 
 export { useCrudPage } from './useCrudPage';
+export { useAutoPageSize } from './useAutoPageSize';
+export type { AutoPageSizeOptions } from './useAutoPageSize';
 export type { CrudPageConfig, CrudColumnConfig, CrudFilterConfig, StatusMapItem } from './types';

package/composables/page/types.ts

@@ -53,6 +53,13 @@ export interface CrudPageConfig {
   statusMap?: Record<string, StatusMapItem>;
   /** 每页条数，默认 20 */
   pageSize?: number;
+  /**
+   * 根据表格容器高度自动计算 pageSize（首次计算，后续锁定）。
+   * - true: 使用默认行高（48px）
+   * - { rowHeight, headerHeight }: 自定义行高参数
+   * 启用后 pageSize 字段作为 fallback 使用。
+   */
+  autoPageSize?: boolean | { rowHeight?: number; headerHeight?: number };
   /** 行主键字段，默认 'id' */
   rowKey?: string;
   /** 详情页路由前缀，用于构建查看/编辑路由：`${detailPath}/${row[rowKey]}` */

package/composables/page/useAutoPageSize.ts

@@ -0,0 +1,55 @@
+/**
+ * @description 根据容器可用高度自动计算 pageSize（首次计算，后续锁定）
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { ref, type Ref } from 'vue';
+
+export interface AutoPageSizeOptions {
+  rowHeight?: number;
+  headerHeight?: number;
+}
+
+const DEFAULT_ROW_HEIGHT = 48;
+const DEFAULT_HEADER_HEIGHT = 40;
+const MIN_PAGE_SIZE = 5;
+
+export function useAutoPageSize(
+  containerRef: Ref<HTMLElement | undefined>,
+  options: AutoPageSizeOptions = {},
+) {
+  const rowHeight = options.rowHeight ?? DEFAULT_ROW_HEIGHT;
+  const headerHeight = options.headerHeight ?? DEFAULT_HEADER_HEIGHT;
+
+  const pageSize = ref(0);
+  const resolved = ref(false);
+
+  function calculate(): number {
+    const el = containerRef.value;
+    if (!el) return MIN_PAGE_SIZE;
+
+    const available = el.clientHeight - headerHeight;
+    return Math.max(Math.floor(available / rowHeight), MIN_PAGE_SIZE);
+  }
+
+  function waitForLayout(): Promise<number> {
+    return new Promise<number>(resolve => {
+      requestAnimationFrame(() => {
+        const size = calculate();
+        pageSize.value = size;
+        resolved.value = true;
+        resolve(size);
+      });
+    });
+  }
+
+  return {
+    pageSize,
+    resolved,
+    waitForLayout,
+  };
+}

package/composables/page/useCrudPage.ts

@@ -7,11 +7,12 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted, type Ref } from 'vue';
 import { useRequestClient } from '../../setup';
 import type { CrudPageConfig } from './types';
+import { useAutoPageSize, type AutoPageSizeOptions } from './useAutoPageSize';
 
-export function useCrudPage(config: CrudPageConfig) {
+export function useCrudPage(config: CrudPageConfig, tableBodyRef?: Ref<HTMLElement | undefined>) {
   const client = useRequestClient();
 
   const page = ref(1);
@@ -20,6 +21,14 @@ export function useCrudPage(config: CrudPageConfig) {
   const list = ref<Record<string, unknown>[]>([]);
   const loading = ref(false);
 
+  const autoOptions: AutoPageSizeOptions | undefined = config.autoPageSize
+    ? (typeof config.autoPageSize === 'object' ? config.autoPageSize : {})
+    : undefined;
+
+  const auto = autoOptions && tableBodyRef
+    ? useAutoPageSize(tableBodyRef, autoOptions)
+    : undefined;
+
   // 筛选表单状态
   const filters = reactive<Record<string, unknown>>({});
   if (config.filters) {
@@ -70,7 +79,13 @@ export function useCrudPage(config: CrudPageConfig) {
     fetchData();
   }
 
-  onMounted(fetchData);
+  onMounted(async () => {
+    if (auto) {
+      const size = await auto.waitForLayout();
+      pageSize.value = size;
+    }
+    fetchData();
+  });
 
   return {
     page,

package/dist/composables/page/__tests__/useAutoPageSize.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -7,4 +7,6 @@
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
 export { useCrudPage } from './useCrudPage';
+export { useAutoPageSize } from './useAutoPageSize';
+export type { AutoPageSizeOptions } from './useAutoPageSize';
 export type { CrudPageConfig, CrudColumnConfig, CrudFilterConfig, StatusMapItem } from './types';

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

@@ -52,6 +52,16 @@ export interface CrudPageConfig {
     statusMap?: Record<string, StatusMapItem>;
     /** 每页条数，默认 20 */
     pageSize?: number;
+    /**
+     * 根据表格容器高度自动计算 pageSize（首次计算，后续锁定）。
+     * - true: 使用默认行高（48px）
+     * - { rowHeight, headerHeight }: 自定义行高参数
+     * 启用后 pageSize 字段作为 fallback 使用。
+     */
+    autoPageSize?: boolean | {
+        rowHeight?: number;
+        headerHeight?: number;
+    };
     /** 行主键字段，默认 'id' */
     rowKey?: string;
     /** 详情页路由前缀，用于构建查看/编辑路由：`${detailPath}/${row[rowKey]}` */

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

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+export interface AutoPageSizeOptions {
+    rowHeight?: number;
+    headerHeight?: number;
+}
+export declare function useAutoPageSize(containerRef: Ref<HTMLElement | undefined>, options?: AutoPageSizeOptions): {
+    pageSize: Ref<number, number>;
+    resolved: Ref<boolean, boolean>;
+    waitForLayout: () => Promise<number>;
+};

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

@@ -1,11 +1,12 @@
+import { Ref } from 'vue';
 import { CrudPageConfig } from './types';
-export declare function useCrudPage(config: CrudPageConfig): {
-    page: import('vue').Ref<number, number>;
-    pageSize: import('vue').Ref<number, number>;
-    total: import('vue').Ref<number, number>;
+export declare function useCrudPage(config: CrudPageConfig, tableBodyRef?: Ref<HTMLElement | undefined>): {
+    page: Ref<number, number>;
+    pageSize: Ref<number, number>;
+    total: Ref<number, number>;
     totalPages: import('vue').ComputedRef<number>;
-    list: import('vue').Ref<Record<string, unknown>[], Record<string, unknown>[]>;
-    loading: import('vue').Ref<boolean, boolean>;
+    list: Ref<Record<string, unknown>[], Record<string, unknown>[]>;
+    loading: Ref<boolean, boolean>;
     filters: Record<string, unknown>;
     fetchData: () => Promise<void>;
     onPageChange: (p: number) => void;

package/dist/crud.js

@@ -1,4 +1,4 @@
-import { Comment, Fragment, Teleport, computed, createApp, createTextVNode, createVNode, defineComponent, h, inject, isRef, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, reactive, ref, resolveComponent, shallowRef, toRef, triggerRef, watch } from "vue";
+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 { useRoute, useRouter } from "vue-router";
@@ -283,22 +283,127 @@ function useTable() {
 	};
 }
 //#endregion
-//#region ../ui/components/table/KTable.tsx
+//#region ../core/components/template/table/index.ts
 /**
-* @description kine-ui table 组件
+* @description table core 导出
 * @author 阿怪
-* @date 2026/2/26
+* @date 2026/2/25
 * @version v1.0.0
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
 */
-var { props: props$9 } = {
+var TableCore = {
 	props: props$10,
 	useTable
 };
-var KTable_default = /* @__PURE__ */ defineComponent((_props, { slots }) => {
+//#endregion
+//#region ../core/compositions/common/testAnchor.ts
+/**
+* @description Test anchor system: provide/inject keys, types, and kDefineComponent wrapper
+* @author kine-design
+* @date 2026/4/28
+* @version v1.0.0
+*
+* Renders business-semantic `data-k` attributes on DOM elements when testAnchor is enabled,
+* allowing E2E tests to target components by stable identifiers.
+*/
+/** Global switch provided by KConfigProvider to enable data-k rendering */
+var K_TEST_ANCHOR_KEY = Symbol("k-test-anchor");
+/** Field identity provided by KFormItem so child inputs inherit field name */
+var K_FIELD_KEY = Symbol("k-field");
+/**
+* Extract text content from a VNode tree (for slotText mode).
+* Walks children recursively, concatenating string segments.
+*/
+function extractSlotText(nodes) {
+	if (!nodes) return "";
+	let text = "";
+	for (const node of nodes) if (typeof node.children === "string") text += node.children;
+	else if (Array.isArray(node.children)) text += extractSlotText(node.children);
+	return text.trim();
+}
+/**
+* Resolve the data-k value for a component instance.
+* Returns undefined when testAnchor is off or no identity can be derived.
+*/
+function resolveDataK(config, props, attrs, fieldFromParent, slotNodes) {
+	const override = attrs[`k-${config.type}`];
+	if (typeof override === "string" && override) return `${config.type}:${override}`;
+	if (config.prop) {
+		const val = props[config.prop];
+		if (typeof val === "string" && val) return `${config.type}:${val}`;
+	}
+	if (config.slotText && slotNodes) {
+		const text = extractSlotText(slotNodes);
+		if (text) return `${config.type}:${text}`;
+	}
+	if (config.slotText && typeof props.text === "string" && props.text) return `${config.type}:${props.text}`;
+	if (config.type === "field" && !config.prop && fieldFromParent) return `${config.type}:${fieldFromParent}`;
+}
+/**
+* Inject data-k attribute into a VNode.
+* Uses cloneVNode to avoid mutating the original.
+*/
+function injectDataK(vnode, dataK) {
+	return cloneVNode(vnode, { "data-k": dataK });
+}
+/**
+* Wrapper around Vue's defineComponent that automatically injects `data-k`
+* test anchor attributes when testAnchor is enabled via KConfigProvider.
+*
+* Usage:
+* ```tsx
+* export default kDefineComponent((_props, ctx) => {
+*   return () => <div class="k-form-item">...</div>;
+* }, {
+*   name: 'KFormItem',
+*   props: FormCore.formItemProps,
+*   kAnchor: { type: 'field', prop: 'prop' },
+* });
+* ```
+*/
+function kDefineComponent(setup, options) {
+	const { kAnchor, ...defineOptions } = options;
+	return defineComponent((rawProps, ctx) => {
+		const render = setup(rawProps, ctx);
+		if (!kAnchor) return render;
+		const testAnchor = inject(K_TEST_ANCHOR_KEY, void 0);
+		const parentField = kAnchor.type === "field" && !kAnchor.prop ? inject(K_FIELD_KEY, void 0) : void 0;
+		return () => {
+			const vnode = render();
+			if (!testAnchor?.value) return vnode;
+			const props = rawProps;
+			const slotNodes = kAnchor.slotText ? ctx.slots.default?.() ?? void 0 : void 0;
+			const dataK = resolveDataK(kAnchor, props, ctx.attrs, parentField?.value, slotNodes);
+			if (!dataK) return vnode;
+			if (vnode === null || vnode === void 0) return vnode;
+			if (Array.isArray(vnode)) {
+				if (vnode.length === 0) return vnode;
+				const first = vnode[0];
+				if (first && typeof first === "object") return [injectDataK(first, dataK), ...vnode.slice(1)];
+				return vnode;
+			}
+			return injectDataK(vnode, dataK);
+		};
+	}, defineOptions);
+}
+//#endregion
+//#region ../ui/components/table/KTable.tsx
+/**
+* @description kine-ui table 组件
+* @author 阿怪
+* @date 2026/2/26
+* @version v1.1.0
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*
+* v1.1.0 migrate to kDefineComponent for data-k test anchor 2026/4/28
+*/
+var { props: props$9 } = TableCore;
+var KTable_default = kDefineComponent((_props, { slots }) => {
 	const p = _props;
 	const { initTable } = useTable();
+	const testAnchor = inject(K_TEST_ANCHOR_KEY, void 0);
 	return () => {
 		const columns = [];
 		(slots.default?.() ?? []).forEach((s) => {
@@ -314,6 +419,7 @@ var KTable_default = /* @__PURE__ */ defineComponent((_props, { slots }) => {
 			empty: createVNode("tbody", { "class": "m-table-empty k-table-empty" }, [createVNode("tr", null, [createVNode("th", { "colspan": columns.length }, [slots.empty?.() ?? "暂无数据"])])]),
 			tbodyTr: ({ data, param, slot, style: cellStyle, slotInfo }) => createVNode("td", {
 				"style": cellStyle,
+				"data-k": testAnchor?.value && param ? `col:${param}` : void 0,
 				"class": [
 					"m-td",
 					"k-td",
@@ -360,7 +466,11 @@ var KTable_default = /* @__PURE__ */ defineComponent((_props, { slots }) => {
 	};
 }, {
 	name: "KTable",
-	props: props$9
+	props: props$9,
+	kAnchor: {
+		type: "table",
+		prop: "name"
+	}
 });
 //#endregion
 //#region ../core/components/base/input/api.ts
@@ -7068,11 +7178,13 @@ function useComponentSize(props) {
 * @description kine-ui button 组件
 * @author 阿怪
 * @date 2026/2/27
-* @version v1.1.0
+* @version v1.2.0
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
+*
+* v1.2.0 migrate to kDefineComponent for data-k test anchor 2026/4/28
 */
-var KButton_default = /* @__PURE__ */ defineComponent((_props, ctx) => {
+var KButton_default = kDefineComponent((_props, ctx) => {
 	const props = _props;
 	const componentSize = useComponentSize(props);
 	return () => {
@@ -7095,7 +7207,11 @@ var KButton_default = /* @__PURE__ */ defineComponent((_props, ctx) => {
 	};
 }, {
 	name: "KButton",
-	props: ButtonCore.props
+	props: ButtonCore.props,
+	kAnchor: {
+		type: "action",
+		slotText: true
+	}
 });
 //#endregion
 //#region components/searchTable/KSearchTable.tsx
@@ -7396,11 +7512,13 @@ var KImage_default = /* @__PURE__ */ defineComponent((_props, { slots, emit }) =
 * @description kine-ui input 组件
 * @author 阿怪
 * @date 2026/2/26
-* @version v1.0.0
+* @version v1.1.0
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
+*
+* v1.1.0 migrate to kDefineComponent for data-k test anchor 2026/4/28
 */
-var KInput_default = /* @__PURE__ */ defineComponent((_props, ctx) => {
+var KInput_default = kDefineComponent((_props, ctx) => {
 	const props = _props;
 	const size = useComponentSize(props);
 	return () => {
@@ -7447,7 +7565,8 @@ var KInput_default = /* @__PURE__ */ defineComponent((_props, ctx) => {
 		"focus",
 		"blur",
 		"clear"
-	]
+	],
+	kAnchor: { type: "field" }
 });
 //#endregion
 //#region ../ui/constants.ts
@@ -7465,14 +7584,15 @@ var DROPDOWN_HIDDEN_STYLE = {
 * @description kine-ui select 组件
 * @author 阿怪
 * @date 2026/2/26
-* @version v1.0.1
+* @version v1.1.0
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
 *
 * v1.0.1 消费 inputReadonly，支持 filterable 可搜索模式 阿怪 2026/2/27
+* v1.1.0 migrate to kDefineComponent for data-k test anchor 2026/4/28
 */
 var { props: selectProps, useSelect } = SelectCore;
-var KSelect_default = /* @__PURE__ */ defineComponent((_props, _ctx) => {
+var KSelect_default = kDefineComponent((_props, _ctx) => {
 	const props = _props;
 	const { slots, expose } = _ctx;
 	const componentSize = useComponentSize(props);
@@ -7657,7 +7777,8 @@ var KSelect_default = /* @__PURE__ */ defineComponent((_props, _ctx) => {
 		"select",
 		"focus",
 		"blur"
-	]
+	],
+	kAnchor: { type: "field" }
 });
 //#endregion
 //#region components/pageHeader/KPageHeader.tsx
@@ -8751,7 +8872,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 };
@@ -8763,7 +8883,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;
@@ -8771,6 +8894,46 @@ function createCrudAppWithOptions(rootComponent, options) {
 	return enhancedApp;
 }
 //#endregion
+//#region composables/page/useAutoPageSize.ts
+/**
+* @description 根据容器可用高度自动计算 pageSize（首次计算，后续锁定）
+* @author 阿怪
+* @date 2026/5/7
+* @version v0.0.1
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+var DEFAULT_ROW_HEIGHT = 48;
+var DEFAULT_HEADER_HEIGHT = 40;
+var MIN_PAGE_SIZE = 5;
+function useAutoPageSize(containerRef, options = {}) {
+	const rowHeight = options.rowHeight ?? DEFAULT_ROW_HEIGHT;
+	const headerHeight = options.headerHeight ?? DEFAULT_HEADER_HEIGHT;
+	const pageSize = ref(0);
+	const resolved = ref(false);
+	function calculate() {
+		const el = containerRef.value;
+		if (!el) return MIN_PAGE_SIZE;
+		const available = el.clientHeight - headerHeight;
+		return Math.max(Math.floor(available / rowHeight), MIN_PAGE_SIZE);
+	}
+	function waitForLayout() {
+		return new Promise((resolve) => {
+			requestAnimationFrame(() => {
+				const size = calculate();
+				pageSize.value = size;
+				resolved.value = true;
+				resolve(size);
+			});
+		});
+	}
+	return {
+		pageSize,
+		resolved,
+		waitForLayout
+	};
+}
+//#endregion
 //#region composables/page/useCrudPage.ts
 /**
 * @description CrudPage composable — 配置驱动的列表页数据层
@@ -8780,13 +8943,15 @@ function createCrudAppWithOptions(rootComponent, options) {
 *
 * 江湖的业务千篇一律，复杂的代码好几百行。
 */
-function useCrudPage(config) {
+function useCrudPage(config, tableBodyRef) {
 	const client = useRequestClient();
 	const page = ref(1);
 	const pageSize = ref(config.pageSize ?? 20);
 	const total = ref(0);
 	const list = ref([]);
 	const loading = ref(false);
+	const autoOptions = config.autoPageSize ? typeof config.autoPageSize === "object" ? config.autoPageSize : {} : void 0;
+	const auto = autoOptions && tableBodyRef ? useAutoPageSize(tableBodyRef, autoOptions) : void 0;
 	const filters = reactive({});
 	if (config.filters) for (const f of config.filters) filters[f.param] = void 0;
 	const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)));
@@ -8819,7 +8984,10 @@ function useCrudPage(config) {
 		page.value = 1;
 		fetchData();
 	}
-	onMounted(fetchData);
+	onMounted(async () => {
+		if (auto) pageSize.value = await auto.waitForLayout();
+		fetchData();
+	});
 	return {
 		page,
 		pageSize,
@@ -8853,7 +9021,9 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
 		required: true
 	} },
 	setup(props, { slots }) {
-		const { page, pageSize, total, list, loading, filters, onPageChange, onSearch, onReset } = useCrudPage(props.config);
+		const rootRef = ref();
+		const tableBodyRef = computed(() => rootRef.value?.querySelector(".k-search-table-body"));
+		const { page, pageSize, total, list, loading, filters, onPageChange, onSearch, onReset } = useCrudPage(props.config, tableBodyRef);
 		/** 格式化日期 */
 		const formatDate = (val) => {
 			if (!val) return "";
@@ -8959,7 +9129,10 @@ var KCrudPage_default = /* @__PURE__ */ defineComponent({
 				}
 			}, null)]));
 		};
-		return () => createVNode("div", { "class": "k-crud-page" }, [createVNode(KPageHeader_default, { "title": props.config.title }, { extra: slots.headerExtra }), createVNode(KSearchTable_default, {
+		return () => createVNode("div", {
+			"class": "k-crud-page",
+			"ref": rootRef
+		}, [createVNode(KPageHeader_default, { "title": props.config.title }, { extra: slots.headerExtra }), createVNode(KSearchTable_default, {
 			"data": list.value,
 			"loading": loading.value,
 			"total": total.value,

package/dist/vitest.config.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description @kine-design/crud 单元测试配置
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+declare const _default: import('vite').UserConfig;
+export default _default;

package/package.json

@@ -1,16 +1,19 @@
 {
   "name": "@kine-design/crud",
-  "version": "0.0.1-beta.21",
+  "version": "0.0.1-beta.24",
   "type": "module",
   "main": "./dist/crud.js",
   "types": "./dist/index.d.ts",
+  "devDependencies": {
+    "vitest": "^4.1.0"
+  },
   "dependencies": {
     "@tanstack/vue-query": "^5.92.10",
     "pinia": "^3.0.3",
     "vue": "^3.5.30",
     "vue-router": "^5.0.3",
-    "@kine-design/core": "0.0.1-beta.6",
-    "kine-ui": "0.0.1-beta.12"
+    "@kine-design/core": "0.0.1-beta.8",
+    "kine-ui": "0.0.1-beta.17"
   },
   "publishConfig": {
     "access": "public",
@@ -19,7 +22,8 @@
     ]
   },
   "scripts": {
-    "build": "vite build --config vite.config.build.ts"
+    "build": "vite build --config vite.config.build.ts",
+    "test": "vitest --config vitest.config.ts --run"
   },
   "module": "./dist/crud.js",
   "exports": {

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 {

package/vitest.config.ts

@@ -0,0 +1,17 @@
+/**
+ * @description @kine-design/crud 单元测试配置
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  root: __dirname,
+  test: {
+    include: ['**/__tests__/*.test.ts'],
+  },
+});