admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Baobhan Sith
2025-05-19 23:52:12 +08:00
parent a45317abc2
commit d8cec9f21d
2 changed files with 106 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/stores/settings.store.ts
+39 -3
View File
@@ -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 ---
/**
@@ -804,7 +828,17 @@ export const useSettingsStore = defineStore('settings', () => {
const statusMonitorShowIpBoolean = computed(() => {
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
+67 -21
View File
@@ -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 class="text-xs truncate font-mono" :class="{ 'text-sm': !cmd.name, 'text-text-secondary': true }">{{ cmd.command }}</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="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 class="text-xs truncate font-mono" :class="{ 'text-sm': !cmd.name, 'text-text-secondary': true }">{{ cmd.command }}</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="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,8 +195,8 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineExpose, watch } from 'vue';
import { storeToRefs } from 'pinia';
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';
import { useUiNotificationsStore } from '../stores/uiNotifications.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(() => {