Commit ee69cecf by Archer Committed by GitHub

fix: date picker (#6325)

parent 1788b800
...@@ -40,5 +40,6 @@ curl --location --request POST 'https://{{host}}/api/admin/initv4146' \ ...@@ -40,5 +40,6 @@ curl --location --request POST 'https://{{host}}/api/admin/initv4146' \
## 🐛 修复 ## 🐛 修复
1. 系统工具工具集设置系统密钥后,子工具无法读取到设置的系统密钥 1. 系统工具工具集设置系统密钥后,子工具无法读取到设置的系统密钥
2. 日期选择器溢出问题,增加了动态位置适配。
## 插件 ## 插件
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
"document/content/docs/upgrading/4-14/4143.mdx": "2025-11-26T20:52:05+08:00", "document/content/docs/upgrading/4-14/4143.mdx": "2025-11-26T20:52:05+08:00",
"document/content/docs/upgrading/4-14/4144.mdx": "2025-12-16T14:56:04+08:00", "document/content/docs/upgrading/4-14/4144.mdx": "2025-12-16T14:56:04+08:00",
"document/content/docs/upgrading/4-14/4145.mdx": "2026-01-18T23:59:15+08:00", "document/content/docs/upgrading/4-14/4145.mdx": "2026-01-18T23:59:15+08:00",
"document/content/docs/upgrading/4-14/41451.mdx": "2026-01-19T19:10:54+08:00", "document/content/docs/upgrading/4-14/41451.mdx": "2026-01-20T11:53:27+08:00",
"document/content/docs/upgrading/4-14/4146.mdx": "2026-01-19T19:10:54+08:00", "document/content/docs/upgrading/4-14/4146.mdx": "2026-01-19T19:10:54+08:00",
"document/content/docs/upgrading/4-8/40.mdx": "2025-08-02T19:38:37+08:00", "document/content/docs/upgrading/4-8/40.mdx": "2025-08-02T19:38:37+08:00",
"document/content/docs/upgrading/4-8/41.mdx": "2025-08-02T19:38:37+08:00", "document/content/docs/upgrading/4-8/41.mdx": "2025-08-02T19:38:37+08:00",
......
...@@ -35,20 +35,49 @@ const DateTimePicker = ({ ...@@ -35,20 +35,49 @@ const DateTimePicker = ({
}, [selectedDateTime]); }, [selectedDateTime]);
useEffect(() => { useEffect(() => {
if (showSelected && containerRef.current) { if (!showSelected) return;
const rect = containerRef.current.getBoundingClientRect(); const updatePosition = () => {
if (popPosition === 'top') { const rect = containerRef.current?.getBoundingClientRect();
setPosition({ const popoverRect = popoverRef.current?.getBoundingClientRect();
top: rect.top - 4, if (!rect || !popoverRect) return;
left: rect.left
}); const padding = 8;
} else { const topBottom = rect.bottom + 4;
setPosition({ const topTop = rect.top - 4 - popoverRect.height;
top: rect.bottom + 4, const maxTop = window.innerHeight - popoverRect.height - padding;
left: rect.left const maxLeft = window.innerWidth - popoverRect.width - padding;
});
let top = popPosition === 'top' ? topTop : topBottom;
if (
popPosition === 'bottom' &&
topBottom + popoverRect.height > window.innerHeight - padding &&
topTop >= padding
) {
top = topTop;
} }
} if (
popPosition === 'top' &&
topTop < padding &&
topBottom + popoverRect.height <= window.innerHeight - padding
) {
top = topBottom;
}
top = Math.min(Math.max(top, padding), Math.max(padding, maxTop));
let left = rect.left;
left = Math.min(Math.max(left, padding), Math.max(padding, maxLeft));
setPosition({ top, left });
};
const raf = requestAnimationFrame(updatePosition);
window.addEventListener('resize', updatePosition);
window.addEventListener('scroll', updatePosition, true);
return () => {
cancelAnimationFrame(raf);
window.removeEventListener('resize', updatePosition);
window.removeEventListener('scroll', updatePosition, true);
};
}, [showSelected, popPosition]); }, [showSelected, popPosition]);
// 点击外部关闭 // 点击外部关闭
...@@ -99,8 +128,7 @@ const DateTimePicker = ({ ...@@ -99,8 +128,7 @@ const DateTimePicker = ({
<Card <Card
ref={popoverRef} ref={popoverRef}
position={'fixed'} position={'fixed'}
top={popPosition === 'top' ? 'auto' : `${position.top}px`} top={`${position.top}px`}
bottom={popPosition === 'top' ? `${window.innerHeight - position.top}px` : 'auto'}
left={`${position.left}px`} left={`${position.left}px`}
zIndex={1500} zIndex={1500}
css={{ css={{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment