feat: 支持清除快捷键

Author: LarryZhu-dev

lang/index.json

@@ -3878,5 +3878,21 @@
     "ru": "",
     "en": "",
     "fr": ""
+  },
+  "ei74fc4": {
+    "zh-cn": "清除绑定",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
+  },
+  "fq1zn3": {
+    "zh-cn": "未绑定",
+    "ja": "",
+    "ko": "",
+    "ru": "",
+    "en": "",
+    "fr": ""
   }
 }

src/core/editor.ts

@@ -1140,7 +1140,9 @@ export class MilkupEditor implements IMilkupEditor {
     const customMap = this.getCustomKeyMap();
     const def = DEFAULT_SHORTCUTS.find((s) => s.id === actionId);
     if (!def) return "";
-    const key = customMap[actionId] || def.defaultKey;
+    const customKey = customMap[actionId];
+    const key = customKey === undefined ? def.defaultKey : (customKey ?? "");
+    if (!key) return "";
     return formatShortcutDisplay(key);
   }
 

src/core/keymap/dynamic-keymap.ts

@@ -38,9 +38,10 @@ export function createDynamicKeymapPlugin(
       // 构建 ProseMirror 格式的 key → command 绑定
       const bindings: Record<string, any> = {};
       for (const shortcut of DEFAULT_SHORTCUTS) {
-        const boundKey = customMap[shortcut.id] || shortcut.defaultKey;
+        const customKey = customMap[shortcut.id];
+        const boundKey = customKey === undefined ? shortcut.defaultKey : customKey;
         const command = commandMap[shortcut.id];
-        if (command) {
+        if (command && boundKey) {
           bindings[boundKey] = command;
         }
       }

src/core/keymap/types.ts

@@ -44,5 +44,5 @@ export interface ShortcutDefinition {
   defaultKey: string;
 }
 
-/** 用户自定义快捷键映射（仅存储与默认值不同的部分） */
-export type ShortcutKeyMap = Partial<Record<ShortcutActionId, string>>;
+/** 用户自定义快捷键映射（仅存储与默认值不同的部分；null 表示显式清除绑定） */
+export type ShortcutKeyMap = Partial<Record<ShortcutActionId, string | null>>;

src/renderer/components/settings/ShortcutPage.vue

@@ -13,6 +13,7 @@ const {
   hasConflict,
   getConflictLabels,
   updateShortcut,
+  clearShortcut,
   resetShortcut,
   resetAll,
   CATEGORY_LABELS,
@@ -157,6 +158,12 @@ function toggleCategory(cat: ShortcutCategory) {
                         recordingKey = '';
                         return;
                       }
+                      if (e.key === 'Backspace' || e.key === 'Delete') {
+                        clearShortcut(s.id);
+                        recordingId = null;
+                        recordingKey = '';
+                        return;
+                      }
                       const k = keyEventToProseMirrorKey(e);
                       if (k) {
                         updateShortcut(s.id, k);
@@ -172,14 +179,25 @@ function toggleCategory(cat: ShortcutCategory) {
                 >
                   {{ recordingId === s.id ? "请按下新快捷键..." : formatKeyForDisplay(s.key) }}
                 </div>
-                <button
-                  v-if="s.key !== s.defaultKey"
-                  class="reset-btn"
-                  title="重置为默认值"
-                  @click="resetShortcut(s.id)"
-                >
-                  ↺
-                </button>
+                <div class="shortcut-actions">
+                  <button
+                    v-if="s.key"
+                    class="action-btn icon-btn"
+                    title="清除绑定"
+                    @click="clearShortcut(s.id)"
+                  >
+                    <AppIcon name="trash" />
+                  </button>
+                  <span v-else class="action-placeholder" aria-hidden="true"></span>
+                  <button
+                    v-if="s.key !== s.defaultKey"
+                    class="action-btn reset-btn"
+                    title="重置为默认值"
+                    @click="resetShortcut(s.id)"
+                  >
+                    ↺
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -198,15 +216,18 @@ function toggleCategory(cat: ShortcutCategory) {
 .shortcut-page {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 20px;
   height: 100%;
-  overflow-y: auto;
+  padding: 8px 20px 24px 8px;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 .search-area {
   display: flex;
-  gap: 8px;
+  gap: 12px;
   flex-shrink: 0;
+  padding: 4px 0 2px;
 
   .search-box {
     flex: 1;
@@ -238,9 +259,10 @@ function toggleCategory(cat: ShortcutCategory) {
 
   .search-input {
     width: 100%;
-    padding: 8px 12px;
+    min-height: 40px;
+    padding: 10px 14px;
     border: 1px solid var(--border-color-1);
-    border-radius: 6px;
+    border-radius: 10px;
     background: var(--background-color);
     color: var(--text-color);
     font-size: 13px;
@@ -254,9 +276,10 @@ function toggleCategory(cat: ShortcutCategory) {
 
   .key-search-input {
     width: 100%;
-    padding: 8px 12px;
+    min-height: 40px;
+    padding: 10px 14px;
     border: 1px solid var(--border-color-1);
-    border-radius: 6px;
+    border-radius: 10px;
     background: var(--background-color);
     color: var(--text-color-2);
     font-size: 13px;
@@ -279,21 +302,25 @@ function toggleCategory(cat: ShortcutCategory) {
 .shortcut-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  flex-shrink: 0;
+  gap: 12px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 4px;
 }
 
 .category-section {
   border: 1px solid var(--border-color-1);
-  border-radius: 8px;
-  overflow: hidden;
+  border-radius: 12px;
+  overflow: visible;
+  background: var(--background-color);
 }
 
 .category-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px 16px;
+  padding: 14px 18px;
   cursor: pointer;
   background: var(--background-color);
   user-select: none;
@@ -339,7 +366,9 @@ function toggleCategory(cat: ShortcutCategory) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 16px 8px 36px;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 14px 18px 14px 42px;
   border-top: 1px solid var(--border-color-1);
 
   &:hover {
@@ -349,12 +378,18 @@ function toggleCategory(cat: ShortcutCategory) {
   .shortcut-label {
     font-size: 13px;
     color: var(--text-color);
+    flex: 1;
+    min-width: 0;
   }
 
   .shortcut-key-area {
     display: flex;
     align-items: center;
-    gap: 6px;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 8px;
+    flex-shrink: 0;
+    margin-left: auto;
   }
 
   .conflict-icon {
@@ -364,15 +399,15 @@ function toggleCategory(cat: ShortcutCategory) {
   }
 
   .key-badge {
-    padding: 4px 10px;
+    padding: 7px 12px;
     border: 1px solid var(--border-color-1);
-    border-radius: 4px;
+    border-radius: 8px;
     background: var(--background-color);
     color: var(--text-color);
     font-size: 12px;
     font-family: monospace;
     cursor: pointer;
-    min-width: 80px;
+    min-width: 104px;
     text-align: center;
     outline: none;
     user-select: none;
@@ -404,35 +439,69 @@ function toggleCategory(cat: ShortcutCategory) {
     }
   }
 
-  .reset-btn {
-    padding: 2px 6px;
+  .shortcut-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 70px;
+    justify-content: flex-end;
+  }
+
+  .action-btn {
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    padding: 0;
     border: 1px solid var(--border-color-1);
-    border-radius: 4px;
+    border-radius: 8px;
     background: transparent;
     color: var(--text-color-2);
-    font-size: 14px;
+    font-size: 12px;
     cursor: pointer;
     line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     &:hover {
       background: var(--hover-color);
       color: var(--text-color);
     }
+
+    &:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+  }
+
+  .icon-btn {
+    font-size: 14px;
+  }
+
+  .reset-btn {
+    font-size: 14px;
+  }
+
+  .action-placeholder {
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    flex-shrink: 0;
   }
 }
 
 .footer-actions {
   display: flex;
   justify-content: flex-end;
-  padding-top: 8px;
-  padding-bottom: 16px;
+  margin-top: auto;
+  padding: 4px 0 8px;
   border-top: 1px solid var(--border-color-1);
   flex-shrink: 0;
 
   .reset-all-btn {
-    padding: 6px 16px;
+    padding: 8px 16px;
     border: 1px solid var(--border-color-1);
-    border-radius: 6px;
+    border-radius: 8px;
     background: transparent;
     color: var(--text-color);
     font-size: 13px;

src/renderer/components/ui/AppIcon.vue

@@ -30,6 +30,7 @@ import {
   SquarePen,
   SquareSquare,
   Type,
+  Trash2,
   WandSparkles,
   X,
   Plus,
@@ -69,6 +70,7 @@ const iconMap = {
   "shortcut-key": Keyboard,
   "magic-wand": WandSparkles,
   "image-config": FileOutput,
+  trash: Trash2,
 } satisfies Record<string, FunctionalComponent<LucideProps>>;
 
 type AppIconName = keyof typeof iconMap;

src/renderer/hooks/useShortcutConfig.ts

@@ -10,19 +10,24 @@ import type { ShortcutActionId, ShortcutDefinition } from "@/core";
 export function useShortcutConfig() {
   const { config } = useConfig();
 
+  function getResolvedKey(id: ShortcutActionId, defaultKey: string): string {
+    const customKey = config.value.shortcuts?.[id];
+    return customKey === undefined ? defaultKey : (customKey ?? "");
+  }
+
   /** 合并默认值和用户自定义值后的完整快捷键列表 */
   const shortcuts = computed<ShortcutDefinition[]>(() => {
-    const customMap = config.value.shortcuts || {};
     return DEFAULT_SHORTCUTS.map((def) => ({
       ...def,
-      key: customMap[def.id] || def.defaultKey,
+      key: getResolvedKey(def.id, def.defaultKey),
     }));
   });
 
   /** 冲突检测：同一快捷键绑定了多个动作 */
   const conflicts = computed<Map<string, ShortcutActionId[]>>(() => {
     const keyToActions = new Map<string, ShortcutActionId[]>();
     for (const s of shortcuts.value) {
+      if (!s.key) continue;
       const existing = keyToActions.get(s.key);
       if (existing) {
         existing.push(s.id);
@@ -63,7 +68,7 @@ export function useShortcutConfig() {
   }
 
   /** 更新单个快捷键 */
-  function updateShortcut(id: ShortcutActionId, newKey: string) {
+  function updateShortcut(id: ShortcutActionId, newKey: string | null) {
     const current = { ...config.value.shortcuts };
     const def = DEFAULT_SHORTCUTS.find((d) => d.id === id);
     // 如果和默认值相同，删除自定义项
@@ -75,6 +80,11 @@ export function useShortcutConfig() {
     config.value = { ...config.value, shortcuts: current };
   }
 
+  /** 清除单个快捷键绑定 */
+  function clearShortcut(id: ShortcutActionId) {
+    updateShortcut(id, null);
+  }
+
   /** 重置单个快捷键 */
   function resetShortcut(id: ShortcutActionId) {
     const current = { ...config.value.shortcuts };
@@ -93,6 +103,7 @@ export function useShortcutConfig() {
     hasConflict,
     getConflictLabels,
     updateShortcut,
+    clearShortcut,
     resetShortcut,
     resetAll,
     CATEGORY_LABELS,
@@ -104,6 +115,7 @@ export function useShortcutConfig() {
  * 例如：Mod-b → Ctrl+B (Windows) / Cmd+B (Mac)
  */
 export function formatKeyForDisplay(key: string): string {
+  if (!key) return "未绑定";
   const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
   return key
     .split("-")