diff --git a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue index 10f3c7b59..29a85fce9 100644 --- a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue +++ b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue @@ -20,7 +20,7 @@ >
- {{ command.label || command.id }} + {{ command.getTranslatedLabel() }}
diff --git a/src/components/dialog/content/setting/KeybindingPanel.vue b/src/components/dialog/content/setting/KeybindingPanel.vue index 97a373421..cd8136e38 100644 --- a/src/components/dialog/content/setting/KeybindingPanel.vue +++ b/src/components/dialog/content/setting/KeybindingPanel.vue @@ -139,7 +139,6 @@ import Message from 'primevue/message' import Tag from 'primevue/tag' import { useToast } from 'primevue/usetoast' import { computed, ref, watchEffect } from 'vue' -import { useI18n } from 'vue-i18n' import SearchBox from '@/components/common/SearchBox.vue' import { useKeybindingService } from '@/services/keybindingService' @@ -149,7 +148,6 @@ import { KeybindingImpl, useKeybindingStore } from '@/stores/keybindingStore' -import { normalizeI18nKey } from '@/utils/formatUtil' import PanelTemplate from './PanelTemplate.vue' import KeyComboDisplay from './keybinding/KeyComboDisplay.vue' @@ -161,7 +159,6 @@ const filters = ref({ const keybindingStore = useKeybindingStore() const keybindingService = useKeybindingService() const commandStore = useCommandStore() -const { t } = useI18n() interface ICommandData { id: string @@ -173,10 +170,7 @@ interface ICommandData { const commandsData = computed(() => { return Object.values(commandStore.commands).map((command) => ({ id: command.id, - label: t( - `commands.${normalizeI18nKey(command.id)}.label`, - command.label ?? '' - ), + label: command.getTranslatedLabel(), keybinding: keybindingStore.getKeybindingByCommandId(command.id), source: command.source })) diff --git a/src/components/searchbox/CommandSearchItem.vue b/src/components/searchbox/CommandSearchItem.vue index db10ce35c..ed8dc667b 100644 --- a/src/components/searchbox/CommandSearchItem.vue +++ b/src/components/searchbox/CommandSearchItem.vue @@ -24,7 +24,7 @@ const { command, currentQuery } = defineProps<{ }>() const highlightedLabel = computed(() => { - const label = command.label || command.id + const label = command.getTranslatedLabel() if (!currentQuery) return label // Simple highlighting logic - case insensitive diff --git a/src/services/commandSearchService.ts b/src/services/commandSearchService.ts index e3e05ae23..7443f998c 100644 --- a/src/services/commandSearchService.ts +++ b/src/services/commandSearchService.ts @@ -14,7 +14,11 @@ export class CommandSearchService { this.commands = commands this.fuse = new Fuse(commands, { keys: [ - { name: 'label', weight: 2 }, + { + name: 'translatedLabel', + weight: 2, + getFn: (command: ComfyCommandImpl) => command.getTranslatedLabel() + }, { name: 'id', weight: 1 } ], includeScore: true, @@ -28,7 +32,11 @@ export class CommandSearchService { this.commands = commands const options = { keys: [ - { name: 'label', weight: 2 }, + { + name: 'translatedLabel', + weight: 2, + getFn: (command: ComfyCommandImpl) => command.getTranslatedLabel() + }, { name: 'id', weight: 1 } ], includeScore: true, @@ -46,11 +54,11 @@ export class CommandSearchService { // Remove the leading ">" if present const searchQuery = query.startsWith('>') ? query.slice(1).trim() : query - // If empty query, return all commands sorted alphabetically by label + // If empty query, return all commands sorted alphabetically by translated label if (!searchQuery) { const sortedCommands = [...this.commands].sort((a, b) => { - const labelA = a.label || a.id - const labelB = b.label || b.id + const labelA = a.getTranslatedLabel() + const labelB = b.getTranslatedLabel() return labelA.localeCompare(labelB) }) return options?.limit diff --git a/src/stores/commandStore.ts b/src/stores/commandStore.ts index 70154e5ae..c38773d5e 100644 --- a/src/stores/commandStore.ts +++ b/src/stores/commandStore.ts @@ -2,7 +2,9 @@ import { defineStore } from 'pinia' import { computed, ref } from 'vue' import { useErrorHandling } from '@/composables/useErrorHandling' +import { t } from '@/i18n' import type { ComfyExtension } from '@/types/comfy' +import { normalizeI18nKey } from '@/utils/formatUtil' import { type KeybindingImpl, useKeybindingStore } from './keybindingStore' @@ -66,6 +68,19 @@ export class ComfyCommandImpl implements ComfyCommand { get keybinding(): KeybindingImpl | null { return useKeybindingStore().getKeybindingByCommandId(this.id) } + + getTranslatedLabel(): string { + // Use the same pattern as KeybindingPanel to get translated labels + return t(`commands.${normalizeI18nKey(this.id)}.label`, this.label ?? '') + } + + getTranslatedMenubarLabel(): string { + // Use the same pattern but for menubar labels + return t( + `commands.${normalizeI18nKey(this.id)}.menubarLabel`, + this.menubarLabel ?? this.getTranslatedLabel() + ) + } } export const useCommandStore = defineStore('command', () => { diff --git a/src/stores/menuItemStore.ts b/src/stores/menuItemStore.ts index a1502e14a..39d3e348e 100644 --- a/src/stores/menuItemStore.ts +++ b/src/stores/menuItemStore.ts @@ -54,7 +54,7 @@ export const useMenuItemStore = defineStore('menuItem', () => { (command) => ({ command: () => commandStore.execute(command.id), - label: command.menubarLabel, + label: command.getTranslatedMenubarLabel(), icon: command.icon, tooltip: command.tooltip, comfyCommand: command diff --git a/tests-ui/tests/components/bottomPanel/EssentialsPanel.spec.ts b/tests-ui/tests/components/bottomPanel/EssentialsPanel.spec.ts index d8ad4d6a0..8e0248b1f 100644 --- a/tests-ui/tests/components/bottomPanel/EssentialsPanel.spec.ts +++ b/tests-ui/tests/components/bottomPanel/EssentialsPanel.spec.ts @@ -41,7 +41,9 @@ const mockCommands: ComfyCommandImpl[] = [ icon: 'pi pi-test', tooltip: 'Test tooltip', menubarLabel: 'Other Command', - keybinding: null + keybinding: null, + getTranslatedLabel: () => 'Other Command', + getTranslatedMenubarLabel: () => 'Other Command' } as ComfyCommandImpl ] diff --git a/tests-ui/tests/components/bottomPanel/ShortcutsList.spec.ts b/tests-ui/tests/components/bottomPanel/ShortcutsList.spec.ts index d42e7250c..fab2f5988 100644 --- a/tests-ui/tests/components/bottomPanel/ShortcutsList.spec.ts +++ b/tests-ui/tests/components/bottomPanel/ShortcutsList.spec.ts @@ -32,7 +32,8 @@ describe('ShortcutsList', () => { combo: { getKeySequences: () => ['Control', 'n'] } - } + }, + getTranslatedLabel: () => 'New Workflow' } as ComfyCommandImpl, { id: 'Node.Add', @@ -42,7 +43,8 @@ describe('ShortcutsList', () => { combo: { getKeySequences: () => ['Shift', 'a'] } - } + }, + getTranslatedLabel: () => 'Add Node' } as ComfyCommandImpl, { id: 'Queue.Clear', @@ -52,7 +54,8 @@ describe('ShortcutsList', () => { combo: { getKeySequences: () => ['Control', 'Shift', 'c'] } - } + }, + getTranslatedLabel: () => 'Clear Queue' } as ComfyCommandImpl ] @@ -104,7 +107,8 @@ describe('ShortcutsList', () => { id: 'No.Keybinding', label: 'No Keybinding', category: 'essentials', - keybinding: null + keybinding: null, + getTranslatedLabel: () => 'No Keybinding' } as ComfyCommandImpl ] @@ -130,7 +134,8 @@ describe('ShortcutsList', () => { combo: { getKeySequences: () => ['Meta', 'ArrowUp', 'Enter', 'Escape', ' '] } - } + }, + getTranslatedLabel: () => 'Special Keys' } as ComfyCommandImpl const wrapper = mount(ShortcutsList, {