landaiqing/voidraft
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

✨ Added hotkey service

Browse Source
This commit is contained in:
landaiqing
2025-06-03 13:56:45 +08:00
parent 5d7f6ec6a1
commit 5381e4ba17
20 changed files with 1895 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
frontend/src/stores/configStore.ts
View File

@@ -1,13 +1,18 @@
import {defineStore} from 'pinia';
import {computed, reactive} from 'vue';
import {ConfigService} from '@/../bindings/voidraft/internal/services';
import {
ConfigService
} from '@/../bindings/voidraft/internal/services';
import {AppConfig, GeneralConfig, EditingConfig, AppearanceConfig, TabType, LanguageType} from '@/../bindings/voidraft/internal/models';
import { useI18n } from 'vue-i18n';
import { useErrorHandler } from '@/utils/errorHandler';
import { ConfigUtils } from '@/utils/configUtils';
AppConfig,
AppearanceConfig,
EditingConfig,
GeneralConfig,
LanguageType,
TabType
} from '@/../bindings/voidraft/internal/models';
import {useI18n} from 'vue-i18n';
import {useErrorHandler} from '@/utils/errorHandler';
import {ConfigUtils} from '@/utils/configUtils';
import {WindowController} from '@/utils/windowController';
// 国际化相关导入
export type SupportedLocaleType = 'zh-CN' | 'en-US';
@@ -41,7 +46,9 @@ type NumberConfigKey = 'fontSize' | 'tabSize' | 'lineHeight';
// 配置键映射
const GENERAL_CONFIG_KEY_MAP: GeneralConfigKeyMap = {
alwaysOnTop: 'general.always_on_top',
dataPath: 'general.data_path'
dataPath: 'general.data_path',
enableGlobalHotkey: 'general.enable_global_hotkey',
globalHotkey: 'general.global_hotkey'
} as const;
const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {
@@ -63,22 +70,31 @@ const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = {
// 配置限制
const CONFIG_LIMITS = {
fontSize: { min: 12, max: 28, default: 13 },
tabSize: { min: 2, max: 8, default: 4 },
lineHeight: { min: 1.0, max: 3.0, default: 1.5 },
tabType: { values: [TabType.TabTypeSpaces, TabType.TabTypeTab], default: TabType.TabTypeSpaces }
fontSize: {min: 12, max: 28, default: 13},
tabSize: {min: 2, max: 8, default: 4},
lineHeight: {min: 1.0, max: 3.0, default: 1.5},
tabType: {values: [TabType.TabTypeSpaces, TabType.TabTypeTab], default: TabType.TabTypeSpaces}
} as const;
// 常用字体选项
export const FONT_OPTIONS = [
{ label: '鸿蒙字体', value: '"HarmonyOS Sans SC", "HarmonyOS Sans", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif' },
{ label: '微软雅黑', value: '"Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif' },
{ label: '苹方字体', value: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif' },
{ label: 'JetBrains Mono', value: '"JetBrains Mono", "Fira Code", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace' },
{ label: 'Fira Code', value: '"Fira Code", "JetBrains Mono", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace' },
{ label: 'Source Code Pro', value: '"Source Code Pro", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace' },
{ label: 'Cascadia Code', value: '"Cascadia Code", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace' },
{ label: '系统等宽字体', value: '"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace' }
{
label: '鸿蒙字体',
value: '"HarmonyOS Sans SC", "HarmonyOS Sans", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif'
},
{label: '微软雅黑', value: '"Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif'},
{label: '苹方字体', value: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif'},
{
label: 'JetBrains Mono',
value: '"JetBrains Mono", "Fira Code", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace'
},
{label: 'Fira Code', value: '"Fira Code", "JetBrains Mono", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace'},
{label: 'Source Code Pro', value: '"Source Code Pro", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace'},
{label: 'Cascadia Code', value: '"Cascadia Code", "SF Mono", Monaco, Consolas, "Ubuntu Mono", monospace'},
{
label: '系统等宽字体',
value: '"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace'
}
] as const;
// 获取浏览器的默认语言
@@ -98,7 +114,15 @@ const getBrowserLanguage = (): SupportedLocaleType => {
const DEFAULT_CONFIG: AppConfig = {
general: {
alwaysOnTop: false,
dataPath: './data'
dataPath: './data',
enableGlobalHotkey: false,
globalHotkey: {
ctrl: false,
shift: false,
alt: true,
win: false,
key: 'X'
}
},
editing: {
fontSize: CONFIG_LIMITS.fontSize.default,
@@ -123,13 +147,14 @@ const DEFAULT_CONFIG: AppConfig = {
}
};
export const useConfigStore = defineStore('config', () => {
const { locale } = useI18n();
const { safeCall } = useErrorHandler();
const {locale} = useI18n();
const {safeCall} = useErrorHandler();
// 响应式状态
const state = reactive({
config: { ...DEFAULT_CONFIG } as AppConfig,
config: {...DEFAULT_CONFIG} as AppConfig,
isLoading: false,
configLoaded: false
});
@@ -146,12 +171,12 @@ export const useConfigStore = defineStore('config', () => {
if (!state.configLoaded && !state.isLoading) {
await initConfig();
}
const backendKey = GENERAL_CONFIG_KEY_MAP[key];
if (!backendKey) {
throw new Error(`No backend key mapping found for general.${key.toString()}`);
}
await ConfigService.Set(backendKey, value);
state.config.general[key] = value;
};
@@ -161,12 +186,12 @@ export const useConfigStore = defineStore('config', () => {
if (!state.configLoaded && !state.isLoading) {
await initConfig();
}
const backendKey = EDITING_CONFIG_KEY_MAP[key];
if (!backendKey) {
throw new Error(`No backend key mapping found for editing.${key.toString()}`);
}
await ConfigService.Set(backendKey, value);
state.config.editing[key] = value;
};
@@ -176,12 +201,12 @@ export const useConfigStore = defineStore('config', () => {
if (!state.configLoaded && !state.isLoading) {
await initConfig();
}
const backendKey = APPEARANCE_CONFIG_KEY_MAP[key];
if (!backendKey) {
throw new Error(`No backend key mapping found for appearance.${key.toString()}`);
}
await ConfigService.Set(backendKey, value);
state.config.appearance[key] = value;
};
@@ -189,11 +214,11 @@ export const useConfigStore = defineStore('config', () => {
// 加载配置
const initConfig = async (): Promise<void> => {
if (state.isLoading) return;
state.isLoading = true;
try {
const appConfig = await ConfigService.GetConfig();
if (appConfig) {
// 合并配置
if (appConfig.general) Object.assign(state.config.general, appConfig.general);
@@ -203,8 +228,12 @@ export const useConfigStore = defineStore('config', () => {
if (appConfig.updates) Object.assign(state.config.updates, appConfig.updates);
if (appConfig.metadata) Object.assign(state.config.metadata, appConfig.metadata);
}
state.configLoaded = true;
// 初始化热键监听器
const windowController = WindowController.getInstance();
await windowController.initializeHotkeyListener();
} finally {
state.isLoading = false;
}
@@ -214,7 +243,7 @@ export const useConfigStore = defineStore('config', () => {
const createAdjuster = <T extends NumberConfigKey>(key: T) => {
const limit = CONFIG_LIMITS[key];
const clamp = (value: number) => ConfigUtils.clamp(value, limit.min, limit.max);
return {
increase: () => safeCall(() => updateEditingConfig(key, clamp(state.config.editing[key] + 1)), 'config.saveFailed', 'config.saveSuccess'),
decrease: () => safeCall(() => updateEditingConfig(key, clamp(state.config.editing[key] - 1)), 'config.saveFailed', 'config.saveSuccess'),
@@ -224,10 +253,10 @@ export const useConfigStore = defineStore('config', () => {
};
// 通用布尔值切换器
const createGeneralToggler = <T extends keyof GeneralConfig>(key: T) =>
const createGeneralToggler = <T extends keyof GeneralConfig>(key: T) =>
() => safeCall(() => updateGeneralConfig(key, !state.config.general[key] as GeneralConfig[T]), 'config.saveFailed', 'config.saveSuccess');
const createEditingToggler = <T extends keyof EditingConfig>(key: T) =>
const createEditingToggler = <T extends keyof EditingConfig>(key: T) =>
() => safeCall(() => updateEditingConfig(key, !state.config.editing[key] as EditingConfig[T]), 'config.saveFailed', 'config.saveSuccess');
// 枚举值切换器
@@ -241,7 +270,7 @@ export const useConfigStore = defineStore('config', () => {
// 重置配置
const resetConfig = async (): Promise<void> => {
if (state.isLoading) return;
state.isLoading = true;
try {
await safeCall(() => ConfigService.ResetConfig(), 'config.resetFailed', 'config.resetSuccess');
@@ -255,7 +284,7 @@ export const useConfigStore = defineStore('config', () => {
const setLanguage = async (language: LanguageType): Promise<void> => {
await safeCall(async () => {
await updateAppearanceConfig('language', language);
// 同步更新前端语言
const frontendLocale = ConfigUtils.backendLanguageToFrontend(language);
locale.value = frontendLocale as any;
@@ -269,7 +298,7 @@ export const useConfigStore = defineStore('config', () => {
if (!state.configLoaded) {
await initConfig();
}
// 同步前端语言设置
const frontendLocale = ConfigUtils.backendLanguageToFrontend(state.config.appearance.language);
locale.value = frontendLocale as any;
@@ -315,18 +344,18 @@ export const useConfigStore = defineStore('config', () => {
// 核心方法
initConfig: () => safeCall(() => initConfig(), 'config.loadFailed', 'config.loadSuccess'),
resetConfig,
// 语言相关方法
setLanguage,
initializeLanguage,
// 字体大小操作
...adjusters.fontSize,
increaseFontSize: adjusters.fontSize.increase,
decreaseFontSize: adjusters.fontSize.decrease,
resetFontSize: adjusters.fontSize.reset,
setFontSize: adjusters.fontSize.set,
// Tab操作
toggleTabIndent: togglers.tabIndent,
setEnableTabIndent: (value: boolean) => safeCall(() => updateEditingConfig('enableTabIndent', value), 'config.saveFailed', 'config.saveSuccess'),
@@ -335,10 +364,10 @@ export const useConfigStore = defineStore('config', () => {
decreaseTabSize: adjusters.tabSize.decrease,
setTabSize: adjusters.tabSize.set,
toggleTabType: togglers.tabType,
// 行高操作
setLineHeight: adjusters.lineHeight.set,
// 窗口操作
toggleAlwaysOnTop: togglers.alwaysOnTop,
@@ -352,6 +381,10 @@ export const useConfigStore = defineStore('config', () => {
// 保存配置相关方法
setAutoSaveDelay: setters.autoSaveDelay,
setChangeThreshold: setters.changeThreshold,
setMinSaveInterval: setters.minSaveInterval
setMinSaveInterval: setters.minSaveInterval,
// 热键配置相关方法
setEnableGlobalHotkey: (value: boolean) => safeCall(() => updateGeneralConfig('enableGlobalHotkey', value), 'config.saveFailed', 'config.saveSuccess'),
setGlobalHotkey: (hotkey: any) => safeCall(() => updateGeneralConfig('globalHotkey', hotkey), 'config.saveFailed', 'config.saveSuccess')
};
});

105
frontend/src/utils/windowController.ts Normal file
View File

@@ -0,0 +1,105 @@
import * as wails from '@wailsio/runtime'
// 窗口控制工具类
export class WindowController {
private static instance: WindowController;
private currentWindow = wails.Window;
private isWindowVisible: boolean = true; // 跟踪窗口可见状态
private isInitialized: boolean = false; // 跟踪是否已初始化
private isToggling: boolean = false; // 防止重复切换
private lastToggleTime: number = 0; // 上次切换时间
private readonly TOGGLE_COOLDOWN = 500; // 切换冷却时间（毫秒）
static getInstance(): WindowController {
if (!WindowController.instance) {
WindowController.instance = new WindowController();
}
return WindowController.instance;
}
async toggleWindow(): Promise<void> {
const now = Date.now();
// 防抖检查
if (this.isToggling || (now - this.lastToggleTime) < this.TOGGLE_COOLDOWN) {
return;
}
this.isToggling = true;
this.lastToggleTime = now;
try {
// 如果还没初始化，先初始化状态
if (!this.isInitialized) {
await this.syncWindowState();
}
if (!this.isWindowVisible) {
// 窗口当前隐藏，显示它
await this.currentWindow.Show();
await this.currentWindow.UnMinimise(); // 修正API名称
await this.currentWindow.Focus();
this.isWindowVisible = true;
} else {
// 窗口当前可见，隐藏它
await this.currentWindow.Hide();
this.isWindowVisible = false;
}
} catch (error) {
console.error(error);
} finally {
// 延迟重置切换状态，确保操作完成
setTimeout(() => {
this.isToggling = false;
}, 100);
}
}
// 同步窗口状态
private async syncWindowState(): Promise<void> {
try {
// 检查窗口是否最小化
const isMinimised = await this.currentWindow.IsMinimised();
// 简化状态判断：只要不是最小化状态就认为是可见的
this.isWindowVisible = !isMinimised;
this.isInitialized = true;
} catch (error) {
// 如果检查失败，保持默认状态
this.isWindowVisible = true;
this.isInitialized = true;
}
}
// 当窗口被系统事件隐藏时调用（比如点击关闭/最小化按钮）
onWindowHidden(): void {
this.isWindowVisible = false;
}
// 当窗口被系统事件显示时调用（比如点击托盘图标）
onWindowShown(): void {
this.isWindowVisible = true;
}
async initializeHotkeyListener(): Promise<void> {
// 初始化时同步窗口状态
await this.syncWindowState();
// 监听后端发送的热键事件
wails.Events.On('hotkey:toggle-window', () => {
this.toggleWindow();
});
// 监听窗口显示/隐藏事件以同步状态
wails.Events.On('window:shown', () => {
this.onWindowShown();
});
wails.Events.On('window:hidden', () => {
this.onWindowHidden();
});
}
}

133
frontend/src/views/settings/pages/GeneralPage.vue
View File

@@ -1,25 +1,15 @@
<script setup lang="ts">
import { useConfigStore } from '@/stores/configStore';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { computed } from 'vue';
import SettingSection from '../components/SettingSection.vue';
import SettingItem from '../components/SettingItem.vue';
import ToggleSwitch from '../components/ToggleSwitch.vue';
import { useErrorHandler } from '@/utils/errorHandler';
const { t } = useI18n();
const configStore = useConfigStore();
// 选择的键盘修饰键
const selectedModifiers = ref({
ctrl: false,
shift: false,
alt: true,
altgr: false,
win: false
});
// 选择的键
const selectedKey = ref('X');
const { safeCall } = useErrorHandler();
// 可选键列表
const keyOptions = [
@@ -29,15 +19,35 @@ const keyOptions = [
'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12'
];
// 计算属性 - 启用全局热键
const enableGlobalHotkey = computed({
get: () => configStore.config.general.enableGlobalHotkey,
set: (value: boolean) => configStore.setEnableGlobalHotkey(value)
});
// 修饰键配置 - 只读计算属性
const modifierKeys = computed(() => ({
ctrl: configStore.config.general.globalHotkey.ctrl,
shift: configStore.config.general.globalHotkey.shift,
alt: configStore.config.general.globalHotkey.alt,
win: configStore.config.general.globalHotkey.win
}));
// 主键配置 - 只读计算属性
const selectedKey = computed(() => configStore.config.general.globalHotkey.key);
// 切换修饰键
const toggleModifier = (key: 'ctrl' | 'shift' | 'alt' | 'win') => {
const currentHotkey = configStore.config.general.globalHotkey;
const newHotkey = { ...currentHotkey, [key]: !currentHotkey[key] };
configStore.setGlobalHotkey(newHotkey);
};
// 更新选择的键
const updateSelectedKey = (event: Event) => {
const select = event.target as HTMLSelectElement;
selectedKey.value = select.value;
};
// 切换修饰键
const toggleModifier = (key: keyof typeof selectedModifiers.value) => {
selectedModifiers.value[key] = !selectedModifiers.value[key];
const newHotkey = { ...configStore.config.general.globalHotkey, key: select.value };
configStore.setGlobalHotkey(newHotkey);
};
// 重置设置
@@ -46,42 +56,58 @@ const resetSettings = async () => {
await configStore.resetConfig();
}
};
// 计算热键预览文本
const hotkeyPreview = computed(() => {
if (!enableGlobalHotkey.value) return '';
const hotkey = configStore.config.general.globalHotkey;
const parts: string[] = [];
if (hotkey.ctrl) parts.push('Ctrl');
if (hotkey.shift) parts.push('Shift');
if (hotkey.alt) parts.push('Alt');
if (hotkey.win) parts.push('Win');
if (hotkey.key) parts.push(hotkey.key);
return parts.join(' + ');
});
</script>
<template>
<div class="settings-page">
<SettingSection :title="t('settings.globalHotkey')">
<SettingItem :title="t('settings.enableGlobalHotkey')">
<ToggleSwitch v-model="configStore.config.general.alwaysOnTop" /> <!-- 此处使用alwaysOnTop作为示例 -->
<ToggleSwitch v-model="enableGlobalHotkey" />
</SettingItem>
<div class="hotkey-selector">
<div class="hotkey-selector" :class="{ 'disabled': !enableGlobalHotkey }">
<div class="hotkey-modifiers">
<label class="modifier-label" :class="{ active: selectedModifiers.ctrl }">
<input type="checkbox" v-model="selectedModifiers.ctrl" class="hidden-checkbox">
<label class="modifier-label" :class="{ active: modifierKeys.ctrl }" @click="toggleModifier('ctrl')">
<input type="checkbox" :checked="modifierKeys.ctrl" class="hidden-checkbox" :disabled="!enableGlobalHotkey">
<span class="modifier-key">Ctrl</span>
</label>
<label class="modifier-label" :class="{ active: selectedModifiers.shift }">
<input type="checkbox" v-model="selectedModifiers.shift" class="hidden-checkbox">
<label class="modifier-label" :class="{ active: modifierKeys.shift }" @click="toggleModifier('shift')">
<input type="checkbox" :checked="modifierKeys.shift" class="hidden-checkbox" :disabled="!enableGlobalHotkey">
<span class="modifier-key">Shift</span>
</label>
<label class="modifier-label" :class="{ active: selectedModifiers.alt }">
<input type="checkbox" v-model="selectedModifiers.alt" class="hidden-checkbox">
<label class="modifier-label" :class="{ active: modifierKeys.alt }" @click="toggleModifier('alt')">
<input type="checkbox" :checked="modifierKeys.alt" class="hidden-checkbox" :disabled="!enableGlobalHotkey">
<span class="modifier-key">Alt</span>
</label>
<label class="modifier-label" :class="{ active: selectedModifiers.altgr }">
<input type="checkbox" v-model="selectedModifiers.altgr" class="hidden-checkbox">
<span class="modifier-key">AltGr</span>
</label>
<label class="modifier-label" :class="{ active: selectedModifiers.win }">
<input type="checkbox" v-model="selectedModifiers.win" class="hidden-checkbox">
<label class="modifier-label" :class="{ active: modifierKeys.win }" @click="toggleModifier('win')">
<input type="checkbox" :checked="modifierKeys.win" class="hidden-checkbox" :disabled="!enableGlobalHotkey">
<span class="modifier-key">Win</span>
</label>
</div>
<select class="key-select" v-model="selectedKey">
<select class="key-select" :value="selectedKey" @change="updateSelectedKey" :disabled="!enableGlobalHotkey">
<option v-for="key in keyOptions" :key="key" :value="key">{{ key }}</option>
</select>
<div class="hotkey-preview" v-if="hotkeyPreview">
<span class="preview-label">预览：</span>
<span class="preview-hotkey">{{ hotkeyPreview }}</span>
</div>
</div>
</SettingSection>
@@ -128,6 +154,11 @@ const resetSettings = async () => {
.hotkey-selector {
padding: 15px 0 5px 20px;
&.disabled {
opacity: 0.5;
pointer-events: none;
}
.hotkey-modifiers {
display: flex;
gap: 8px;
@@ -137,6 +168,10 @@ const resetSettings = async () => {
.modifier-label {
cursor: pointer;
&.disabled {
cursor: not-allowed;
}
.hidden-checkbox {
display: none;
}
@@ -178,16 +213,46 @@ const resetSettings = async () => {
background-position: right 8px center;
background-size: 16px;
padding-right: 30px;
margin-bottom: 12px;
&:focus {
outline: none;
border-color: #4a9eff;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #2a2a2a;
}
option {
background-color: #2a2a2a;
}
}
.hotkey-preview {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background-color: #252525;
border: 1px solid #444444;
border-radius: 4px;
margin-top: 8px;
.preview-label {
font-size: 12px;
color: #888888;
}
.preview-hotkey {
font-size: 13px;
color: #4a9eff;
font-weight: 500;
font-family: 'Consolas', 'Courier New', monospace;
}
}
}
.directory-selector {