✨ 实现图片编辑功能，优化图片交互体验

核心功能：
- 双击图片 → 进入编辑模式（替换图片）
- 右键图片 → 显示菜单（预览/编辑选项）
- 图片编辑器支持文件选择和替换
- 支持HTML图片和MindElixir原生图片两种类型

技术实现：
- 修改mouse.ts，双击图片触发showImageEditor事件
- 扩展contextMenu.ts，添加图片编辑菜单项
- 更新pubsub.ts，添加showImageEditor事件类型
- 在MindMap.vue中实现图片编辑器UI和逻辑
- 添加文件选择、格式验证、大小限制（5MB）
- 支持JPG/PNG/GIF格式

UI设计：
- 紫色主题编辑器（与品牌色一致）
- 当前图片预览 + 文件选择界面
- 响应式设计，支持大图片显示
- 优雅的模态框和交互体验

frontend/src/components/MindMap.vue

@@ -164,6 +164,40 @@
       </div>
     </div>
 
+    <!-- 图片编辑器模态框 -->
+    <div v-if="showImageEditor" class="image-editor-modal" @click="closeImageEditor">
+      <div class="image-editor-content" @click.stop>
+        <div class="image-editor-header">
+          <span class="image-editor-title">{{ imageEditorTitle }}</span>
+          <button @click="closeImageEditor" class="image-editor-close">×</button>
+        </div>
+        <div class="image-editor-body">
+          <div class="current-image-section">
+            <h4>当前图片：</h4>
+            <img :src="imageEditorUrl" :alt="imageEditorTitle" class="current-image" />
+          </div>
+          <div class="replace-image-section">
+            <h4>替换图片：</h4>
+            <div class="file-input-wrapper">
+              <input 
+                type="file" 
+                @change="handleImageFileSelect" 
+                accept="image/*" 
+                id="imageFileInput"
+                class="file-input"
+              />
+              <label for="imageFileInput" class="file-input-label">
+                📁 选择新图片
+              </label>
+            </div>
+            <p class="file-hint">支持 JPG、PNG、GIF 格式，最大 5MB</p>
+          </div>
+        </div>
+        <div class="image-editor-footer">
+          <button @click="closeImageEditor" class="cancel-button">取消</button>
+        </div>
+      </div>
+    </div>
 
   </div>
 </template>
@@ -256,6 +290,12 @@ const imagePreviewTitle = ref('');
 const imagePreviewLoading = ref(false);
 const imagePreviewError = ref('');
 
+// 图片编辑相关状态
+const showImageEditor = ref(false);
+const imageEditorUrl = ref('');
+const imageEditorTitle = ref('');
+const currentImageElement = ref(null);
+
 
 
 
@@ -340,6 +380,69 @@ const closeImagePreview = () => {
   imagePreviewError.value = '';
 };
 
+// 图片编辑器相关函数
+const openImageEditor = (imageUrl, altText, imgElement) => {
+  console.log('🖼️ 打开图片编辑器:', { imageUrl, altText });
+  
+  imageEditorUrl.value = imageUrl;
+  imageEditorTitle.value = altText || '编辑图片';
+  currentImageElement.value = imgElement;
+  showImageEditor.value = true;
+};
+
+const closeImageEditor = () => {
+  showImageEditor.value = false;
+  imageEditorUrl.value = '';
+  imageEditorTitle.value = '';
+  currentImageElement.value = null;
+};
+
+const handleImageFileSelect = (event) => {
+  const file = event.target.files[0];
+  if (!file) return;
+  
+  // 检查文件类型
+  if (!file.type.startsWith('image/')) {
+    alert('请选择图片文件');
+    return;
+  }
+  
+  // 检查文件大小（限制为5MB）
+  if (file.size > 5 * 1024 * 1024) {
+    alert('图片文件不能超过5MB');
+    return;
+  }
+  
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    const newImageUrl = e.target.result;
+    updateImageInNode(newImageUrl);
+  };
+  reader.readAsDataURL(file);
+};
+
+const updateImageInNode = (newImageUrl) => {
+  if (currentImageElement.value) {
+    // 更新HTML中的图片元素
+    currentImageElement.value.src = newImageUrl;
+    console.log('🖼️ 已更新HTML图片元素');
+  } else {
+    // 更新MindElixir原生图片属性
+    const currentNode = mindElixir.value?.currentNode;
+    if (currentNode && currentNode.nodeObj) {
+      if (typeof currentNode.nodeObj.image === 'string') {
+        currentNode.nodeObj.image = newImageUrl;
+      } else if (currentNode.nodeObj.image && typeof currentNode.nodeObj.image === 'object') {
+        currentNode.nodeObj.image.url = newImageUrl;
+      }
+      console.log('🖼️ 已更新MindElixir原生图片属性');
+    }
+  }
+  
+  // 关闭编辑器
+  closeImageEditor();
+};
+
 const onImageLoad = () => {
   console.log('✅ 模态框图片加载成功');
   // 图片已经在预加载阶段处理了状态，这里只是确认
@@ -636,6 +739,12 @@ const loadMindmapData = async (data, keepPosition = false, shouldCenterRoot = tr
           openImagePreview(imageUrl, altText);
         });
         
+        // 添加图片编辑事件监听器
+        mindElixir.value.bus.addListener('showImageEditor', (imageUrl, altText, imgElement) => {
+          console.log('🖼️ 收到图片编辑事件:', { imageUrl, altText });
+          openImageEditor(imageUrl, altText, imgElement);
+        });
+        
         // Mind Elixir现在会自动使用markdown解析器渲染内容
         
       } else {
@@ -724,6 +833,12 @@ const loadMindmapData = async (data, keepPosition = false, shouldCenterRoot = tr
               openImagePreview(imageUrl, altText);
             });
             
+            // 添加图片编辑事件监听器
+            mindElixir.value.bus.addListener('showImageEditor', (imageUrl, altText, imgElement) => {
+              console.log('🖼️ 收到图片编辑事件（延迟创建）:', { imageUrl, altText });
+              openImageEditor(imageUrl, altText, imgElement);
+            });
+            
             // 延迟执行后续操作
             setTimeout(() => {
               // Mind Elixir现在会自动使用markdown解析器渲染内容
@@ -4881,5 +4996,153 @@ const updateMindMapRealtime = async (data, title) => {
   background: #7d0a8e;
 }
 
+/* 图片编辑器模态框样式 */
+.image-editor-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10001;
+}
+
+.image-editor-content {
+  background: white;
+  border-radius: 12px;
+  width: 600px;
+  max-width: 90vw;
+  max-height: 80vh;
+  overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  border: 2px solid #660874;
+}
+
+.image-editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f5f5f5;
+}
+
+.image-editor-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.image-editor-close {
+  background: none;
+  border: none;
+  font-size: 28px;
+  color: #666;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.image-editor-close:hover {
+  background: #e0e0e0;
+  color: #333;
+}
+
+.image-editor-body {
+  padding: 20px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.current-image-section {
+  margin-bottom: 24px;
+}
+
+.current-image-section h4 {
+  margin: 0 0 12px 0;
+  color: #333;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.current-image {
+  max-width: 100%;
+  max-height: 200px;
+  height: auto;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  object-fit: contain;
+}
+
+.replace-image-section h4 {
+  margin: 0 0 12px 0;
+  color: #333;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.file-input-wrapper {
+  margin-bottom: 8px;
+}
+
+.file-input {
+  display: none;
+}
+
+.file-input-label {
+  display: inline-block;
+  padding: 10px 20px;
+  background: #660874;
+  color: white;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background 0.2s;
+  border: none;
+}
+
+.file-input-label:hover {
+  background: #4d0655;
+}
+
+.file-hint {
+  margin: 0;
+  font-size: 12px;
+  color: #666;
+}
+
+.image-editor-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #e0e0e0;
+  background: #f9f9f9;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.cancel-button {
+  padding: 8px 20px;
+  background: #6c757d;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.2s;
+}
+
+.cancel-button:hover {
+  background: #5a6268;
+}
+
 </style>
 

frontend/src/lib/mind-elixir/src/mouse.ts

@@ -54,10 +54,10 @@ export default function (mind: MindElixirInstance) {
       const imageUrl = img.src
       const altText = img.alt || img.title || ''
       
-      console.log('🖼️ 双击图片节点，准备预览:', { imageUrl, altText })
+      console.log('🖼️ 双击图片节点，准备编辑:', { imageUrl, altText })
       
-      // 触发图片预览事件
+      // 触发图片编辑事件
-      mind.bus.fire('showImagePreview', imageUrl, altText)
+      mind.bus.fire('showImageEditor', imageUrl, altText, img)
       return
     }
     
@@ -79,8 +79,8 @@ export default function (mind: MindElixirInstance) {
         const imageUrl = imgInContent.src
         const altText = imgInContent.alt || imgInContent.title || topic.nodeObj?.topic || ''
         
-        console.log('🖼️ 双击包含HTML图片的节点，准备预览:', { imageUrl, altText })
+        console.log('🖼️ 双击包含HTML图片的节点，准备编辑:', { imageUrl, altText })
-        mind.bus.fire('showImagePreview', imageUrl, altText)
+        mind.bus.fire('showImageEditor', imageUrl, altText, imgInContent)
         return
       }
       

frontend/src/lib/mind-elixir/src/plugin/contextMenu.ts

@@ -49,6 +49,7 @@ export default function (mind: MindElixirInstance, option: true | ContextMenuOpt
   const linkBidirectional = createLi('cm-link-bidirectional', lang.linkBidirectional, '')
   const summary = createLi('cm-summary', lang.summary, '')
   const imagePreview = createLi('cm-image-preview', '预览图片', '')
+  const imageEdit = createLi('cm-image-edit', '编辑图片', '')
 
   const menuUl = document.createElement('ul')
   menuUl.className = 'menu-list'
@@ -63,6 +64,8 @@ export default function (mind: MindElixirInstance, option: true | ContextMenuOpt
   menuUl.appendChild(up)
   menuUl.appendChild(down)
   menuUl.appendChild(summary)
+  menuUl.appendChild(imagePreview)
+  menuUl.appendChild(imageEdit)
   if (option.link) {
     menuUl.appendChild(link)
     menuUl.appendChild(linkBidirectional)
@@ -102,8 +105,11 @@ export default function (mind: MindElixirInstance, option: true | ContextMenuOpt
       if (hasImage) {
         imagePreview.style.display = 'block'
         imagePreview.className = ''
+        imageEdit.style.display = 'block'
+        imageEdit.className = ''
       } else {
         imagePreview.style.display = 'none'
+        imageEdit.style.display = 'none'
       }
       
       if (isRoot) {
@@ -246,6 +252,29 @@ export default function (mind: MindElixirInstance, option: true | ContextMenuOpt
       }
     }
   }
+  
+  imageEdit.onclick = () => {
+    menuContainer.hidden = true
+    const target = mind.currentNode as Topic
+    if (target) {
+      // 检查节点是否有图片
+      if (target.nodeObj?.image) {
+        const imageUrl = typeof target.nodeObj.image === 'string' ? target.nodeObj.image : target.nodeObj.image.url
+        console.log('🖼️ 右键菜单编辑图片:', imageUrl)
+        mind.bus.fire('showImageEditor', imageUrl, target.nodeObj.topic || '', null)
+      } else {
+        // 检查节点内容中是否包含图片
+        const imgInContent = target.querySelector('img')
+        if (imgInContent) {
+          const imageUrl = imgInContent.src
+          const altText = imgInContent.alt || imgInContent.title || target.nodeObj?.topic || ''
+          
+          console.log('🖼️ 右键菜单编辑HTML图片:', { imageUrl, altText })
+          mind.bus.fire('showImageEditor', imageUrl, altText, imgInContent)
+        }
+      }
+    }
+  }
   return () => {
     // maybe useful?
     add_child.onclick = null

frontend/src/lib/mind-elixir/src/utils/pubsub.ts

@@ -89,6 +89,7 @@ export type EventMap = {
   updateArrowDelta: (arrow: Arrow) => void
   showContextMenu: (e: MouseEvent) => void
   showImagePreview: (imageUrl: string, altText?: string) => void
+  showImageEditor: (imageUrl: string, altText?: string, imgElement?: HTMLImageElement | null) => void
 }
 
 export function createBus<T extends Record<string, (...args: any[]) => void> = EventMap>() {