Merge pull request #4 from FreecellRaid/refactor/selection

Refactor/selection

Author: FreecellRaid

src/assets/styles/style.css

@@ -19,6 +19,7 @@
     --active-accent: #007acc;
     --inactive-accent: #c9cbcc;
     --selection-bg: #e6f7ff;
+    --inactive-selection-bg:#e8e8e8;
     --color-warning: #ff4d4f;
 
     /* 其他状态 */
@@ -43,6 +44,7 @@
     --active-accent: #2fa5f4;
     --inactive-accent: #575859;
     --selection-bg: #264f78;
+    --inactive-selection-bg: #444444;
     --color-warning: #ff4d4f;
 
     --icon-color: #a3a3a3;

src/components/common/MessageItem.vue

@@ -4,6 +4,7 @@
         class="message-item"
         :class="{
             'is-selected': isSelected,
+            'is-active': isActive,
             'is-hidden-active': isHidden,
         }"
         draggable="true"
@@ -80,7 +81,8 @@ const props = defineProps<{
     message: Message;
     chunkId: string;
     index: number;
-    isSelected: boolean; // 改由父容器传入，彻底解决选择状态隔离问题
+    isSelected: boolean;
+    isActive: boolean;
 }>();
 
 // 向上事件传递
@@ -164,10 +166,14 @@ const isHidden = computed(() => {
     border-color: var(--active-accent);
 }
 
-.message-item.is-selected {
+.message-item.is-selected.is-active {
     background-color: var(--selection-bg);
 }
 
+.message-item.is-selected:not(.is-active) {
+    background-color: var(--inactive-selection-bg);
+}
+
 .message-header {
     display: flex;
     align-items: center;

src/components/panels/ChunkListPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="panel">
+    <div class="panel" @pointerdown="windowStore.setFocus('chunkList')">
         <div class="panel-header">
             <div class="header-title">
                 <input
@@ -103,11 +103,15 @@
                         <div
                             class="chunk-item"
                             :class="{
-                                // windowStore的焦点判断
+                                // 对自身的焦点判断
                                 'is-active':
+                                    windowStore.currentActiveWindow.windowId ===
+                                    'chunkList',
+                                // 对view的焦点判断
+                                'is-active-chunk':
                                     windowStore.currentActiveView.windowId ===
                                     chunk.chunkId,
-                                // useFilter的选中判断
+                                // 选中判断
                                 'is-selected':
                                     filterTool.selectedChunkIds.value.has(
                                         chunk.chunkId,
@@ -503,20 +507,27 @@ function handleChunkDragEnd() {
 }
 
 .chunk-item:hover {
-    background-color: var(--hover-bg);
+    outline: 1px solid var(--active-accent);
+    outline-offset: -1px;
 }
 
-.chunk-item.is-active {
+.chunk-item.is-active.is-selected {
     background-color: var(--selection-bg);
-    outline: 1px solid var(--active-accent);
-    outline-offset: -1px;
     color: var(--active-accent);
 }
 
-/* 被选中但不是当前活跃编辑的块（淡色背景，预留给未来多选） */
 .chunk-item.is-selected:not(.is-active) {
-    background-color: var(--hover-bg);
-    opacity: 0.8;
+    background-color: var(--inactive-selection-bg);
+}
+
+.chunk-item.is-active-chunk {
+    outline: 1px solid var(--active-accent);
+    outline-offset: -1px;
+}
+
+.chunk-item.is-active-chunk:not(.is-active) {
+    outline: 1px solid var(--border-color);
+    outline-offset: -1px;
 }
 
 .chunk-name {

src/components/panels/ExportFormatPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="panel">
+    <div class="panel" @pointerdown="windowStore.setFocus('exportFormat')">
         <div class="panel-header">
             <div class="header-title">
                 <h3>导出模板</h3>

src/components/panels/IdentityPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="panel">
+    <div class="panel" @pointerdown="windowStore.setFocus('identity')">
         <div class="panel-header">
             <div class="header-title">
                 <h3>{{ isPlayerMode ? '角色管理' : '账号管理' }}</h3>
@@ -115,6 +115,7 @@ import { useHistoryStore } from '@/stores/historyStore';
 import { useMessageEditorStore } from '@/stores/editorStore/messageStore';
 import type { RoleType } from '@/types/log';
 import type { ColorMode, ColorRule } from '@/types/config';
+import { useWindowStore } from '@/stores/windowStore';
 import {
     buildIdentityStats,
     collectMessageIdsByIdentity,
@@ -133,6 +134,7 @@ const logStore = useLogStore();
 const uiStore = useUiStore();
 const historyStore = useHistoryStore();
 const messageEditorStore = useMessageEditorStore();
+const windowStore = useWindowStore();
 const localDisplayMode = ref<ColorMode>(styleStore.viewSettings.colorMode); // 局部显示模式
 const editingId = ref<string | null>(null); // 当前正在编辑的 ID
 const editBuffer = ref(''); // 编辑缓冲区

src/components/panels/RuleEditorPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="panel">
+    <div class="panel" @pointerdown="windowStore.setFocus('ruleEditor')">
         <div class="panel-header">
             <div class="header-title">
                 <h3>自定义染色规则</h3>
@@ -260,10 +260,12 @@ import { useFilter } from '@/composables/useFilter';
 import type { ColorRule } from '@/types/config';
 import type { MessageFilter } from '@/types/log';
 import { matchesMessageFilter } from '@/editor/filter';
+import { useWindowStore } from '@/stores/windowStore';
 
 const styleStore = useStyleStore();
 const logStore = useLogStore();
 const filterStore = useFilter();
+const windowStore = useWindowStore();
 const expandedRules = ref<Set<string>>(new Set());
 
 function toggleExpand(ruleId: string) {

src/components/panels/SearchPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="panel">
+    <div class="panel" @pointerdown="windowStore.setFocus('search')">
         <div class="panel-header">
             <div class="header-title">
                 <h3>搜索与筛选</h3>
@@ -108,7 +108,7 @@
                 找到 {{ searchResults.length }} 条结果
             </span>
             <button
-                class="btn-primary btn-sm"
+                class="btn-primary"
                 :disabled="searchResults.length === 0"
                 @click="selectAllMatches"
             >
@@ -130,8 +130,10 @@
                     'is-selected': filterStore.selectedMessageIds.value.has(
                         msg.messageId,
                     ),
+                    'is-active':
+                        windowStore.currentActiveWindow.windowId === 'search',
                 }"
-                @click="filterStore.toggleMessageSelection(msg.messageId)"
+                @click="handleItemClick($event, msg.messageId)"
             >
                 <div class="result-meta">
                     <span class="result-name">
@@ -149,15 +151,19 @@
 
 <script setup lang="ts">
 import { FunnelIcon, FunnelXIcon, RefreshCcw } from '@lucide/vue';
-import { ref, computed, reactive } from 'vue';
+import { ref, computed, reactive, onMounted, onUnmounted } from 'vue';
 import { useLogStore } from '@/stores/logStore';
 import { useFilter } from '@/composables/useFilter';
 import { matchesMessageFilter } from '@/editor/filter';
 import type { MessageFilter } from '@/types/log';
 import { formatDate } from '@/utils/date';
+import { useCommandDispatcher } from '@/composables/useCommandDispatcher';
+import { useWindowStore } from '@/stores/windowStore';
 
 const logStore = useLogStore();
+const windowStore = useWindowStore();
 const filterStore = useFilter('search');
+const { dispatch } = useCommandDispatcher();
 
 // 状态控制
 const quickSearch = ref('');
@@ -218,15 +224,34 @@ function handleSearch() {
     quickSearch.value = quickSearch.value.trim();
 }
 
+function handleItemClick(event: MouseEvent, msgId: string) {
+    windowStore.setFocus('search');
+
+    dispatch('messageSelect', {
+        event,
+        msgId,
+        messages: searchResults.value, // 将当前计算出的搜索结果快照传给调度器
+    });
+}
+
 function selectAllMatches() {
-    const ids = searchResults.value.map((m) => m.messageId);
-    ids.forEach((id) => {
-        if (!filterStore.selectedMessageIds.value.has(id)) {
-            filterStore.toggleMessageSelection(id);
-        }
+    dispatch('selectAll', {
+        messages: searchResults.value,
     });
 }
 
+const handleKeyDown = (e: KeyboardEvent) => {
+    if (windowStore.activeFocus !== 'search') return;
+
+    if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+        e.preventDefault();
+        selectAllMatches();
+    }
+};
+
+onMounted(() => window.addEventListener('keydown', handleKeyDown));
+onUnmounted(() => window.removeEventListener('keydown', handleKeyDown));
+
 function clearAllFilters() {
     quickSearch.value = '';
     filter.playerName = '';
@@ -351,14 +376,24 @@ const truncate = (str: string, len: number) => {
 
 .search-summary {
     flex-shrink: 0;
-    padding: 8px 12px;
+    padding: 4px 8px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: var(--bg-secondary);
-    border-bottom: 1px solid var(--border-color);
 }
 
+.btn-primary {
+    font-size: 12px;
+    color: var(--text-muted);
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.btn-primary:hover {
+    background-color: var(--hover-bg);
+}
 .count-text {
     font-size: 12px;
     color: var(--text-secondary);
@@ -374,17 +409,20 @@ const truncate = (str: string, len: number) => {
 .result-item {
     padding: 10px 10px 10px 8px;
     cursor: pointer;
-    border-bottom: 1px solid var(--border-color);
 }
 
 .result-item:hover {
     background: var(--bg-secondary);
+    outline-offset: -1px;
+    outline: 1px solid var(--active-accent);
 }
 
-.result-item.is-selected {
+.result-item.is-selected.is-active {
     background: var(--selection-bg);
-    outline: 1px solid var(--active-accent);
-    outline-offset: -1px;
+}
+
+.result-item.is-selected:not(.is-active) {
+    background: var(--inactive-selection-bg);
 }
 
 .result-meta {

src/components/workspace/ChunkView.vue

@@ -40,6 +40,7 @@
                                 msg.messageId,
                             )
                         "
+                        :is-active="isViewFocused"
                         @select="handleMessageSelect"
                         @dragstart="handleMessageDragStart"
                         @dragover="handleMessageDragOver($event, index)"
@@ -95,6 +96,8 @@ onMounted(() => {
     });
 });
 
+const isViewFocused = computed(() => windowStore.activeFocus === props.chunkId);
+
 const currentChunk = computed(function () {
     return logStore.findChunkById(props.chunkId) || undefined;
 });
@@ -175,17 +178,16 @@ function handleActionInsert(msg: Message, index: number) {
 function handleActionMerge(msg: Message, index: number) {
     const selectedIds = filterTool.selectedMessageIds.value;
     if (selectedIds.has(msg.messageId) && selectedIds.size > 1) {
-        // 多选状态：将选中的所有消息合并到当前被点击项
+        // 多选状态合并
         messageEditorStore.mergeMessages(
             props.chunkId,
             Array.from(selectedIds),
             msg.messageId,
         );
-        selectedIds.clear(); // 合并后清空多选状态
+        filterTool.clearMessageSelection();
     } else {
-        // 单选状态/未处于多选中：与 index+1 往下合并
+        // 常规向下合并
         if (index < messages.value.length - 1) {
-            // 已经是最后一条则不合并
             const nextMsgId = messages.value[index + 1].messageId;
             messageEditorStore.mergeMessages(
                 props.chunkId,
@@ -205,7 +207,7 @@ function handleActionDelete(msgId: string) {
     const selectedIds = filterTool.selectedMessageIds.value;
     if (selectedIds.has(msgId)) {
         messageEditorStore.batchDeleteMessages(selectedIds);
-        selectedIds.clear();
+        filterTool.clearMessageSelection();
     } else {
         messageEditorStore.deleteMessage(props.chunkId, msgId);
     }