refactor: 将文章系列导航栏改造成折叠面板并优化样式

src/routes/posts/[slug]/+page.svelte

@@ -88,12 +88,29 @@
 			{/if}
 
 			{#if data.series && data.seriesPosts.length > 0}
-				<section class="series-navigation" aria-labelledby="series-navigation-title">
+				<details class="series-navigation" open>
-					<h2 id="series-navigation-title">
+					<summary class="series-title" id="series-navigation-title">
-						{$page.data.aliases?.series || '系列'}：<a
+						<span
-							href={resolve('/series/[slug]', { slug: data.series.slug })}>{data.series.name}</a
+							>{$page.data.aliases?.series || '系列'} -
+							<a href={resolve('/series/[slug]', { slug: data.series.slug })}>{data.series.name}</a
+							></span
 						>
-					</h2>
+						<svg
+							class="details-icon"
+							aria-hidden="true"
+							focusable="false"
+							role="img"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 256 512"
+							width="12"
+							height="12"
+							><path
+								fill="currentColor"
+								d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+							></path></svg
+						>
+					</summary>
+					<div class="series-content">
 						<ol>
 							{#each data.seriesPosts as seriesPost (seriesPost.id)}
 								<li class:current={seriesPost.id === data.post.id}>
@@ -121,9 +138,9 @@
 								{/if}
 							</nav>
 						{/if}
-				</section>
+					</div>
+				</details>
 			{/if}
-
 			<MarkdownRenderer content={data.post.content} />
 
 			{#if data.tags && data.tags.length > 0}
@@ -169,39 +186,71 @@
 
 <style>
 	.series-navigation {
-		margin: 0 0 2rem;
+		margin: 1.5rem 0;
-		padding: 1.25rem 1.5rem;
+		border-radius: 4px;
-		border: 2px solid var(--text-color);
+		overflow: hidden;
-		background: rgba(0, 0, 0, 0.015);
+		border: 1px solid var(--border-color);
 	}
 
-	.series-navigation h2 {
+	.series-navigation .series-title {
-		margin: 0 0 1rem;
+		display: flex;
-		padding: 0;
+		justify-content: space-between;
-		border: 0;
+		align-items: center;
-		font-size: 1.15rem;
+		padding: 0.75rem 1rem;
+		background: rgba(0, 0, 0, 0.05);
+		font-weight: 600;
+		cursor: pointer;
+		list-style: none;
+		user-select: none;
 	}
 
-	.series-navigation h2 a,
+	.series-navigation .series-title::-webkit-details-marker {
+		display: none;
+	}
+
+	.series-navigation .details-icon {
+		transition: transform 0.3s;
+	}
+
+	.series-navigation[open] .details-icon {
+		transform: rotate(90deg);
+	}
+
+	.series-navigation .series-title a,
 	.series-navigation li a,
 	.series-prev-next a {
 		color: var(--text-color);
 		text-decoration: none;
 	}
 
-	.series-navigation h2 a:hover,
+	.series-navigation .series-title a:hover,
 	.series-navigation li a:hover,
 	.series-prev-next a:hover {
 		color: var(--accent-color, #419b38);
 	}
 
+	.series-navigation .series-content {
+		padding: 1rem;
+		background: rgba(0, 0, 0, 0.015);
+	}
+
 	.series-navigation ol {
 		margin: 0;
-		padding-left: 1.6rem;
+		padding: 0 0 0 1.5rem;
+		list-style-type: none;
 	}
 
 	.series-navigation li {
-		padding: 0.25rem 0;
+		padding: 0.35rem 0;
+		position: relative;
+	}
+
+	.series-navigation li::before {
+		content: '|';
+		position: absolute;
+		left: -1rem;
+		color: var(--border-color);
+		font-weight: bold;
 	}
 
 	.series-navigation li.current {
@@ -209,13 +258,18 @@
 		color: var(--accent-color, #419b38);
 	}
 
+	.series-navigation li.current::before {
+		color: var(--accent-color, #419b38);
+	}
+
 	.series-prev-next {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		gap: 1rem;
 		margin-top: 1rem;
 		padding-top: 1rem;
-		border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
+		border-top: 1px dashed var(--border-color, rgba(0, 0, 0, 0.12));
+		font-size: 0.9em;
 	}
 
 	.series-prev-next a:last-child {