From dde868021e48b8bd4202815cd8251f0b7025a782 Mon Sep 17 00:00:00 2001
From: nanhaoluo <3075912108@qq.com>
Date: Sat, 24 Jan 2026 23:41:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20Mermaid=20?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E6=8B=96=E6=8B=BD=E5=92=8C=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加鼠标左键拖拽移动图表
- 拖拽时显示 grabbing 光标，平时显示 grab 光标
- 添加底部提示文本：按住 Ctrl+滚轮缩放 | 拖拽移动
- 提示文本鼠标悬停时显示，支持夜间模式
- 防止拖拽时选中文本
---
 argontheme.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css     | 37 +++++++++++++++++++++++++++++++++++
 2 files changed, 91 insertions(+)

diff --git a/argontheme.js b/argontheme.js
index 8f00363..37959bc 100644
--- a/argontheme.js
+++ b/argontheme.js
@@ -5198,6 +5198,12 @@ void 0;
 
 			container.appendChild(controls);
 
+			// 创建提示文本
+			const hint = document.createElement('div');
+			hint.className = 'mermaid-hint';
+			hint.textContent = '按住 Ctrl+滚轮缩放 | 拖拽移动';
+			container.appendChild(hint);
+
 			// 缩放状态
 			let scale = 1;
 			const minScale = 0.5;
@@ -5243,6 +5249,54 @@ void 0;
 					}
 				}
 			}, { passive: false });
+
+			// 拖拽功能
+			let isDragging = false;
+			let startX = 0;
+			let startY = 0;
+			let scrollLeft = 0;
+			let scrollTop = 0;
+
+			inner.addEventListener('mousedown', (e) => {
+				// 只响应左键
+				if (e.button !== 0) return;
+				
+				isDragging = true;
+				inner.classList.add('dragging');
+				
+				startX = e.pageX - inner.offsetLeft;
+				startY = e.pageY - inner.offsetTop;
+				scrollLeft = inner.scrollLeft;
+				scrollTop = inner.scrollTop;
+				
+				e.preventDefault();
+			});
+
+			document.addEventListener('mousemove', (e) => {
+				if (!isDragging) return;
+				
+				e.preventDefault();
+				
+				const x = e.pageX - inner.offsetLeft;
+				const y = e.pageY - inner.offsetTop;
+				const walkX = (x - startX) * 2;
+				const walkY = (y - startY) * 2;
+				
+				inner.scrollLeft = scrollLeft - walkX;
+				inner.scrollTop = scrollTop - walkY;
+			});
+
+			document.addEventListener('mouseup', () => {
+				if (isDragging) {
+					isDragging = false;
+					inner.classList.remove('dragging');
+				}
+			});
+
+			// 防止拖拽时选中文本
+			inner.addEventListener('dragstart', (e) => {
+				e.preventDefault();
+			});
 		},
 
 		// ---------- 主题切换监听 ----------
diff --git a/style.css b/style.css
index 4c4b166..91eee0a 100644
--- a/style.css
+++ b/style.css
@@ -988,6 +988,43 @@ html.darkmode .mermaid-zoom-level {
 	color: #aaa;
 }
 
+/* 提示文本 */
+.mermaid-hint {
+	position: absolute;
+	bottom: 10px;
+	left: 50%;
+	transform: translateX(-50%);
+	background: rgba(0, 0, 0, 0.7);
+	color: white;
+	padding: 6px 12px;
+	border-radius: 4px;
+	font-size: 12px;
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.3s;
+	white-space: nowrap;
+	z-index: 9;
+}
+
+.mermaid-container:hover .mermaid-hint {
+	opacity: 1;
+}
+
+html.darkmode .mermaid-hint {
+	background: rgba(255, 255, 255, 0.15);
+	backdrop-filter: blur(10px);
+}
+
+/* 拖拽时的光标 */
+.mermaid-container-inner.dragging {
+	cursor: grabbing !important;
+	user-select: none;
+}
+
+.mermaid-container-inner:not(.dragging) {
+	cursor: grab;
+}
+
 /* Mermaid 淡入动画 */
 @keyframes mermaidFadeIn {
 	from {