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

<script lang="ts">
	import { resolve } from '$app/paths';
	import { page } from '$app/stores';
	import type { PageData } from './$types';
	let { data }: { data: PageData } = $props();

	let selectedIds = $state<string[]>([]);

	function toggleAll(e: Event) {
		const target = e.target as HTMLInputElement;
		if (target.checked) {
			selectedIds = data.pages.map((p) => p.id.toString());
		} else {
			selectedIds = [];
		}
	}

	let isAllSelected = $derived(data.pages.length > 0 && selectedIds.length === data.pages.length);
</script>

<div class="admin-page-header">
	<h2>{$page.data.aliases?.page || '页面'}管理</h2>
	<a href={resolve('/admin/pages/new')} class="btn btn-primary"
		>新建{$page.data.aliases?.page || '页面'}</a
	>
</div>

{#if data.pages.length > 0}
	<div class="batch-actions">
		{#if selectedIds.length > 0}
			<span class="selected-count">已选择 {selectedIds.length} 项</span>
			<form
				action="?/delete"
				method="POST"
				class="inline-form"
				onsubmit={(e) => {
					if (
						!confirm(
							`确定要删除选中的 ${selectedIds.length} 篇${$page.data.aliases?.page || '项目'}吗？操作不可恢复。`
						)
					) {
						e.preventDefault();
					}
				}}
			>
				{#each selectedIds as id (id)}
					<input type="hidden" name="ids" value={id} />
				{/each}
				<button type="submit" class="btn btn-danger btn-sm">批量删除</button>
			</form>
		{:else}
			<span class="selected-count empty">未选择项目</span>
		{/if}
	</div>
{/if}

<div class="table-container">
	{#if data.pages.length === 0}
		<div class="empty-state">
			<p>还没有发布任何{$page.data.aliases?.page || '页面'}，现在就开始写作吧！</p>
		</div>
	{:else}
		<table class="data-table">
			<thead>
				<tr>
					<th class="checkbox-col">
						<input type="checkbox" checked={isAllSelected} onchange={toggleAll} />
					</th>
					<th>ID</th>
					<th>标题</th>
					<th>别名 (Slug)</th>
					<th>作者</th>
					<th>发布时间</th>
				</tr>
			</thead>
			<tbody>
				{#each data.pages as pageItem (pageItem.id || pageItem)}
					<tr>
						<td class="checkbox-col">
							<input
								type="checkbox"
								name="ids"
								value={pageItem.id.toString()}
								bind:group={selectedIds}
							/>
						</td>
						<td>{pageItem.id}</td>
						<td>
							<a
								href={resolve('/admin/pages/[id]', { id: pageItem.id.toString() })}
								class="title-link"><strong>{pageItem.title}</strong></a
							>
							<a
								href={resolve('/[slug]', { slug: pageItem.slug })}
								target="_blank"
								class="preview-link"
								title="前台预览"
							>
								<svg
									width="16"
									height="16"
									viewBox="0 0 24 24"
									fill="none"
									stroke="currentColor"
									stroke-width="2"
									stroke-linecap="round"
									stroke-linejoin="round"
									><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
									></path><polyline points="15 3 21 3 21 9"></polyline><line
										x1="10"
										y1="14"
										x2="21"
										y2="3"
									></line></svg
								>
							</a>
						</td>
						<td><span class="badge">{pageItem.slug}</span></td>
						<td>{pageItem.author || '未知'}</td>
						<td>{pageItem.dateStr}</td>
					</tr>
				{/each}
			</tbody>
		</table>
	{/if}
</div>

<style>
	.admin-page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25px;
		border-bottom: 2px solid var(--text-color);
		padding-bottom: 12px;
	}

	.admin-page-header h2 {
		margin: 0;
		font-size: 2rem;
		color: var(--text-color);
	}

	.btn {
		display: inline-block;
		padding: 8px 18px;
		text-decoration: none;
		font-size: 0.95rem;
		font-weight: 600;
		transition: all 0.2s;
		cursor: pointer;
		border: 2px solid var(--text-color);
		background-color: transparent;
		color: var(--text-color);
		font-family: inherit;
	}

	.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: 10px 16px;
		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);
	}

	.preview-link {
		text-decoration: none;
		margin-left: 6px;
		opacity: 0.5;
		transition: opacity 0.2s;
		display: inline-block;
		vertical-align: middle;
	}

	.preview-link:hover {
		opacity: 1;
	}

	.empty-state {
		padding: 50px 20px;
		text-align: center;
		color: var(--text-muted, rgba(0, 0, 0, 0.6));
	}

	.batch-actions {
		display: flex;
		align-items: center;
		gap: 15px;
		margin-bottom: 15px;
		padding: 10px 15px;
		background: rgba(0, 0, 0, 0.02);
		height: 54px;
		box-sizing: border-box;
	}

	.selected-count {
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--text-color);
	}

	.selected-count.empty {
		color: var(--text-muted, rgba(0, 0, 0, 0.4));
		font-weight: normal;
	}

	.checkbox-col {
		width: 40px;
		text-align: center;
	}

	.checkbox-col input[type='checkbox'] {
		width: 16px;
		height: 16px;
		accent-color: var(--accent-color, #419b38);
		cursor: pointer;
	}

	.title-link {
		color: var(--text-color);
		text-decoration: none;
		transition: color 0.2s;
	}

	.title-link:hover {
		color: var(--accent-color, #419b38);
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.btn-danger {
		background-color: transparent;
		color: #d9534f;
		border-color: #d9534f;
	}

	.btn-danger:hover {
		background-color: #d9534f;
		color: white;
	}

	.btn-sm {
		padding: 4px 12px;
		font-size: 0.85rem;
	}
</style>