lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-23 15:47:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: 添加快捷键管理功能，支持全局和应用内快捷键的启用/禁用，优化快捷键配置界面

Browse Source 
feat: #117
This commit is contained in:
algerkong
2025-04-05 20:33:34 +08:00
parent 541ff2b76c
commit c2983ba079
9 changed files with 484 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/App.vue
+4
View File
@@ -25,6 +25,7 @@ import { isElectron, isLyricWindow } from '@/utils';
import { initAudioListeners } from './hooks/MusicHook';
import { isMobile } from './utils';
import { useAppShortcuts } from './utils/appShortcuts';
import { initShortcut } from './utils/shortcut';
const { locale } = useI18n();
@@ -101,6 +102,9 @@ if (isElectron) {
});
}
// 使用应用内快捷键
useAppShortcuts();
onMounted(async () => {
if (isLyricWindow.value) {
return;
src/renderer/components/settings/ShortcutSettings.vue
+149 -54
View File
@@ -16,24 +16,54 @@
<div class="shortcut-info">
<span class="shortcut-label">{{ getShortcutLabel(key) }}</span>
</div>
<div class="shortcut-input">
<n-input
:value="formatShortcut(shortcut)"
:status="duplicateKeys[key] ? 'error' : undefined"
:placeholder="t('settings.shortcutSettings.inputPlaceholder')"
readonly
@keydown="(e) => handleKeyDown(e, key)"
@focus="() => startRecording(key)"
@blur="stopRecording"
/>
<n-tooltip v-if="duplicateKeys[key]" trigger="hover">
<template #trigger>
<n-icon class="error-icon" size="18">
<i class="ri-error-warning-line"></i>
</n-icon>
</template>
{{ t('settings.shortcutSettings.shortcutConflict') }}
</n-tooltip>
<div class="shortcut-controls">
<div class="shortcut-input">
<n-input
:value="formatShortcut(shortcut.key)"
:status="duplicateKeys[key] ? 'error' : undefined"
:placeholder="t('settings.shortcutSettings.inputPlaceholder')"
:disabled="!shortcut.enabled"
readonly
@keydown="(e) => handleKeyDown(e, key)"
@focus="() => startRecording(key)"
@blur="stopRecording"
/>
<n-tooltip v-if="duplicateKeys[key]" trigger="hover">
<template #trigger>
<n-icon class="error-icon" size="18">
<i class="ri-error-warning-line"></i>
</n-icon>
</template>
{{ t('settings.shortcutSettings.shortcutConflict') }}
</n-tooltip>
</div>
<div class="shortcut-options">
<n-tooltip trigger="hover">
<template #trigger>
<n-switch v-model:value="shortcut.enabled" size="small" />
</template>
{{
shortcut.enabled
? t('settings.shortcutSettings.enabled')
: t('settings.shortcutSettings.disabled')
}}
</n-tooltip>
<n-tooltip v-if="shortcut.enabled" trigger="hover">
<template #trigger>
<n-select
v-model:value="shortcut.scope"
:options="scopeOptions"
size="small"
style="width: 100px"
/>
</template>
{{
shortcut.scope === 'global'
? t('settings.shortcutSettings.scopeGlobal')
: t('settings.shortcutSettings.scopeApp')
}}
</n-tooltip>
</div>
</div>
</div>
</n-space>
@@ -46,6 +76,12 @@
<n-button size="small" @click="resetShortcuts">{{
t('settings.shortcutSettings.resetShortcuts')
}}</n-button>
<n-button size="small" type="warning" @click="disableAllShortcuts">{{
t('settings.shortcutSettings.disableAll')
}}</n-button>
<n-button size="small" type="success" @click="enableAllShortcuts">{{
t('settings.shortcutSettings.enableAll')
}}</n-button>
<n-button type="primary" size="small" :disabled="hasConflict" @click="handleSave">
{{ t('common.save') }}
</n-button>
@@ -66,26 +102,37 @@ import { isElectron } from '@/utils';
const { t } = useI18n();
interface ShortcutConfig {
key: string;
enabled: boolean;
scope: 'global' | 'app';
}
interface Shortcuts {
togglePlay: string;
prevPlay: string;
nextPlay: string;
volumeUp: string;
volumeDown: string;
toggleFavorite: string;
toggleWindow: string;
togglePlay: ShortcutConfig;
prevPlay: ShortcutConfig;
nextPlay: ShortcutConfig;
volumeUp: ShortcutConfig;
volumeDown: ShortcutConfig;
toggleFavorite: ShortcutConfig;
toggleWindow: ShortcutConfig;
}
const defaultShortcuts: Shortcuts = {
togglePlay: 'CommandOrControl+Alt+P',
prevPlay: 'Alt+Left',
nextPlay: 'Alt+Right',
volumeUp: 'Alt+Up',
volumeDown: 'Alt+Down',
toggleFavorite: 'CommandOrControl+Alt+L',
toggleWindow: 'CommandOrControl+Alt+Shift+M'
togglePlay: { key: 'CommandOrControl+Alt+P', enabled: true, scope: 'global' },
prevPlay: { key: 'Alt+Left', enabled: true, scope: 'global' },
nextPlay: { key: 'Alt+Right', enabled: true, scope: 'global' },
volumeUp: { key: 'Alt+Up', enabled: true, scope: 'app' },
volumeDown: { key: 'Alt+Down', enabled: true, scope: 'app' },
toggleFavorite: { key: 'CommandOrControl+Alt+L', enabled: true, scope: 'app' },
toggleWindow: { key: 'CommandOrControl+Alt+Shift+M', enabled: true, scope: 'global' }
};
const scopeOptions = [
{ label: t('settings.shortcutSettings.scopeGlobal'), value: 'global' },
{ label: t('settings.shortcutSettings.scopeApp'), value: 'app' }
];
const shortcuts = ref<Shortcuts>(
isElectron
? window.electron.ipcRenderer.sendSync('get-store-value', 'shortcuts') || defaultShortcuts
@@ -93,7 +140,7 @@ const shortcuts = ref<Shortcuts>(
);
// 临时存储编辑中的快捷键
const tempShortcuts = ref<Shortcuts>({ ...shortcuts.value });
const tempShortcuts = ref<Shortcuts>(cloneDeep(shortcuts.value));
// 监听快捷键更新
if (isElectron) {
@@ -101,7 +148,7 @@ if (isElectron) {
const newShortcuts = window.electron.ipcRenderer.sendSync('get-store-value', 'shortcuts');
if (newShortcuts) {
shortcuts.value = newShortcuts;
tempShortcuts.value = { ...newShortcuts };
tempShortcuts.value = cloneDeep(newShortcuts);
}
});
}
@@ -116,12 +163,27 @@ onMounted(() => {
console.log('storedShortcuts', storedShortcuts);
if (storedShortcuts) {
shortcuts.value = storedShortcuts;
tempShortcuts.value = { ...storedShortcuts };
tempShortcuts.value = cloneDeep(storedShortcuts);
} else {
shortcuts.value = { ...defaultShortcuts };
tempShortcuts.value = { ...defaultShortcuts };
tempShortcuts.value = cloneDeep(defaultShortcuts);
window.electron.ipcRenderer.send('set-store-value', 'shortcuts', defaultShortcuts);
}
// 转换旧格式的快捷键数据到新格式
if (storedShortcuts && typeof storedShortcuts.togglePlay === 'string') {
const convertedShortcuts = {} as Shortcuts;
Object.entries(storedShortcuts).forEach(([key, value]) => {
convertedShortcuts[key as keyof Shortcuts] = {
key: value as string,
enabled: true,
scope: ['volumeUp', 'volumeDown', 'toggleFavorite'].includes(key) ? 'app' : 'global'
};
});
shortcuts.value = convertedShortcuts;
tempShortcuts.value = cloneDeep(convertedShortcuts);
window.electron.ipcRenderer.send('set-store-value', 'shortcuts', convertedShortcuts);
}
}
});
@@ -144,13 +206,21 @@ const message = useMessage();
// 检查快捷键冲突
const duplicateKeys = computed(() => {
const result: Record<string, boolean> = {};
const usedShortcuts = new Set<string>();
const usedShortcuts = new Map<string, string>();
Object.entries(tempShortcuts.value).forEach(([key, shortcut]) => {
if (usedShortcuts.has(shortcut)) {
result[key] = true;
// 只检查启用的快捷键
if (!shortcut.enabled) return;
const conflictKey = usedShortcuts.get(shortcut.key);
if (conflictKey) {
// 只有相同作用域的快捷键才会被认为冲突
const conflictScope = tempShortcuts.value[conflictKey as keyof Shortcuts].scope;
if (shortcut.scope === conflictScope) {
result[key] = true;
}
} else {
usedShortcuts.add(shortcut);
usedShortcuts.set(shortcut.key, key);
}
});
@@ -161,6 +231,8 @@ const duplicateKeys = computed(() => {
const hasConflict = computed(() => Object.keys(duplicateKeys.value).length > 0);
const startRecording = (key: keyof Shortcuts) => {
if (!tempShortcuts.value[key].enabled) return;
isRecording.value = true;
currentKey.value = key;
// 禁用全局快捷键
@@ -220,12 +292,12 @@ const handleKeyDown = (e: KeyboardEvent, key: keyof Shortcuts) => {
}
if (!['Control', 'Alt', 'Shift', 'Meta', 'Command'].includes(keyName)) {
tempShortcuts.value[key] = [...modifiers, keyName].join('+');
tempShortcuts.value[key].key = [...modifiers, keyName].join('+');
}
};
const resetShortcuts = () => {
tempShortcuts.value = { ...defaultShortcuts };
tempShortcuts.value = cloneDeep(defaultShortcuts);
message.success(t('settings.shortcutSettings.messages.resetSuccess'));
};
@@ -245,7 +317,7 @@ const saveShortcuts = () => {
// 先保存到 store
window.electron.ipcRenderer.send('set-store-value', 'shortcuts', shortcutsToSave);
// 然后更新快捷键
window.electron.ipcRenderer.send('update-shortcuts');
window.electron.ipcRenderer.send('update-shortcuts', shortcutsToSave);
message.success(t('settings.shortcutSettings.messages.saveSuccess'));
} catch (error) {
console.error('保存快捷键失败:', error);
@@ -255,7 +327,7 @@ const saveShortcuts = () => {
};
const cancelEdit = () => {
tempShortcuts.value = { ...shortcuts.value };
tempShortcuts.value = cloneDeep(shortcuts.value);
message.info(t('settings.shortcutSettings.messages.cancelEdit'));
emit('update:show', false);
};
@@ -309,7 +381,7 @@ watch(visible, (newVal) => {
// 处理弹窗关闭后的事件
const handleAfterLeave = () => {
// 重置临时数据
tempShortcuts.value = { ...shortcuts.value };
tempShortcuts.value = cloneDeep(shortcuts.value);
};
// 处理取消按钮点击
@@ -324,6 +396,22 @@ const handleSave = () => {
visible.value = false;
emit('change', shortcuts.value);
};
// 全部禁用快捷键
const disableAllShortcuts = () => {
Object.keys(tempShortcuts.value).forEach((key) => {
tempShortcuts.value[key as keyof Shortcuts].enabled = false;
});
message.info(t('settings.shortcutSettings.messages.disableAll'));
};
// 全部启用快捷键
const enableAllShortcuts = () => {
Object.keys(tempShortcuts.value).forEach((key) => {
tempShortcuts.value[key as keyof Shortcuts].enabled = true;
});
message.info(t('settings.shortcutSettings.messages.enableAll'));
};
</script>
<style lang="scss" scoped>
@@ -359,25 +447,32 @@ const handleSave = () => {
}
.shortcut-info {
@apply flex flex-col;
@apply flex flex-col min-w-[150px];
.shortcut-label {
@apply text-base font-medium;
}
}
.shortcut-input {
@apply flex items-center gap-2;
min-width: 200px;
.shortcut-controls {
@apply flex items-center gap-3 flex-1;
:deep(.n-input) {
.n-input__input-el {
@apply text-center font-mono;
.shortcut-input {
@apply flex items-center gap-2 flex-1;
:deep(.n-input) {
.n-input__input-el {
@apply text-center font-mono;
}
}
.error-icon {
@apply text-red-500;
}
}
.error-icon {
@apply text-red-500;
.shortcut-options {
@apply flex items-center gap-2;
}
}
}
src/renderer/main.ts
+4
View File
@@ -10,6 +10,7 @@ import pinia from '@/store';
import App from './App.vue';
import directives from './directive';
import { initAppShortcuts } from './utils/appShortcuts';
const app = createApp(App);
@@ -21,3 +22,6 @@ app.use(pinia);
app.use(router);
app.use(i18n);
app.mount('#app');
// 初始化应用内快捷键
initAppShortcuts();
src/renderer/utils/appShortcuts.ts
+210
View File
@@ -0,0 +1,210 @@
import { onMounted, onUnmounted } from 'vue';
import i18n from '@/../i18n/renderer';
import { audioService } from '@/services/audioService';
import { usePlayerStore, useSettingsStore } from '@/store';
import { isElectron } from '.';
import { showShortcutToast } from './shortcutToast';
interface ShortcutConfig {
key: string;
enabled: boolean;
scope: 'global' | 'app';
}
interface ShortcutsConfig {
[key: string]: ShortcutConfig;
}
const { t } = i18n.global;
// 全局存储快捷键配置
let appShortcuts: ShortcutsConfig = {};
/**
* 处理快捷键动作
* @param action 快捷键动作
*/
export async function handleShortcutAction(action: string) {
const playerStore = usePlayerStore();
const settingsStore = useSettingsStore();
const currentSound = audioService.getCurrentSound();
const showToast = (message: string, iconName: string) => {
if (settingsStore.isMiniMode) {
return;
}
showShortcutToast(message, iconName);
};
switch (action) {
case 'togglePlay':
if (playerStore.play) {
await audioService.pause();
showToast(t('player.playBar.pause'), 'ri-pause-circle-line');
} else {
await audioService.play();
showToast(t('player.playBar.play'), 'ri-play-circle-line');
}
break;
case 'prevPlay':
playerStore.prevPlay();
showToast(t('player.playBar.prev'), 'ri-skip-back-line');
break;
case 'nextPlay':
playerStore.nextPlay();
showToast(t('player.playBar.next'), 'ri-skip-forward-line');
break;
case 'volumeUp':
if (currentSound && currentSound?.volume() < 1) {
currentSound?.volume((currentSound?.volume() || 0) + 0.1);
showToast(
`${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
'ri-volume-up-line'
);
}
break;
case 'volumeDown':
if (currentSound && currentSound?.volume() > 0) {
currentSound?.volume((currentSound?.volume() || 0) - 0.1);
showToast(
`${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
'ri-volume-down-line'
);
}
break;
case 'toggleFavorite': {
const isFavorite = playerStore.favoriteList.includes(Number(playerStore.playMusic.id));
const numericId = Number(playerStore.playMusic.id);
if (isFavorite) {
playerStore.removeFromFavorite(numericId);
} else {
playerStore.addToFavorite(numericId);
}
showToast(
isFavorite
? t('player.playBar.favorite', { name: playerStore.playMusic.name })
: t('player.playBar.unFavorite', { name: playerStore.playMusic.name }),
isFavorite ? 'ri-heart-fill' : 'ri-heart-line'
);
break;
}
default:
console.log('未知的快捷键动作:', action);
break;
}
}
/**
* 检查按键是否匹配快捷键
* @param e KeyboardEvent
* @param shortcutKey 快捷键字符串
* @returns 是否匹配
*/
function matchShortcut(e: KeyboardEvent, shortcutKey: string): boolean {
const keys = shortcutKey.split('+');
const pressedKey = e.key.length === 1 ? e.key.toUpperCase() : e.key;
// 检查修饰键
const hasCommandOrControl = keys.includes('CommandOrControl');
const hasAlt = keys.includes('Alt');
const hasShift = keys.includes('Shift');
// 检查主键
let mainKey = keys.find((k) => !['CommandOrControl', 'Alt', 'Shift'].includes(k));
if (!mainKey) return false;
// 处理特殊键
if (mainKey === 'Left' && pressedKey === 'ArrowLeft') mainKey = 'ArrowLeft';
if (mainKey === 'Right' && pressedKey === 'ArrowRight') mainKey = 'ArrowRight';
if (mainKey === 'Up' && pressedKey === 'ArrowUp') mainKey = 'ArrowUp';
if (mainKey === 'Down' && pressedKey === 'ArrowDown') mainKey = 'ArrowDown';
// 检查是否所有条件都匹配
return (
hasCommandOrControl === (e.ctrlKey || e.metaKey) &&
hasAlt === e.altKey &&
hasShift === e.shiftKey &&
mainKey === pressedKey
);
}
/**
* 全局键盘事件处理函数
* @param e KeyboardEvent
*/
function handleKeyDown(e: KeyboardEvent) {
// 如果在输入框中则不处理快捷键
if (['INPUT', 'TEXTAREA'].includes((e.target as HTMLElement).tagName)) {
return;
}
Object.entries(appShortcuts).forEach(([action, config]) => {
if (config.enabled && config.scope === 'app' && matchShortcut(e, config.key)) {
e.preventDefault();
handleShortcutAction(action);
}
});
}
/**
* 更新应用内快捷键
* @param shortcuts 快捷键配置
*/
export function updateAppShortcuts(shortcuts: ShortcutsConfig) {
appShortcuts = shortcuts;
}
/**
* 初始化应用内快捷键
*/
export function initAppShortcuts() {
if (isElectron) {
// 监听全局快捷键事件
window.electron.ipcRenderer.on('global-shortcut', async (_, action: string) => {
handleShortcutAction(action);
});
// 监听应用内快捷键更新
window.electron.ipcRenderer.on('update-app-shortcuts', (_, shortcuts: ShortcutsConfig) => {
updateAppShortcuts(shortcuts);
});
// 获取初始快捷键配置
const storedShortcuts = window.electron.ipcRenderer.sendSync('get-store-value', 'shortcuts');
if (storedShortcuts) {
updateAppShortcuts(storedShortcuts);
}
// 添加键盘事件监听
document.addEventListener('keydown', handleKeyDown);
}
}
/**
* 清理应用内快捷键
*/
export function cleanupAppShortcuts() {
if (isElectron) {
// 移除全局事件监听
window.electron.ipcRenderer.removeAllListeners('global-shortcut');
window.electron.ipcRenderer.removeAllListeners('update-app-shortcuts');
// 移除键盘事件监听
document.removeEventListener('keydown', handleKeyDown);
}
}
/**
* 使用应用内快捷键的组合函数
*/
export function useAppShortcuts() {
onMounted(() => {
initAppShortcuts();
});
onUnmounted(() => {
cleanupAppShortcuts();
});
}
src/renderer/utils/shortcut.ts
+2 -73
View File
@@ -1,81 +1,10 @@
import i18n from '@/../i18n/renderer';
import { audioService } from '@/services/audioService';
import { usePlayerStore, useSettingsStore } from '@/store';
import { isElectron } from '.';
import { showShortcutToast } from './shortcutToast';
const { t } = i18n.global;
import { handleShortcutAction } from './appShortcuts';
export function initShortcut() {
if (isElectron) {
window.electron.ipcRenderer.on('global-shortcut', async (_, action: string) => {
const playerStore = usePlayerStore();
const settingsStore = useSettingsStore();
const currentSound = audioService.getCurrentSound();
const showToast = (message: string, iconName: string) => {
if (settingsStore.isMiniMode) {
return;
}
showShortcutToast(message, iconName);
};
switch (action) {
case 'togglePlay':
if (playerStore.play) {
await audioService.pause();
showToast(t('player.playBar.pause'), 'ri-pause-circle-line');
} else {
await audioService.play();
showToast(t('player.playBar.play'), 'ri-play-circle-line');
}
break;
case 'prevPlay':
playerStore.prevPlay();
showToast(t('player.playBar.prev'), 'ri-skip-back-line');
break;
case 'nextPlay':
playerStore.nextPlay();
showToast(t('player.playBar.next'), 'ri-skip-forward-line');
break;
case 'volumeUp':
if (currentSound && currentSound?.volume() < 1) {
currentSound?.volume((currentSound?.volume() || 0) + 0.1);
showToast(
`${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
'ri-volume-up-line'
);
}
break;
case 'volumeDown':
if (currentSound && currentSound?.volume() > 0) {
currentSound?.volume((currentSound?.volume() || 0) - 0.1);
showToast(
`${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
'ri-volume-down-line'
);
}
break;
case 'toggleFavorite': {
const isFavorite = playerStore.favoriteList.includes(Number(playerStore.playMusic.id));
const numericId = Number(playerStore.playMusic.id);
if (isFavorite) {
playerStore.removeFromFavorite(numericId);
} else {
playerStore.addToFavorite(numericId);
}
showToast(
isFavorite
? t('player.playBar.favorite', { name: playerStore.playMusic.name })
: t('player.playBar.unFavorite', { name: playerStore.playMusic.name }),
isFavorite ? 'ri-heart-fill' : 'ri-heart-line'
);
break;
}
default:
console.log('未知的快捷键动作:', action);
break;
}
handleShortcutAction(action);
});
}
}