From bbbc5c07a27151eab50372503254387beb29d4c6 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Thu, 6 Aug 2026 12:31:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=8F=AF=E5=AE=9A?=
 =?UTF-8?q?=E5=88=B6=E7=9A=84=E4=B8=8B=E6=8B=89=E9=80=89=E6=8B=A9=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/admin/SelectDropdown.svelte    | 267 ++++++++++++++++++
 1 file changed, 267 insertions(+)
 create mode 100644 src/lib/components/admin/SelectDropdown.svelte

diff --git a/src/lib/components/admin/SelectDropdown.svelte b/src/lib/components/admin/SelectDropdown.svelte
new file mode 100644
index 0000000..e6d7fc3
--- /dev/null
+++ b/src/lib/components/admin/SelectDropdown.svelte
@@ -0,0 +1,267 @@
+<script lang="ts">
+	type SelectValue = string | number;
+
+	type SelectOption = {
+		value: SelectValue;
+		label: string;
+	};
+
+	type Props = {
+		name: string;
+		label: string;
+		options: SelectOption[];
+		value?: SelectValue;
+		emptyLabel?: string;
+	};
+
+	let {
+		name,
+		label,
+		options,
+		value = $bindable<SelectValue>(''),
+		emptyLabel = '-- 无 --'
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let triggerElement = $state<HTMLButtonElement>();
+	let menuElement = $state<HTMLDivElement>();
+
+	let selectedOption = $derived(options.find((option) => String(option.value) === String(value)));
+	let selectedLabel = $derived(selectedOption?.label ?? emptyLabel);
+
+	function menuOptions() {
+		return Array.from(menuElement?.querySelectorAll<HTMLButtonElement>('[role="option"]') ?? []);
+	}
+
+	function focusOption(preferLast = false) {
+		requestAnimationFrame(() => {
+			const items = menuOptions();
+			const selectedIndex = items.findIndex(
+				(item) => item.getAttribute('aria-selected') === 'true'
+			);
+			items[selectedIndex >= 0 ? selectedIndex : preferLast ? items.length - 1 : 0]?.focus();
+		});
+	}
+
+	function openMenu(preferLast = false) {
+		isOpen = true;
+		focusOption(preferLast);
+	}
+
+	function closeMenu(restoreFocus = false) {
+		isOpen = false;
+		if (restoreFocus) triggerElement?.focus();
+	}
+
+	function selectOption(nextValue: SelectValue) {
+		value = nextValue;
+		closeMenu(true);
+	}
+
+	function handleTriggerKeydown(event: KeyboardEvent) {
+		if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+			event.preventDefault();
+			openMenu(event.key === 'ArrowUp');
+		}
+	}
+
+	function handleMenuKeydown(event: KeyboardEvent) {
+		const items = menuOptions();
+		const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);
+
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			closeMenu(true);
+			return;
+		}
+
+		if (event.key === 'Tab') {
+			closeMenu();
+			return;
+		}
+
+		let nextIndex: number | undefined;
+		if (event.key === 'ArrowDown') nextIndex = (currentIndex + 1) % items.length;
+		if (event.key === 'ArrowUp') nextIndex = (currentIndex - 1 + items.length) % items.length;
+		if (event.key === 'Home') nextIndex = 0;
+		if (event.key === 'End') nextIndex = items.length - 1;
+
+		if (nextIndex !== undefined) {
+			event.preventDefault();
+			items[nextIndex]?.focus();
+		}
+	}
+</script>
+
+<div class="select-dropdown">
+	<input type="hidden" {name} {value} />
+	<button
+		type="button"
+		class="select-dropdown-trigger"
+		class:open={isOpen}
+		bind:this={triggerElement}
+		aria-label={label}
+		aria-haspopup="listbox"
+		aria-expanded={isOpen}
+		aria-controls={`${name}-menu`}
+		onclick={() => (isOpen ? closeMenu() : openMenu())}
+		onkeydown={handleTriggerKeydown}
+	>
+		<span>{selectedLabel}</span>
+		<svg viewBox="0 0 24 24" aria-hidden="true">
+			<polyline points="6 9 12 15 18 9"></polyline>
+		</svg>
+	</button>
+
+	{#if isOpen}
+		<button
+			type="button"
+			class="select-dropdown-overlay"
+			aria-label={`关闭${label}菜单`}
+			tabindex="-1"
+			onclick={() => closeMenu()}
+		></button>
+		<div
+			class="select-dropdown-menu"
+			id={`${name}-menu`}
+			role="listbox"
+			aria-label={label}
+			tabindex="-1"
+			bind:this={menuElement}
+			onkeydown={handleMenuKeydown}
+		>
+			<button
+				type="button"
+				class="select-dropdown-item"
+				class:selected={value === ''}
+				role="option"
+				aria-selected={value === ''}
+				onclick={() => selectOption('')}
+			>
+				{emptyLabel}
+			</button>
+			{#each options as option (option.value)}
+				<button
+					type="button"
+					class="select-dropdown-item"
+					class:selected={String(option.value) === String(value)}
+					role="option"
+					aria-selected={String(option.value) === String(value)}
+					onclick={() => selectOption(option.value)}
+				>
+					{option.label}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.select-dropdown {
+		position: relative;
+		width: 100%;
+	}
+
+	.select-dropdown-trigger {
+		position: relative;
+		z-index: 50;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		padding: 10px 0;
+		border: none;
+		border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+		background: transparent;
+		color: var(--text-color);
+		font-family: inherit;
+		font-size: 1rem;
+		text-align: left;
+		cursor: pointer;
+		transition:
+			border-color 0.2s ease,
+			color 0.2s ease;
+	}
+
+	.select-dropdown-trigger:hover,
+	.select-dropdown-trigger:focus-visible,
+	.select-dropdown-trigger.open {
+		outline: none;
+		border-bottom-color: var(--accent-color, #419b38);
+	}
+
+	.select-dropdown-trigger svg {
+		width: 17px;
+		height: 17px;
+		margin-left: 12px;
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 1.8;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		transition: transform 0.2s ease;
+	}
+
+	.select-dropdown-trigger.open svg {
+		transform: rotate(180deg);
+	}
+
+	.select-dropdown-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 49;
+		margin: 0;
+		padding: 0;
+		border: none;
+		background: transparent;
+		cursor: default;
+	}
+
+	.select-dropdown-menu {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		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);
+		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
+	}
+
+	.select-dropdown-item {
+		flex: 0 0 auto;
+		padding: 8px 12px;
+		border: none;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+		background: transparent;
+		color: var(--text-color);
+		font-family: inherit;
+		font-size: 0.85rem;
+		font-weight: 600;
+		text-align: left;
+		cursor: pointer;
+		transition:
+			background-color 0.2s ease,
+			color 0.2s ease;
+	}
+
+	.select-dropdown-item:last-child {
+		border-bottom: none;
+	}
+
+	.select-dropdown-item:hover,
+	.select-dropdown-item:focus-visible {
+		outline: none;
+		background: var(--text-color);
+		color: var(--bg-color, #ffffff);
+	}
+
+	.select-dropdown-item.selected:not(:hover):not(:focus-visible) {
+		color: var(--accent-color, #419b38);
+	}
+</style>