From c84c9cb4e814016f17f54c161bda1d1f9c9a8a30 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Sat, 15 Aug 2026 14:35:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=B3=BB=E5=88=97?=
 =?UTF-8?q?=E7=9A=84=E8=A1=8C=E5=86=85=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=B9=B6=E9=87=8D=E6=9E=84=E7=AE=A1=E7=90=86=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/admin/series/+page.svelte | 418 +++++++++++++++++----------
 1 file changed, 273 insertions(+), 145 deletions(-)

diff --git a/src/routes/admin/series/+page.svelte b/src/routes/admin/series/+page.svelte
index 49fc8cf..1178a2e 100644
--- a/src/routes/admin/series/+page.svelte
+++ b/src/routes/admin/series/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { resolve } from '$app/paths';
 	import type { ActionData, PageData } from './$types';
 	import { createSlugAutoHandler } from '$lib/utils/slugify';
 	import { confirmState } from '$lib/stores/confirm.svelte';
@@ -11,6 +10,8 @@
 	let isSlugUserModified = $state(false);
 	let isGenerating = $state(false);
 
+	let editingId = $state<number | null>(null);
+
 	const slugHandler = createSlugAutoHandler({
 		getSlug: () => slug,
 		setSlug: (val) => (slug = val),
@@ -37,99 +38,153 @@
 {/if}
 
 <div class="series-grid-layout">
-	<section class="create-series-card">
+	<div class="create-series-card">
 		<h3>新{$page.data.aliases?.series || '系列'}</h3>
 		<form method="POST" action="?/create">
-			<label for="name">名称 *</label>
-			<input
-				id="name"
-				name="name"
-				type="text"
-				bind:value={name}
-				oninput={handleNameInput}
-				required
-			/>
+			<div class="form-group">
+				<label for="name">名称 *</label>
+				<input
+					id="name"
+					name="name"
+					type="text"
+					bind:value={name}
+					oninput={handleNameInput}
+					required
+				/>
+			</div>
 
-			<label for="slug" style="display: flex; justify-content: space-between; align-items: center;">
-				<span>URL 别名 *</span>
-				<button
-					type="button"
-					style="background: none; border: none; padding: 0; color: #666; font-size: 0.8rem; cursor: pointer; outline: none;"
-					onclick={() => slugHandler.forceGenerate(name)}
-					disabled={isGenerating}
+			<div class="form-group">
+				<label
+					for="slug"
+					style="display: flex; justify-content: space-between; align-items: center;"
 				>
-					{isGenerating ? '正在生成...' : '重新生成'}
-				</button>
-			</label>
-			<input
-				id="slug"
-				name="slug"
-				type="text"
-				bind:value={slug}
-				oninput={handleSlugInput}
-				required
-			/>
+					<span>URL 别名 *</span>
+					<button
+						type="button"
+						style="background: none; border: none; padding: 0; color: #666; font-size: 0.8rem; cursor: pointer; outline: none;"
+						onclick={() => slugHandler.forceGenerate(name)}
+						disabled={isGenerating}
+					>
+						{isGenerating ? '正在生成...' : '重新生成'}
+					</button>
+				</label>
+				<input
+					id="slug"
+					name="slug"
+					type="text"
+					bind:value={slug}
+					oninput={handleSlugInput}
+					required
+				/>
+			</div>
 			<button type="submit" class="btn btn-primary">创建</button>
 		</form>
-	</section>
+	</div>
 
-	<section class="series-list">
+	<div class="table-container">
 		{#if data.series.length === 0}
-			<div class="empty-state">暂无系列</div>
+			<div class="empty-state">
+				<p>暂无任何{$page.data.aliases?.series || '系列'}</p>
+			</div>
 		{:else}
-			{#each data.series as item (item.id)}
-				<article class="series-editor">
-					<form method="POST" action="?/update">
-						<input type="hidden" name="id" value={item.id} />
-						<div class="editor-heading">
-							<strong>{item.name}</strong>
-							<span class="badge">{item.post_count} 篇文章</span>
-						</div>
-						<div class="field-row">
-							<div>
-								<label for="name-{item.id}">名称</label>
-								<input id="name-{item.id}" name="name" type="text" value={item.name} required />
-							</div>
-							<div>
-								<label for="slug-{item.id}">URL 别名</label>
-								<input id="slug-{item.id}" name="slug" type="text" value={item.slug} required />
-							</div>
-						</div>
-						<button type="submit" class="action-btn">保存修改</button>
-						<a
-							href={resolve('/series/[slug]', { slug: item.slug })}
-							target="_blank"
-							class="action-btn">查看</a
-						>
-					</form>
-					<form
-						method="POST"
-						action="?/delete"
-						class="delete-form"
-						onsubmit={async (event) => {
-							if ((event.target as HTMLFormElement).dataset.confirmed === 'true') {
-								(event.target as HTMLFormElement).removeAttribute('data-confirmed');
-								return;
-							}
-							event.preventDefault();
-							const form = event.target as HTMLFormElement;
-							const submitter = event.submitter;
-							const confirmed = await confirmState.show(
-								`确定删除系列“${item.name}”吗？相关文章会保留，但不再属于任何系列。`
-							);
-							if (confirmed) {
-								form.dataset.confirmed = 'true';
-								form.requestSubmit(submitter);
-							}
-						}}
-					>
-						<input type="hidden" name="id" value={item.id} />
-						<button type="submit" class="action-btn delete">删除</button>
-					</form>
-				</article>
-			{/each}
+			<table class="data-table">
+				<thead>
+					<tr>
+						<th>ID</th>
+						<th>{$page.data.aliases?.series || '系列'}名称</th>
+						<th>别名</th>
+						<th>关联文章数</th>
+						<th>操作</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each data.series as item (item.id)}
+						<tr>
+							<td>{item.id}</td>
+							<td>
+								{#if editingId === item.id}
+									<input
+										type="text"
+										name="name"
+										value={item.name}
+										form="edit-form-{item.id}"
+										required
+										class="edit-input"
+									/>
+								{:else}
+									<strong>{item.name}</strong>
+								{/if}
+							</td>
+							<td>
+								{#if editingId === item.id}
+									<input
+										type="text"
+										name="slug"
+										value={item.slug}
+										form="edit-form-{item.id}"
+										required
+										class="edit-input"
+									/>
+								{:else}
+									<span class="badge">{item.slug}</span>
+								{/if}
+							</td>
+							<td><span class="badge">{item.post_count} 篇文章</span></td>
+							<td>
+								{#if editingId === item.id}
+									<form
+										id="edit-form-{item.id}"
+										action="?/update"
+										method="POST"
+										class="inline-form"
+										onsubmit={() => {
+											setTimeout(() => {
+												editingId = null;
+											}, 0);
+										}}
+									>
+										<input type="hidden" name="id" value={item.id} />
+										<button type="submit" class="action-btn">保存</button>
+									</form>
+									<button type="button" class="action-btn" onclick={() => (editingId = null)}>
+										取消
+									</button>
+								{:else}
+									<button type="button" class="action-btn" onclick={() => (editingId = item.id)}>
+										编辑
+									</button>
+									<form
+										action="?/delete"
+										method="POST"
+										class="inline-form"
+										onsubmit={async (event) => {
+											if ((event.target as HTMLFormElement).dataset.confirmed === 'true') {
+												(event.target as HTMLFormElement).removeAttribute('data-confirmed');
+												return;
+											}
+											event.preventDefault();
+											const form = event.target as HTMLFormElement;
+											const submitter = event.submitter;
+											const confirmed = await confirmState.show(
+												`确定删除系列“${item.name}”吗？相关文章会保留，但不再属于任何系列。`
+											);
+											if (confirmed) {
+												form.dataset.confirmed = 'true';
+												form.requestSubmit(submitter);
+											}
+										}}
+									>
+										<input type="hidden" name="id" value={item.id} />
+										<button type="submit" class="action-btn delete">删除</button>
+									</form>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
 		{/if}
-	</section>
+	</div>
 </div>
 
 <style>
@@ -138,123 +193,196 @@
 		border-bottom: 2px solid var(--text-color);
 		padding-bottom: 12px;
 	}
+
 	.admin-page-header h2 {
 		margin: 0;
 		font-size: 2rem;
+		color: var(--text-color);
 	}
+
 	.error-alert {
 		padding: 12px 16px;
-		border-left: 4px solid #d9534f;
+		background-color: #fdf7f7;
+		border: 2px solid #d9534f;
 		color: #d9534f;
-		margin-bottom: 24px;
+		margin-bottom: 20px;
 		font-weight: 600;
 	}
+
 	.series-grid-layout {
 		display: grid;
 		grid-template-columns: 300px 1fr;
 		gap: 30px;
-		align-items: start;
 	}
+
+	@media (max-width: 768px) {
+		.series-grid-layout {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	.create-series-card {
+		background: transparent;
+		border: none;
+		padding: 0;
+		height: fit-content;
+	}
+
 	.create-series-card h3 {
-		margin: 0 0 20px;
+		margin: 0 0 20px 0;
 		font-size: 0.9rem;
+		font-weight: 700;
 		letter-spacing: 1px;
 		text-transform: uppercase;
+		color: var(--text-color);
+		border-bottom: none;
 	}
-	label {
+
+	.form-group {
+		margin-bottom: 25px;
+	}
+
+	.form-group label {
 		display: block;
-		margin: 28px 0 4px;
-		font-size: 0.85rem;
 		font-weight: 700;
+		margin-bottom: 12px;
+		color: var(--text-color);
+		font-size: 0.9rem;
 		letter-spacing: 0.5px;
 	}
-	input {
+
+	.form-group input[type='text'] {
 		width: 100%;
-		box-sizing: border-box;
 		padding: 10px 0;
-		border: 0;
-		border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+		border: none;
+		border-bottom: 2px solid rgba(0, 0, 0, 0.1);
 		background: transparent;
+		font-family: inherit;
+		font-size: 1.05rem;
 		color: var(--text-color);
-		font: inherit;
+		box-sizing: border-box;
+		transition: border-bottom-color 0.3s ease;
 	}
-	input:focus {
+
+	.form-group input[type='text']:focus {
 		outline: none;
-		border-color: var(--accent-color, #419b38);
+		border-bottom-color: var(--accent-color, #419b38);
 	}
+
 	.btn {
+		display: inline-block;
 		width: 100%;
-		margin-top: 20px;
 		padding: 10px 20px;
-		border: 1px solid var(--text-color);
-		background: var(--text-color);
-		color: var(--bg-color);
-		font: inherit;
+		text-decoration: none;
+		font-size: 0.95rem;
 		font-weight: 600;
+		transition: all 0.3s ease;
 		cursor: pointer;
+		border: 1px solid var(--text-color);
+		background-color: transparent;
+		color: var(--text-color);
+		font-family: inherit;
+		text-transform: uppercase;
+		letter-spacing: 1px;
 	}
-	.btn:hover {
-		background: var(--accent-color, #419b38);
+
+	.btn-primary {
+		background-color: var(--text-color);
+		color: var(--bg-color, #ffffff);
+	}
+
+	.btn-primary:hover {
+		background-color: var(--accent-color, #419b38);
 		border-color: var(--accent-color, #419b38);
 		color: white;
 	}
-	.series-list {
-		display: grid;
-		gap: 18px;
-	}
-	.series-editor {
-		position: relative;
+
+	.table-container {
+		background: transparent;
 		border: 2px solid var(--text-color);
-		padding: 18px;
+		overflow-x: auto;
 	}
-	.editor-heading {
-		display: flex;
-		justify-content: space-between;
-		gap: 16px;
-		align-items: center;
+
+	.data-table {
+		width: 100%;
+		border-collapse: collapse;
+		text-align: left;
 	}
-	.field-row {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 18px;
+
+	.data-table th,
+	.data-table td {
+		padding: 14px 18px;
+		border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
 	}
+
+	.data-table th {
+		background-color: transparent;
+		color: var(--text-color);
+		font-weight: 700;
+		font-size: 0.95rem;
+		border-bottom: 2px solid var(--text-color);
+	}
+
+	.data-table tr:last-child td {
+		border-bottom: none;
+	}
+
+	.data-table tbody tr:hover {
+		background-color: rgba(0, 0, 0, 0.02);
+	}
+
+	.inline-form {
+		display: inline-block;
+		margin: 0;
+		padding: 0;
+		vertical-align: baseline;
+	}
+
 	.action-btn {
 		display: inline-block;
-		margin: 16px 14px 0 0;
-		padding: 0;
-		border: 0;
 		background: transparent;
+		border: none;
+		padding: 0;
+		margin: 0;
+		font-family: inherit;
+		font-size: 0.9rem;
+		font-weight: 500;
+		line-height: 1;
+		vertical-align: baseline;
 		color: var(--text-color);
-		font: inherit;
 		cursor: pointer;
 		text-decoration: none;
+		transition:
+			color 0.2s,
+			text-decoration-color 0.2s;
 	}
-	.action-btn:hover {
-		color: var(--accent-color, #419b38);
+
+	.action-btn.delete:hover {
+		color: #d9534f;
 		text-decoration: underline;
 		text-underline-offset: 4px;
 	}
-	.delete-form {
-		position: absolute;
-		right: 4px;
-		bottom: 18px;
-	}
-	.action-btn.delete:hover {
-		color: #d9534f;
-	}
+
 	.empty-state {
-		border: 2px solid var(--text-color);
 		padding: 50px 20px;
 		text-align: center;
-		color: var(--text-muted);
+		color: var(--text-muted, rgba(0, 0, 0, 0.6));
 	}
-	@media (max-width: 800px) {
-		.series-grid-layout,
-		.field-row {
-			grid-template-columns: 1fr;
-		}
-		.delete-form {
-			position: static;
-		}
+
+	.edit-input {
+		width: 100%;
+		padding: 6px 8px;
+		border: 1px solid rgba(0, 0, 0, 0.2);
+		background: transparent;
+		font-family: inherit;
+		font-size: 0.95rem;
+		color: var(--text-color);
+		box-sizing: border-box;
+		border-radius: 4px;
+	}
+
+	.edit-input:focus {
+		outline: none;
+		border-color: var(--accent-color, #419b38);
 	}
 </style>