refactor: 在分类、系列和标签管理页面中应用通用组件

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">
+	<Alert message={form.error} />
-		{form.error}
-	</div>
 {/if}
 
 <div class="categories-grid-layout">
@@ -84,18 +85,17 @@
 					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">
+		<DataTable>
 			<thead>
 				<tr>
 					<th>ID</th>
@@ -153,19 +153,11 @@
 									}}
 								>
 									<input type="hidden" name="id" value={category.id} />
-										<button type="submit" class="action-btn">保存</button>
+									<Button type="submit" variant="action">保存</Button>
 								</form>
-									<button type="button" class="action-btn" onclick={() => (editingId = null)}>
+								<Button variant="action" onclick={() => (editingId = null)}>取消</Button>
-										取消
-									</button>
 							{:else}
-									<button
+								<Button variant="action" onclick={() => (editingId = category.id)}>编辑</Button>
-										type="button"
-										class="action-btn"
-										onclick={() => (editingId = category.id)}
-									>
-										编辑
-									</button>
 								<form
 									action="?/delete"
 									method="POST"
@@ -188,16 +180,15 @@
 									}}
 								>
 									<input type="hidden" name="id" value={category.id} />
-										<button type="submit" class="action-btn delete">删除</button>
+									<Button type="submit" variant="action" class="delete">删除</Button>
 								</form>
 							{/if}
 						</td>
 					</tr>
 				{/each}
 			</tbody>
-			</table>
+		</DataTable>
 	{/if}
-	</div>
 </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;

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,17 +83,16 @@
 					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">
+		<DataTable>
 			<thead>
 				<tr>
 					<th>ID</th>
@@ -147,15 +149,11 @@
 									}}
 								>
 									<input type="hidden" name="id" value={item.id} />
-										<button type="submit" class="action-btn">保存</button>
+									<Button type="submit" variant="action">保存</Button>
 								</form>
-									<button type="button" class="action-btn" onclick={() => (editingId = null)}>
+								<Button variant="action" onclick={() => (editingId = null)}>取消</Button>
-										取消
-									</button>
 							{:else}
-									<button type="button" class="action-btn" onclick={() => (editingId = item.id)}>
+								<Button variant="action" onclick={() => (editingId = item.id)}>编辑</Button>
-										编辑
-									</button>
 								<form
 									action="?/delete"
 									method="POST"
@@ -178,16 +176,15 @@
 									}}
 								>
 									<input type="hidden" name="id" value={item.id} />
-										<button type="submit" class="action-btn delete">删除</button>
+									<Button type="submit" variant="action" class="delete">删除</Button>
 								</form>
 							{/if}
 						</td>
 					</tr>
 				{/each}
 			</tbody>
-			</table>
+		</DataTable>
 	{/if}
-	</div>
 </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;

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">
+	<Alert message={form.error} />
-		{form.error}
-	</div>
 {/if}
 
 <div class="tags-grid-layout">
@@ -37,18 +38,17 @@
 					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">
+		<DataTable>
 			<thead>
 				<tr>
 					<th>ID</th>
@@ -90,15 +90,11 @@
 									}}
 								>
 									<input type="hidden" name="id" value={tag.id} />
-										<button type="submit" class="action-btn">保存</button>
+									<Button type="submit" variant="action">保存</Button>
 								</form>
-									<button type="button" class="action-btn" onclick={() => (editingId = null)}>
+								<Button variant="action" onclick={() => (editingId = null)}>取消</Button>
-										取消
-									</button>
 							{:else}
-									<button type="button" class="action-btn" onclick={() => (editingId = tag.id)}>
+								<Button variant="action" onclick={() => (editingId = tag.id)}>编辑</Button>
-										编辑
-									</button>
 								<form
 									action="?/delete"
 									method="POST"
@@ -121,16 +117,15 @@
 									}}
 								>
 									<input type="hidden" name="id" value={tag.id} />
-										<button type="submit" class="action-btn delete">删除</button>
+									<Button type="submit" variant="action" class="delete">删除</Button>
 								</form>
 							{/if}
 						</td>
 					</tr>
 				{/each}
 			</tbody>
-			</table>
+		</DataTable>
 	{/if}
-	</div>
 </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;