From 2f41bda41e6415bc391f0237725c455ad216360f Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Fri, 11 Sep 2026 17:58:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Markdown=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=9C=AC=E5=9C=B0=E5=9B=BE=E7=89=87=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/admin/MarkdownEditor.svelte    | 96 ++++++++++++++++---
 1 file changed, 84 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/admin/MarkdownEditor.svelte b/src/lib/components/admin/MarkdownEditor.svelte
index deb560f..9b065e1 100644
--- a/src/lib/components/admin/MarkdownEditor.svelte
+++ b/src/lib/components/admin/MarkdownEditor.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+	/* eslint-disable @typescript-eslint/no-explicit-any */
 	import { onMount, onDestroy } from 'svelte';
 	import { EditorView, basicSetup } from 'codemirror';
 	import { EditorState } from '@codemirror/state';
 	import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 	import { languages } from '@codemirror/language-data';
 	import { placeholder as cmPlaceholder } from '@codemirror/view';
+	import { addToast } from '$lib/stores/toast.svelte';
 
 	let { value = $bindable(''), placeholderText = '支持 Markdown 格式...' } = $props();
 
@@ -12,6 +14,40 @@
 	let view: EditorView;
 	let isUpdating = false;
 
+	let showImageMenu = $state(false);
+	let fileInput: HTMLInputElement;
+	let isUploadingImage = $state(false);
+
+	async function handleImageUpload(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+
+		const formData = new FormData();
+		formData.append('file', file);
+
+		isUploadingImage = true;
+		try {
+			const res = await fetch('/admin/api/upload', {
+				method: 'POST',
+				body: formData
+			});
+			const data = (await res.json()) as any;
+			if (data.success) {
+				insertAtCursor('![', `](${data.url})`, file.name || '图片');
+				addToast('图片上传成功', 'success');
+			} else {
+				addToast(data.error || '上传失败', 'error');
+			}
+		} catch (err: any) {
+			console.error(err);
+			addToast('网络错误，上传失败', 'error');
+		} finally {
+			isUploadingImage = false;
+			input.value = '';
+			showImageMenu = false;
+		}
+	}
 	const customTheme = EditorView.theme({
 		'&': {
 			color: 'var(--text-color)',
@@ -228,19 +264,55 @@
 				></path></svg
 			>
 		</button>
-		<button
-			type="button"
-			class="md-btn"
-			onclick={() => insertAtCursor('![', '](https://)', '图片描述')}
-			title="图片"
-		>
-			<svg viewBox="0 0 24 24"
-				><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><polygon
-					points="6 21, 10 13, 13 16.5, 16.5 9.5, 19 21"
-					style="fill: currentColor; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.5;"
-				></polygon></svg
+		<div class="toolbar-dropdown-wrapper">
+			{#if showImageMenu}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_interactive_supports_focus -->
+				<div class="dropdown-overlay" onclick={() => (showImageMenu = false)} role="button"></div>
+			{/if}
+			<button
+				type="button"
+				class="md-btn"
+				onclick={() => (showImageMenu = !showImageMenu)}
+				title="图片"
 			>
-		</button>
+				<svg viewBox="0 0 24 24"
+					><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><polygon
+						points="6 21, 10 13, 13 16.5, 16.5 9.5, 19 21"
+						style="fill: currentColor; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.5;"
+					></polygon></svg
+				>
+			</button>
+			{#if showImageMenu}
+				<div class="toolbar-dropdown">
+					<button
+						type="button"
+						class="dropdown-item"
+						onclick={() => {
+							insertAtCursor('![', '](https://)', '图片描述');
+							showImageMenu = false;
+						}}
+					>
+						插入图片链接
+					</button>
+					<button
+						type="button"
+						class="dropdown-item"
+						onclick={() => fileInput.click()}
+						disabled={isUploadingImage}
+					>
+						{isUploadingImage ? '正在上传...' : '上传本地图片'}
+					</button>
+				</div>
+			{/if}
+		</div>
+		<input
+			type="file"
+			accept="image/*"
+			style="display:none;"
+			bind:this={fileInput}
+			onchange={handleImageUpload}
+		/>
 		<button
 			type="button"
 			class="md-btn"