blogflare/src/routes/admin/pages/[id]/+page.svelte

<script lang="ts">
	import { resolve } from '$app/paths';
	import { page } from '$app/stores';
	import type { PageData, ActionData } from './$types';
	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
	import MarkdownEditor from '$lib/components/admin/MarkdownEditor.svelte';
	import TextInput from '$lib/components/admin/TextInput.svelte';
	import Button from '$lib/components/admin/Button.svelte';
	import Alert from '$lib/components/admin/Alert.svelte';
	import Tabs from '$lib/components/admin/Tabs.svelte';
	import ArticleAttachments from '$lib/components/admin/ArticleAttachments.svelte';
	import { untrack } from 'svelte';

	let { data, form }: { data: PageData; form: ActionData } = $props();
	const initialData = $state.snapshot(untrack(() => data));

	let title = $state(initialData.page.title);
	let slug = $state(initialData.page.slug);
	let content = $state(initialData.page.content);
	let mode = $state<'edit' | 'preview'>('edit');

	let sidebarTab = $state('settings');
	let sessionUploads = $state<{ url: string; key: string; filename: string }[]>([]);
</script>

<div class="admin-page-header">
	<h2>编辑{$page.data.aliases?.page || '页面'}</h2>
	<div class="header-actions">
		<Button
			href={resolve('/[slug]', { slug: data.page.slug })}
			target="_blank"
			variant="secondary"
			style="margin-right: 12px;"
		>
			前台预览
		</Button>
		<Button href={resolve('/admin/pages')} variant="secondary">&larr; 返回</Button>
	</div>
</div>

{#if form?.error}
	<Alert message={form.error} />
{/if}

<form action="?/update" method="POST" class="post-form">
	<div class="form-grid">
		<div class="form-main">
			<div class="form-group">
				<label for="title">标题 *</label>
				<TextInput
					type="text"
					id="title"
					name="title"
					bind:value={title}
					placeholder="输入标题..."
					required
				/>
			</div>

			<div class="form-group">
				<div class="editor-header">
					<label for="content">正文 *</label>
					<div class="editor-tabs">
						<button
							type="button"
							class="tab-btn {mode === 'edit' ? 'active' : ''}"
							onclick={() => (mode = 'edit')}>编辑</button
						>
						<button
							type="button"
							class="tab-btn {mode === 'preview' ? 'active' : ''}"
							onclick={() => (mode = 'preview')}>预览</button
						>
					</div>
				</div>

				<div class="editor-body">
					{#if mode === 'edit'}
						<MarkdownEditor
							bind:value={content}
							onUpload={(img) => (sessionUploads = [...sessionUploads, img])}
						/>
					{:else}
						<div class="preview-area">
							<MarkdownRenderer {content} />
						</div>
					{/if}
				</div>
			</div>
		</div>

		<div class="form-sidebar">
			<Tabs
				tabs={[
					{ id: 'settings', label: '设置' },
					{ id: 'media', label: '媒体附件' }
				]}
				bind:activeTab={sidebarTab}
				fullWidth={true}
				small={true}
			/>

			{#if sidebarTab === 'settings'}
				<div class="sidebar-box">
					<h3>更新</h3>
					<Button type="submit" variant="primary" fullWidth class="submit-btn">保存修改</Button>
				</div>

				<div class="sidebar-box">
					<h3>别名 *</h3>
					<TextInput
						type="text"
						id="slug"
						name="slug"
						bind:value={slug}
						placeholder="hello-world"
						required
						variant="underline"
					/>
				</div>
			{:else}
				<div class="sidebar-box">
					<h3>当前页面附件</h3>
					<ArticleAttachments bind:content bind:sessionUploads />
				</div>
			{/if}
		</div>
	</div>
</form>

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

	.header-actions {
		display: flex;
		align-items: center;
	}

	.editor-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 6px;
	}

	.editor-tabs {
		display: flex;
		gap: 8px;
	}

	.tab-btn {
		background: none;
		border: none;
		padding: 4px 12px;
		font-size: 0.85rem;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.4);
		cursor: pointer;
		border-radius: 4px;
		transition: all 0.2s ease;
	}

	.tab-btn:hover {
		background: rgba(0, 0, 0, 0.05);
	}

	.tab-btn.active {
		color: var(--accent-color, #419b38);
		background: rgba(65, 155, 56, 0.1);
	}

	.preview-area {
		padding: 20px;
		border: 1px solid rgba(0, 0, 0, 0.12);
		background: rgba(0, 0, 0, 0.015);
		min-height: 400px;
		max-height: 600px;
		overflow-y: auto;
	}

	.form-grid {
		display: grid;
		grid-template-columns: 1fr 280px;
		gap: 40px;
		align-items: start;
	}

	.form-main {
		width: 100%;
	}

	.form-sidebar {
		position: sticky;
		top: 80px;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 30px;
		z-index: 10;
	}

	@media (max-width: 900px) {
		.form-grid {
			grid-template-columns: 1fr;
		}

		.form-sidebar {
			position: static;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 20px;
			margin-top: 20px;
		}
	}

	.form-group {
		margin-bottom: 20px;
	}

	.form-group label {
		display: block;
		font-weight: 700;
		margin-bottom: 6px;
		color: var(--text-color);
		font-size: 0.9rem;
		letter-spacing: 0.5px;
	}

	.sidebar-box {
		background: transparent;
		border: none;
		border-radius: 0;
		padding: 0;
	}

	.sidebar-box h3 {
		margin: 0 0 20px 0;
		font-size: 0.9rem;
		font-weight: 700;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: var(--text-color);
		border-bottom: none;
	}
</style>