diff --git a/packages/frontend/src/views/CommandHistoryView.vue b/packages/frontend/src/views/CommandHistoryView.vue index d284535..095921c 100644 --- a/packages/frontend/src/views/CommandHistoryView.vue +++ b/packages/frontend/src/views/CommandHistoryView.vue @@ -11,6 +11,7 @@ data-focus-id="commandHistorySearch" @input="updateSearchTerm($event)" @keydown="handleSearchInputKeydown" + @blur="handleSearchInputBlur" ref="searchInputRef" class="flex-grow min-w-0 px-4 py-1.5 border border-border/50 rounded-lg bg-input text-foreground text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-150 ease-in-out" /> @@ -173,6 +174,18 @@ const handleSearchInputKeydown = (event: KeyboardEvent) => { } }; +// 处理搜索框失焦事件 +const handleSearchInputBlur = () => { + // 延迟执行,以允许点击列表项事件先触发 + setTimeout(() => { + // 检查焦点是否还在组件内部的其他可聚焦元素上(例如按钮) + // 如果焦点移出整个组件区域,则重置选择 + if (document.activeElement !== searchInputRef.value && !historyListRef.value?.contains(document.activeElement)) { + commandHistoryStore.resetSelection(); + } + }, 100); // 短暂延迟 +}; + // 确认清空所有历史记录 const confirmClearAll = () => { if (window.confirm(t('commandHistory.confirmClear', '确定要清空所有历史记录吗?'))) { diff --git a/packages/frontend/src/views/QuickCommandsView.vue b/packages/frontend/src/views/QuickCommandsView.vue index 81bf106..b528b1c 100644 --- a/packages/frontend/src/views/QuickCommandsView.vue +++ b/packages/frontend/src/views/QuickCommandsView.vue @@ -11,6 +11,7 @@ data-focus-id="quickCommandsSearch" @input="updateSearchTerm($event)" @keydown="handleSearchInputKeydown" + @blur="handleSearchInputBlur" ref="searchInputRef" class="flex-grow min-w-0 px-4 py-1.5 border border-border/50 rounded-lg bg-input text-foreground text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-150 ease-in-out" /> @@ -193,6 +194,18 @@ const handleSearchInputKeydown = (event: KeyboardEvent) => { } }; +// 处理搜索框失焦事件 +const handleSearchInputBlur = () => { + // 延迟执行,以允许点击列表项事件先触发 + setTimeout(() => { + // 检查焦点是否还在组件内部的其他可聚焦元素上(例如按钮) + // 如果焦点移出整个组件区域,则重置选择 + if (document.activeElement !== searchInputRef.value && !commandListRef.value?.contains(document.activeElement)) { + quickCommandsStore.resetSelection(); + } + }, 100); // 短暂延迟 +}; + // 切换排序方式 const toggleSortBy = () => { const newSortBy = sortBy.value === 'name' ? 'usage_count' : 'name';