zlwuandCursor
7d78f76129
Pure calc keeps pagination visible with a 10px bottom gap for main list scroll UX. Co-authored-by: Cursor <cursoragent@cursor.com>
33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
/** 分页底边到内容区底的默认空隙（px） */
|
||
export const LIST_TABLE_VIEWPORT_BOTTOM_GAP = 10
|
||
|
||
/** 表体动态高度下限（px），避免筛选展开时表被压没 */
|
||
export const LIST_TABLE_VIEWPORT_MIN_HEIGHT = 240
|
||
|
||
export type CalcListTableViewportHeightInput = {
|
||
/** 主内容滚动容器可视底边（如 #app-content.getBoundingClientRect().bottom） */
|
||
contentViewportBottom: number
|
||
/** 表格锚点顶边（同坐标系，通常 getBoundingClientRect().top） */
|
||
tableTop: number
|
||
/** 分页条实际高度；无分页传 0 */
|
||
pagerHeight: number
|
||
minHeight?: number
|
||
bottomGap?: number
|
||
}
|
||
|
||
/**
|
||
* 计算列表表体应设置的 height，使「表 + 分页」落在内容视口内，且分页下方留 bottomGap。
|
||
* tableHeight = floor(contentBottom - tableTop - pagerHeight - bottomGap)，再与 minHeight 取大。
|
||
*/
|
||
export function calcListTableViewportHeight(
|
||
input: CalcListTableViewportHeightInput
|
||
): number {
|
||
const minHeight = input.minHeight ?? LIST_TABLE_VIEWPORT_MIN_HEIGHT
|
||
const bottomGap = input.bottomGap ?? LIST_TABLE_VIEWPORT_BOTTOM_GAP
|
||
const raw = Math.floor(
|
||
input.contentViewportBottom - input.tableTop - input.pagerHeight - bottomGap
|
||
)
|
||
if (!Number.isFinite(raw)) return minHeight
|
||
return Math.max(raw, minHeight)
|
||
}
|