diff --git a/css/style.css b/css/style.css index dc6a774..926e53c 100644 --- a/css/style.css +++ b/css/style.css @@ -232,6 +232,39 @@ iconify-icon { transition: color 0.2s ease; } +/* 消息删除浮动按钮 */ +.message-with-delete { + position: relative; + padding-right: 48px; +} + +.message-delete-btn { + position: absolute; + top: 8px; + right: 8px; + width: 30px; + height: 30px; + border-radius: 9999px; + border: 2px solid #1f2937; + background: rgba(255, 255, 255, 0.92); + color: #dc2626; + display: inline-flex; + align-items: center; + justify-content: center; + box-shadow: 2px 2px 0 rgba(0,0,0,0.2); + transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; +} + +.message-delete-btn:hover { + background: #dc2626; + color: #ffffff; + transform: scale(1.05); +} + +.message-delete-btn iconify-icon { + font-size: 16px; +} + .svg-placeholder-block { position: relative; } diff --git a/js/app.js b/js/app.js index 95aeff0..14d5a73 100644 --- a/js/app.js +++ b/js/app.js @@ -757,6 +757,14 @@ class ProductCanvasApp { `; } + buildDeleteButtonHtml(messageId) { + return ` + + `; + } + // 组装标准化的SVG消息字符串 buildSVGMessageContent(beforeText = '', svgBody = '', afterText = '') { const segments = []; @@ -859,6 +867,62 @@ class ProductCanvasApp { this.renderSvgViewerForMode(); } + confirmDeleteMessage(messageId) { + const history = this.conversationHistory[this.currentMode] || []; + const targetMessage = history.find(msg => msg.id === messageId); + if (!targetMessage) { + alert('未找到要删除的消息,请刷新后重试。'); + return; + } + + const typeLabel = targetMessage.type === 'user' + ? '这条用户消息' + : targetMessage.type === 'ai' + ? '这条AI回复' + : '这条提示'; + + const confirmed = confirm(`${typeLabel}删除后无法恢复,确定要删除吗?`); + if (!confirmed) { + return; + } + + this.deleteMessagePermanently(messageId); + } + + deleteMessagePermanently(messageId) { + const history = this.conversationHistory[this.currentMode] || []; + const messageIndex = history.findIndex(msg => msg.id === messageId); + if (messageIndex === -1) { + return; + } + + history.splice(messageIndex, 1); + + const svgStore = this.svgStorage[this.currentMode] || {}; + let viewerShouldReset = false; + for (const [svgId, meta] of Object.entries(svgStore)) { + if (meta.messageId === messageId) { + delete svgStore[svgId]; + if (this.currentSvgId === svgId) { + viewerShouldReset = true; + } + } + } + + if (viewerShouldReset) { + this.currentSvgId = null; + this.showSvgPlaceholder(); + } + + Utils.storage.set('canvasHistory', this.conversationHistory.canvas || []); + Utils.storage.set('swotHistory', this.conversationHistory.swot || []); + Utils.storage.set('canvasSVGs', this.svgStorage.canvas || {}); + Utils.storage.set('swotSVGs', this.svgStorage.swot || {}); + + this.renderConversationHistory(); + this.renderSvgViewerForMode(); + } + // 添加用户消息 addUserMessage(text) { const messageId = Utils.generateId('msg'); @@ -935,25 +999,33 @@ class ProductCanvasApp { if (message.type === 'user') { messageDiv.className = 'flex justify-end'; + const deleteButton = this.buildDeleteButtonHtml(message.id); messageDiv.innerHTML = ` -