refactor: 优化 Markdown 编辑器工具栏图标和样式

src/lib/components/admin/MarkdownEditor.svelte

@@ -206,11 +206,10 @@
 			onclick={() => insertAtCursor('**', '**', '粗体')}
 			title="加粗"
 		>
-			<svg viewBox="0 0 24 24"
+			<svg viewBox="0 0 24 24">
-				><path d="M6 4h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path
+				<path d="M7 5h5a3.5 3.5 0 0 1 0 7H7z" />
-					d="M6 12h10a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"
+				<path d="M7 12h6a3.5 3.5 0 0 1 0 7H7z" />
-				></path></svg
+			</svg>
-			>
 		</button>
 		<button
 			type="button"
@@ -218,10 +217,11 @@
 			onclick={() => insertAtCursor('*', '*', '斜体')}
 			title="斜体"
 		>
-			<svg viewBox="0 0 24 24"
+			<svg viewBox="0 0 24 24">
-				><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"
+				<line x1="19" y1="5" x2="11.5" y2="5" />
-				></line><line x1="15" y1="4" x2="9" y2="20"></line></svg
+				<line x1="12.5" y1="19" x2="5" y2="19" />
-			>
+				<line x1="15" y1="5" x2="9" y2="19" />
+			</svg>
 		</button>
 		<button
 			type="button"
@@ -229,14 +229,11 @@
 			onclick={() => insertAtCursor('~~', '~~', '删除线')}
 			title="删除线"
 		>
-			<svg viewBox="0 0 24 24"
+			<svg viewBox="0 0 24 24">
-				><path d="M16 4H9a3 3 0 0 0-2.83 4"></path><path d="M14 12a4 4 0 0 1 0 8H6"></path><line
+				<path d="M16 5.5H10.5a3 3 0 0 0 0 6" />
-					x1="4"
+				<path d="M13.5 12.5a3 3 0 0 1 0 6H8" />
-					y1="12"
+				<line x1="4.5" y1="12" x2="19.5" y2="12" />
-					x2="20"
+			</svg>
-					y2="12"
-				></line></svg
-			>
 		</button>
 		<button
 			type="button"
@@ -244,7 +241,11 @@
 			onclick={() => insertAtCursor('### ', '', '标题')}
 			title="标题"
 		>
-			<svg viewBox="0 0 24 24"><path d="M4 12h16M4 18V6M20 18V6"></path></svg>
+			<svg viewBox="0 0 24 24">
+				<path d="M6 5v14" />
+				<path d="M18 5v14" />
+				<path d="M6 12h12" />
+			</svg>
 		</button>
 		<div class="md-divider"></div>
 		<button
@@ -253,15 +254,14 @@
 			onclick={() => insertAtCursor('- ', '', '列表项')}
 			title="无序列表"
 		>
-			<svg viewBox="0 0 24 24"
+			<svg viewBox="0 0 24 24">
-				><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line
+				<line x1="9" y1="5.5" x2="19.5" y2="5.5" />
-					x1="8"
+				<line x1="9" y1="12" x2="19.5" y2="12" />
-					y1="18"
+				<line x1="9" y1="18.5" x2="19.5" y2="18.5" />
-					x2="21"
+				<circle cx="5" cy="5.5" r="1" fill="currentColor" stroke="none" />
-					y2="18"
+				<circle cx="5" cy="12" r="1" fill="currentColor" stroke="none" />
-				></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"
+				<circle cx="5" cy="18.5" r="1" fill="currentColor" stroke="none" />
-				></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg
+			</svg>
-			>
 		</button>
 		<button
 			type="button"
@@ -269,11 +269,10 @@
 			onclick={() => insertAtCursor('[', '](https://)', '链接文字')}
 			title="链接"
 		>
-			<svg viewBox="0 0 24 24"
+			<svg viewBox="0 0 24 24">
-				><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path
+				<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
-					d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+				<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
-				></path></svg
+			</svg>
-			>
 		</button>
 		<div class="toolbar-dropdown-wrapper">
 			{#if showImageMenu}
@@ -287,12 +286,11 @@
 				onclick={() => (showImageMenu = !showImageMenu)}
 				title="图片"
 			>
-				<svg viewBox="0 0 24 24"
+				<svg viewBox="0 0 24 24">
-					><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><polygon
+					<rect x="3" y="3" width="18" height="18" rx="2" />
-						points="6 21, 10 13, 13 16.5, 16.5 9.5, 19 21"
+					<circle cx="9" cy="9" r="2" />
-						style="fill: currentColor; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.5;"
+					<path d="M21 15l-3.09-3.09a2 2 0 0 0-2.82 0L6 21" />
-					></polygon></svg
+				</svg>
-				>
 			</button>
 			{#if showImageMenu}
 				<div class="toolbar-dropdown">
@@ -330,10 +328,10 @@
 			onclick={() => insertAtCursor('```\n', '\n```', 'code')}
 			title="代码块"
 		>
-			<svg viewBox="0 0 24 24"
+			<svg viewBox="0 0 24 24">
-				><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"
+				<polyline points="15.5 5.5 20.5 12 15.5 18.5" />
-				></polyline></svg
+				<polyline points="8.5 5.5 3.5 12 8.5 18.5" />
-			>
+			</svg>
 		</button>
 		<div class="md-divider"></div>
 		<div class="toolbar-dropdown-wrapper">
@@ -352,10 +350,11 @@
 				onclick={() => (showAdmonitionMenu = !showAdmonitionMenu)}
 				title="提示框 (Admonition)"
 			>
-				<svg viewBox="0 0 24 24"
+				<svg viewBox="0 0 24 24">
-					><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"
+					<circle cx="12" cy="12" r="8.5" />
-					></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg
+					<path d="M12 11.5V16" />
-				>
+					<circle cx="12" cy="8.25" r=".9" fill="currentColor" stroke="none" />
+				</svg>
 			</button>
 			{#if showAdmonitionMenu}
 				<div class="toolbar-dropdown">
@@ -372,17 +371,11 @@
 			{/if}
 		</div>
 		<button type="button" class="md-btn" onclick={insertMore} title="插入摘要分割线">
-			<svg viewBox="0 0 24 24"
+			<svg viewBox="0 0 24 24">
-				><polyline points="5 5 5 9 19 9 19 5"></polyline><polyline points="5 19 5 15 19 15 19 19"
+				<path d="M5 5v3.5h14V5" />
-				></polyline><line
+				<path d="M5 19v-3.5h14V19" />
-					x1="4"
+				<line x1="5" y1="12" x2="19" y2="12" stroke-dasharray="2 2" stroke-linecap="butt" />
-					y1="12"
+			</svg>
-					x2="20"
-					y2="12"
-					stroke-dasharray="3 3"
-					stroke-linecap="butt"
-				></line></svg
-			>
 		</button>
 	</div>
 
@@ -405,48 +398,68 @@
 	.md-toolbar {
 		display: flex;
 		align-items: center;
-		gap: 4px;
+		flex-wrap: wrap;
-		margin-bottom: 8px;
+		gap: 2px;
+		margin-bottom: 10px;
+		padding: 4px;
+		border: 1px solid rgba(0, 0, 0, 0.12);
+		background-color: rgba(0, 0, 0, 0.015);
 	}
 
 	.md-btn {
 		background: transparent;
 		border: none;
-		padding: 4px;
+		padding: 0;
+		margin: 0;
 		cursor: pointer;
 		color: var(--text-color);
-		opacity: 0.65;
+		opacity: 0.7;
-		transition: all 0.2s ease;
+		transition:
+			background-color 0.18s ease,
+			color 0.18s ease,
+			opacity 0.18s ease;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 28px;
+		width: 30px;
-		height: 28px;
+		height: 30px;
-		border-radius: 2px;
+		border-radius: 4px;
+		flex: none;
 	}
 
 	.md-btn:hover {
 		opacity: 1;
 		color: var(--accent-color, #419b38);
-		background-color: rgba(0, 0, 0, 0.03);
+		background-color: rgba(65, 155, 56, 0.1);
+	}
+
+	.md-btn:active {
+		background-color: rgba(65, 155, 56, 0.18);
+	}
+
+	.md-btn:focus-visible {
+		opacity: 1;
+		outline: 2px solid var(--accent-color, #419b38);
+		outline-offset: -2px;
 	}
 
 	.md-btn svg {
 		width: 18px;
 		height: 18px;
+		display: block;
 		stroke: currentColor;
-		stroke-width: 1.5;
+		stroke-width: 2;
 		stroke-linecap: round;
 		stroke-linejoin: round;
 		fill: none;
 	}
 
 	.md-divider {
-		width: 2px;
+		flex: none;
+		width: 1px;
 		height: 16px;
-		background: var(--text-color);
+		background: rgba(0, 0, 0, 0.14);
-		opacity: 0.15;
+		margin: 0 5px;
-		margin: 0 4px;
 	}
 
 	.toolbar-dropdown-wrapper {