From 9e33fabdbe4e7797b51452b0b138b97adef728c5 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?refactor:=20=E5=9C=A8=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=E4=B8=AD=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=20SelectDropdown=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=9B=BF=E6=8D=A2=E5=8E=9F=E7=94=9F=20select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/admin/posts/[id]/+page.svelte | 31 ++++++++++--------------
 src/routes/admin/posts/new/+page.svelte  | 31 ++++++++++--------------
 2 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/src/routes/admin/posts/[id]/+page.svelte b/src/routes/admin/posts/[id]/+page.svelte
index 1b373e6..c5e366d 100644
--- a/src/routes/admin/posts/[id]/+page.svelte
+++ b/src/routes/admin/posts/[id]/+page.svelte
@@ -4,6 +4,7 @@
 	import { deserialize } from '$app/forms';
 	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
 	import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte';
+	import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte';
 	import { parseHugoMarkdown } from '$lib/hugoParser';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
@@ -355,22 +356,22 @@
 
 			<div class="sidebar-box">
 				<h3>分类</h3>
-				<select name="category_id" class="select-input" bind:value={selectedCategoryId}>
-					<option value="">-- 无 --</option>
-					{#each data.categories as category}
-						<option value={category.id}>{category.name}</option>
-					{/each}
-				</select>
+				<SelectDropdown
+					name="category_id"
+					label="分类"
+					options={data.categories.map((category) => ({ value: category.id, label: category.name }))}
+					bind:value={selectedCategoryId}
+				/>
 			</div>
 
 			<div class="sidebar-box">
 				<h3>{$page.data.aliases?.series || '系列'}</h3>
-				<select name="series_id" class="select-input" bind:value={selectedSeriesId}>
-					<option value="">-- 无 --</option>
-					{#each seriesList as series}
-						<option value={series.id}>{series.name}</option>
-					{/each}
-				</select>
+				<SelectDropdown
+					name="series_id"
+					label={$page.data.aliases?.series || '系列'}
+					options={seriesList.map((series) => ({ value: series.id, label: series.name }))}
+					bind:value={selectedSeriesId}
+				/>
 				<input
 					type="number"
 					name="series_weight"
@@ -615,13 +616,11 @@
 		box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
 	}
 
-	.select-input:focus,
 	.sidebar-input:focus {
 		outline: none;
 		border-bottom-color: var(--accent-color, #419b38);
 	}
 
-	.select-input,
 	.sidebar-input {
 		width: 100%;
 		padding: 10px 0;
@@ -635,10 +634,6 @@
 		transition: border-bottom-color 0.3s ease;
 	}
 
-	.select-input {
-		cursor: pointer;
-	}
-
 	.form-group textarea:focus {
 		outline: none;
 		border-color: var(--accent-color, #419b38);
diff --git a/src/routes/admin/posts/new/+page.svelte b/src/routes/admin/posts/new/+page.svelte
index b96d3d4..484adc6 100644
--- a/src/routes/admin/posts/new/+page.svelte
+++ b/src/routes/admin/posts/new/+page.svelte
@@ -4,6 +4,7 @@
 	import { deserialize } from '$app/forms';
 	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
 	import FeaturedImagePicker from '$lib/components/admin/FeaturedImagePicker.svelte';
+	import SelectDropdown from '$lib/components/admin/SelectDropdown.svelte';
 	import { parseHugoMarkdown } from '$lib/hugoParser';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
@@ -361,22 +362,22 @@
 
 			<div class="sidebar-box">
 				<h3>分类</h3>
-				<select name="category_id" class="select-input" bind:value={selectedCategoryId}>
-					<option value="">-- 无 --</option>
-					{#each data.categories as category}
-						<option value={category.id}>{category.name}</option>
-					{/each}
-				</select>
+				<SelectDropdown
+					name="category_id"
+					label="分类"
+					options={data.categories.map((category) => ({ value: category.id, label: category.name }))}
+					bind:value={selectedCategoryId}
+				/>
 			</div>
 
 			<div class="sidebar-box">
 				<h3>{$page.data.aliases?.series || '系列'}</h3>
-				<select name="series_id" class="select-input" bind:value={selectedSeriesId}>
-					<option value="">-- 无 --</option>
-					{#each seriesList as series}
-						<option value={series.id}>{series.name}</option>
-					{/each}
-				</select>
+				<SelectDropdown
+					name="series_id"
+					label={$page.data.aliases?.series || '系列'}
+					options={seriesList.map((series) => ({ value: series.id, label: series.name }))}
+					bind:value={selectedSeriesId}
+				/>
 				<input
 					type="number"
 					name="series_weight"
@@ -620,13 +621,11 @@
 		box-shadow: 0 0 0 3px rgba(65, 155, 56, 0.08);
 	}
 
-	.select-input:focus,
 	.sidebar-input:focus {
 		outline: none;
 		border-bottom-color: var(--accent-color, #419b38);
 	}
 
-	.select-input,
 	.sidebar-input {
 		width: 100%;
 		padding: 10px 0;
@@ -640,10 +639,6 @@
 		transition: border-bottom-color 0.3s ease;
 	}
 
-	.select-input {
-		cursor: pointer;
-	}
-
 	.form-group textarea:focus {
 		outline: none;
 		border-color: var(--accent-color, #419b38);