feat: 在文章与页面后台侧边栏集成媒体附件管理功能

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

@@ -7,6 +7,8 @@
 	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();
@@ -16,6 +18,9 @@
 	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">
@@ -71,7 +76,10 @@
 
 				<div class="editor-body">
 					{#if mode === 'edit'}
-						<MarkdownEditor bind:value={content} />
+						<MarkdownEditor
+							bind:value={content}
+							onUpload={(img) => (sessionUploads = [...sessionUploads, img])}
+						/>
 					{:else}
 						<div class="preview-area">
 							<MarkdownRenderer {content} />
@@ -82,6 +90,17 @@
 		</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>
@@ -99,6 +118,12 @@
 						variant="underline"
 					/>
 				</div>
+			{:else}
+				<div class="sidebar-box">
+					<h3>当前页面附件</h3>
+					<ArticleAttachments bind:content bind:sessionUploads />
+				</div>
+			{/if}
 		</div>
 	</div>
 </form>

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

@@ -7,6 +7,8 @@
 	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 { createSlugAutoHandler } from '$lib/utils/slugify';
 
@@ -19,6 +21,9 @@
 	let isSlugUserModified = $state(false);
 	let isGenerating = $state(false);
 
+	let sidebarTab = $state('settings');
+	let sessionUploads = $state<{ url: string; key: string; filename: string }[]>([]);
+
 	const slugHandler = createSlugAutoHandler({
 		getSlug: () => slug,
 		setSlug: (val) => (slug = val),
@@ -80,7 +85,10 @@
 
 				<div class="editor-body">
 					{#if mode === 'edit'}
-						<MarkdownEditor bind:value={content} />
+						<MarkdownEditor
+							bind:value={content}
+							onUpload={(img) => (sessionUploads = [...sessionUploads, img])}
+						/>
 					{:else}
 						<div class="preview-area">
 							<MarkdownRenderer {content} />
@@ -91,6 +99,17 @@
 		</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>
@@ -119,6 +138,12 @@
 						variant="underline"
 					/>
 				</div>
+			{:else}
+				<div class="sidebar-box">
+					<h3>当前页面附件</h3>
+					<ArticleAttachments bind:content bind:sessionUploads />
+				</div>
+			{/if}
 		</div>
 	</div>
 </form>

src/routes/admin/posts/[id]/+page.svelte

@@ -11,6 +11,8 @@
 	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();
@@ -30,6 +32,9 @@
 	let tagsList = $state(initialData.tags || []);
 	let seriesList = $state(initialData.series || []);
 
+	let sidebarTab = $state('settings');
+	let sessionUploads = $state<{ url: string; key: string; filename: string }[]>([]);
+
 	function toggleTag(tagId: number) {
 		if (selectedTags.includes(tagId)) {
 			selectedTags = selectedTags.filter((id) => id !== tagId);
@@ -155,7 +160,10 @@
 
 				<div class="editor-body">
 					{#if mode === 'edit'}
-						<MarkdownEditor bind:value={content} />
+						<MarkdownEditor
+							bind:value={content}
+							onUpload={(img) => (sessionUploads = [...sessionUploads, img])}
+						/>
 					{:else}
 						<div class="preview-area">
 							<MarkdownRenderer {content} />
@@ -166,13 +174,22 @@
 		</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>
 
-			<FeaturedImagePicker bind:cover adaptiveHeight previewable />
-
 				<div class="sidebar-box">
 					<h3>别名 *</h3>
 					<TextInput
@@ -241,7 +258,11 @@
 											stroke-linecap="round"
 											stroke-linejoin="round"
 											fill="none"
-										><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"
+											><line x1="18" y1="6" x2="6" y2="18"></line><line
+												x1="6"
+												y1="6"
+												x2="18"
+												y2="18"
 											></line></svg
 										></button
 									>
@@ -286,6 +307,15 @@
 						{/if}
 					</div>
 				</div>
+			{:else}
+				<div class="sidebar-box">
+					<FeaturedImagePicker bind:cover adaptiveHeight previewable />
+				</div>
+				<div class="sidebar-box">
+					<h3>当前文章附件</h3>
+					<ArticleAttachments bind:content bind:sessionUploads />
+				</div>
+			{/if}
 		</div>
 	</div>
 </form>

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

@@ -12,6 +12,8 @@
 	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';
 
 	import { createSlugAutoHandler } from '$lib/utils/slugify';
@@ -44,6 +46,9 @@
 		setIsGenerating: (val) => (isGenerating = val)
 	});
 
+	let sidebarTab = $state('settings');
+	let sessionUploads = $state<{ url: string; key: string; filename: string }[]>([]);
+
 	function handleTitleInput() {
 		slugHandler.onNameInput(title);
 	}
@@ -173,7 +178,10 @@
 
 				<div class="editor-body">
 					{#if mode === 'edit'}
-						<MarkdownEditor bind:value={content} />
+						<MarkdownEditor
+							bind:value={content}
+							onUpload={(img) => (sessionUploads = [...sessionUploads, img])}
+						/>
 					{:else}
 						<div class="preview-area">
 							<MarkdownRenderer {content} />
@@ -184,6 +192,17 @@
 		</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="publish-btn">
@@ -191,8 +210,6 @@
 					</Button>
 				</div>
 
-			<FeaturedImagePicker bind:cover adaptiveHeight previewable />
-
 				<div class="sidebar-box">
 					<h3 style="display: flex; justify-content: space-between; align-items: center;">
 						<span>别名 *</span>
@@ -273,7 +290,11 @@
 											stroke-linecap="round"
 											stroke-linejoin="round"
 											fill="none"
-										><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"
+											><line x1="18" y1="6" x2="6" y2="18"></line><line
+												x1="6"
+												y1="6"
+												x2="18"
+												y2="18"
 											></line></svg
 										></button
 									>
@@ -318,6 +339,15 @@
 						{/if}
 					</div>
 				</div>
+			{:else}
+				<div class="sidebar-box">
+					<FeaturedImagePicker bind:cover adaptiveHeight previewable />
+				</div>
+				<div class="sidebar-box">
+					<h3>当前文章附件</h3>
+					<ArticleAttachments bind:content bind:sessionUploads />
+				</div>
+			{/if}
 		</div>
 	</div>
 </form>