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

<script lang="ts">
	import { resolve } from '$app/paths';
	import { page } from '$app/stores';
	import type { PageData } from './$types';
	import { confirmState } from '$lib/stores/confirm.svelte';
	import Button from '$lib/components/admin/Button.svelte';
	import DataTable from '$lib/components/admin/DataTable.svelte';
	let { data }: { data: PageData } = $props();

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

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

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

<div class="admin-page-header">
	<h2>{$page.data.aliases?.post || '文章'}管理</h2>
	<Button href={resolve('/admin/posts/new')} variant="primary">
		新建{$page.data.aliases?.post || '文章'}
	</Button>
</div>

{#if data.posts.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={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(
						`确定要删除选中的 ${selectedIds.length} 篇${$page.data.aliases?.post || '项目'}吗？操作不可恢复。`
					);
					if (confirmed) {
						form.dataset.confirmed = 'true';
						form.requestSubmit(submitter);
					}
				}}
			>
				{#each selectedIds as id (id)}
					<input type="hidden" name="ids" value={id} />
				{/each}
				<Button type="submit" variant="danger" size="sm">批量删除</Button>
			</form>
		{:else}
			<span class="selected-count empty">未选择项目</span>
		{/if}
	</div>
{/if}

{#if data.posts.length === 0}
	<div class="empty-state">
		<p>还没有发布任何{$page.data.aliases?.post || '文章'}</p>
	</div>
{:else}
	<DataTable>
		<thead>
			<tr>
				<th class="checkbox-col">
					<input type="checkbox" checked={isAllSelected} onchange={toggleAll} />
				</th>
				<th>ID</th>
				<th>标题</th>
				<th>分类</th>
				<th>{$page.data.aliases?.series || '系列'}</th>
				<th>别名</th>
				<th>作者</th>
				<th>发布时间</th>
			</tr>
		</thead>
		<tbody>
			{#each data.posts as post (post.id || post)}
				<tr>
					<td class="checkbox-col">
						<input type="checkbox" name="ids" value={post.id.toString()} bind:group={selectedIds} />
					</td>
					<td>{post.id}</td>
					<td>
						<a href={resolve('/admin/posts/[id]', { id: post.id.toString() })} class="title-link"
							><strong>{post.title}</strong></a
						>
						<a
							href={resolve('/posts/[slug]', { slug: post.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">{post.category || '未分类'}</span></td>
					<td>{post.series || '—'}</td>
					<td><span class="badge">{post.slug}</span></td>
					<td>{post.author || '未知'}</td>
					<td>{post.dateStr}</td>
				</tr>
			{/each}
		</tbody>
	</DataTable>
{/if}

<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);
	}

	.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;
	}
</style>