From 32a87ebc61cbbbc8e485929d997e5b2b5f527807 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Sat, 15 Aug 2026 15:06:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=9C=A8=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E3=80=81=E7=B3=BB=E5=88=97=E5=92=8C=E6=A0=87=E7=AD=BE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=E4=B8=AD=E5=BA=94=E7=94=A8=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/admin/categories/+page.svelte | 315 ++++++++---------------
 src/routes/admin/series/+page.svelte     | 307 ++++++++--------------
 src/routes/admin/tags/+page.svelte       | 279 +++++++-------------
 3 files changed, 289 insertions(+), 612 deletions(-)

diff --git a/src/routes/admin/categories/+page.svelte b/src/routes/admin/categories/+page.svelte
index 3ee2183..36dfeeb 100644
--- a/src/routes/admin/categories/+page.svelte
+++ b/src/routes/admin/categories/+page.svelte
@@ -4,6 +4,9 @@
 	import { createSlugAutoHandler } from '$lib/utils/slugify';
 	import { confirmState } from '$lib/stores/confirm.svelte';
 	import TextInput from '$lib/components/admin/TextInput.svelte';
+	import Button from '$lib/components/admin/Button.svelte';
+	import DataTable from '$lib/components/admin/DataTable.svelte';
+	import Alert from '$lib/components/admin/Alert.svelte';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -36,9 +39,7 @@
 </div>
 
 {#if form?.error}
-	<div class="error-alert">
-		{form.error}
-	</div>
+	<Alert message={form.error} />
 {/if}
 
 <div class="categories-grid-layout">
@@ -84,120 +85,110 @@
 					variant="underline"
 				/>
 			</div>
-			<button type="submit" class="btn btn-primary">创建</button>
+			<Button type="submit" variant="primary" fullWidth>创建</Button>
 		</form>
 	</div>
 
 	<!-- 右侧：{$page.data.aliases?.category || '分类'}列表 -->
-	<div class="table-container">
-		{#if data.categories.length === 0}
-			<div class="empty-state">
-				<p>暂无任何{$page.data.aliases?.category || '分类'}</p>
-			</div>
-		{:else}
-			<table class="data-table">
-				<thead>
+	{#if data.categories.length === 0}
+		<div class="empty-state">
+			<p>暂无任何{$page.data.aliases?.category || '分类'}</p>
+		</div>
+	{:else}
+		<DataTable>
+			<thead>
+				<tr>
+					<th>ID</th>
+					<th>{$page.data.aliases?.category || '分类'}名称</th>
+					<th>别名</th>
+					<th>关联文章数</th>
+					<th>操作</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each data.categories as category (category.id || category)}
 					<tr>
-						<th>ID</th>
-						<th>{$page.data.aliases?.category || '分类'}名称</th>
-						<th>别名</th>
-						<th>关联文章数</th>
-						<th>操作</th>
+						<td>{category.id}</td>
+						<td>
+							{#if editingId === category.id}
+								<TextInput
+									type="text"
+									name="name"
+									value={category.name}
+									form="edit-form-{category.id}"
+									required
+									size="sm"
+								/>
+							{:else}
+								<strong>{category.name}</strong>
+							{/if}
+						</td>
+						<td>
+							{#if editingId === category.id}
+								<TextInput
+									type="text"
+									name="slug"
+									value={category.slug}
+									form="edit-form-{category.id}"
+									required
+									size="sm"
+								/>
+							{:else}
+								<span class="badge">{category.slug}</span>
+							{/if}
+						</td>
+						<td><span class="badge">{category.post_count} 篇文章</span></td>
+						<td>
+							{#if editingId === category.id}
+								<form
+									id="edit-form-{category.id}"
+									action="?/update"
+									method="POST"
+									class="inline-form"
+									onsubmit={() => {
+										// will submit naturally, just reset editingId
+										setTimeout(() => {
+											editingId = null;
+										}, 0);
+									}}
+								>
+									<input type="hidden" name="id" value={category.id} />
+									<Button type="submit" variant="action">保存</Button>
+								</form>
+								<Button variant="action" onclick={() => (editingId = null)}>取消</Button>
+							{:else}
+								<Button variant="action" onclick={() => (editingId = category.id)}>编辑</Button>
+								<form
+									action="?/delete"
+									method="POST"
+									class="inline-form"
+									onsubmit={async (e) => {
+										if ((e.target as HTMLFormElement).dataset.confirmed === 'true') {
+											(e.target as HTMLFormElement).removeAttribute('data-confirmed');
+											return;
+										}
+										e.preventDefault();
+										const form = e.target as HTMLFormElement;
+										const submitter = e.submitter;
+										const confirmed = await confirmState.show(
+											`确定要删除${$page.data.aliases?.category || '分类'} "${category.name}" 吗？删除后相关文章将归为未${$page.data.aliases?.category || '分类'}。`
+										);
+										if (confirmed) {
+											form.dataset.confirmed = 'true';
+											form.requestSubmit(submitter);
+										}
+									}}
+								>
+									<input type="hidden" name="id" value={category.id} />
+									<Button type="submit" variant="action" class="delete">删除</Button>
+								</form>
+							{/if}
+						</td>
 					</tr>
-				</thead>
-				<tbody>
-					{#each data.categories as category (category.id || category)}
-						<tr>
-							<td>{category.id}</td>
-							<td>
-								{#if editingId === category.id}
-									<TextInput
-										type="text"
-										name="name"
-										value={category.name}
-										form="edit-form-{category.id}"
-										required
-										size="sm"
-									/>
-								{:else}
-									<strong>{category.name}</strong>
-								{/if}
-							</td>
-							<td>
-								{#if editingId === category.id}
-									<TextInput
-										type="text"
-										name="slug"
-										value={category.slug}
-										form="edit-form-{category.id}"
-										required
-										size="sm"
-									/>
-								{:else}
-									<span class="badge">{category.slug}</span>
-								{/if}
-							</td>
-							<td><span class="badge">{category.post_count} 篇文章</span></td>
-							<td>
-								{#if editingId === category.id}
-									<form
-										id="edit-form-{category.id}"
-										action="?/update"
-										method="POST"
-										class="inline-form"
-										onsubmit={() => {
-											// will submit naturally, just reset editingId
-											setTimeout(() => {
-												editingId = null;
-											}, 0);
-										}}
-									>
-										<input type="hidden" name="id" value={category.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 = category.id)}
-									>
-										编辑
-									</button>
-									<form
-										action="?/delete"
-										method="POST"
-										class="inline-form"
-										onsubmit={async (e) => {
-											if ((e.target as HTMLFormElement).dataset.confirmed === 'true') {
-												(e.target as HTMLFormElement).removeAttribute('data-confirmed');
-												return;
-											}
-											e.preventDefault();
-											const form = e.target as HTMLFormElement;
-											const submitter = e.submitter;
-											const confirmed = await confirmState.show(
-												`确定要删除${$page.data.aliases?.category || '分类'} "${category.name}" 吗？删除后相关文章将归为未${$page.data.aliases?.category || '分类'}。`
-											);
-											if (confirmed) {
-												form.dataset.confirmed = 'true';
-												form.requestSubmit(submitter);
-											}
-										}}
-									>
-										<input type="hidden" name="id" value={category.id} />
-										<button type="submit" class="action-btn delete">删除</button>
-									</form>
-								{/if}
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		{/if}
-	</div>
+				{/each}
+			</tbody>
+		</DataTable>
+	{/if}
 </div>
 
 <style>
@@ -213,15 +204,6 @@
 		color: var(--text-color);
 	}
 
-	.error-alert {
-		padding: 12px 16px;
-		background-color: #fdf7f7;
-		border: 2px solid #d9534f;
-		color: #d9534f;
-		margin-bottom: 20px;
-		font-weight: 600;
-	}
-
 	.categories-grid-layout {
 		display: grid;
 		grid-template-columns: 300px 1fr;
@@ -264,68 +246,6 @@
 		letter-spacing: 0.5px;
 	}
 
-	.btn {
-		display: inline-block;
-		width: 100%;
-		padding: 10px 20px;
-		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-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;
-	}
-
-	.table-container {
-		background: transparent;
-		border: 2px solid var(--text-color);
-		overflow-x: auto;
-	}
-
-	.data-table {
-		width: 100%;
-		border-collapse: collapse;
-		text-align: left;
-	}
-
-	.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;
@@ -333,37 +253,6 @@
 		vertical-align: baseline;
 	}
 
-	.action-btn {
-		display: inline-block;
-		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);
-		cursor: pointer;
-		text-decoration: none;
-		transition:
-			color 0.2s,
-			text-decoration-color 0.2s;
-	}
-
-	.action-btn:hover {
-		color: var(--accent-color, #419b38);
-		text-decoration: underline;
-		text-underline-offset: 4px;
-	}
-
-	.action-btn.delete:hover {
-		color: #d9534f;
-		text-decoration: underline;
-		text-underline-offset: 4px;
-	}
-
 	.empty-state {
 		padding: 50px 20px;
 		text-align: center;
diff --git a/src/routes/admin/series/+page.svelte b/src/routes/admin/series/+page.svelte
index e056dee..0b8e857 100644
--- a/src/routes/admin/series/+page.svelte
+++ b/src/routes/admin/series/+page.svelte
@@ -4,6 +4,9 @@
 	import { createSlugAutoHandler } from '$lib/utils/slugify';
 	import { confirmState } from '$lib/stores/confirm.svelte';
 	import TextInput from '$lib/components/admin/TextInput.svelte';
+	import Button from '$lib/components/admin/Button.svelte';
+	import DataTable from '$lib/components/admin/DataTable.svelte';
+	import Alert from '$lib/components/admin/Alert.svelte';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 	let name = $state('');
@@ -35,7 +38,7 @@
 </div>
 
 {#if form?.error}
-	<div class="error-alert">{form.error}</div>
+	<Alert message={form.error} />
 {/if}
 
 <div class="series-grid-layout">
@@ -80,114 +83,108 @@
 					variant="underline"
 				/>
 			</div>
-			<button type="submit" class="btn btn-primary">创建</button>
+			<Button type="submit" variant="primary" fullWidth>创建</Button>
 		</form>
 	</div>
 
-	<div class="table-container">
-		{#if data.series.length === 0}
-			<div class="empty-state">
-				<p>暂无任何{$page.data.aliases?.series || '系列'}</p>
-			</div>
-		{:else}
-			<table class="data-table">
-				<thead>
+	{#if data.series.length === 0}
+		<div class="empty-state">
+			<p>暂无任何{$page.data.aliases?.series || '系列'}</p>
+		</div>
+	{:else}
+		<DataTable>
+			<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>
-						<th>ID</th>
-						<th>{$page.data.aliases?.series || '系列'}名称</th>
-						<th>别名</th>
-						<th>关联文章数</th>
-						<th>操作</th>
+						<td>{item.id}</td>
+						<td>
+							{#if editingId === item.id}
+								<TextInput
+									type="text"
+									name="name"
+									value={item.name}
+									form="edit-form-{item.id}"
+									required
+									size="sm"
+								/>
+							{:else}
+								<strong>{item.name}</strong>
+							{/if}
+						</td>
+						<td>
+							{#if editingId === item.id}
+								<TextInput
+									type="text"
+									name="slug"
+									value={item.slug}
+									form="edit-form-{item.id}"
+									required
+									size="sm"
+								/>
+							{: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" variant="action">保存</Button>
+								</form>
+								<Button variant="action" onclick={() => (editingId = null)}>取消</Button>
+							{:else}
+								<Button variant="action" 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" variant="action" class="delete">删除</Button>
+								</form>
+							{/if}
+						</td>
 					</tr>
-				</thead>
-				<tbody>
-					{#each data.series as item (item.id)}
-						<tr>
-							<td>{item.id}</td>
-							<td>
-								{#if editingId === item.id}
-									<TextInput
-										type="text"
-										name="name"
-										value={item.name}
-										form="edit-form-{item.id}"
-										required
-										size="sm"
-									/>
-								{:else}
-									<strong>{item.name}</strong>
-								{/if}
-							</td>
-							<td>
-								{#if editingId === item.id}
-									<TextInput
-										type="text"
-										name="slug"
-										value={item.slug}
-										form="edit-form-{item.id}"
-										required
-										size="sm"
-									/>
-								{: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}
-	</div>
+				{/each}
+			</tbody>
+		</DataTable>
+	{/if}
 </div>
 
 <style>
@@ -203,15 +200,6 @@
 		color: var(--text-color);
 	}
 
-	.error-alert {
-		padding: 12px 16px;
-		background-color: #fdf7f7;
-		border: 2px solid #d9534f;
-		color: #d9534f;
-		margin-bottom: 20px;
-		font-weight: 600;
-	}
-
 	.series-grid-layout {
 		display: grid;
 		grid-template-columns: 300px 1fr;
@@ -254,68 +242,6 @@
 		letter-spacing: 0.5px;
 	}
 
-	.btn {
-		display: inline-block;
-		width: 100%;
-		padding: 10px 20px;
-		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-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;
-	}
-
-	.table-container {
-		background: transparent;
-		border: 2px solid var(--text-color);
-		overflow-x: auto;
-	}
-
-	.data-table {
-		width: 100%;
-		border-collapse: collapse;
-		text-align: left;
-	}
-
-	.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;
@@ -323,37 +249,6 @@
 		vertical-align: baseline;
 	}
 
-	.action-btn {
-		display: inline-block;
-		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);
-		cursor: pointer;
-		text-decoration: none;
-		transition:
-			color 0.2s,
-			text-decoration-color 0.2s;
-	}
-
-	.action-btn:hover {
-		color: var(--accent-color, #419b38);
-		text-decoration: underline;
-		text-underline-offset: 4px;
-	}
-
-	.action-btn.delete:hover {
-		color: #d9534f;
-		text-decoration: underline;
-		text-underline-offset: 4px;
-	}
-
 	.empty-state {
 		padding: 50px 20px;
 		text-align: center;
diff --git a/src/routes/admin/tags/+page.svelte b/src/routes/admin/tags/+page.svelte
index 1ce9da2..a67f928 100644
--- a/src/routes/admin/tags/+page.svelte
+++ b/src/routes/admin/tags/+page.svelte
@@ -3,6 +3,9 @@
 	import type { PageData, ActionData } from './$types';
 	import { confirmState } from '$lib/stores/confirm.svelte';
 	import TextInput from '$lib/components/admin/TextInput.svelte';
+	import Button from '$lib/components/admin/Button.svelte';
+	import DataTable from '$lib/components/admin/DataTable.svelte';
+	import Alert from '$lib/components/admin/Alert.svelte';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -15,9 +18,7 @@
 </div>
 
 {#if form?.error}
-	<div class="error-alert">
-		{form.error}
-	</div>
+	<Alert message={form.error} />
 {/if}
 
 <div class="tags-grid-layout">
@@ -37,100 +38,94 @@
 					variant="underline"
 				/>
 			</div>
-			<button type="submit" class="btn btn-primary">创建</button>
+			<Button type="submit" variant="primary" fullWidth>创建</Button>
 		</form>
 	</div>
 
 	<!-- 右侧：现有{$page.data.aliases?.tag || '标签'}列表 -->
-	<div class="table-container">
-		{#if data.tags.length === 0}
-			<div class="empty-state">
-				<p>暂无任何{$page.data.aliases?.tag || '标签'}</p>
-			</div>
-		{:else}
-			<table class="data-table">
-				<thead>
+	{#if data.tags.length === 0}
+		<div class="empty-state">
+			<p>暂无任何{$page.data.aliases?.tag || '标签'}</p>
+		</div>
+	{:else}
+		<DataTable>
+			<thead>
+				<tr>
+					<th>ID</th>
+					<th>{$page.data.aliases?.tag || '标签'}名称</th>
+					<th>关联文章数</th>
+					<th>操作</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each data.tags as tag (tag.id || tag)}
 					<tr>
-						<th>ID</th>
-						<th>{$page.data.aliases?.tag || '标签'}名称</th>
-						<th>关联文章数</th>
-						<th>操作</th>
+						<td>{tag.id}</td>
+						<td>
+							{#if editingId === tag.id}
+								<TextInput
+									type="text"
+									name="name"
+									value={tag.name}
+									form="edit-form-{tag.id}"
+									required
+									size="sm"
+								/>
+							{:else}
+								<strong>{tag.name}</strong>
+							{/if}
+						</td>
+						<td><span class="badge">{tag.post_count} 篇文章</span></td>
+						<td>
+							{#if editingId === tag.id}
+								<form
+									id="edit-form-{tag.id}"
+									action="?/update"
+									method="POST"
+									class="inline-form"
+									onsubmit={() => {
+										setTimeout(() => {
+											editingId = null;
+										}, 0);
+									}}
+								>
+									<input type="hidden" name="id" value={tag.id} />
+									<Button type="submit" variant="action">保存</Button>
+								</form>
+								<Button variant="action" onclick={() => (editingId = null)}>取消</Button>
+							{:else}
+								<Button variant="action" onclick={() => (editingId = tag.id)}>编辑</Button>
+								<form
+									action="?/delete"
+									method="POST"
+									class="inline-form"
+									onsubmit={async (e) => {
+										if ((e.target as HTMLFormElement).dataset.confirmed === 'true') {
+											(e.target as HTMLFormElement).removeAttribute('data-confirmed');
+											return;
+										}
+										e.preventDefault();
+										const form = e.target as HTMLFormElement;
+										const submitter = e.submitter;
+										const confirmed = await confirmState.show(
+											`确定要删除${$page.data.aliases?.tag || '标签'} "${tag.name}" 吗？`
+										);
+										if (confirmed) {
+											form.dataset.confirmed = 'true';
+											form.requestSubmit(submitter);
+										}
+									}}
+								>
+									<input type="hidden" name="id" value={tag.id} />
+									<Button type="submit" variant="action" class="delete">删除</Button>
+								</form>
+							{/if}
+						</td>
 					</tr>
-				</thead>
-				<tbody>
-					{#each data.tags as tag (tag.id || tag)}
-						<tr>
-							<td>{tag.id}</td>
-							<td>
-								{#if editingId === tag.id}
-									<TextInput
-										type="text"
-										name="name"
-										value={tag.name}
-										form="edit-form-{tag.id}"
-										required
-										size="sm"
-									/>
-								{:else}
-									<strong>{tag.name}</strong>
-								{/if}
-							</td>
-							<td><span class="badge">{tag.post_count} 篇文章</span></td>
-							<td>
-								{#if editingId === tag.id}
-									<form
-										id="edit-form-{tag.id}"
-										action="?/update"
-										method="POST"
-										class="inline-form"
-										onsubmit={() => {
-											setTimeout(() => {
-												editingId = null;
-											}, 0);
-										}}
-									>
-										<input type="hidden" name="id" value={tag.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 = tag.id)}>
-										编辑
-									</button>
-									<form
-										action="?/delete"
-										method="POST"
-										class="inline-form"
-										onsubmit={async (e) => {
-											if ((e.target as HTMLFormElement).dataset.confirmed === 'true') {
-												(e.target as HTMLFormElement).removeAttribute('data-confirmed');
-												return;
-											}
-											e.preventDefault();
-											const form = e.target as HTMLFormElement;
-											const submitter = e.submitter;
-											const confirmed = await confirmState.show(
-												`确定要删除${$page.data.aliases?.tag || '标签'} "${tag.name}" 吗？`
-											);
-											if (confirmed) {
-												form.dataset.confirmed = 'true';
-												form.requestSubmit(submitter);
-											}
-										}}
-									>
-										<input type="hidden" name="id" value={tag.id} />
-										<button type="submit" class="action-btn delete">删除</button>
-									</form>
-								{/if}
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		{/if}
-	</div>
+				{/each}
+			</tbody>
+		</DataTable>
+	{/if}
 </div>
 
 <style>
@@ -146,15 +141,6 @@
 		color: var(--text-color);
 	}
 
-	.error-alert {
-		padding: 12px 16px;
-		background-color: #fdf7f7;
-		border: 2px solid #d9534f;
-		color: #d9534f;
-		margin-bottom: 20px;
-		font-weight: 600;
-	}
-
 	.tags-grid-layout {
 		display: grid;
 		grid-template-columns: 300px 1fr;
@@ -197,68 +183,6 @@
 		letter-spacing: 0.5px;
 	}
 
-	.btn {
-		display: inline-block;
-		width: 100%;
-		padding: 10px 20px;
-		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-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;
-	}
-
-	.table-container {
-		background: transparent;
-		border: 2px solid var(--text-color);
-		overflow-x: auto;
-	}
-
-	.data-table {
-		width: 100%;
-		border-collapse: collapse;
-		text-align: left;
-	}
-
-	.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;
@@ -266,37 +190,6 @@
 		vertical-align: baseline;
 	}
 
-	.action-btn {
-		display: inline-block;
-		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);
-		cursor: pointer;
-		text-decoration: none;
-		transition:
-			color 0.2s,
-			text-decoration-color 0.2s;
-	}
-
-	.action-btn:hover {
-		color: var(--accent-color, #419b38);
-		text-decoration: underline;
-		text-underline-offset: 4px;
-	}
-
-	.action-btn.delete:hover {
-		color: #d9534f;
-		text-decoration: underline;
-		text-underline-offset: 4px;
-	}
-
 	.empty-state {
 		padding: 50px 20px;
 		text-align: center;