update

packages/frontend/src/views/CommandHistoryView.vue

@@ -10,7 +10,7 @@
           :value="searchTerm"
           data-focus-id="commandHistorySearch"
           @input="updateSearchTerm($event)"
-          @keydown="handleKeydown"
+          @keydown="handleSearchInputKeydown"
           ref="searchInputRef"
           class="flex-grow min-w-[8px] px-2 py-1 border border-border rounded-sm bg-background text-foreground text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
         />
@@ -25,17 +25,17 @@
             v-for="(entry, index) in filteredHistory"
             :key="entry.id"
             class="group flex justify-between items-center px-3 py-2 cursor-pointer border-b border-border last:border-b-0 hover:bg-header/50 transition-colors duration-150"
-            :class="{ 'bg-primary/10 text-primary': index === selectedIndex }"
-            @mouseover="hoveredItemId = entry.id; selectedIndex = index"
-            @mouseleave="hoveredItemId = null; selectedIndex = -1"
+            :class="{ 'bg-primary/10 text-primary': index === storeSelectedIndex }"
+            
+            
             @click="executeCommand(entry.command)"
           >
-            <span class="truncate mr-2 flex-grow font-mono text-sm text-foreground" :class="{'text-primary': index === selectedIndex}">{{ entry.command }}</span>
+            <span class="truncate mr-2 flex-grow font-mono text-sm text-foreground" :class="{'text-primary': index === storeSelectedIndex}">{{ entry.command }}</span>
             <div class="flex items-center flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
-              <button @click.stop="copyCommand(entry.command)" class="p-1 text-text-secondary hover:text-primary transition-colors duration-150" :class="{'text-primary': index === selectedIndex}" :title="$t('commandHistory.copy', '复制')">
+              <button @click.stop="copyCommand(entry.command)" class="p-1 text-text-secondary hover:text-primary transition-colors duration-150" :class="{'text-primary': index === storeSelectedIndex}" :title="$t('commandHistory.copy', '复制')">
                 <i class="fas fa-copy text-xs"></i>
               </button>
-              <button @click.stop="deleteSingleCommand(entry.id)" class="ml-1 p-1 text-text-secondary hover:text-error transition-colors duration-150" :class="{'text-primary': index === selectedIndex}" :title="$t('commandHistory.delete', '删除')">
+              <button @click.stop="deleteSingleCommand(entry.id)" class="ml-1 p-1 text-text-secondary hover:text-error transition-colors duration-150" :class="{'text-primary': index === storeSelectedIndex}" :title="$t('commandHistory.delete', '删除')">
                 <i class="fas fa-times text-xs"></i>
               </button>
             </div>
@@ -53,7 +53,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineExpose } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineExpose, watch } from 'vue'; // Import watch
+import { storeToRefs } from 'pinia'; // Import storeToRefs
 import { useCommandHistoryStore, CommandHistoryEntryFE } from '../stores/commandHistory.store';
 import { useUiNotificationsStore } from '../stores/uiNotifications.store';
 import { useI18n } from 'vue-i18n';
@@ -65,7 +66,7 @@ const uiNotificationsStore = useUiNotificationsStore();
 const { t } = useI18n();
 const focusSwitcherStore = useFocusSwitcherStore(); // +++ 实例化焦点切换 Store +++
 const hoveredItemId = ref<number | null>(null);
-const selectedIndex = ref<number>(-1); // -1 表示没有选中
+// const selectedIndex = ref<number>(-1); // REMOVED: Use store's selectedIndex
 const historyListRef = ref<HTMLUListElement | null>(null); // Ref for the history list UL
 const searchInputRef = ref<HTMLInputElement | null>(null); // +++ Ref for the search input +++
 let unregisterFocus: (() => void) | null = null; // +++ 保存注销函数 +++
@@ -75,6 +76,7 @@ const searchTerm = computed(() => commandHistoryStore.searchTerm);
 // 使用 store 的 filteredHistory getter
 const filteredHistory = computed(() => commandHistoryStore.filteredHistory);
 const isLoading = computed(() => commandHistoryStore.isLoading);
+const { selectedIndex: storeSelectedIndex } = storeToRefs(commandHistoryStore); // Get selectedIndex reactively
 
 // --- 事件定义 ---
 // 定义组件发出的事件
@@ -108,16 +110,16 @@ onBeforeUnmount(() => {
 const updateSearchTerm = (event: Event) => {
   const target = event.target as HTMLInputElement;
   commandHistoryStore.setSearchTerm(target.value);
-  selectedIndex.value = -1; // Reset selection when search term changes
+  // selectedIndex.value = -1; // REMOVED: Store handles resetting index
 };
 
 // 滚动到选中的项目
-const scrollToSelected = async () => {
+const scrollToSelected = async (index: number) => { // Accept index as argument
   await nextTick(); // 等待 DOM 更新
-  if (selectedIndex.value < 0 || !historyListRef.value) return;
+  if (index < 0 || !historyListRef.value) return;
 
   const listElement = historyListRef.value;
-  const selectedItem = listElement.children[selectedIndex.value] as HTMLLIElement;
+  const selectedItem = listElement.children[index] as HTMLLIElement;
 
   if (selectedItem) {
     const listRect = listElement.getBoundingClientRect();
@@ -133,32 +135,36 @@ const scrollToSelected = async () => {
   }
 };
 
-// 处理键盘事件
-const handleKeydown = (event: KeyboardEvent) => {
+// Watch for changes in the store's selectedIndex and scroll
+watch(storeSelectedIndex, (newIndex) => {
+  scrollToSelected(newIndex);
+});
+
+// Renamed function to avoid conflict if needed, and added logic
+const handleSearchInputKeydown = (event: KeyboardEvent) => {
   const history = filteredHistory.value;
   if (!history.length) return;
 
   switch (event.key) {
     case 'ArrowDown':
       event.preventDefault();
-      selectedIndex.value = (selectedIndex.value + 1) % history.length;
-      scrollToSelected();
+      commandHistoryStore.selectNextCommand(); // Use store action
+      // scrollToSelected is handled by watcher
       break;
     case 'ArrowUp':
       event.preventDefault();
-      selectedIndex.value = (selectedIndex.value - 1 + history.length) % history.length;
-      scrollToSelected();
+      commandHistoryStore.selectPreviousCommand(); // Use store action
+      // scrollToSelected is handled by watcher
       break;
     case 'Enter':
       event.preventDefault();
-      if (selectedIndex.value >= 0 && selectedIndex.value < history.length) {
-        executeCommand(history[selectedIndex.value].command);
+      if (storeSelectedIndex.value >= 0 && storeSelectedIndex.value < history.length) {
+        executeCommand(history[storeSelectedIndex.value].command);
       }
       break;
   }
 };
 
-
 // 确认清空所有历史记录
 const confirmClearAll = () => {
   if (window.confirm(t('commandHistory.confirmClear', '确定要清空所有历史记录吗？'))) {
@@ -186,7 +192,7 @@ const deleteSingleCommand = (id: number) => {
 const executeCommand = (command: string) => {
   emit('execute-command', command);
   // Optionally reset selection after execution
-  // selectedIndex.value = -1;
+  // selectedIndex.value = -1; // REMOVED: Store handles index
 };
 
 // +++ 新增：聚焦搜索框的方法 +++

packages/frontend/src/views/QuickCommandsView.vue

@@ -10,7 +10,7 @@
           :value="searchTerm"
           data-focus-id="quickCommandsSearch"
           @input="updateSearchTerm($event)"
-          @keydown="handleKeydown"
+          @keydown="handleSearchInputKeydown"
           ref="searchInputRef"
           class="flex-grow min-w-[8px] px-2 py-1 border border-border rounded-sm bg-background text-foreground text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
         />
@@ -28,9 +28,9 @@
             v-for="(cmd, index) in filteredAndSortedCommands"
             :key="cmd.id"
             class="group flex justify-between items-center px-3 py-2 cursor-pointer border-b border-border last:border-b-0 hover:bg-header/50 transition-colors duration-150"
-            :class="{ 'bg-primary/10 text-primary': index === selectedIndex }"
-            @mouseover="hoveredItemId = cmd.id; selectedIndex = index"
-            @mouseleave="hoveredItemId = null; selectedIndex = -1"
+            :class="{ 'bg-primary/10 text-primary': index === storeSelectedIndex }"
+            
+            
             @click="executeCommand(cmd)"
           >
             <div class="flex flex-col overflow-hidden mr-2 flex-grow">
@@ -38,11 +38,11 @@
               <span class="text-xs text-text-secondary truncate font-mono" :class="{ 'text-sm text-foreground': !cmd.name }">{{ cmd.command }}</span>
             </div>
             <div class="flex items-center flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
-               <span class="text-xs text-text-secondary bg-border px-1.5 py-0.5 rounded mr-1" :class="{'text-primary bg-primary/20': index === selectedIndex}" :title="t('quickCommands.usageCount', '使用次数')">{{ cmd.usage_count }}</span>
-              <button @click.stop="openEditForm(cmd)" class="p-1 text-text-secondary hover:text-primary transition-colors duration-150" :class="{'text-primary': index === selectedIndex}" :title="$t('common.edit', '编辑')">
+               <span class="text-xs text-text-secondary bg-border px-1.5 py-0.5 rounded mr-1" :class="{'text-primary bg-primary/20': index === storeSelectedIndex}" :title="t('quickCommands.usageCount', '使用次数')">{{ cmd.usage_count }}</span>
+              <button @click.stop="openEditForm(cmd)" class="p-1 text-text-secondary hover:text-primary transition-colors duration-150" :class="{'text-primary': index === storeSelectedIndex}" :title="$t('common.edit', '编辑')">
                 <i class="fas fa-edit text-xs"></i>
               </button>
-              <button @click.stop="confirmDelete(cmd)" class="p-1 text-text-secondary hover:text-error transition-colors duration-150" :class="{'text-primary': index === selectedIndex}" :title="$t('common.delete', '删除')">
+              <button @click.stop="confirmDelete(cmd)" class="p-1 text-text-secondary hover:text-error transition-colors duration-150" :class="{'text-primary': index === storeSelectedIndex}" :title="$t('common.delete', '删除')">
                 <i class="fas fa-times text-xs"></i>
               </button>
             </div>
@@ -67,7 +67,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineExpose } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineExpose, watch } from 'vue'; // Import watch
+import { storeToRefs } from 'pinia'; // Import storeToRefs
 import { useQuickCommandsStore, type QuickCommandFE, type QuickCommandSortByType } from '../stores/quickCommands.store';
 import { useUiNotificationsStore } from '../stores/uiNotifications.store';
 import { useI18n } from 'vue-i18n';
@@ -82,7 +83,7 @@ const focusSwitcherStore = useFocusSwitcherStore(); // +++ 实例化焦点切换
 const hoveredItemId = ref<number | null>(null);
 const isFormVisible = ref(false);
 const commandToEdit = ref<QuickCommandFE | null>(null);
-const selectedIndex = ref<number>(-1); // -1 表示没有选中
+// const selectedIndex = ref<number>(-1); // REMOVED: Use store's selectedIndex
 const commandListRef = ref<HTMLUListElement | null>(null); // Ref for the command list UL
 const searchInputRef = ref<HTMLInputElement | null>(null); // +++ Ref for the search input +++
 let unregisterFocus: (() => void) | null = null; // +++ 保存注销函数 +++
@@ -92,6 +93,7 @@ const searchTerm = computed(() => quickCommandsStore.searchTerm);
 const sortBy = computed(() => quickCommandsStore.sortBy);
 const filteredAndSortedCommands = computed(() => quickCommandsStore.filteredAndSortedCommands);
 const isLoading = computed(() => quickCommandsStore.isLoading);
+const { selectedIndex: storeSelectedIndex } = storeToRefs(quickCommandsStore); // Get selectedIndex reactively
 
 // --- 事件定义 ---
 const emit = defineEmits<{
@@ -120,16 +122,16 @@ onBeforeUnmount(() => {
 const updateSearchTerm = (event: Event) => {
   const target = event.target as HTMLInputElement;
   quickCommandsStore.setSearchTerm(target.value);
-  selectedIndex.value = -1; // Reset selection when search term changes
+  // selectedIndex.value = -1; // REMOVED: Store handles resetting index
 };
 
 // 滚动到选中的项目
-const scrollToSelected = async () => {
+const scrollToSelected = async (index: number) => { // Accept index as argument
   await nextTick(); // 等待 DOM 更新
-  if (selectedIndex.value < 0 || !commandListRef.value) return;
+  if (index < 0 || !commandListRef.value) return;
 
   const listElement = commandListRef.value;
-  const selectedItem = listElement.children[selectedIndex.value] as HTMLLIElement;
+  const selectedItem = listElement.children[index] as HTMLLIElement;
 
   if (selectedItem) {
     const listRect = listElement.getBoundingClientRect();
@@ -147,33 +149,36 @@ const scrollToSelected = async () => {
   }
 };
 
+// Watch for changes in the store's selectedIndex and scroll
+watch(storeSelectedIndex, (newIndex) => {
+  scrollToSelected(newIndex);
+});
 
-// 处理键盘事件
-const handleKeydown = (event: KeyboardEvent) => {
+// Renamed function to avoid conflict if needed, and added logic
+const handleSearchInputKeydown = (event: KeyboardEvent) => {
   const commands = filteredAndSortedCommands.value;
   if (!commands.length) return;
 
   switch (event.key) {
     case 'ArrowDown':
       event.preventDefault();
-      selectedIndex.value = (selectedIndex.value + 1) % commands.length;
-      scrollToSelected();
+      quickCommandsStore.selectNextCommand(); // Use store action
+      // scrollToSelected is handled by watcher
       break;
     case 'ArrowUp':
       event.preventDefault();
-      selectedIndex.value = (selectedIndex.value - 1 + commands.length) % commands.length;
-      scrollToSelected();
+      quickCommandsStore.selectPreviousCommand(); // Use store action
+      // scrollToSelected is handled by watcher
       break;
     case 'Enter':
       event.preventDefault();
-      if (selectedIndex.value >= 0 && selectedIndex.value < commands.length) {
-        executeCommand(commands[selectedIndex.value]);
+      if (storeSelectedIndex.value >= 0 && storeSelectedIndex.value < commands.length) {
+        executeCommand(commands[storeSelectedIndex.value]);
       }
       break;
   }
 };
 
-
 // 切换排序方式
 const toggleSortBy = () => {
   const newSortBy = sortBy.value === 'name' ? 'usage_count' : 'name';
@@ -221,7 +226,7 @@ const executeCommand = (command: QuickCommandFE) => {
   // 2. 发出执行事件给父组件
   emit('execute-command', command.command);
   // Optionally reset selection after execution
-  // selectedIndex.value = -1;
+  // selectedIndex.value = -1; // REMOVED: Store handles index
 };
 
 // +++ 新增：聚焦搜索框的方法 +++

packages/frontend/src/views/SettingsView.vue

@@ -404,6 +404,31 @@
                      </div>
                  </form>
               </div>
+              <hr class="border-border/50"> <!-- NEW: Separator -->
+              <!-- Command Input Sync Target -->
+              <div class="settings-section-content">
+                 <h3 class="text-base font-semibold text-foreground mb-3">{{ $t('settings.commandInputSync.title', '命令输入同步') }}</h3>
+                 <form @submit.prevent="handleUpdateCommandInputSyncTarget" class="space-y-4">
+                   <div>
+                     <label for="commandInputSyncTargetSelect" class="block text-sm font-medium text-text-secondary mb-1">{{ $t('settings.commandInputSync.selectLabel', '同步目标') }}</label>
+                     <select id="commandInputSyncTargetSelect" v-model="commandInputSyncTargetLocal"
+                             class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary appearance-none bg-no-repeat bg-right pr-8"
+                             style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.75rem center; background-size: 16px 12px;">
+                       <option value="none">{{ $t('settings.commandInputSync.targetNone', '无') }}</option>
+                       <option value="quickCommands">{{ $t('settings.commandInputSync.targetQuickCommands', '快捷指令') }}</option>
+                       <option value="commandHistory">{{ $t('settings.commandInputSync.targetCommandHistory', '历史命令') }}</option>
+                     </select>
+                     <p class="text-xs text-text-secondary mt-1">{{ $t('settings.commandInputSync.description', '将命令输入框的内容实时同步到所选面板的搜索框。') }}</p>
+                   </div>
+                   <div class="flex items-center justify-between">
+                      <button type="submit" :disabled="commandInputSyncLoading"
+                              class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out text-sm font-medium">
+                        {{ commandInputSyncLoading ? $t('common.saving') : $t('common.save') }}
+                      </button>
+                      <p v-if="commandInputSyncMessage" :class="['text-sm', commandInputSyncSuccess ? 'text-success' : 'text-error']">{{ commandInputSyncMessage }}</p>
+                   </div>
+                 </form>
+              </div>
             </div>
           </div>
 
@@ -505,6 +530,7 @@ const {
     language: storeLanguage,
     workspaceSidebarPersistentBoolean,
     captchaSettings, // <-- Import CAPTCHA settings state
+    commandInputSyncTarget, // NEW: Import command input sync target getter
 } = storeToRefs(settingsStore);
 
 // --- Local state for forms ---
@@ -517,6 +543,7 @@ const blacklistSettingsForm = reactive({ // Renamed to avoid conflict with store
 });
 const popupEditorEnabled = ref(true); // 本地状态，用于 v-model
 const workspaceSidebarPersistentEnabled = ref(false); // 新增：侧边栏固定设置的本地状态
+const commandInputSyncTargetLocal = ref<'none' | 'quickCommands' | 'commandHistory'>('none'); // NEW: Local state for command input sync target
 
 // --- Local UI feedback state ---
 const ipWhitelistLoading = ref(false);
@@ -551,6 +578,9 @@ const statusMonitorSuccess = ref(false);
 const workspaceSidebarPersistentLoading = ref(false); // 新增
 const workspaceSidebarPersistentMessage = ref(''); // 新增
 const workspaceSidebarPersistentSuccess = ref(false); // 新增
+const commandInputSyncLoading = ref(false); // NEW
+const commandInputSyncMessage = ref(''); // NEW
+const commandInputSyncSuccess = ref(false); // NEW
 
 // CAPTCHA Form State
 const captchaForm = reactive<UpdateCaptchaSettingsDto>({ // Use reactive for the form object
@@ -584,6 +614,7 @@ watch(settings, (newSettings, oldSettings) => {
   dockerExpandDefault.value = dockerDefaultExpandBoolean.value; // 同步 Docker 默认展开状态
   statusMonitorIntervalLocal.value = statusMonitorIntervalSecondsNumber.value; // 同步状态监控间隔
   workspaceSidebarPersistentEnabled.value = workspaceSidebarPersistentBoolean.value; // 新增：同步侧边栏固定设置
+  commandInputSyncTargetLocal.value = commandInputSyncTarget.value; // NEW: Sync command input sync target
 
 }, { deep: true, immediate: true }); // immediate: true to run on initial load
 
@@ -736,6 +767,24 @@ const handleUpdateWorkspaceSidebarSetting = async () => {
     }
 };
 
+// --- Command Input Sync Target setting method ---
+const handleUpdateCommandInputSyncTarget = async () => {
+    commandInputSyncLoading.value = true;
+    commandInputSyncMessage.value = '';
+    commandInputSyncSuccess.value = false;
+    try {
+        await settingsStore.updateSetting('commandInputSyncTarget', commandInputSyncTargetLocal.value);
+        commandInputSyncMessage.value = t('settings.commandInputSync.success.saved', '同步目标已保存'); // 需要添加翻译
+        commandInputSyncSuccess.value = true;
+    } catch (error: any) {
+        console.error('更新命令输入同步目标失败:', error);
+        commandInputSyncMessage.value = error.message || t('settings.commandInputSync.error.saveFailed', '保存同步目标失败'); // 需要添加翻译
+        commandInputSyncSuccess.value = false;
+    } finally {
+        commandInputSyncLoading.value = false;
+    }
+};
+
 // --- 外观设置 ---
 const openStyleCustomizer = () => {
     appearanceStore.toggleStyleCustomizer(true);