✨ 实现图片编辑功能，优化图片交互体验
核心功能： - 双击图片 → 进入编辑模式（替换图片） - 右键图片 → 显示菜单（预览/编辑选项） - 图片编辑器支持文件选择和替换 - 支持HTML图片和MindElixir原生图片两种类型 技术实现： - 修改mouse.ts，双击图片触发showImageEditor事件 - 扩展contextMenu.ts，添加图片编辑菜单项 - 更新pubsub.ts，添加showImageEditor事件类型 - 在MindMap.vue中实现图片编辑器UI和逻辑 - 添加文件选择、格式验证、大小限制（5MB） - 支持JPG/PNG/GIF格式 UI设计： - 紫色主题编辑器（与品牌色一致） - 当前图片预览 + 文件选择界面 - 响应式设计，支持大图片显示 - 优雅的模态框和交互体验
This commit is contained in:
parent
1719ad4c8a
commit
e3fedcbf0f
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 })
|
||||
mind.bus.fire('showImagePreview', imageUrl, altText)
|
||||
console.log('🖼️ 双击包含HTML图片的节点，准备编辑:', { imageUrl, altText })
|
||||
mind.bus.fire('showImageEditor', imageUrl, altText, imgInContent)
|
||||
return
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue