feat: 添加 SlugBadge 组件并在后台管理页面中使用

src/lib/components/admin/SlugBadge.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	let { slug, maxWidth = '140px' }: { slug: string; maxWidth?: string } = $props();
+</script>
+
+<span class="slug-badge-container" style="--max-slug-width: {maxWidth};" title={slug}>
+	<span class="badge badge-slug">{slug}</span>
+	<span class="slug-tooltip">{slug}</span>
+</span>
+
+<style>
+	.slug-badge-container {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		max-width: 100%;
+		vertical-align: middle;
+	}
+
+	.badge-slug {
+		max-width: var(--max-slug-width, 140px);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		cursor: default;
+	}
+
+	.slug-tooltip {
+		position: absolute;
+		bottom: calc(100% + 6px);
+		left: 50%;
+		transform: translateX(-50%) translateY(4px);
+		background-color: #1f2421;
+		color: #ffffff;
+		padding: 4px 8px;
+		border-radius: 4px;
+		font-size: 0.8rem;
+		font-family:
+			'Fira Code', 'Source Code Pro', Consolas, 'Microsoft YaHei', Menlo, Monaco, 'Courier New',
+			monospace;
+		white-space: nowrap;
+		pointer-events: none;
+		opacity: 0;
+		visibility: hidden;
+		transition:
+			opacity 0.15s ease,
+			transform 0.15s ease,
+			visibility 0.15s ease;
+		z-index: 100;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+		max-width: min(350px, 80vw);
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
+	.slug-tooltip::after {
+		content: '';
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		border: 4px solid transparent;
+		border-top-color: #1f2421;
+	}
+
+	.slug-badge-container:hover .slug-tooltip {
+		opacity: 1;
+		visibility: visible;
+		transform: translateX(-50%) translateY(0);
+	}
+</style>

src/routes/admin/categories/+page.svelte

@@ -7,6 +7,7 @@
 	import Button from '$lib/components/admin/Button.svelte';
 	import DataTable from '$lib/components/admin/DataTable.svelte';
 	import Alert from '$lib/components/admin/Alert.svelte';
+	import SlugBadge from '$lib/components/admin/SlugBadge.svelte';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -134,7 +135,7 @@
 									size="sm"
 								/>
 							{:else}
-								<span class="badge">{category.slug}</span>
+								<SlugBadge slug={category.slug} />
 							{/if}
 						</td>
 						<td><span class="badge">{category.post_count}</span></td>

src/routes/admin/pages/+page.svelte

@@ -5,6 +5,7 @@
 	import { confirmState } from '$lib/stores/confirm.svelte';
 	import Button from '$lib/components/admin/Button.svelte';
 	import DataTable from '$lib/components/admin/DataTable.svelte';
+	import SlugBadge from '$lib/components/admin/SlugBadge.svelte';
 	let { data }: { data: PageData } = $props();
 
 	let selectedIds = $state<string[]>([]);
@@ -119,7 +120,7 @@
 							>
 						</a>
 					</td>
-					<td><span class="badge">{pageItem.slug}</span></td>
+					<td><SlugBadge slug={pageItem.slug} /></td>
 					<td>{pageItem.dateStr}</td>
 				</tr>
 			{/each}

src/routes/admin/posts/+page.svelte

@@ -5,6 +5,7 @@
 	import { confirmState } from '$lib/stores/confirm.svelte';
 	import Button from '$lib/components/admin/Button.svelte';
 	import DataTable from '$lib/components/admin/DataTable.svelte';
+	import SlugBadge from '$lib/components/admin/SlugBadge.svelte';
 	let { data }: { data: PageData } = $props();
 
 	let selectedIds = $state<string[]>([]);
@@ -117,7 +118,7 @@
 					</td>
 					<td><span class="badge">{post.category || '未分类'}</span></td>
 					<td>{post.series || '—'}</td>
-					<td><span class="badge">{post.slug}</span></td>
+					<td><SlugBadge slug={post.slug} /></td>
 					<td>{post.dateStr}</td>
 				</tr>
 			{/each}

src/routes/admin/series/+page.svelte

@@ -7,6 +7,7 @@
 	import Button from '$lib/components/admin/Button.svelte';
 	import DataTable from '$lib/components/admin/DataTable.svelte';
 	import Alert from '$lib/components/admin/Alert.svelte';
+	import SlugBadge from '$lib/components/admin/SlugBadge.svelte';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 	let name = $state('');
@@ -131,7 +132,7 @@
 									size="sm"
 								/>
 							{:else}
-								<span class="badge">{item.slug}</span>
+								<SlugBadge slug={item.slug} />
 							{/if}
 						</td>
 						<td><span class="badge">{item.post_count}</span></td>