diff --git a/packages/frontend/src/stores/settings.store.ts b/packages/frontend/src/stores/settings.store.ts index 87b33b2..6c89b6b 100644 --- a/packages/frontend/src/stores/settings.store.ts +++ b/packages/frontend/src/stores/settings.store.ts @@ -64,6 +64,7 @@ interface SettingsState { terminalEnableRightClickPaste?: string; // 'true' or 'false' - 终端右键粘贴 showStatusMonitorIpAddress?: string; // 'true' or 'false' - 状态监视器显示IP地址 quickCommandRowSizeMultiplier?: string; // +++ 快捷命令列表行大小乘数 (e.g., '1.0') +++ + quickCommandsCompactMode?: string; // +++ 快捷指令视图紧凑模式 (e.g., 'false') +++ [key: string]: string | undefined; } @@ -315,7 +316,31 @@ export const useSettingsStore = defineStore('settings', () => { settings.value.quickCommandRowSizeMultiplier = '1.0'; console.log(`[SettingsStore] quickCommandRowSizeMultiplier not found, set to default: ${settings.value.quickCommandRowSizeMultiplier}`); } + // +++ 快捷指令视图紧凑模式默认值 +++ + if (settings.value.quickCommandsCompactMode === undefined) { + settings.value.quickCommandsCompactMode = 'false'; + console.log(`[SettingsStore] quickCommandsCompactMode not found, set to default: ${settings.value.quickCommandsCompactMode}`); + } + // --- 从 localStorage 加载 QuickCommands 特有设置 --- + const localQcRowSizeMultiplier = localStorage.getItem('nexus_quickCommandRowSizeMultiplier'); + if (localQcRowSizeMultiplier) { + const parsedLocalMultiplier = parseFloat(localQcRowSizeMultiplier); + if (!isNaN(parsedLocalMultiplier) && parsedLocalMultiplier > 0) { + settings.value.quickCommandRowSizeMultiplier = localQcRowSizeMultiplier; + console.log(`[SettingsStore] Loaded quickCommandRowSizeMultiplier from localStorage: ${localQcRowSizeMultiplier}`); + } else { + console.warn(`[SettingsStore] Invalid quickCommandRowSizeMultiplier in localStorage: ${localQcRowSizeMultiplier}. Using server/default.`); + } + } + + const localQcCompactMode = localStorage.getItem('nexus_quickCommandsCompactMode'); + if (localQcCompactMode === 'true' || localQcCompactMode === 'false') { + settings.value.quickCommandsCompactMode = localQcCompactMode; + console.log(`[SettingsStore] Loaded quickCommandsCompactMode from localStorage: ${localQcCompactMode}`); + } else if (localQcCompactMode !== null) { + console.warn(`[SettingsStore] Invalid quickCommandsCompactMode in localStorage: ${localQcCompactMode}. Using server/default.`); + } // --- 语言设置 --- const langFromSettings = settings.value.language; @@ -409,7 +434,8 @@ export const useSettingsStore = defineStore('settings', () => { 'fileManagerShowDeleteConfirmation', 'terminalEnableRightClickPaste', 'showStatusMonitorIpAddress', - 'quickCommandRowSizeMultiplier' + 'quickCommandRowSizeMultiplier', + 'quickCommandsCompactMode' ]; if (!allowedKeys.includes(key)) { console.error(`[SettingsStore] 尝试更新不允许的设置键: ${key}`); @@ -451,6 +477,17 @@ export const useSettingsStore = defineStore('settings', () => { // Update store state *after* successful API call settings.value = { ...settings.value, [key]: String(value) }; // Store as string internally + // --- 保存到 localStorage --- + if (key === 'quickCommandsCompactMode' && (String(value) === 'true' || String(value) === 'false')) { + try { + localStorage.setItem('nexus_quickCommandsCompactMode', String(value)); + console.log(`[SettingsStore] Saved quickCommandsCompactMode to localStorage: ${String(value)}`); + } catch (e) { + console.error('[SettingsStore] Failed to save quickCommandsCompactMode to localStorage:', e); + } + } + // quickCommandRowSizeMultiplier 由其专用 action 处理 localStorage 保存 + // If updating language, check if it's valid and update i18n if (key === 'language' && typeof value === 'string' && availableLocales.includes(value)) { console.log(`[SettingsStore] updateSetting: Language updated to ${value}. Calling setLocale...`); @@ -506,7 +543,8 @@ export const useSettingsStore = defineStore('settings', () => { 'fileManagerShowDeleteConfirmation', 'terminalEnableRightClickPaste', 'showStatusMonitorIpAddress', - 'quickCommandRowSizeMultiplier' + 'quickCommandRowSizeMultiplier', + 'quickCommandsCompactMode' ]; const filteredUpdates: Partial = {}; let languageUpdate: string | undefined = undefined; @@ -604,6 +642,13 @@ export const useSettingsStore = defineStore('settings', () => { try { await updateSetting('quickCommandRowSizeMultiplier', multiplierString); // 本地状态 settings.value 会在 updateSetting 成功后更新 + // --- 保存到 localStorage --- + try { + localStorage.setItem('nexus_quickCommandRowSizeMultiplier', multiplierString); + console.log(`[SettingsStore] Saved quickCommandRowSizeMultiplier to localStorage: ${multiplierString}`); + } catch (e) { + console.error('[SettingsStore] Failed to save quickCommandRowSizeMultiplier to localStorage:', e); + } 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); @@ -838,6 +883,11 @@ export const useSettingsStore = defineStore('settings', () => { const val = parseFloat(valStr); return isNaN(val) || val <= 0 ? 1.0 : val; // Fallback to 1.0 if invalid }); + + // +++ Getter for Quick Command compact mode, returning boolean +++ + const quickCommandsCompactModeBoolean = computed(() => { + return settings.value.quickCommandsCompactMode === 'true'; + }); return { settings, // 只包含通用设置 @@ -874,6 +924,7 @@ export const useSettingsStore = defineStore('settings', () => { commandInputSyncTarget, // +++ 暴露命令输入同步目标 getter +++ timezone, quickCommandRowSizeMultiplierNumber, // +++ 暴露快捷命令大小 getter +++ + quickCommandsCompactModeBoolean, // +++ 暴露快捷指令紧凑模式 getter +++ dashboardSortBy, dashboardSortOrder, saveDashboardSortPreference, diff --git a/packages/frontend/src/views/QuickCommandsView.vue b/packages/frontend/src/views/QuickCommandsView.vue index 4ed47f6..7372487 100644 --- a/packages/frontend/src/views/QuickCommandsView.vue +++ b/packages/frontend/src/views/QuickCommandsView.vue @@ -16,11 +16,17 @@ 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" /> - + + - @@ -61,7 +67,7 @@
@@ -106,26 +112,39 @@ :key="cmd.id" :data-command-id="cmd.id" 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))` }" + :style="{ padding: isCompactMode ? `calc(0.1rem * var(--qc-row-size-multiplier)) calc(0.75rem * var(--qc-row-size-multiplier))` : `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)" >
- {{ cmd.name }} - {{ cmd.command }} + {{ cmd.name }} + {{ cmd.command }} + {{ cmd.command }}
-
- - -
@@ -139,26 +158,39 @@ :key="cmd.id" :data-command-id="cmd.id" 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))` }" + :style="{ padding: isCompactMode ? `calc(0.1rem * var(--qc-row-size-multiplier)) calc(0.75rem * var(--qc-row-size-multiplier))` : `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)" >
- {{ cmd.name }} - {{ cmd.command }} + {{ cmd.name }} + {{ cmd.command }} + {{ cmd.command }}
-
- - -
@@ -245,7 +277,11 @@ const isLoading = computed(() => quickCommandsStore.isLoading); const { selectedIndex: storeSelectedIndex, flatVisibleCommands, expandedGroups } = storeToRefs(quickCommandsStore); -const { showQuickCommandTagsBoolean, quickCommandRowSizeMultiplierNumber: qcRowSizeMultiplierFromStore } = storeToRefs(settingsStore); +const { + showQuickCommandTagsBoolean, + quickCommandRowSizeMultiplierNumber: qcRowSizeMultiplierFromStore, + quickCommandsCompactModeBoolean, // +++ 引入紧凑模式状态 +++ +} = storeToRefs(settingsStore); const quickCommandRowSizeMultiplier = ref(1.0); @@ -285,6 +321,14 @@ const flatFilteredCommands = computed(() => { return quickCommandsStore.flatVisibleCommands; }); +// --- Compact Mode --- +const isCompactMode = computed(() => quickCommandsCompactModeBoolean.value); + +const toggleCompactMode = () => { + const currentMode = quickCommandsCompactModeBoolean.value; + settingsStore.updateSetting('quickCommandsCompactMode', String(!currentMode)); +}; + // --- Helper function for selection check --- const isCommandSelected = (commandId: number): boolean => { // 使用 store 的 flatVisibleCommands 和 storeSelectedIndex