♻️ Refactor keybinding service

frontend/src/views/settings/pages/ExtensionsPage.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import {computed, ref} from 'vue';
+import {computed, onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
 import {useEditorStore} from '@/stores/editorStore';
 import {useExtensionStore} from '@/stores/extensionStore';
 import {ExtensionService} from '@/../bindings/voidraft/internal/services';
 import {
-  getAllExtensionIds,
   getExtensionDefaultConfig,
   getExtensionDescription,
-  getExtensionDisplayName,
+  getExtensionDisplayName, getExtensionsMap,
   hasExtensionConfig
 } from '@/views/editor/manager/extensions';
 import SettingSection from '../components/SettingSection.vue';
@@ -19,48 +18,54 @@ const {t} = useI18n();
 const editorStore = useEditorStore();
 const extensionStore = useExtensionStore();
 
+// 页面初始化时加载扩展数据
+onMounted(async () => {
+  await extensionStore.loadExtensions();
+});
+
 // 展开状态管理
-const expandedExtensions = ref<Set<string>>(new Set());
+const expandedExtensions = ref<Set<number>>(new Set());
 
 // 获取所有可用的扩展
 const availableExtensions = computed(() => {
-  return getAllExtensionIds().map(key => {
-    const extension = extensionStore.extensions.find(ext => ext.key === key);
+  return getExtensionsMap().map(name => {
+    const extension = extensionStore.extensions.find(ext => ext.name === name);
     return {
-      id: key,
-      displayName: getExtensionDisplayName(key),
-      description: getExtensionDescription(key),
+      id: extension?.id ?? 0,
+      name: name,
+      displayName: getExtensionDisplayName(name),
+      description: getExtensionDescription(name),
       enabled: extension?.enabled || false,
-      hasConfig: hasExtensionConfig(key),
+      hasConfig: hasExtensionConfig(name),
       config: extension?.config || {},
-      defaultConfig: getExtensionDefaultConfig(key)
+      defaultConfig: getExtensionDefaultConfig(name)
     };
   });
 });
 
 // 切换展开状态
-const toggleExpanded = (extensionKey: string) => {
-  if (expandedExtensions.value.has(extensionKey)) {
-    expandedExtensions.value.delete(extensionKey);
+const toggleExpanded = (extensionId: number) => {
+  if (expandedExtensions.value.has(extensionId)) {
+    expandedExtensions.value.delete(extensionId);
   } else {
-    expandedExtensions.value.add(extensionKey);
+    expandedExtensions.value.add(extensionId);
   }
 };
 
 // 更新扩展状态
-const updateExtension = async (extensionKey: string, enabled: boolean) => {
+const updateExtension = async (extensionId: number, enabled: boolean) => {
   try {
-    await editorStore.updateExtension(extensionKey, enabled);
+    await editorStore.updateExtension(extensionId, enabled);
   } catch (error) {
     console.error('Failed to update extension:', error);
   }
 };
 
 // 更新扩展配置
-const updateExtensionConfig = async (extensionKey: string, configKey: string, value: any) => {
+const updateExtensionConfig = async (extensionId: number, configKey: string, value: any) => {
   try {
     // 获取当前扩展状态
-    const extension = extensionStore.extensions.find(ext => ext.key === extensionKey);
+    const extension = extensionStore.extensions.find(ext => ext.id === extensionId);
     if (!extension) return;
 
     // 更新配置
@@ -71,7 +76,7 @@ const updateExtensionConfig = async (extensionKey: string, configKey: string, va
       updatedConfig[configKey] = value;
     }
     // 使用editorStore的updateExtension方法更新，确保应用到所有编辑器实例
-    await editorStore.updateExtension(extensionKey, extension.enabled ?? false, updatedConfig);
+    await editorStore.updateExtension(extensionId, extension.enabled ?? false, updatedConfig);
 
   } catch (error) {
     console.error('Failed to update extension config:', error);
@@ -79,19 +84,19 @@ const updateExtensionConfig = async (extensionKey: string, configKey: string, va
 };
 
 // 重置扩展到默认配置
-const resetExtension = async (extensionKey: string) => {
+const resetExtension = async (extensionId: number) => {
   try {
     // 重置到默认配置
-    await ExtensionService.ResetExtensionConfig(extensionKey);
+    await ExtensionService.ResetExtensionConfig(extensionId);
 
     // 重新加载扩展状态以获取最新配置
     await extensionStore.loadExtensions();
 
     // 获取重置后的状态，立即应用到所有编辑器视图
-    const extension = extensionStore.extensions.find(ext => ext.key === extensionKey);
+    const extension = extensionStore.extensions.find(ext => ext.id === extensionId);
     if (extension) {
       // 通过editorStore更新，确保所有视图都能同步
-      await editorStore.updateExtension(extensionKey, extension.enabled ?? false, extension.config);
+      await editorStore.updateExtension(extensionId, extension.enabled ?? false, extension.config);
     }
   } catch (error) {
     console.error('Failed to reset extension:', error);
@@ -125,7 +130,7 @@ const formatConfigValue = (value: any): string => {
 
 
 const handleConfigInput = async (
-    extensionKey: string,
+    extensionId: number,
     configKey: string,
     defaultValue: any,
     event: Event
@@ -135,15 +140,15 @@ const handleConfigInput = async (
   const rawValue = target.value;
   const trimmedValue = rawValue.trim();
   if (!trimmedValue.length) {
-    await updateExtensionConfig(extensionKey, configKey, undefined);
+    await updateExtensionConfig(extensionId, configKey, undefined);
     return;
   }
 
   try {
     const parsedValue = JSON.parse(trimmedValue);
-    await updateExtensionConfig(extensionKey, configKey, parsedValue);
+    await updateExtensionConfig(extensionId, configKey, parsedValue);
   } catch (_error) {
-    const extension = extensionStore.extensions.find(ext => ext.key === extensionKey);
+    const extension = extensionStore.extensions.find(ext => ext.id === extensionId);
     const fallbackValue = getConfigValue(extension?.config, configKey, defaultValue);
     target.value = formatConfigValue(fallbackValue);
 
@@ -158,7 +163,7 @@ const handleConfigInput = async (
     <SettingSection :title="t('settings.extensions')">
       <div
           v-for="extension in availableExtensions"
-          :key="extension.id"
+          :key="extension.name"
           class="extension-item"
       >
         <!-- 扩展主项 -->

frontend/src/views/settings/pages/KeyBindingsPage.vue

@@ -1,200 +1,256 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { onMounted, computed } from 'vue';
+import { onMounted, computed, ref, onUnmounted, watch } from 'vue';
 import SettingSection from '../components/SettingSection.vue';
+import SettingItem from '../components/SettingItem.vue';
 import { useKeybindingStore } from '@/stores/keybindingStore';
 import { useSystemStore } from '@/stores/systemStore';
+import { useConfigStore } from '@/stores/configStore';
+import { useEditorStore } from '@/stores/editorStore';
 import { getCommandDescription } from '@/views/editor/keymap/commands';
-import { KeyBindingKey } from '@/../bindings/voidraft/internal/models/models';
+import { KeyBindingType } from '@/../bindings/voidraft/internal/models/models';
+import { KeyBindingService } from '@/../bindings/voidraft/internal/services';
+import { useConfirm } from '@/composables/useConfirm';
 
 const { t } = useI18n();
 const keybindingStore = useKeybindingStore();
 const systemStore = useSystemStore();
+const configStore = useConfigStore();
+const editorStore = useEditorStore();
+
+interface EditingState {
+  id: number;
+  name: string;
+  originalKey: string;
+}
+
+const editingBinding = ref<EditingState | null>(null);
+const capturedKey = ref('');
+const capturedKeyDisplay = ref<string[]>([]);
+const isConflict = ref(false);
+
+const isEditing = computed(() => !!editingBinding.value);
 
-// 加载数据
 onMounted(async () => {
   await keybindingStore.loadKeyBindings();
 });
 
-// 从store中获取快捷键数据并转换为显示格式
-const keyBindings = computed(() => {
-  return keybindingStore.keyBindings
-    .filter(kb => kb.enabled)
-    .map(kb => ({
-      key: kb.key,
-      command: parseKeyBinding(kb.command || '', kb.key),
-      extension: kb.extension || '',
-      description: kb.key ? (getCommandDescription(kb.key) || kb.key) : ''
-    }));
+const keymapModeOptions = [
+  { label: t('keybindings.modes.standard'), value: KeyBindingType.Standard },
+  { label: t('keybindings.modes.emacs'), value: KeyBindingType.Emacs }
+];
+
+const updateKeymapMode = async (mode: KeyBindingType) => {
+  await configStore.setKeymapMode(mode);
+  await keybindingStore.loadKeyBindings();
+  await editorStore.applyKeymapSettings();
+};
+
+// 重置快捷键确认
+const { isConfirming: isResetConfirming, requestConfirm: requestResetConfirm } = useConfirm({
+  timeout: 3000,
+  onConfirm: async () => {
+    await KeyBindingService.ResetKeyBindings();
+    await keybindingStore.loadKeyBindings();
+    await editorStore.applyKeymapSettings();
+  }
 });
 
-// 解析快捷键字符串为显示数组
-const parseKeyBinding = (keyStr: string, keyBindingKey?: string): string[] => {
-  if (!keyStr) return [];
+const keyBindings = computed(() =>
+  keybindingStore.keyBindings.map(kb => ({
+    id: kb.id,
+    name: kb.name,
+    command: getDisplayKeybinding(kb),
+    rawKey: getRawKey(kb),
+    extension: kb.extension || '',
+    description: getCommandDescription(kb.name) || kb.name || ''
+  }))
+);
+
+const getRawKey = (kb: any): string => {
+  const platformKey = systemStore.isMacOS ? kb.macos 
+    : systemStore.isWindows ? kb.windows 
+    : systemStore.isLinux ? kb.linux 
+    : kb.key;
   
-  // 特殊处理重做快捷键的操作系统差异
-  if (keyBindingKey === KeyBindingKey.HistoryRedoKeyBindingKey && keyStr === 'Mod-Shift-z') {
-    if (systemStore.isMacOS) {
-      return ['⌘', '⇧', 'Z']; // macOS: Cmd+Shift+Z
-    } else {
-      return ['Ctrl', 'Y']; // Windows/Linux: Ctrl+Y
-    }
+  return platformKey || kb.key || '';
+};
+
+const getDisplayKeybinding = (kb: any): string[] => {
+  const keyStr = getRawKey(kb);
+  return keyStr ? parseKeyString(keyStr) : [];
+};
+
+const parseKeyString = (keyStr: string): string[] => {
+  const symbolMap: Record<string, string> = {
+    'Mod': systemStore.isMacOS ? '⌘' : 'Ctrl',
+    'Cmd': '⌘',
+    ...(systemStore.isMacOS ? {
+      'Alt': '⌥',
+      'Shift': '⇧',
+      'Ctrl': '⌃'
+    } : {}),
+    'ArrowUp': '↑',
+    'ArrowDown': '↓',
+    'ArrowLeft': '←',
+    'ArrowRight': '→'
+  };
+
+  return keyStr
+    .split(/[-+]/)
+    .map(part => symbolMap[part] ?? part.charAt(0).toUpperCase() + part.slice(1))
+    .filter(Boolean);
+};
+
+
+// 键盘事件捕获
+const SPECIAL_KEYS: Record<string, string> = {
+  ' ': 'Space',
+  'ArrowUp': 'ArrowUp',
+  'ArrowDown': 'ArrowDown',
+  'ArrowLeft': 'ArrowLeft',
+  'ArrowRight': 'ArrowRight',
+  'Enter': 'Enter',
+  'Tab': 'Tab',
+  'Backspace': 'Backspace',
+  'Delete': 'Delete',
+  'Home': 'Home',
+  'End': 'End',
+  'PageUp': 'PageUp',
+  'PageDown': 'PageDown',
+};
+
+const MODIFIER_KEYS = ['Control', 'Alt', 'Shift', 'Meta'];
+const MAX_KEY_PARTS = 3; // 最多3个键
+
+const captureKeyBinding = (event: KeyboardEvent): string | null => {
+  // 忽略单独的修饰键
+  if (MODIFIER_KEYS.includes(event.key)) return null;
+  
+  const parts: string[] = [];
+  
+  // 添加修饰键
+  if (event.ctrlKey || event.metaKey) parts.push('Mod');
+  if (event.altKey) parts.push('Alt');
+  if (event.shiftKey) parts.push('Shift');
+  
+  // 获取主键
+  const mainKey = SPECIAL_KEYS[event.key] ?? 
+    (event.key.length === 1 ? event.key.toLowerCase() : event.key);
+  
+  if (mainKey) parts.push(mainKey);
+  
+  // 限制最多3个键
+  if (parts.length > MAX_KEY_PARTS) return null;
+  
+  return parts.join('-');
+};
+
+const cancelEdit = () => {
+  window.removeEventListener('keydown', handleKeyCapture, true);
+  editingBinding.value = null;
+  capturedKey.value = '';
+  capturedKeyDisplay.value = [];
+  isConflict.value = false;
+};
+
+const handleKeyCapture = (event: KeyboardEvent) => {
+  if (!isEditing.value) return;
+  
+  event.preventDefault();
+  event.stopPropagation();
+  
+  // ESC 取消编辑
+  if (event.key === 'Escape') {
+    cancelEdit();
+    return;
   }
   
-  // 特殊处理重做选择快捷键的操作系统差异
-  if (keyBindingKey === KeyBindingKey.HistoryRedoSelectionKeyBindingKey && keyStr === 'Mod-Shift-u') {
-    if (systemStore.isMacOS) {
-      return ['⌘', '⇧', 'U']; // macOS: Cmd+Shift+U
-    } else {
-      return ['Alt', 'U']; // Windows/Linux: Alt+U
-    }
+  const key = captureKeyBinding(event);
+  if (key) {
+    capturedKey.value = key;
+    capturedKeyDisplay.value = parseKeyString(key);
+    isConflict.value = false;
+  }
+};
+
+
+const startEditBinding = (binding: any) => {
+  editingBinding.value = {
+    id: binding.id,
+    name: binding.name,
+    originalKey: binding.rawKey
+  };
+  capturedKey.value = '';
+  capturedKeyDisplay.value = [];
+  isConflict.value = false;
+  
+  // 手动添加键盘监听
+  window.addEventListener('keydown', handleKeyCapture, true);
+};
+
+const checkConflict = (newKey: string): boolean => 
+  keyBindings.value.some(kb => 
+    kb.rawKey === newKey && kb.name !== editingBinding.value?.name
+  );
+
+const confirmKeybinding = async () => {
+  if (!editingBinding.value || !capturedKey.value) return;
+  
+  // 检查冲突
+  if (checkConflict(capturedKey.value)) {
+    isConflict.value = true;
+    setTimeout(cancelEdit, 600);
+    return;
   }
   
-  // 特殊处理代码折叠快捷键的操作系统差异
-  if (keyBindingKey === KeyBindingKey.FoldCodeKeyBindingKey && keyStr === 'Ctrl-Shift-[') {
-    if (systemStore.isMacOS) {
-      return ['⌘', '⌥', '[']; // macOS: Cmd+Alt+[
-    } else {
-      return ['Ctrl', 'Shift', '[']; // Windows/Linux: Ctrl+Shift+[
-    }
+  try {
+    await keybindingStore.updateKeyBinding(
+      editingBinding.value.id,
+      capturedKey.value
+    );
+    await editorStore.applyKeymapSettings();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    cancelEdit();
   }
-  
-  if (keyBindingKey === KeyBindingKey.UnfoldCodeKeyBindingKey && keyStr === 'Ctrl-Shift-]') {
-    if (systemStore.isMacOS) {
-      return ['⌘', '⌥', ']']; // macOS: Cmd+Alt+]
-    } else {
-      return ['Ctrl', 'Shift', ']']; // Windows/Linux: Ctrl+Shift+]
-    }
-  }
-  
-  // 特殊处理编辑快捷键的操作系统差异
-  if (keyBindingKey === KeyBindingKey.CursorSyntaxLeftKeyBindingKey && keyStr === 'Alt-ArrowLeft') {
-    if (systemStore.isMacOS) {
-      return ['Ctrl', '←']; // macOS: Ctrl+ArrowLeft
-    } else {
-      return ['Alt', '←']; // Windows/Linux: Alt+ArrowLeft
-    }
-  }
-  
-  if (keyBindingKey === KeyBindingKey.CursorSyntaxRightKeyBindingKey && keyStr === 'Alt-ArrowRight') {
-    if (systemStore.isMacOS) {
-      return ['Ctrl', '→']; // macOS: Ctrl+ArrowRight
-    } else {
-      return ['Alt', '→']; // Windows/Linux: Alt+ArrowRight
-    }
-  }
-  
-  if (keyBindingKey === KeyBindingKey.InsertBlankLineKeyBindingKey && keyStr === 'Ctrl-Enter') {
-    if (systemStore.isMacOS) {
-      return ['⌘', 'Enter']; // macOS: Cmd+Enter
-    } else {
-      return ['Ctrl', 'Enter']; // Windows/Linux: Ctrl+Enter
-    }
-  }
-  
-  if (keyBindingKey === KeyBindingKey.SelectLineKeyBindingKey && keyStr === 'Alt-l') {
-    if (systemStore.isMacOS) {
-      return ['Ctrl', 'L']; // macOS: Ctrl+l
-    } else {
-      return ['Alt', 'L']; // Windows/Linux: Alt+l
-    }
-  }
-  
-  if (keyBindingKey === KeyBindingKey.SelectParentSyntaxKeyBindingKey && keyStr === 'Ctrl-i') {
-    if (systemStore.isMacOS) {
-      return ['⌘', 'I']; // macOS: Cmd+i
-    } else {
-      return ['Ctrl', 'I']; // Windows/Linux: Ctrl+i
-    }
-  }
-  
-  if (keyBindingKey === KeyBindingKey.IndentLessKeyBindingKey && keyStr === 'Ctrl-[') {
-    if (systemStore.isMacOS) {
-      return ['⌘', '[']; // macOS: Cmd+[
-    } else {
-      return ['Ctrl', '[']; // Windows/Linux: Ctrl+[
-    }
-  }
-  
-  if (keyBindingKey === KeyBindingKey.IndentMoreKeyBindingKey && keyStr === 'Ctrl-]') {
-    if (systemStore.isMacOS) {
-      return ['⌘', ']']; // macOS: Cmd+]
-    } else {
-      return ['Ctrl', ']']; // Windows/Linux: Ctrl+]
-    }
-  }
-  
-  if (keyBindingKey === KeyBindingKey.IndentSelectionKeyBindingKey && keyStr === 'Ctrl-Alt-\\') {
-    if (systemStore.isMacOS) {
-      return ['⌘', '⌥', '\\']; // macOS: Cmd+Alt+\
-    } else {
-      return ['Ctrl', 'Alt', '\\']; // Windows/Linux: Ctrl+Alt+\
-    }
-  }
-  
-  if (keyBindingKey === KeyBindingKey.CursorMatchingBracketKeyBindingKey && keyStr === 'Shift-Ctrl-\\') {
-    if (systemStore.isMacOS) {
-      return ['⇧', '⌘', '\\']; // macOS: Shift+Cmd+\
-    } else {
-      return ['Shift', 'Ctrl', '\\']; // Windows/Linux: Shift+Ctrl+\
-    }
-  }
-  
-  if (keyBindingKey === KeyBindingKey.ToggleCommentKeyBindingKey && keyStr === 'Ctrl-/') {
-    if (systemStore.isMacOS) {
-      return ['⌘', '/']; // macOS: Cmd+/
-    } else {
-      return ['Ctrl', '/']; // Windows/Linux: Ctrl+/
-    }
-  }
-  
-  // 特殊处理删除快捷键的操作系统差异
-  if (keyBindingKey === KeyBindingKey.DeleteGroupBackwardKeyBindingKey && keyStr === 'Ctrl-Backspace') {
-    if (systemStore.isMacOS) {
-      return ['⌘', 'Backspace']; // macOS: Cmd+Backspace
-    } else {
-      return ['Ctrl', 'Backspace']; // Windows/Linux: Ctrl+Backspace
-    }
-  }
-  
-  if (keyBindingKey === KeyBindingKey.DeleteGroupForwardKeyBindingKey && keyStr === 'Ctrl-Delete') {
-    if (systemStore.isMacOS) {
-      return ['⌘', 'Delete']; // macOS: Cmd+Delete
-    } else {
-      return ['Ctrl', 'Delete']; // Windows/Linux: Ctrl+Delete
-    }
-  }
-  
-  // 处理常见的快捷键格式
-  const parts = keyStr.split(/[-+]/);
-  return parts.map(part => {
-    // 根据操作系统将 Mod 替换为相应的键
-    if (part === 'Mod') {
-      if (systemStore.isMacOS) {
-        return '⌘'; // macOS 使用 Command 键符号
-      } else {
-        return 'Ctrl'; // Windows/Linux 使用 Ctrl
-      }
-    }
-    
-    // 处理其他键名的操作系统差异
-    if (part === 'Alt' && systemStore.isMacOS) {
-      return '⌥'; // macOS 使用 Option 键符号
-    }
-    
-    if (part === 'Shift') {
-      return systemStore.isMacOS ? '⇧' : 'Shift'; // macOS 使用符号
-    }
-    
-    // 首字母大写
-    return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase();
-  }).filter(part => part.length > 0);
 };
 </script>
 
 <template>
   <div class="settings-page">
+    <!-- 快捷键模式设置 -->
+    <SettingSection :title="t('keybindings.keymapMode')">
+      <SettingItem
+        :title="t('keybindings.keymapMode')">
+        <select
+          :value="configStore.config.editing.keymapMode"
+          @change="updateKeymapMode(($event.target as HTMLSelectElement).value as KeyBindingType)"
+          class="select-input"
+        >
+          <option
+            v-for="option in keymapModeOptions"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </option>
+        </select>
+      </SettingItem>
+    </SettingSection>
+
+    <!-- 快捷键列表 -->
     <SettingSection :title="t('settings.keyBindings')">
+      <template #title-right>
+        <button 
+          :class="['reset-button', isResetConfirming('keybindings') ? 'reset-button-confirming' : '']"
+          @click="requestResetConfirm('keybindings')"
+        >
+          {{ isResetConfirming('keybindings') ? t('keybindings.confirmReset') : t('keybindings.resetToDefault') }}
+        </button>
+      </template>
+      
       <div class="key-bindings-container">
         <div class="key-bindings-header">
           <div class="keybinding-col">{{ t('keybindings.headers.shortcut') }}</div>
@@ -204,18 +260,55 @@ const parseKeyBinding = (keyStr: string, keyBindingKey?: string): string[] => {
         
         <div
           v-for="binding in keyBindings"
-          :key="binding.key"
+          :key="binding.name"
           class="key-binding-row"
         >
-          <div class="keybinding-col">
-            <span 
-              v-for="(key, index) in binding.command"
-              :key="index"
-              class="key-badge"
-            >
-              {{ key }}
-            </span>
+          <!-- 快捷键列 -->
+          <div 
+            class="keybinding-col"
+            :class="{ 'editing': editingBinding?.name === binding.name }"
+            @click.stop="editingBinding?.name !== binding.name && startEditBinding(binding)"
+          >
+            <!-- 编辑模式 -->
+            <template v-if="editingBinding?.name === binding.name">
+              <template v-if="!capturedKey">
+                <span class="key-badge waiting">waiting...</span>
+              </template>
+              <template v-else>
+                <span 
+                  v-for="(key, index) in capturedKeyDisplay"
+                  :key="index"
+                  class="key-badge captured"
+                  :class="{ 'conflict': isConflict }"
+                >
+                  {{ key }}
+                </span>
+              </template>
+              <button 
+                @click.stop="confirmKeybinding" 
+                class="btn-mini btn-confirm"
+                :disabled="!capturedKey"
+                title="Ok"
+              >✓</button>
+              <button 
+                @click.stop="cancelEdit" 
+                class="btn-mini btn-cancel"
+                title="Cancel"
+              >✕</button>
+            </template>
+            
+            <!-- 显示模式 -->
+            <template v-else>
+              <span 
+                v-for="(key, index) in binding.command"
+                :key="index"
+                class="key-badge"
+              >
+                {{ key }}
+              </span>
+            </template>
           </div>
+          
           <div class="extension-col">{{ binding.extension }}</div>
           <div class="description-col">{{ binding.description }}</div>
         </div>
@@ -225,16 +318,68 @@ const parseKeyBinding = (keyStr: string, keyBindingKey?: string): string[] => {
 </template>
 
 <style scoped lang="scss">
-.settings-page {
-  //max-width: 800px;
+.select-input {
+  min-width: 140px;
+  padding: 6px 10px;
+  border: 1px solid var(--settings-input-border);
+  border-radius: 4px;
+  background-color: var(--settings-input-bg);
+  color: var(--settings-text);
+  font-size: 12px;
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+  background-size: 14px;
+  padding-right: 26px;
+  transition: border-color 0.2s ease;
+  
+  &:focus {
+    outline: none;
+    border-color: #4a9eff;
+  }
+  
+  option {
+    background-color: var(--settings-card-bg);
+    color: var(--settings-text);
+  }
+}
+
+.reset-button {
+  padding: 6px 12px;
+  font-size: 12px;
+  border: 1px solid var(--settings-input-border);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background-color: var(--settings-button-bg);
+  color: var(--settings-button-text);
+  
+  &:hover {
+    border-color: #4a9eff;
+    background-color: var(--settings-button-hover-bg);
+  }
+  
+  &:active {
+    transform: translateY(1px);
+  }
+  
+  &.reset-button-confirming {
+    background-color: #e74c3c;
+    color: white;
+    border-color: #c0392b;
+    
+    &:hover {
+      background-color: #c0392b;
+    }
+  }
 }
 
 .key-bindings-container {
-  padding: 10px 16px;
   
   .key-bindings-header {
     display: flex;
-    padding: 0 0 10px 0;
+    padding: 0 0 8px 0;
     border-bottom: 1px solid var(--settings-border);
     color: var(--text-muted);
     font-size: 12px;
@@ -243,7 +388,7 @@ const parseKeyBinding = (keyStr: string, keyBindingKey?: string): string[] => {
   
   .key-binding-row {
     display: flex;
-    padding: 14px 0;
+    padding: 10px 0;
     border-bottom: 1px solid var(--settings-border);
     align-items: center;
     transition: background-color 0.2s ease;
@@ -256,9 +401,20 @@ const parseKeyBinding = (keyStr: string, keyBindingKey?: string): string[] => {
   .keybinding-col {
     width: 150px;
     display: flex;
-    gap: 5px;
+    gap: 4px;
     padding: 0 10px 0 0;
     color: var(--settings-text);
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover:not(.editing) .key-badge {
+      border-color: #4a9eff;
+    }
+    
+    &.editing {
+      cursor: default;
+    }
     
     .key-badge {
       background-color: var(--settings-input-bg);
@@ -267,6 +423,71 @@ const parseKeyBinding = (keyStr: string, keyBindingKey?: string): string[] => {
       font-size: 11px;
       border: 1px solid var(--settings-input-border);
       color: var(--settings-text);
+      transition: border-color 0.2s ease;
+      white-space: nowrap;
+      
+      &.waiting {
+        border: none;
+        background-color: transparent;
+        padding: 0;
+        color: #4a9eff;
+        font-style: italic;
+        animation: colorPulse 1.5s ease-in-out infinite;
+      }
+      
+      &.captured {
+        background-color: #4a9eff;
+        color: white;
+        border-color: #4a9eff;
+        
+        &.conflict {
+          background-color: #dc3545;
+          border-color: #dc3545;
+          animation: shake 0.6s ease-in-out;
+        }
+      }
+    }
+  }
+  
+  .btn-mini {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    border: none;
+    border-radius: 2px;
+    cursor: pointer;
+    font-size: 10px;
+    transition: opacity 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    line-height: 1;
+    margin-left: auto;
+    
+    &.btn-confirm {
+      background-color: #28a745;
+      color: white;
+      
+      &:hover:not(:disabled) {
+        opacity: 0.85;
+      }
+      
+      &:disabled {
+        background-color: var(--settings-input-border);
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    }
+    
+    &.btn-cancel {
+      background-color: #dc3545;
+      color: white;
+      margin-left: 2px;
+      
+      &:hover {
+        opacity: 0.85;
+      }
     }
   }
   
@@ -285,6 +506,29 @@ const parseKeyBinding = (keyStr: string, keyBindingKey?: string): string[] => {
   }
 }
 
+@keyframes colorPulse {
+  0%, 100% {
+    color: #4a9eff;
+    opacity: 1;
+  }
+  50% {
+    color: #2080ff;
+    opacity: 0.6;
+  }
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-4px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(4px);
+  }
+}
+
 .coming-soon-placeholder {
   padding: 20px;
   background-color: var(--settings-card-bg);