From a3322f975008bc67cc202dec3d4bea379f4a3330 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Mon, 28 Sep 2026 20:42:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=20SelectDropdown=20?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E8=8F=9C=E5=8D=95=E5=AE=9A=E4=BD=8D=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E4=BB=A5=E6=94=AF=E6=8C=81=E5=90=91=E4=B8=8A=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/admin/SelectDropdown.svelte    | 47 +++++++++++++++++--
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/admin/SelectDropdown.svelte b/src/lib/components/admin/SelectDropdown.svelte
index 2b1c302..4a5f49f 100644
--- a/src/lib/components/admin/SelectDropdown.svelte
+++ b/src/lib/components/admin/SelectDropdown.svelte
@@ -28,6 +28,12 @@
 	let triggerElement = $state<HTMLButtonElement>();
 	let menuElement = $state<HTMLDivElement>();
 
+	let menuTop = $state(0);
+	let menuBottom = $state(0);
+	let menuLeft = $state(0);
+	let menuWidth = $state(0);
+	let openUpwards = $state(false);
+
 	let selectedOption = $derived(options.find((option) => String(option.value) === String(value)));
 	let selectedLabel = $derived(selectedOption?.label ?? emptyLabel);
 
@@ -46,10 +52,37 @@
 	}
 
 	function openMenu(preferLast = false) {
+		if (triggerElement) {
+			const rect = triggerElement.getBoundingClientRect();
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const spaceAbove = rect.top;
+
+			if (spaceBelow < 240 && spaceAbove > spaceBelow) {
+				openUpwards = true;
+				menuBottom = window.innerHeight - rect.top;
+			} else {
+				openUpwards = false;
+				menuTop = rect.bottom;
+			}
+			menuLeft = rect.left;
+			menuWidth = rect.width;
+		}
 		isOpen = true;
 		focusOption(preferLast);
 	}
 
+	function preventScroll(node: HTMLElement) {
+		const handler = (e: Event) => e.preventDefault();
+		node.addEventListener('wheel', handler, { passive: false });
+		node.addEventListener('touchmove', handler, { passive: false });
+		return {
+			destroy() {
+				node.removeEventListener('wheel', handler);
+				node.removeEventListener('touchmove', handler);
+			}
+		};
+	}
+
 	function closeMenu(restoreFocus = false) {
 		isOpen = false;
 		if (restoreFocus) triggerElement?.focus();
@@ -95,6 +128,8 @@
 	}
 </script>
 
+<svelte:window onresize={() => isOpen && closeMenu()} />
+
 <div class="select-dropdown">
 	<input type="hidden" {name} {value} />
 	<button
@@ -120,6 +155,7 @@
 			aria-label={`关闭${label}菜单`}
 			tabindex="-1"
 			onclick={() => closeMenu()}
+			use:preventScroll
 		></button>
 		<div
 			class="select-dropdown-menu"
@@ -129,6 +165,11 @@
 			tabindex="-1"
 			bind:this={menuElement}
 			onkeydown={handleMenuKeydown}
+			style="top: {openUpwards ? 'auto' : `${menuTop}px`}; bottom: {openUpwards
+				? `${menuBottom}px`
+				: 'auto'}; left: {menuLeft}px; width: {menuWidth}px; margin-top: {openUpwards
+				? '0'
+				: '4px'}; margin-bottom: {openUpwards ? '4px' : '0'};"
 		>
 			<button
 				type="button"
@@ -219,15 +260,11 @@
 	}
 
 	.select-dropdown-menu {
-		position: absolute;
-		top: 100%;
-		left: 0;
-		right: 0;
+		position: fixed;
 		z-index: 51;
 		display: flex;
 		flex-direction: column;
 		max-height: 240px;
-		margin-top: 4px;
 		overflow-y: auto;
 		border: 1px solid var(--text-color);
 		background: var(--bg-color, #ffffff);