feat: 为快捷命令视图添加ctrl + 滚轮缩放

packages/frontend/src/stores/settings.store.ts

@@ -63,6 +63,7 @@ interface SettingsState {
   fileManagerShowDeleteConfirmation?: string; //  'true' or 'false' - 文件管理器删除确认提示
   terminalEnableRightClickPaste?: string; //  'true' or 'false' - 终端右键粘贴
   showStatusMonitorIpAddress?: string; // 'true' or 'false' - 状态监视器显示IP地址
+  quickCommandRowSizeMultiplier?: string; // +++ 快捷命令列表行大小乘数 (e.g., '1.0') +++
   [key: string]: string | undefined;
 }
 
@@ -309,6 +310,11 @@ export const useSettingsStore = defineStore('settings', () => {
         settings.value.showStatusMonitorIpAddress = 'false'; // 默认禁用状态监视器显示IP
         console.log(`[SettingsStore] showStatusMonitorIpAddress not found, set to default: ${settings.value.showStatusMonitorIpAddress}`);
       }
+      // +++ 快捷命令列表行大小乘数默认值 +++
+      if (settings.value.quickCommandRowSizeMultiplier === undefined) {
+        settings.value.quickCommandRowSizeMultiplier = '1.0';
+        console.log(`[SettingsStore] quickCommandRowSizeMultiplier not found, set to default: ${settings.value.quickCommandRowSizeMultiplier}`);
+      }
         
         
       // --- 语言设置 ---
@@ -402,7 +408,8 @@ export const useSettingsStore = defineStore('settings', () => {
         'terminalScrollbackLimit',
         'fileManagerShowDeleteConfirmation',
         'terminalEnableRightClickPaste',
-        'showStatusMonitorIpAddress'
+        'showStatusMonitorIpAddress',
+        'quickCommandRowSizeMultiplier'
       ];
       if (!allowedKeys.includes(key)) {
           console.error(`[SettingsStore] 尝试更新不允许的设置键: ${key}`);
@@ -498,7 +505,8 @@ export const useSettingsStore = defineStore('settings', () => {
         'terminalScrollbackLimit',
         'fileManagerShowDeleteConfirmation',
         'terminalEnableRightClickPaste',
-        'showStatusMonitorIpAddress'
+        'showStatusMonitorIpAddress',
+        'quickCommandRowSizeMultiplier'
       ];
       const filteredUpdates: Partial<SettingsState> = {};
       let languageUpdate: string | undefined = undefined;
@@ -587,6 +595,22 @@ export const useSettingsStore = defineStore('settings', () => {
     }
   }
 
+  /**
+   * Updates the Quick Command row size multiplier.
+   * @param multiplier The new row size multiplier (number).
+   */
+  async function updateQuickCommandRowSizeMultiplier(multiplier: number) {
+    const multiplierString = multiplier.toFixed(2);
+    try {
+      await updateSetting('quickCommandRowSizeMultiplier', multiplierString);
+      // 本地状态 settings.value 会在 updateSetting 成功后更新
+      console.log(`[SettingsStore] Quick Command row size multiplier updated to: ${multiplierString}`);
+    } catch (error) {
+      console.error('[SettingsStore] Failed to save Quick Command row size multiplier:', error);
+      // Optionally revert local state or show error to user
+    }
+  }
+
   // --- CAPTCHA Settings Actions ---
 
   /**
@@ -805,6 +829,16 @@ export const useSettingsStore = defineStore('settings', () => {
     return settings.value.showStatusMonitorIpAddress === 'true';
   });
 
+  // +++ Getter for Quick Command row size multiplier, returning number +++
+  const quickCommandRowSizeMultiplierNumber = computed(() => {
+    const valStr = settings.value.quickCommandRowSizeMultiplier;
+    if (valStr === null || valStr === undefined || valStr.trim() === '') {
+      return 1.0; // Default value
+    }
+    const val = parseFloat(valStr);
+    return isNaN(val) || val <= 0 ? 1.0 : val; // Fallback to 1.0 if invalid
+  });
+  
  return {
     settings, // 只包含通用设置
     isLoading,
@@ -836,8 +870,10 @@ export const useSettingsStore = defineStore('settings', () => {
     updateMultipleSettings,
     updateSidebarPaneWidth, // +++ 暴露更新特定面板宽度的 action +++
     updateFileManagerLayoutSettings, // +++ 暴露更新文件管理器布局的 action +++
+    updateQuickCommandRowSizeMultiplier, // +++ 暴露快捷命令大小更新 action +++
     commandInputSyncTarget, // +++ 暴露命令输入同步目标 getter +++
     timezone,
+    quickCommandRowSizeMultiplierNumber, // +++ 暴露快捷命令大小 getter +++
     dashboardSortBy,
     dashboardSortOrder,
     saveDashboardSortPreference,

packages/frontend/src/views/QuickCommandsView.vue

@@ -46,18 +46,28 @@
         </div>
 
        <!-- Command List (Grouped or Flat) -->
-       <div v-else class="list-none p-0 m-0" ref="commandListContainerRef"> <!-- Changed ref name -->
+       <div
+        v-else
+        class="list-none p-0 m-0 outline-none"
+        ref="commandListContainerRef"
+        tabindex="0"
+        @wheel.ctrl.prevent="handleWheel"
+        :style="{ '--qc-row-size-multiplier': quickCommandRowSizeMultiplier }"
+        @keydown="handleSearchInputKeydown"
+       >
             <!-- Grouped View -->
             <div v-if="showQuickCommandTagsBoolean">
                 <div v-for="groupData in filteredAndGroupedCommands" :key="groupData.groupName" class="mb-1 last:mb-0">
                     <!-- Group Header - Modified for inline editing -->
                     <div
-                        class="group px-3 py-2 font-semibold flex items-center text-foreground rounded-md hover:bg-header/80 transition-colors duration-150"
+                        class="group font-semibold flex items-center text-foreground rounded-md hover:bg-header/80 transition-colors duration-150"
+                        :style="{ padding: `calc(0.5rem * var(--qc-row-size-multiplier)) calc(0.75rem * var(--qc-row-size-multiplier))` }"
                         :class="{ 'cursor-pointer': editingTagId !== (groupData.tagId === null ? 'untagged' : groupData.tagId) }"
                         @click="editingTagId !== (groupData.tagId === null ? 'untagged' : groupData.tagId) ? toggleGroup(groupData.groupName) : null"
                     >
                         <i
                             :class="['fas', expandedGroups[groupData.groupName] ? 'fa-chevron-down' : 'fa-chevron-right', 'mr-2 w-4 text-center text-text-secondary group-hover:text-foreground transition-transform duration-200 ease-in-out', {'transform rotate-0': !expandedGroups[groupData.groupName]}]"
+                            :style="{ fontSize: `calc(0.875em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }"
                             @click.stop="toggleGroup(groupData.groupName)"
                             class="cursor-pointer flex-shrink-0"
                         ></i>
@@ -68,7 +78,8 @@
                             :ref="(el) => setTagInputRef(el, groupData.tagId === null ? 'untagged' : groupData.tagId)"
                             type="text"
                             v-model="editedTagName"
-                            class="text-sm bg-input border border-primary rounded px-1 py-0 w-full"
+                            class="bg-input border border-primary rounded px-1 py-0 w-full"
+                            :style="{ fontSize: `calc(0.875em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }"
                             @blur="finishEditingTag"
                             @keydown.enter.prevent="finishEditingTag"
                             @keydown.esc.prevent="cancelEditingTag"
@@ -77,7 +88,8 @@
                         <!-- Display State -->
                         <span
                             v-else
-                            class="text-sm inline-block overflow-hidden text-ellipsis whitespace-nowrap"
+                            class="inline-block overflow-hidden text-ellipsis whitespace-nowrap"
+                            :style="{ fontSize: `calc(0.875em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }"
                             :class="{ 'cursor-pointer hover:underline': true }"
                             :title="t('quickCommands.tags.clickToEditTag', '点击编辑标签')"
                             @click.stop="startEditingTag(groupData.tagId, groupData.groupName)"
@@ -93,26 +105,27 @@
                             v-for="(cmd) in groupData.commands"
                             :key="cmd.id"
                             :data-command-id="cmd.id"
-                            class="group flex justify-between items-center px-3 py-2.5 mb-1 cursor-pointer rounded-md hover:bg-primary/10 transition-colors duration-150"
+                            class="group flex justify-between items-center mb-1 cursor-pointer rounded-md hover:bg-primary/10 transition-colors duration-150"
+                            :style="{ padding: `calc(0.625rem * var(--qc-row-size-multiplier)) calc(0.75rem * var(--qc-row-size-multiplier))` }"
                             :class="{ 'bg-primary/20 font-medium': isCommandSelected(cmd.id) }"
                             @click="executeCommand(cmd)"
                             @contextmenu.prevent="showQuickCommandContextMenu($event, cmd)"
                         >
-                            <!-- Command Info (Structure remains the same) -->
+                            <!-- Command Info -->
                             <div class="flex flex-col overflow-hidden mr-2 flex-grow">
-                                <span v-if="cmd.name" class="font-medium text-sm truncate mb-0.5 text-foreground">{{ cmd.name }}</span>
+                                <span v-if="cmd.name" class="font-medium truncate mb-0.5 text-foreground" :style="{ fontSize: `calc(0.875em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }">{{ cmd.name }}</span>
-                                <span class="text-xs truncate font-mono" :class="{ 'text-sm': !cmd.name, 'text-text-secondary': true }">{{ cmd.command }}</span>
+                                <span class="truncate font-mono" :class="{ 'text-sm': !cmd.name, 'text-text-secondary': true }" :style="{ fontSize: `calc(0.75em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }">{{ cmd.command }}</span>
                             </div>
-                            <!-- Actions (Structure remains the same) -->
+                            <!-- Actions -->
                             <div class="flex items-center flex-shrink-0 focus-within:opacity-100 transition-opacity duration-150">
                                 <button @click.stop="copyCommand(cmd.command)" class="p-1.5 rounded hover:bg-black/10 transition-colors duration-150 text-text-secondary hover:text-primary" :title="$t('commandHistory.copy', '复制')">
-                                    <i class="fas fa-copy text-sm"></i>
+                                    <i class="fas fa-copy" :style="{ fontSize: `calc(0.875em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }"></i>
                                 </button>
                                 <button @click.stop="openEditForm(cmd)" class="p-1.5 rounded hover:bg-black/10 transition-colors duration-150 text-text-secondary hover:text-primary" :title="$t('common.edit', '编辑')">
-                                    <i class="fas fa-edit text-sm"></i>
+                                    <i class="fas fa-edit" :style="{ fontSize: `calc(0.875em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }"></i>
                                 </button>
                                 <button @click.stop="confirmDelete(cmd)" class="p-1.5 rounded hover:bg-black/10 transition-colors duration-150 text-text-secondary hover:text-error" :title="$t('common.delete', '删除')">
-                                    <i class="fas fa-times text-sm"></i>
+                                    <i class="fas fa-times" :style="{ fontSize: `calc(0.875em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }"></i>
                                 </button>
                             </div>
                         </li>
@@ -125,26 +138,27 @@
                     v-for="(cmd) in flatFilteredCommands"
                     :key="cmd.id"
                     :data-command-id="cmd.id"
-                    class="group flex justify-between items-center px-3 py-2.5 mb-1 cursor-pointer rounded-md hover:bg-primary/10 transition-colors duration-150"
+                    class="group flex justify-between items-center mb-1 cursor-pointer rounded-md hover:bg-primary/10 transition-colors duration-150"
+                    :style="{ padding: `calc(0.625rem * var(--qc-row-size-multiplier)) calc(0.75rem * var(--qc-row-size-multiplier))` }"
                     :class="{ 'bg-primary/20 font-medium': isCommandSelected(cmd.id) }"
                     @click="executeCommand(cmd)"
                     @contextmenu.prevent="showQuickCommandContextMenu($event, cmd)"
                 >
                     <!-- Command Info -->
                     <div class="flex flex-col overflow-hidden mr-2 flex-grow">
-                        <span v-if="cmd.name" class="font-medium text-sm truncate mb-0.5 text-foreground">{{ cmd.name }}</span>
+                        <span v-if="cmd.name" class="font-medium truncate mb-0.5 text-foreground" :style="{ fontSize: `calc(0.875em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }">{{ cmd.name }}</span>
-                        <span class="text-xs truncate font-mono" :class="{ 'text-sm': !cmd.name, 'text-text-secondary': true }">{{ cmd.command }}</span>
+                        <span class="truncate font-mono" :class="{ 'text-sm': !cmd.name, 'text-text-secondary': true }" :style="{ fontSize: `calc(0.75em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }">{{ cmd.command }}</span>
                     </div>
                     <!-- Actions -->
                     <div class="flex items-center flex-shrink-0 focus-within:opacity-100 transition-opacity duration-150">
                         <button @click.stop="copyCommand(cmd.command)" class="p-1.5 rounded hover:bg-black/10 transition-colors duration-150 text-text-secondary hover:text-primary" :title="$t('commandHistory.copy', '复制')">
-                            <i class="fas fa-copy text-sm"></i>
+                            <i class="fas fa-copy" :style="{ fontSize: `calc(0.875em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }"></i>
                         </button>
                         <button @click.stop="openEditForm(cmd)" class="p-1.5 rounded hover:bg-black/10 transition-colors duration-150 text-text-secondary hover:text-primary" :title="$t('common.edit', '编辑')">
-                            <i class="fas fa-edit text-sm"></i>
+                            <i class="fas fa-edit" :style="{ fontSize: `calc(0.875em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }"></i>
                         </button>
                         <button @click.stop="confirmDelete(cmd)" class="p-1.5 rounded hover:bg-black/10 transition-colors duration-150 text-text-secondary hover:text-error" :title="$t('common.delete', '删除')">
-                            <i class="fas fa-times text-sm"></i>
+                            <i class="fas fa-times" :style="{ fontSize: `calc(0.875em * max(0.85, var(--qc-row-size-multiplier) * 0.6 + 0.4))` }"></i>
                         </button>
                     </div>
                 </li>
@@ -181,7 +195,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineExpose, watch } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineExpose, watch, watchEffect } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuickCommandsStore, type QuickCommandFE, type QuickCommandSortByType, type GroupedQuickCommands } from '../stores/quickCommands.store';
 import { useQuickCommandTagsStore } from '../stores/quickCommandTags.store'; 
@@ -231,7 +245,39 @@ const isLoading = computed(() => quickCommandsStore.isLoading);
 
 
 const { selectedIndex: storeSelectedIndex, flatVisibleCommands, expandedGroups } = storeToRefs(quickCommandsStore);
-const { showQuickCommandTagsBoolean } = storeToRefs(settingsStore); 
+const { showQuickCommandTagsBoolean, quickCommandRowSizeMultiplierNumber: qcRowSizeMultiplierFromStore } = storeToRefs(settingsStore);
+
+const quickCommandRowSizeMultiplier = ref(1.0);
+
+watchEffect(() => {
+  const storeVal = qcRowSizeMultiplierFromStore.value;
+  if (storeVal && typeof storeVal === 'number' && storeVal > 0) {
+    if (quickCommandRowSizeMultiplier.value !== storeVal) {
+      quickCommandRowSizeMultiplier.value = storeVal;
+      // console.log(`[QuickCmdView] Row size multiplier loaded from store: ${storeVal}`);
+    }
+  } else {
+    // console.log(`[QuickCmdView] No valid row size multiplier in store for QuickCommands, using default: ${quickCommandRowSizeMultiplier.value}`);
+  }
+});
+
+const handleWheel = (event: WheelEvent) => {
+    // event.ctrlKey 和 event.preventDefault() 将由模板中的 .ctrl.prevent 修饰符处理
+    const delta = event.deltaY > 0 ? -0.05 : 0.05;
+    const newMultiplier = Math.max(0.5, Math.min(2.5, quickCommandRowSizeMultiplier.value + delta));
+    const oldMultiplier = quickCommandRowSizeMultiplier.value;
+    quickCommandRowSizeMultiplier.value = parseFloat(newMultiplier.toFixed(2));
+
+    if (quickCommandRowSizeMultiplier.value !== oldMultiplier) {
+      // console.log(`[QuickCmdView] Row size multiplier changed: ${quickCommandRowSizeMultiplier.value}. Saving to store...`);
+      // 假设 settingsStore 有一个名为 updateQuickCommandRowSizeMultiplier 的 action
+      if (settingsStore.updateQuickCommandRowSizeMultiplier) {
+        settingsStore.updateQuickCommandRowSizeMultiplier(quickCommandRowSizeMultiplier.value);
+      } else {
+        console.warn('[QuickCmdView] settingsStore.updateQuickCommandRowSizeMultiplier action not found.');
+      }
+    }
+};
 
 // 计算属性，仅过滤和排序，不分组
 const flatFilteredCommands = computed(() => {