WuYongJie/CaiWuXiTong
1
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

fix(表格列设置): 修复面板被侧栏遮挡并适配视口边缘 (#345)

Browse Source
This commit is contained in:
limeng 2026-10-15 22:02:06 +08:00
parent 23b8087d35
commit 74a9b5b81f
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
resources/views/business/pages/partials/finance-table-interactions.blade.php
View File

@ -179,12 +179,15 @@
.finance-table-field-picker__panel { .finance-table-field-picker__panel {
position: absolute; position: absolute;
top: calc(100% + 0.35rem); top: calc(100% + 0.35rem);
right: 0; left: 0;
right: auto;
z-index: 20; z-index: 20;
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(10rem, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.25rem 0.75rem; gap: 0.25rem 0.75rem;
min-width: 25rem; box-sizing: border-box;
width: min(25rem, calc(100vw - 2rem));
min-width: 0;
max-height: min(24rem, 60vh); max-height: min(24rem, 60vh);
overflow: auto; overflow: auto;
padding: 0.75rem; padding: 0.75rem;
@ -587,6 +590,17 @@
if (!isLegacyDirectoryPicker) { if (!isLegacyDirectoryPicker) {
toggle.addEventListener('click', () => { const open = panel.hidden; panel.hidden = !open; toggle.setAttribute('aria-expanded', String(open)); }); toggle.addEventListener('click', () => { const open = panel.hidden; panel.hidden = !open; toggle.setAttribute('aria-expanded', String(open)); });
} }
const positionPanel = () => {
if (panel.hidden) return;
const anchor = toggle.getBoundingClientRect();
const pickerBounds = picker.getBoundingClientRect();
const left = Math.max(8, Math.min(anchor.left, document.documentElement.clientWidth - panel.offsetWidth - 8));
panel.style.left = `${left - pickerBounds.left}px`;
panel.style.right = 'auto';
};
// Directory pickers open via their existing handler; position after it runs.
toggle.addEventListener('click', () => window.requestAnimationFrame(positionPanel));
window.addEventListener('resize', positionPanel);
checks.forEach((check) => check.addEventListener('change', () => setVisibility(table, checks))); checks.forEach((check) => check.addEventListener('change', () => setVisibility(table, checks)));
panel.querySelector('[data-finance-all]')?.addEventListener('click', () => { checks.forEach((check) => { if (!check.disabled) check.checked = true; }); setVisibility(table, checks); }); panel.querySelector('[data-finance-all]')?.addEventListener('click', () => { checks.forEach((check) => { if (!check.disabled) check.checked = true; }); setVisibility(table, checks); });
panel.querySelector('[data-finance-none]')?.addEventListener('click', () => { checks.forEach((check) => { if (!check.disabled) check.checked = false; }); setVisibility(table, checks); }); panel.querySelector('[data-finance-none]')?.addEventListener('click', () => { checks.forEach((check) => { if (!check.disabled) check.checked = false; }); setVisibility(table, checks); });