feat(web-admin): add list table viewport height formula
Pure calc keeps pagination visible with a 10px bottom gap for main list scroll UX. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
1 parent
0e8f244bc3
commit
7d78f76129
2 files changed
+87
No files matched your search
@@ -0,0 +1,55 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import {
|
||||
LIST_TABLE_VIEWPORT_BOTTOM_GAP,
|
||||
LIST_TABLE_VIEWPORT_MIN_HEIGHT,
|
||||
calcListTableViewportHeight
|
||||
} from '../src/composables/listTableViewportHeight'
|
||||
|
||||
assert.equal(LIST_TABLE_VIEWPORT_BOTTOM_GAP, 10)
|
||||
assert.equal(LIST_TABLE_VIEWPORT_MIN_HEIGHT, 240)
|
||||
|
||||
// contentBottom=1000, tableTop=200, pager=48 → 1000-200-48-10 = 742
|
||||
assert.equal(
|
||||
calcListTableViewportHeight({
|
||||
contentViewportBottom: 1000,
|
||||
tableTop: 200,
|
||||
pagerHeight: 48
|
||||
}),
|
||||
742
|
||||
)
|
||||
|
||||
// 无分页
|
||||
assert.equal(
|
||||
calcListTableViewportHeight({
|
||||
contentViewportBottom: 800,
|
||||
tableTop: 100,
|
||||
pagerHeight: 0
|
||||
}),
|
||||
690
|
||||
)
|
||||
|
||||
// 过矮时夹到 minHeight
|
||||
assert.equal(
|
||||
calcListTableViewportHeight({
|
||||
contentViewportBottom: 400,
|
||||
tableTop: 300,
|
||||
pagerHeight: 48,
|
||||
minHeight: 240,
|
||||
bottomGap: 10
|
||||
}),
|
||||
240
|
||||
)
|
||||
|
||||
// 自定义 min / gap
|
||||
assert.equal(
|
||||
calcListTableViewportHeight({
|
||||
contentViewportBottom: 1000,
|
||||
tableTop: 100,
|
||||
pagerHeight: 40,
|
||||
minHeight: 100,
|
||||
bottomGap: 16
|
||||
}),
|
||||
844
|
||||
)
|
||||
|
||||
console.log('check-list-table-viewport-height: ok')
|
||||
Reference in new issue
Block a user