chore: 添加标签下拉菜单修复脚本

patch_tags.mjs

@@ -0,0 +1,88 @@
+import fs from 'fs';
+
+function patchFile(filePath) {
+	let content = fs.readFileSync(filePath, 'utf8');
+
+	// Add state variables and position function
+	if (!content.includes('updateTagDropdownPosition')) {
+		const stateInsertion = `	let showTagDropdown = $state(false);
+	
+	let tagInputContainer = $state<HTMLDivElement>();
+	let tagDropdownTop = $state(0);
+	let tagDropdownBottom = $state(0);
+	let tagDropdownLeft = $state(0);
+	let tagDropdownWidth = $state(0);
+	let tagDropdownUpwards = $state(false);
+
+	function updateTagDropdownPosition() {
+		if (tagInputContainer) {
+			const rect = tagInputContainer.getBoundingClientRect();
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const spaceAbove = rect.top;
+			if (spaceBelow < 200 && spaceAbove > spaceBelow) {
+				tagDropdownUpwards = true;
+				tagDropdownBottom = window.innerHeight - rect.top;
+			} else {
+				tagDropdownUpwards = false;
+				tagDropdownTop = rect.bottom;
+			}
+			tagDropdownLeft = rect.left;
+			tagDropdownWidth = rect.width;
+		}
+	}`;
+		content = content.replace(`	let showTagDropdown = $state(false);`, stateInsertion);
+	}
+
+	// Add onscroll to .form-sidebar
+	content = content.replace(
+		`<div class="form-sidebar">`,
+		`<div class="form-sidebar" onscroll={() => (showTagDropdown = false)}>`
+	);
+
+	// Also add window resize listener to close the dropdown
+	if (!content.includes('<svelte:window onresize={() => (showTagDropdown = false)} />')) {
+		content = content.replace(
+			`<form method="POST"`,
+			`<svelte:window onresize={() => (showTagDropdown = false)} />\n<form method="POST"`
+		);
+	}
+
+	// Bind tagInputContainer and update onfocus
+	content = content.replace(
+		`<div class="tag-input-container">`,
+		`<div class="tag-input-container" bind:this={tagInputContainer}>`
+	);
+
+	content = content.replace(
+		`onfocus={() => (showTagDropdown = true)}`,
+		`onfocus={() => { updateTagDropdownPosition(); showTagDropdown = true; }}`
+	);
+
+	// Add inline styles to the dropdown and update CSS
+	const oldDropdownStart = `<div class="tag-autocomplete-dropdown">`;
+	const newDropdownStart = `<div class="tag-autocomplete-dropdown" style="top: {tagDropdownUpwards ? 'auto' : \`\${tagDropdownTop}px\`}; bottom: {tagDropdownUpwards ? \`\${tagDropdownBottom}px\` : 'auto'}; left: {tagDropdownLeft}px; width: {tagDropdownWidth}px; margin-top: {tagDropdownUpwards ? '0' : '4px'}; margin-bottom: {tagDropdownUpwards ? '4px' : '0'};">`;
+	content = content.replace(oldDropdownStart, newDropdownStart);
+
+	const oldCss = `.tag-autocomplete-dropdown {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;`;
+	const newCss = `.tag-autocomplete-dropdown {
+		position: fixed;`;
+	content = content.replace(oldCss, newCss);
+
+	// There is a margin-top: 4px; in the CSS as well, let's remove it if it's there
+	content = content.replace(
+		`.tag-autocomplete-dropdown {\n\t\tposition: fixed;\n\t\tbackground: var(--bg-color);\n\t\tborder: 1px solid var(--text-color);\n\t\tbox-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);\n\t\tz-index: 50;\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmargin-top: 4px;\n\t}`,
+		`.tag-autocomplete-dropdown {\n\t\tposition: fixed;\n\t\tbackground: var(--bg-color);\n\t\tborder: 1px solid var(--text-color);\n\t\tbox-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);\n\t\tz-index: 50;\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}`
+	);
+
+	// More generic css replacement for margin-top if it's separate
+	content = content.replace(`margin-top: 4px;`, ``);
+
+	fs.writeFileSync(filePath, content);
+}
+
+patchFile('src/routes/admin/posts/[id]/+page.svelte');
+patchFile('src/routes/admin/posts/new/+page.svelte');