@kine-design/crud 0.0.1-beta.23 → 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

@@ -8894,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 — 配置驱动的列表页数据层
@@ -8903,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)));
@@ -8942,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,
@@ -8976,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 "";
@@ -9082,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.23",
+  "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.7",
-    "kine-ui": "0.0.1-beta.15"
+    "@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/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'],
+  },
+});