feat: 增加双击消息编辑功能

Author: FreecellRaid

src/components/common/MessageItem.vue

@@ -62,14 +62,30 @@
             </span>
         </div>
 
-        <div class="message-content" :style="computedStyles.contentStyle">
-            {{ message.content }}
+        <div
+            class="message-content"
+            :style="computedStyles.contentStyle"
+            @dblclick="startEditing"
+        >
+            <template v-if="isEditing">
+                <textarea
+                    ref="editInput"
+                    v-model="editContent"
+                    class="content-editor"
+                    @blur="saveEdit"
+                    @keydown.enter.ctrl="saveEdit"
+                    @keydown.esc="cancelEdit"
+                ></textarea>
+            </template>
+            <template v-else>
+                {{ message.content }}
+            </template>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, nextTick } from 'vue';
 import type { Message } from '@/types/log';
 import { useUiStore } from '@/stores/uiStore';
 import { useStyleStore } from '@/stores/styleStore';
@@ -102,6 +118,7 @@ const emit = defineEmits<{
     (e: 'actionMerge'): void;
     (e: 'actionSplit'): void;
     (e: 'actionDelete'): void;
+    (e: 'updateContent', content: string): void;
 }>();
 
 const styleStore = useStyleStore();
@@ -145,6 +162,30 @@ const isHidden = computed(() => {
         (hideCommand && props.message.isCommand)
     );
 });
+
+const isEditing = ref(false);
+const editContent = ref('');
+const editInput = ref<HTMLTextAreaElement | null>(null);
+
+function startEditing() {
+    editContent.value = props.message.content;
+    isEditing.value = true;
+    nextTick(() => {
+        editInput.value?.focus();
+    });
+}
+
+function saveEdit() {
+    if (!isEditing.value) return;
+    if (editContent.value !== props.message.content) {
+        emit('updateContent', editContent.value);
+    }
+    isEditing.value = false;
+}
+
+function cancelEdit() {
+    isEditing.value = false;
+}
 </script>
 
 <style scoped>
@@ -245,4 +286,19 @@ const isHidden = computed(() => {
     width: 14px;
     height: 14px;
 }
+
+.content-editor {
+    width: 100%;
+    min-height: 3em;
+    padding: 4px 8px;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    border: 1px solid var(--active-accent);
+    border-radius: 4px;
+    background: var(--bg-input);
+    color: var(--text-main);
+    resize: vertical;
+    outline: none;
+}
 </style>

src/components/workspace/ChunkView.vue

@@ -50,6 +50,10 @@
                         @action-merge="handleActionMerge(msg)"
                         @action-split="handleActionSplit(msg.messageId)"
                         @action-delete="handleActionDelete(msg.messageId)"
+                        @update-content="
+                            (newContent) =>
+                                handleUpdateContent(msg.messageId, newContent)
+                        "
                     />
                 </div>
             </template>
@@ -74,7 +78,6 @@ import { useMessageEditorStore } from '@/stores/editorStore/messageStore';
 import { useChunkEditorStore } from '@/stores/editorStore/chunkStore';
 import { useCommandDispatcher } from '@/composables/useCommandDispatcher';
 import { useWindowStore } from '@/stores/windowStore';
-import { generateId } from '@/utils/id';
 import type { Message } from '@/types/log';
 
 const props = defineProps<{ chunkId: string }>();
@@ -115,6 +118,12 @@ function handleMessageSelect(event: MouseEvent, msgId: string, index: number) {
     });
 }
 
+function handleUpdateContent(messageId: string, newContent: string) {
+    messageEditorStore.updateMessage(props.chunkId, messageId, {
+        content: newContent,
+    });
+}
+
 function handleMessageDragStart(
     event: DragEvent,
     messageId: string,
@@ -159,26 +168,12 @@ function handleContainerDrop(event: DragEvent) {
 }
 
 function handleActionInsert(msg: Message, index: number) {
-    const newMessage: Message = {
-        messageId: generateId(),
-        chunkId: props.chunkId,
-        messageIndex: index + 1,
-        playerName: msg.playerName,
-        account: msg.account,
-        time: new Date(),
-        content: '',
-        isOoc: false,
-        isCommand: false,
-        role: msg.role,
-        note: '',
-    };
-    messageEditorStore.addMessage(props.chunkId, newMessage, index + 1);
+    messageEditorStore.insertNewMessageAfter(props.chunkId, msg, index);
 }
 
 function handleActionMerge(msg: Message) {
     const selectedIds = filterTool.selectedMessageIds.value;
     if (selectedIds.has(msg.messageId) && selectedIds.size > 1) {
-        // 多选状态合并
         messageEditorStore.mergeMessages(
             props.chunkId,
             Array.from(selectedIds),

src/stores/editorStore/messageStore.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { useLogStore } from '@/stores/logStore';
 import { useHistoryStore } from '@/stores/historyStore';
 import type { Message, Chunk } from '@/types/log';
+import { generateId } from '@/utils/id';
 
 export const useMessageEditorStore = defineStore('messageEditor', () => {
     const logStore = useLogStore();
@@ -46,6 +47,29 @@ export const useMessageEditorStore = defineStore('messageEditor', () => {
         refreshMessageMetadata(chunk);
     }
 
+    function insertNewMessageAfter(
+        chunkId: string,
+        msg: Message,
+        index: number,
+    ) {
+        const newMessage: Message = {
+            messageId: generateId(),
+            chunkId: chunkId,
+            messageIndex: index + 1,
+            playerName: msg.playerName,
+            account: msg.account,
+            time: new Date(),
+            content: '',
+            isOoc: false,
+            isCommand: false,
+            role: msg.role,
+            note: '',
+        };
+
+        // 调用现有的通用插入逻辑
+        insertMessages(chunkId, [newMessage], index + 1);
+    }
+
     function deleteMessage(chunkId: string, messageId: string) {
         const chunk = logStore.findChunkById(chunkId);
         if (!chunk) return;
@@ -285,6 +309,7 @@ export const useMessageEditorStore = defineStore('messageEditor', () => {
     return {
         addMessage,
         insertMessages,
+        insertNewMessageAfter,
         deleteMessage,
         updateMessage,
         moveMessages,